homepage Welcome to WebmasterWorld Guest from 54.204.73.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Positioning problem
xboxingman



 
Msg#: 4367587 posted 2:44 am on Sep 27, 2011 (gmt 0)

I have always used tables and am trying to only use divs to build the layout, the problem is positioning just doesn't act how you would expect. The issue I'm having is the only way I could get this to look right was to use mainly absolute position, I assume float is what I really want. I want the div to expand to the content, currently I have to make each page the exact dimensions and doesn't work well with my ajax as the content expands the site stays the same.. So if I could get a little help making this work right I would really appreciate it.

I have to change the height in #center & #footer & #sitemap per page. Those are the divs I would prefer to use a percentage on.

Also once I added the #list & li I got a 10 or 15px margin at the top I cannot get rid of.

css file

@charset "utf-8";
/* CSS Document */
body {
background: url("../images/cp_des1_14.jpg");
margin:0;
text-align:center;
}
#head {
position:relative;
width:100%;
height:149px;
margin:0;
background: url("../images/cp_des1_01.gif");
}
#bgtop {
position:absolute;
width:100%;
height:149px;
margin:0, auto;
background: url("../images/cp_des1_01.gif");
}
#outer {
margin: 0px auto;
background-color:#fff;
width:865px;
height:500px;
}
#center {
background-color:#fff;
background: url("../images/cent_bg.gif") repeat-y top left;
position:absolute;
height:600px;
width:865px;
padding-right: 5px;
}
#footer {
position:absolute;
left:auto;
top:700px;
height:80px;
width:867px;
margin:0, auto;
background: url("../images/cent_bot.gif") no-repeat top left;
}
#logo {
position:absolute;
padding:20px;
text-align:left;
margin:0px auto;
width:180ex;
height:6ex;
left:3em;
display:block;
background: url("../images/logo.png") no-repeat top left;
}
h1#logo {
font-size:16px;
}
#logo span
{
position: absolute;
top: -999em;
}
#redbar {
position:absolute;
background: url("../images/red_bar.gif") no-repeat top left;
height:25px;
width:854px;
left:5px;
margin-bottom:25px;
}
#list {
position:relative;
top:110px;
left:355px;
height:30px;
width:500px;
font-size:18px;
}
#list li
{
display: inline;
list-style-type: none;
}
#list a { padding: 4px 12px; }

#list a:link, #list a:visited
{
border: 1px solid #135eff;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
color: #135eff;
font-weight:bold;
text-decoration: none;
background-color:#7AF;
}

#list a:hover
{
border: 1px solid #fff;
color: #fff;
font-weight:bold;
text-decoration: none;
}
#sitemap
{
position:relative;
top:750px;
margin:0, auto;
}
#sitemap li
{
display: inline;
list-style-type: none;
}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SITE NAME</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bgtop"></div>
<div id="outer">
<div id="head">
<div id="logo"><span>SITE NAME</span>
</div>
<div id="list">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div id="center">
<div id="redbar"></div><br /><br />
<p><?php @include(''); ?></p>
</div>
<div id="footer">
</div>
<div id="sitemap">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>




THANKS a lot
Mike

 

xboxingman



 
Msg#: 4367587 posted 2:13 pm on Sep 28, 2011 (gmt 0)

Could someone at least point in me in the right direction about how to make the divs autosize. I know this shouldn't hard for you gurus, I just can't get the relative/absolute/float stuff right and have to make a .css file for nearly every page and even then the active ajax items extend pass the footer.

Please I could really use some help.

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4367587 posted 5:23 pm on Sep 28, 2011 (gmt 0)

Well, I think your first mistake was setting any heights at all. :-) The below won't be "working code," as I don't have your images.

I am **really** fond of floats. The reason being is that when you float elements, all of the floated children within them stay self-contained (often called the "shrink wrap" effect). Once you get used to it it's extremely predictable.

Also you're beginning to suffer from div-itis, which complicates your task. That is, there's no reason to say, surround the ul's in list and sitemap with a div, just assign the ID to the UL's.

This is probably not working code as I've no idea how it's supposed to look. What I'm going for is a layout based on the clues from your html and css, but simplified and without absolute positioning. Also I've changed a lot of the divs to semantic elements.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SITE NAME</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bgtop"></div>
<div id="outer">
<div id="head">
<p id="logo"><a href="/">SITE NAME</a></p>
<ul id="list">
<li><a href="#">Home</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- head -->
<div id="center">
<div id="redbar"></div>
<!-- don't use br, use margins - you probably did
that because the margins weren't taking effect? -->
<p><?php @include(''); ?></p>
</div><!-- center -->
<div id="footer"></div>
<ul id="sitemap">
<li><a href="#">Home</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- footer -->
<div class="clear-div"></div>
</div><!-- outer -->
</body>
</html>


@charset "utf-8";
/* CSS Document */
body {
background: url("../images/cp_des1_14.jpg");
margin:0;
/* text-align:center; This will center ALL TEXT */
}
#outer,#head,#footer,
#sitemap { margin:0; padding:0; width: 865px; }
#head,#center,#footer,#redbar,
#sitemap { float: left; overflow:hidden; }
/* min-height ignored by older IE */
#outer { background-color:#fff; margin: 0px auto; min-height:500px; }
#bgtop { width:100%; height:149px; background: url("../images/cp_des1_01.gif"); }
#head { height:149px; background: url("../images/cp_des1_01.gif"); }
#center {
background: #fff url("../images/cent_bg.gif") repeat-y top left;
min-height:600px;
/* With the padding it must be container width - padding *
width:860px;
padding-right: 5px;
}
#footer { height:80px; background: url("../images/cent_bot.gif") no-repeat top left; }
#logo,#logo a { width:180px; height:6px; display: block; outline:none; border:none; }
#logo { padding:20px; margin:0 auto; }
#logo a {
background: url("../images/logo.png") no-repeat top left;
/* is this why you did the negative margin? */
text-indent:-50000px; outline:none;
}
#redbar {
background: url("../images/red_bar.gif") no-repeat top left;
height:25px;
width:854px;
margin: 0 0 25px 5px;
}
#list { display: block; height:30px; width:500px; font-size:18px; }
#list li,
#sitmap li { display: inline; list-style-type: none; }
#list li { padding: 4px 12px; }
#list a:link, #list a:visited {
border: 1px solid #135eff;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
color: #135eff;
font-weight:bold;
text-decoration: none;
background-color:#7AF;
}
#list a:hover {
border: 1px solid #fff;
color: #fff;
font-weight:bold;
text-decoration: none;
}
#sitemap { display: block; }
/* A clearing div becomes handy working with floats */
.clear-div { clear: both; }

xboxingman



 
Msg#: 4367587 posted 1:18 am on Sep 29, 2011 (gmt 0)

I really appreciate the help rocknbil, you code is very clean :) I tried sticking that in and playing with it. A few adjustments and it's good to go. The text-indent doesn't do as desired? it should be off screen at text-indent:-50000px?

Otherwise here is my final code:


HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SITE NAME</title>
<link href="css/index2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="head">
<div id="box">
<p id="logo"><a href="#">SITE NAME</a></p>
<ul id="list">
<li><a href="#">Home</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- box -->
</div><!-- head -->
<div id="outer">
<div id="center">
<div id="redbar"></div>
<!-- don't use br, use margins - you probably did
that because the margins weren't taking effect? -->
<p><?php @include(''); ?></p>
</div><!-- center -->
<div id="footer">
<ul id="sitemap">
<li><a href="#">Home</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- footer -->
<div class="clear-div"></div>
</div><!-- outer -->
</body>
</html>

CSS
@charset "utf-8";
/* CSS Document */
body {
background: url("../images/cp_des1_14.jpg");
margin:0;
/* text-align:center; This will center ALL TEXT */
}
#outer,#footer,#box
#sitemap { margin:0; padding:0; width: 865px; }
#box { margin:0px auto; width:860px }
#head,#center,#footer,#redbar,
#sitemap { float: left; overflow:hidden; }
/* min-height ignored by older IE */
#outer { background-color:#fff; margin: 0px auto; min-height:500px; }
#head { width:100%; height:149px; margin:0; padding:0; background: url("../images/cp_des1_01.gif"); }
#center {
background: #fff url("../images/cent_bg.gif") repeat-y top left;
min-height:600px;
/* With the padding it must be container width - padding */
width:860px;
padding-right: 5px;
}
#footer { height:80px; background: url("../images/cent_bot.gif") no-repeat top left; }
#logo { width:303px; height:60px; display: block; float:left; outline:none; border:none; background: url("../images/logo.png") no-repeat top left; }
#logo { padding:20px; margin:0 auto; }
#logo a {
background: url("../images/logo.png") no-repeat top left;
/* is this why you did the negative margin? */
text-indent:-50000px; outline:none;
}
#redbar {
background: url("../images/red_bar.gif") no-repeat top left;
height:25px;
width:854px;
margin: 0 0 25px 5px;
}
#list { display: block; height:30px; width:500px; font-size:18px; float:right;}
#list li { display: inline; list-style-type: none; }
#sitemap { margin-left:240px; margin-top:50px; }
#sitemap li { display: inline; list-style-type: none; border:1px solid #7AF; padding: 2px; }
#sitemap a:link, #sitemap a:visited { color:#7AF; text-decoration:none;padding:2px; }
#sitemap a:hover { background-color:#7AF; color:#FFF; padding:2px; text-decoration:none; }
#list li { padding: 12px 4px; }
#list a:link, #list a:visited {
border: 1px solid #135eff;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
color: #135eff;
font-weight:bold;
text-decoration: none;
background-color:#7AF;
}
#list a:hover {
border: 1px solid #fff;
color: #fff;
font-weight:bold;
text-decoration: none;
}
/* A clearing div becomes handy working with floats */
.clear-div { clear: both; }

xboxingman



 
Msg#: 4367587 posted 2:33 am on Sep 29, 2011 (gmt 0)

I just removed the text-indent and put on logo a { position:absolute; left:-999em; }

Looks great, thanks again rocknbil. I learned some things, I'll get a hang of this lol. :-)

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4367587 posted 6:33 pm on Sep 29, 2011 (gmt 0)

The text indent should have worked (do it all the time.) Maybe it needed to be applied to the parent p . . .

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved