|
| |
|
|
Protagonistics
Posts: 1
Joined: 3/15/2009
Status: offline
 |
Alignment woes and the No-repeat blues - 3/15/2009 12:52:21
Hello all,
I'm trying to build my first site using css and loving it but having trouble.
I'm trying to figure out the positioning options to get both of my blue sidebars in the picture below to be just edging in on the lorem ipsum text in the main part of the body as pictured in the "what I want" part of the screenshots. I can't do it, of course, because the only way I understand float is to align it either right or left and there is no 'float from center position'.
Even as I look at other sites- blogs especially- I just can't seem to figure out how they're doing it. I don't want to use absolute positioning because I could make it look great on my 22in widescreen but what about some 800x600 17'' monitor set at 16 bit color? It'll look terrible!
I hope you can help illuminate the positioning I want - I've been reading about it for hours to no avail.
Oh, and why does "no-repeat" not work? right now I've got those sidebars to have text in just the right x and y amounts so that the div's background image appears once- but if I mess around at all with the text it shrinks and cuts off part and if I write more than that it starts repeating the image!
HERE IS MY IMAGE: PICTURE
below is my css:
html {
padding: 0px;
margin: 0px;
}
body {
background-color: #c1c1c1;
font-family: Arial, sans-serif;
font-size: small;
line-height: 1.3em;
}
#header {
padding: 0px;
margin: -10px 0px 0px 0px;
text-align:center;
}
#post {
background: #fff0e3;
margin: -16px 0px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 800px;
}
#leftsidebar {
background: url(leftsidebar.png) top left;
float: left;
}
#rightsidebar {
background: url(rightsidebar.png) top left;
width: 200;
height: 400;
margin-right: 20%;
float: right;
}
#footer {
background: url(footer.png);
font-stretch: semi-expanded;
margin: -13px 0px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 1000;
background-repeat: no-repeat;
background-position: 50% 50%;
font-size: 10px;
text-align: center;
color: #fff0e3;
}
.sidebar {
display: inline;
background-repeat: no-repeat;
padding: 10px;
font-variant: small-caps;
font-family: Arial, sans-serif;
line-height: 1.5;
font-size: 15px;
}
h1 {
margin: 10px 0px 0px 0px;
padding: 30px 0px 10px 0px;
}
|
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 