jaylow Posted May 31, 2011 Share Posted May 31, 2011 i have here a header and i want to put a margin on it so it does not take all the space of the top of my html pagebut when i set a margin it does nothing<html> <html><head><title>Home</title><link type="text/css" rel="stylesheet" src="home.css" /></head><body> <div id="header" > <table width="100%" border="0" cellpadding="0" cellspacing="0" > <tr> <td width="2%" <img src="img/bleubanner1_left.png" width="154" height="139"></td> <td width="96%" style="background-image: url('img/bleubanner1.png'); background-repeat: repeat-x; z-index: -1; "> <center><strong>Title Text for Bar</strong></center> </td> <td width="2%" <img src="img/bleubanner1_right.png" width="150" height="139"> </td> <tr> </table> </div> <div id="menu"> </div> <div id="main"> <p> Blabla BLa bla bla blablablablabla Blabla BLa bla bla blablablablablaBlabla BLa bla bla blablablablablaBlabla BLa bla bla blablablablablaBlabla BLa bla bla blablablablablaBlabla BLa bla bla blablablablablaBlabla BLa bla bla blablablablabla </p> </div><body></html> <css> html {width: 100%;font-family:;}body {width: 100%;}#header {margin-right: 100px;margin-left: 100px;margin-top:0px;margin-bottom:0px;}#menu {}#main {} Link to comment Share on other sites More sharing options...
Ingolme Posted May 31, 2011 Share Posted May 31, 2011 The table is taking 100% width of the page, and the margins are being added outside of it, which means you certainly have a horizontal scrollbar.Tables simply lack the property of block elements to automatically fit in the horizontal space of a parent. You shouldn't be using tables for this, try styling <div> elements, or an <h1> element since the text appears to be the title of your page.<center> tags are deprecated, you should use CSS to center things. Link to comment Share on other sites More sharing options...
jaylow Posted May 31, 2011 Author Share Posted May 31, 2011 thanks !i will see how it will work in a div Link to comment Share on other sites More sharing options...
jaylow Posted May 31, 2011 Author Share Posted May 31, 2011 do you know how i can put the background img the same way as a had in a div? Link to comment Share on other sites More sharing options...
ShadowMage Posted May 31, 2011 Share Posted May 31, 2011 do you know how i can put the background img the same way as a had in a div?I would create a container div. Inside that container, you'll have your left image, the title, and the right image. I'd make the left and right images divs and the title an h1. So you'd end up with something like this:<div id='header'> <div id='leftHdr'></div> <h1>Title Here</h1> <div id='rightHdr'></div></div> Then you can assign your left and right images to the left and right divs and place your repeating image as the background of the h1. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.