Jump to content

why does margin-left/right not work on this?


jaylow
 Share

Recommended Posts

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...