mpoer Posted February 28, 2006 Share Posted February 28, 2006 currently the header is thus: /* relevant css */#header { padding-bottom: 10px; text-align:center; font-size: 1em; background-color:#00ced1; color:#191970; background-image:url('tux-head.png'); background-repeat:no-repeat; background-position:bottom right;}----<div id="header"> <h1><a href="http://thinktank.ichyware.net:81/%7Ematthew/wordpress/">the weblog of mpoer</a></h1> <div class="description">Family, Web Development, Debian GNU/Linux, and the Atlanta Thrashers</div> </div> and that renders it as shown here: http://thinktank.ichyware.net:81/~matthew/wordpress/What I would like is to have tux's head on both the bottom left and the bottom right parts of the head section, or perhaps tux's head on one side and another similarly-sized image on the other side. Any suggestions? I think this is beyond CSS' capabilities. Link to comment Share on other sites More sharing options...
aspnetguy Posted February 28, 2006 Share Posted February 28, 2006 you will have to create columns to acheive this. Then create a CSS class for each column with the correct background image you want.That is the only way I no of Link to comment Share on other sites More sharing options...
mpoer Posted February 28, 2006 Author Share Posted February 28, 2006 not a bad idea! I'll mess around and see if I can do that. Link to comment Share on other sites More sharing options...
mpoer Posted February 28, 2006 Author Share Posted February 28, 2006 a little bit like this: #header { padding-bottom: 10px; text-align:center; font-size: 1em; background-color:#00ced1; color:#191970;}#header .left { background-image:url('tux-head.png'); background-repeat:no-repeat; background-position:bottom left; float:left;}#header .middle { text-align:center; margin-left:105px; margin-right:105px;}#header .right { background-image:url('tux-head.png'); background-repeat:no-repeat; background-position:bottom right; float:right;} <div id="header"> <div class="left"></div> <div class="middle"> <h1><a href="http://thinktank.ichyware.net:81/%7Ematthew/wordpress/">the weblog of mpoer</a></h1> <div class="description">Family, Web Development, Debian GNU/Linux, and the Atlanta Thrashers</div> </div> <div class="right"></div> </div> doesn't seem to be working. neither image shows at all. can you see what I'm doing wrong? Link to comment Share on other sites More sharing options...
aspnetguy Posted February 28, 2006 Share Posted February 28, 2006 you need to specify the width and height of the columns on each end becuase they have no content. Link to comment Share on other sites More sharing options...
mpoer Posted March 1, 2006 Author Share Posted March 1, 2006 actually, i tried setting both the widths to 100px, but it didn't show the image Link to comment Share on other sites More sharing options...
sbrownii Posted March 1, 2006 Share Posted March 1, 2006 You probably need to set the height, too.I'm not sure, but it might be better to just create one graphic that looks how you want (with tux on both sides) and use it as the background for your header - although I'm sure there will be some problems with that, too...I think it looks fine as it is though... Link to comment Share on other sites More sharing options...
F-Man Posted March 1, 2006 Share Posted March 1, 2006 Put one div inside another. Apply "background: url(image.jpg) no-repeat scroll bottom left" to one and "background: url(image.jpg) no-repeat scroll bottom right" to the other. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now