PDA

View Full Version : main div not positioned?

rafiki
03-27-2008, 02:12 PM
the css is different from the online example.
the offline is....

.head {
height : 60px;
background : url(header.gif) repeat-x;
top : 0%;
width : 991px;
text-align : center;
}
.left {
height : 450px;
width : 100px;
background : url(mainbg.gif) repeat-x;
float : left;
position : relative;
}
.right {
height : 450px;
width : 100px;
background : url(mainbg.gif) repeat-x;
float : right;
top : 60px;
text-align : justify;
}
.content {
height : 450px;
width : 852px;
background : url(mainbg.gif) repeat-x;
right : 100px;
text-align : center;
}
.footer {
height : 60px;
background : url(header.gif) repeat-x;
bottom : 0%;
width : 991px;
text-align : center;
}
ul {
margin : auto;
padding : 10px;
}
ul ul, li {
width : 20px;
list-style : none;
}
ul li a {
color : white;
text-align : left;
}
ul li a:hover {
background-color : #000000;
color : #ffffff;
position : relative;
}

[this is all temp colors]
the html is the same as
[css code can also be found here]
http://www.jamiewest.org.uk/css/funkymonkey/
accept this is added

<div class="left"><ul class="nav"><li><a href="#"> Link a a s dda asd</a></li><li><a href="#"> Link</a></li><li><a href="#"> Link</a></li><li><a href="#"> Link</a></li><li><a href="#"> Link</a></li></ul></div>

basically the offline left float cant hold as much text as the online version
and there is a big white gap in the offline where the main div isnt positioned correctly.

Ok so i got more space, now the width of the header is 991px
the left float 100px 100px for the right too.
the main div is (991px - 100 - 100) 791px but doesnt fill the whitespace. any ideas?
jcdevelopment
03-27-2008, 03:29 PM
<style type="text/css">

body{
background:#000000;
}

.head {
height : 60px;
background : #fff;
top : 0%;
width : 991px;
text-align : center;
}
.left {
height : 450px;
width : 150px;
float : left;
position : relative;
background:#fff;
}
.right {
height : 450px;
width : 100px;
float : right;
top : 60px;
text-align : justify;
background:#fff;
}
.content {
height : 450px;
width : auto;
background:#fff;
text-align : center;
}
.footer {
height : 60px;
background : url(header.gif) repeat-x;
bottom : 0%;
width : 991px;
text-align : center;
}
ul {
margin:0;
padding : 2px;
}
ul ul, li {

list-style : none;
}
ul li a {
color : #000;
text-align : left;
}
ul li a:hover {
background-color : #000000;
color : #000;
}



</style>



</head>

<body>

<div class="head"><h1> this is my header</h1></div>
<div class="left"><ul class="nav"><li><a href="#"> Link a a s dda asd</a></li><li><a href="#"> Link</a></li><li><a href="#"> Link</a></li><li><a href="#"> Link</a></li><li><a href="#"> Link</a></li></ul></div>
<div class="right">this floats right?</div>
<div class="content">this is center.</div>
<div class="footer">this is footer?</div>

</body>

not sure if that is what you were wanting, i never got a space though. I changed some colors around also!

let me know
abduraooft
03-27-2008, 03:30 PM
Sorry,it doesn't make much sense for me. Either explain on the basis of link OR on the basis of a full code posted.
rafiki
03-27-2008, 03:45 PM
there are no gaps, but no background pictures lol. ill fiddle with it and get back to you.
jcdevelopment
03-27-2008, 03:55 PM
right, i took those out, sorry. also a little help with this

.content {
height : 450px;
width : 852px;
background : url(mainbg.gif) repeat-x;
right : 100px;text-align : center;
}

you cant set an object in css to move to thr right like

right:whatever;

unless you set a position to it, whether it be relative, fixed, absolute..

so let me know what happens!!
rafiki
03-27-2008, 03:58 PM
www.jamiewest.org.uk/css/funkymonkey/
its pixel perfect in FF (both stable and beta) not sure about IE(8 and IE8 with IE7 emulator)
until i resize my window the header/footer stay the correct width but not content or right.
jcdevelopment
03-27-2008, 04:05 PM
what you will need to do is set a wrapper around that area to controll the content, unless you want it all to be expandable, then you would use %'s. I have auto on the content width, so it will expand with the page. If you need help with the wrapper let me know!!
rafiki
03-27-2008, 04:08 PM
could you help me with the wrapper please, never used one before lol :D msn, pm, email or forum?
jcdevelopment
03-27-2008, 04:29 PM
well it wont be hard, here is an example, and just adjust the width

#wrapper {
width:1000px;
font:whatever;
background:can add a color if need be;
}

then take that and wrap it in your html

<body>
<div id="wrapper">

all other divs needing to be controlled...

</div>
</body>


thats basically it, its not too hard, and if anyone feels there can be something added please do!!
rafiki
03-27-2008, 04:37 PM
thanks that worked..
jcdevelopment
03-27-2008, 04:49 PM
cool, let us know if you need anything else on it!!
rafiki
03-27-2008, 05:05 PM
should your location say texas?
jcdevelopment
03-27-2008, 05:14 PM
haha, yeah, but down here its Tejas (te - has)!