Adding just a background color vertical bar down, need help
newbie
Posted: Tue, 2008-05-20 19:01
I'm a noob, but hopefully someone can help.
I'm trying to style a WP layout. At the moment it looks like this.
Kept trying to add a new bar by the side, to look like this.
http://www.nekopi.com/troubled.jpg (notice the pink line)
Can i just use a background-color attribute, width and run it down? Where should it be declared? Outside the container?
Please advice.
Enthusiast
Posts: 273
Joined: 2008-02-22
Location: Providence, RI
What will this bar be used
Posted: Tue, 2008-05-20 19:10
What will this bar be used for, anything, or is it just looks? If it is just for a background, you could just make it a background image for the body, or wrapper div and have it repeat down the side.
http://ifohdesigns.com - Web Design That Is Neat.
http://ifohdesigns.com/blog - Read it please.
newbie
Posts: 5
Joined: 2008-05-19
A wrapper div would probably
Posted: Tue, 2008-05-20 19:15
A wrapper div would probably be the solution, won't have anything on it. How would i be able to style that line down with a css div wrap?
Regular
Posts: 26
Joined: 2007-06-08
Location: San Diego
Add a new div to contain
Posted: Tue, 2008-05-20 19:25
Add a new div to contain everything, then create an image of just that pink line that's only 1px tall. When you get those two, then you can add the css:
#container {background:url("path/to/image") repeat-y;
}
and that should be it
Enthusiast
Posts: 273
Joined: 2008-02-22
Location: Providence, RI
make sure the wrapper goes
Posted: Tue, 2008-05-20 19:28
make sure the wrapper goes around all of your content, then make a small image as wide as that pink bar is, and 1px tall, then set it to repeat-y
#wrapper {background: url(your-image.gif) repeat-y top left;
}
http://ifohdesigns.com - Web Design That Is Neat.
http://ifohdesigns.com/blog - Read it please.
Regular
Posts: 26
Joined: 2007-06-08
Location: San Diego
sorry to step on your toes
Posted: Tue, 2008-05-20 19:50
sorry to step on your toes ifoh
when I get bored at work, I just browse forums to try and help people out
newbie
Posts: 5
Joined: 2008-05-19
fantastic, thank you to you
Posted: Tue, 2008-05-20 19:52
fantastic, thank you to you two. this is the first time i get response so fast for coding help. thank you so much.
let me test it out and get back to you two css gurus.
Enthusiast
Posts: 273
Joined: 2008-02-22
Location: Providence, RI
ha, not a prob. After I
Posted: Tue, 2008-05-20 19:52
ha, not a prob. After I posted, I was like oh *beep*, done and done.
http://ifohdesigns.com - Web Design That Is Neat.
http://ifohdesigns.com/blog - Read it please.
newbie
Posts: 5
Joined: 2008-05-19
Managed to get the line
Posted: Wed, 2008-05-21 17:43
Managed to get the line there, thanks! but, my #cmheader bg went missing, any idea why?
#cmheader { width: 1024px; height: 45px; margin: 0 auto; padding: 0; background: url('images/cmheader.gif') 50% 0 no-repeat; display:block; text-align: left;}
#wrapper { background: url('images/bg.gif') repeat-y top left; }
<body class="custom"><div id="cmheader"><div id="wrapper">
<div id="container">
</div></div></div>
Regular
Posts: 26
Joined: 2007-06-08
Location: San Diego
It could be the 50%
Posted: Wed, 2008-05-21 17:49
It could be the 50% coordinate in the background value, or it's being overlapped by another element.
If you remove everything else, or just that new line, does it show up?
newbie
Posts: 5
Joined: 2008-05-19
you're absolutely right,
Posted: Wed, 2008-05-21 17:53
you're absolutely right, #wrapper actually overlapped #cmheader, are there anyway to work around this one? (I could see #cmheader for a slight second before #wrapper laps it)
Regular
Posts: 26
Joined: 2007-06-08
Location: San Diego
You could try applying that
Posted: Wed, 2008-05-21 18:35
You could try applying that pink image to be body instead of a div, or apply margin to the overlapping div to move it out of the way [if your content permits]