Sirax Posted April 12, 2010 Share Posted April 12, 2010 Hi all,I've designed a web layout in Photoshop, you can see the final result in a image HERE (ignore those red lines at the top for now)Now I want to build this Photoshop design into HTML/CSS website. Can somebody give me some good tips, hints what is the best way to start for such a layout? Because there are some gradient layers I've used in the background... So thats my first question, what is the best way to start with this one?Second question:As you can see HERE I've already start building a bit of the website but here I didn't used the gradient style (don't know the best way to do this)So on this page it's only the background and some test text... and this is the code I've used:HTML <link href="styles.css" rel="stylesheet" type="text/css" /></head><body><div id="header_bg"></div><div id="info_bar"></div>Dit is een test<br />Dit is een test<br />Dit is een test<br />Dit is een test<br />Dit is een test<br />Dit is een test<br /><div id="footer_bg"></div></body></html> CSS * { margin: 0px; padding: 0px; border: none;}body { background-color: #EDEDEE; color: #666666; font-size: 12px; font-family: Verdana, Geneva, sans-serif;}#header_bg { background-image: url(images/header_bg.png); background-repeat: repeat-x; height: 210px;}#info_bar { background-image: url(images/info_bar.png); background-repeat: repeat-x; height: 253px;}#footer_bg { background-image: url(images/footer_bg.png); background-repeat: repeat-x; height: 200px;} But as you can see the content (text) in totally on the left side of the page, but as you can see on the image of the psd file a posted above, (those red lines) the content must have a fixed width of 900px...Now when I add this kind of code: #container { margin: 0 auto; width: 900px;} And add this into the index.html also the background gets a fixed width... but thats not the idea.Does anyone know how I can do this the best way? So the whole background must be fluid sized but the whole content must be fixed width: 900pxI hope somebody can help me on the right way...Thx in advance Link to comment Share on other sites More sharing options...
thescientist Posted April 12, 2010 Share Posted April 12, 2010 div within a div? Link to comment Share on other sites More sharing options...
Sirax Posted April 12, 2010 Author Share Posted April 12, 2010 But can't I work with something like the container div? because if i have to do div within a div i have to say in each content div that the width must be 900px (center of page).And with container div you can say one time for all the content to center it in the middle with a width of 900px.Because if i use now this code: #container { margin: 0 auto; width: 900px;}also my background gets centered with 900px and the rest of the left and right side of the background is white. Link to comment Share on other sites More sharing options...
ShadowMage Posted April 12, 2010 Share Posted April 12, 2010 Couldn't you give the body the background instead?Or is the body going to be one thing, then have background image be fluid but smaller than the whole body?If that's the case do it the way scientist said. A div within a div.Give the body its background create a background div with the following CSS: div.bg { width: 80%; margin: 0 auto; background-image: url('image.jpg');} Then create a content div with 900px width and margin: 0 auto; Then you can place all your content within that div. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.