...
PDA

[Solved] Margins are having no effect

Riboflavin
12-21-2005, 06:40 PM
No matter what I try, I can't seem to get the darn #rightHeader to move down into position, margin-top and padding-top have no effect :(
Masterslave
12-21-2005, 07:32 PM
Do you have tried:


position: absolute;
top: "number"px;
left: "numer"px;
?
Riboflavin
12-21-2005, 09:04 PM
That messed it up pretty bad in FF. The left margin works, just not the top.
circusbred
12-21-2005, 09:08 PM
<p> is used for PARAGRAPHS, to define a portion of the page, use DIV. It is important to start with good HTML, you should change it to something like this:
<div class="leftContent">
<h1>Left Header</h1>
<p>...</p>
</div>
<div class="rightContent">
<h1>Right Header</h1>
<p>...</p>
</div> For the CSS:
<style type="text/css">
.leftContent h1 { //style the left header here }
.rightContent h1 { //style the right header here }
</style>
Masterslave
12-21-2005, 09:13 PM
What goes wrong in Firefox? Maybe you can fix it with a z-index on the h1 tag.

#rightHeader {

margin-top: 105px;

margin-left: 50px;

display: inline;

}Do you use display: inline to fix the double margin bug in IE?
If so, delete that line and then apply the position: absolute with z-index. Maybe it will work.
Riboflavin
12-21-2005, 09:24 PM
Ok, I changed the Ps to Divs.

If I take out the display: inline it looks the way it does now. I tried z index but no luck.
harbingerOTV
12-22-2005, 01:50 AM
#rightHeader {


margin-left: 50px;

clear:left;

}


the image above it is floated so you need to make the #rightHeader clear it or it will sit beside it.
Riboflavin
12-22-2005, 02:15 AM
Thank you that helped greatly.

I have the layout exactly the way I want in IE, but it is quite off in FF now :( Any ideas?
harbingerOTV
12-23-2005, 12:57 AM
alright check this. I'll try to go through what I did to see what the heck was going on.

First I added the
* {
padding: 0;
margin: 0;
}


since the default padding/margins of the navigation list were throwing it off. That was the gap in FF.

Then to simplify things I wrapped your whole left column in a div and floated it ans positioned it. Gave it a width and then everything written in it will just fall in place. I turned off ALL the floats and clears on everything in the left coulmn.

Now in the HTML the rightHeader needed to be moved under the leftSide.

Give a little top margin to the stuff in the right hand side and BooYaa!

the *{pad:mar:0} thing fixed it enough on it's own to make it workable.

oh yeah the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>FS-Media</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html {

background-image: url('http://www.gotclam.com/fsmedia/images/bg.gif');

background-repeat: repeat-x;

background-color: #0B0B0B;

background-attachment: fixed;

color: #595959;

}



#pageContainer {

width: 705px;

margin-left: auto;

margin-right: auto;

margin-top: 0px;

padding: 0px;

background-color: #FFFFFF;

}



#banner {

background-image: url('http://www.gotclam.com/fsmedia/images/banner.gif');

width: 705px;

height: 96px;

}



#menu {

background: #fc6 url('http://www.gotclam.com/fsmedia/images/menubg.gif') no-repeat;

width: 705px;

height: 44px;

}



#top {

background: url('http://www.gotclam.com/fsmedia/images/contenttop.gif');

width: 705px;

height: 170px;

position:absolute;

z-index: 0;

}



#content {

width: 705px;

background:url('http://www.gotclam.com/fsmedia/images/contenttop.gif') top left no-repeat;

}

#leftSide {

float: left;

width: 188px;

margin-left: 25px;

display: inline;

margin-top: 20px;

}

.rightContent {

margin-top: 15px;

margin-left: 270px;

margin-bottom: 10px;

padding: 0px;

width: 400px;

font-size: 14px;

text-indent: 1.25em;
}


.leftContent {

font-size: 14px;

text-indent: 1.5em;

width: 180px;

margin-left: 4px;

margin-top: 8px;
}


#footer {

background-image: url('http://www.gotclam.com/fsmedia/images/footer.gif');

background-repeat: no-repeat;

width: 705px;

height: 76px;

}



h1 {

padding: 0px;

position: relative;

font-size: 15px;

font-family: arial;

color: #FDA00A;

width: 200px;

}

h2 {

color: #494949;

font-size: 15px;

font-family: arial;

margin-top: 8px;

}


h3 {

margin-top: 50px;

margin-left: 540px;

padding: 0px;

position: absolute;

font-size: 7pt;

font-family: arial;

color: #666666;

}



#rightHeader {

position: relative;

margin-left: 250px;

padding-top: 20px;


}



#newsLetter {

margin-top: 15px;

margin-left: 250px;


}


#signup {

margin-top: 20px;

margin-left: 272px;

padding: 0px;

height: 65px;

}

* html #signup {

margin-left: 137px;

}

#submit {

margin-bottom: -8px;

margin-left: 10px;

}



#leftHeader {

margin-left: 0px;

position: relative;

}


#siteImage {

position: relative;

margin-right: 0px;

margin-top: 5px;

}

#navcontainer {

text-align: right;

margin-right: 12px;



}

ul#navlist
{
white-space: nowrap;
text-align: right;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a {

padding: 0;
}

#navlist a:link, #navlist a:visited
{
text-decoration: none;
}

#navlist a:hover
{
text-decoration: none;
}

img {
border: none;
}
</style>
</head>
<body>
<div id="pageContainer">
<div id="banner"></div>

<div id="menu">
<div id="navcontainer">
<ul id="navlist">
<li id="homeButton"><a href="#"><img src="http://www.gotclam.com/fsmedia/images/home.gif"

alt="Home" /></a></li>
<li><a href="#"><img src="http://www.gotclam.com/fsmedia/images/portfolio.gif" alt="Portfolio"

/></a></li>

<li><a href="#"><img src="http://www.gotclam.com/fsmedia/images/services.gif" alt="Services"

/></a></li>
<li><a href="#"><img src="http://www.gotclam.com/fsmedia/images/aboutus.gif" alt="About Us"

/></a></li>
<li><a href="#"><img src="http://www.gotclam.com/fsmedia/images/contact.gif" alt="Contact"

/></a></li>

</ul>
</div>
</div>

<div id="content">
<div id="leftSide">
<h1 id="leftHeader">current site highlight</h1>

<img src="http://www.gotclam.com/fsmedia/images/siteimage.gif" id="siteImage" alt="Christian

Lyrics" />




<h2>Christian-Lyrics.net</h2>

<div class="leftContent">
Started by two college age men that wanted to bring a web presence
to the world. It first started out as just a couple friends doing
a lyrics website, when they soon realized that they were starting
to build a network of websites. <br /><br /> </div>
</div>
<h1 id="rightHeader">» company overview</h1>
<div class="rightContent">
Fireside Media, Inc. started by two college age men that wanted
to bring a web presence to the world. It first started out as
just a couple friends doing a lyrics website, when they soon
realized that they were starting to build a network of websites.
After realizing the benefits of creating a corporate identity
and unity, they created what is now known as Fireside Media, Inc.
FS Media is really just a central identification point for all
the websites in the network so that it was easy to manage all the
contacts through all the websites.<br /><br />


Started by two college age men that wanted to bring a web presence
to the world. It first started out as just a couple friends doing
a lyrics website, when they soon realized that they were starting
to build a network of websites. <br /><br />

Started by two college age men that wanted to bring a web presence
to the world. It first started out as just a couple friends doing
a lyrics website, when they soon realized that they were starting
to build a network of websites. </div>

<h1 id="newsLetter">company newsletter</h1>
<div id="signup">

<input type="text" size="35" maxlength="255" value=""></input><img

src="http://www.gotclam.com/fsmedia/images/submit.gif" id="submit" alt="Sign Up" />

</div>

</div>
<div id="footer"><h3>&copy;2005 Fireside Media, Inc.</h3></div>
</div>
</body>
</html>
Masterslave
12-23-2005, 08:57 AM
So It's solved?
Good job!:thumbsup:

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum