...

View Full Version : Some Div problems



Sman5109
04-22-2007, 07:24 AM
Hello,

On the page at the bottom I am having some Div problems. First, in FF everything looks fine except the "menu" div wont show up, and wont be height: 100%. And second, in IE7 the "top" div is screwed up, and is messing with the look of everything. How do I fix these?

Thank You!

http://www.eliloewen.com

coothead
04-22-2007, 09:34 AM
Hi there Sman5109,

I am not totally certain of the effect that you are trying to create but this may be close...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://www.eliloewen.com/test/"/> <!--this is for coothead testing and can be removed-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-image: url(images/menu.png);
background-repeat: repeat-y;
}
#logo {
background-image: url(images/logo.png);
width: 165px;
height: 168px;
float: left;
}
#school {
background-image: url(images/school.png);
width: 624px;
height: 121px;
float: left;
}
#top {
background-image: url(images/top.png);
background-repeat: repeat-x;
height: 121px;
}
#menu {
width: 165px;
float: left;
clear: both;
}
#menu h3 {
color:#fff;
text-align:center;
}
#menu li {
color:#fff;
}
#menu a:link {
color:#fff;
}
#content {
margin-left:165px;
padding:15px 30px;
}
#content p {
text-align:justify;
}
</style>

</head>
<body>

<div id="logo"></div>
<div id="school"></div>
<div id="top"></div>

<div id="menu">
<h3>menu</h3>
<ul>
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">link four</a></li>
</ul>
</div>

<div id="content">
<h2>Lorem ipsum</h2>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur elit nibh, venenatis a, ornare id,
elementum et, sem. Aliquam adipiscing faucibus risus. Nulla at libero. Vivamus vitae lorem id sem
pellentesque euismod. Quisque libero. Etiam fermentum mattis eros. Donec faucibus elit sed enim. Fusce
pulvinar tincidunt erat. Phasellus elit. In luctus. Aliquam erat volutpat. Nullam imperdiet tellus vitae
magna. Proin ut purus. Cras condimentum sagittis eros. Morbi laoreet nunc eget erat. Duis varius.
</p><p>
Phasellus eget nibh vestibulum felis tempor tincidunt. Fusce sollicitudin tincidunt quam. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris lectus libero, lacinia ut,
tempor quis, rutrum in, arcu. Nullam fermentum imperdiet quam. Pellentesque ut urna. Nulla facilisi. In
luctus felis sed nunc. Integer id diam quis erat hendrerit pulvinar. Suspendisse a dui. Sed eget lorem
pharetra enim dignissim facilisis. Vestibulum eu nunc eu quam tincidunt convallis. Proin non ante.
</p><p>
In gravida est eget tellus. Proin auctor. Curabitur gravida ligula ut justo. Duis a lectus. Mauris aliquet
lacus a diam interdum semper. Donec tristique imperdiet diam. Donec malesuada lobortis eros. Morbi nec felis
non elit tristique ultrices. Cras tempus, dui non mollis porttitor, urna lacus laoreet felis, ac convallis
enim purus sed nulla. In sagittis mi quis dolor. Integer quis neque. Mauris et magna. Mauris id ante.
Vestibulum luctus lacus.
</p><p>
Sed rutrum massa quis felis. Pellentesque laoreet, sapien nec rutrum vulputate, justo tortor ullamcorper
dolor, auctor pretium magna purus in orci. Nam sit amet leo. Proin nec dui. Nunc libero enim, tincidunt vitae,
elementum eu, fermentum et, leo. Maecenas pede tellus, sollicitudin vulputate, consectetuer a, iaculis id,
velit. Curabitur blandit pulvinar libero. Quisque dolor. Ut nonummy leo non nulla. Maecenas quis enim. Nunc
eget pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Maecenas vitae ligula quis elit eleifend fermentum. Morbi tempus magna nec lectus. Vestibulum elementum.
Nulla malesuada, sapien non ornare gravida, pede quam interdum ipsum, ut nonummy enim turpis vitae neque.
Etiam consequat mollis sapien. Nunc congue. Fusce leo nibh, tempus et, pulvinar in, sollicitudin in, felis.
Sed eget est.
</p><p>
Nulla purus eros, nonummy vel, tincidunt nec, ullamcorper malesuada, quam. Phasellus sem. In non nisi eget
justo hendrerit dictum. Suspendisse pharetra leo in lectus. Duis ultricies. In fringilla justo at pede. Ut
pretium nunc vel massa. Fusce arcu erat, ultrices ac, fringilla eu, iaculis eu, turpis. Duis tempus, augue et
tempor bibendum, est risus dapibus risus, sed sagittis nisl erat nec nisl. Nulla venenatis placerat odio.
Suspendisse sed neque. Duis risus. Etiam quis est vel neque lacinia porttitor. Integer ipsum. Mauris tristique
scelerisque tortor. Aliquam erat volutpat. Vestibulum et ipsum. Aenean eleifend pulvinar lectus. Phasellus nec
augue.
</p>

</div>

</body>
</html>


I would suggest that you use the xhtml1-strict.dtd or even html4/strict.dtd rather than the xhtml11.dtd.

coothead

Excavator
04-22-2007, 05:32 PM
Hello Sman5109,
I think you need to re-arrange the order of your markup.
Like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html {
height: 100%; /*100% height need height set in html also*/
}
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
border: none;
}
#logo {
background-image: url(http://www.eliloewen.com/test/images/logo.png);
width: 165px;
height: 168px;
float: left;
}
#top {
background-image: url(http://www.eliloewen.com/test/images/top.png);
height: 121px;
background-repeat: repeat-x;
}
#school {
background-image: url(http://www.eliloewen.com/test/images/school.png);
height: 121px;
width: 624px;
float: left;
}
#menu {
background-image: url(http://www.eliloewen.com/test/images/menu.png);
width: 165px;
height: 100%;
float: left;
clear: left;
background-repeat: repeat-y;
}
#content {

}
</style>
</head>
<body>
<div id="logo"></div>
<div id="top">
<div id="school"></div>
</div>
<div id="menu"></div>
<div id="content">
<h2>Lorem ipsum</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur elit nibh, venenatis a, ornare id, elementum et, sem. Aliquam adipiscing faucibus risus. Nulla at libero. Vivamus vitae lorem id sem pellentesque euismod. Quisque libero. Etiam fermentum mattis eros. Donec faucibus elit sed enim. Fusce pulvinar tincidunt erat. Phasellus elit. In luctus. Aliquam erat volutpat. Nullam imperdiet tellus vitae magna. Proin ut purus. Cras condimentum sagittis eros. Morbi laoreet nunc eget erat. Duis varius. </p>
<p> Phasellus eget nibh vestibulum felis tempor tincidunt. Fusce sollicitudin tincidunt quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris lectus libero, lacinia ut, tempor quis, rutrum in, arcu. Nullam fermentum imperdiet quam. Pellentesque ut urna. Nulla facilisi. In luctus felis sed nunc. Integer id diam quis erat hendrerit pulvinar. Suspendisse a dui. Sed eget lorem pharetra enim dignissim facilisis. Vestibulum eu nunc eu quam tincidunt convallis. Proin non ante. </p>
<p> In gravida est eget tellus. Proin auctor. Curabitur gravida ligula ut justo. Duis a lectus. Mauris aliquet lacus a diam interdum semper. Donec tristique imperdiet diam. Donec malesuada lobortis eros. Morbi nec felis non elit tristique ultrices. Cras tempus, dui non mollis porttitor, urna lacus laoreet felis, ac convallis enim purus sed nulla. In sagittis mi quis dolor. Integer quis neque. Mauris et magna. Mauris id ante. Vestibulum luctus lacus. </p>
<p> Sed rutrum massa quis felis. Pellentesque laoreet, sapien nec rutrum vulputate, justo tortor ullamcorper dolor, auctor pretium magna purus in orci. Nam sit amet leo. Proin nec dui. Nunc libero enim, tincidunt vitae, elementum eu, fermentum et, leo. Maecenas pede tellus, sollicitudin vulputate, consectetuer a, iaculis id, velit. Curabitur blandit pulvinar libero. Quisque dolor. Ut nonummy leo non nulla. Maecenas quis enim. Nunc eget pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vitae ligula quis elit eleifend fermentum. Morbi tempus magna nec lectus. Vestibulum elementum. Nulla malesuada, sapien non ornare gravida, pede quam interdum ipsum, ut nonummy enim turpis vitae neque. Etiam consequat mollis sapien. Nunc congue. Fusce leo nibh, tempus et, pulvinar in, sollicitudin in, felis. Sed eget est. </p>
<p> Nulla purus eros, nonummy vel, tincidunt nec, ullamcorper malesuada, quam. Phasellus sem. In non nisi eget justo hendrerit dictum. Suspendisse pharetra leo in lectus. Duis ultricies. In fringilla justo at pede. Ut pretium nunc vel massa. Fusce arcu erat, ultrices ac, fringilla eu, iaculis eu, turpis. Duis tempus, augue et tempor bibendum, est risus dapibus risus, sed sagittis nisl erat nec nisl. Nulla venenatis placerat odio. Suspendisse sed neque. Duis risus. Etiam quis est vel neque lacinia porttitor. Integer ipsum. Mauris tristique scelerisque tortor. Aliquam erat volutpat. Vestibulum et ipsum. Aenean eleifend pulvinar lectus. Phasellus nec augue. </p>

</div>
</body>
</html>


That works in IE7 and FF anyway.

Sman5109
04-22-2007, 10:01 PM
Ok, i fixed up the code, now i have a few more problems.

1. when i resize the page in FF the "school" div moves down (its fine in IE7). FIXED
2. Theres a big gap above the "content" div in IE7.

How do i fix these?

Also, is there a way i can have IE6 as a standalone in Vista?

Sman5109
04-23-2007, 12:00 AM
I just fixed #1. Does anyone know how to fix #2?

Excavator
04-23-2007, 01:54 AM
Ok, i fixed up the code, now i have a few more problems.

1. when i resize the page in FF the "school" div moves down (its fine in IE7). FIXED
2. Theres a big gap above the "content" div in IE7.

How do i fix these?
I moved/changed a lot, you'll just have to compare the two versions and see what you can use from it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Layout</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
html {
HEIGHT: 100%
}
body {
BACKGROUND-IMAGE: url(http://www.eliloewen.com/test/images/menu.png); MARGIN: 0px; BACKGROUND-REPEAT: repeat-y; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 100%
}
* {
margin: 0;
padding: 0;
border: none;
}
#left_col {
width: 165px;
height: 100%;
float: left;
}
#menu {
WIDTH: 165px;
FLOAT: left;
margin: 10px 0 0 0;
COLOR: #ffffff
}
#menu h3 {
margin: 0 0 0 30px;
}
#menu ul {
margin: 0 0 0 30px;
}
#menu li {
COLOR: #ffffff
}
#logo {
FLOAT: left;
BACKGROUND-IMAGE: url(http://www.eliloewen.com/test/images/logo.png);
WIDTH: 165px;
HEIGHT: 168px
}
#top {
BACKGROUND-IMAGE: url(http://www.eliloewen.com/test/images/top.png);
OVERFLOW: hidden;
HEIGHT: 121px
}
#school {
BACKGROUND-IMAGE: url(http://www.eliloewen.com/test/images/school.png);
WIDTH: 624px;
HEIGHT: 121px
}

#content {
margin: 10px;
}
#content h1{
margin: 0 0 0 165px;
FONT-SIZE: 24px;
TEXT-DECORATION: underline
}
#content p {
margin: 0 0 0 165px;
}
a:link {
COLOR: #ffffff
}
a:visited {
COLOR: #ffffff
}
a:hover {
COLOR: #999999
}
a:active {
COLOR: #cccccc
}
</style>
</head>
<body>
<div id="left_col">
<div id="logo"></div>
<div id="menu">
<h3>menu</h3>
<ul>
<li><a href="http://www.eliloewen.com/test/#">link one</a></li>
<li><a href="http://www.eliloewen.com/test/#">link two</a></li>
<li><a href="http://www.eliloewen.com/test/#">link three</a></li>
<li><a href="http://www.eliloewen.com/test/#">link four</a></li>
</ul>
</div>
<!--closes left_col--></div>
<div id="top">
<div id="school"></div>
</div>
<div id="content">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur elit
nibh, venenatis a, ornare id, elementum et, sem. Aliquam adipiscing faucibus
risus. Nulla at libero. Vivamus vitae lorem id sem pellentesque euismod. Quisque
libero. Etiam fermentum mattis eros. Donec faucibus elit sed enim. Fusce
pulvinar tincidunt erat. Phasellus elit. In luctus. Aliquam erat volutpat.
Nullam imperdiet tellus vitae magna. Proin ut purus. Cras condimentum sagittis
eros. Morbi laoreet nunc eget erat. Duis varius.</p>
<p>Phasellus eget nibh vestibulum felis tempor tincidunt. Fusce sollicitudin
tincidunt quam. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Mauris lectus libero, lacinia ut, tempor quis,
rutrum in, arcu. Nullam fermentum imperdiet quam. Pellentesque ut urna. Nulla
facilisi. In luctus felis sed nunc. Integer id diam quis erat hendrerit
pulvinar. Suspendisse a dui. Sed eget lorem pharetra enim dignissim facilisis.
Vestibulum eu nunc eu quam tincidunt convallis. Proin non ante.</p>
<p>In gravida est eget tellus. Proin auctor. Curabitur gravida ligula ut justo.
Duis a lectus. Mauris aliquet lacus a diam interdum semper. Donec tristique
imperdiet diam. Donec malesuada lobortis eros. Morbi nec felis non elit
tristique ultrices. Cras tempus, dui non mollis porttitor, urna lacus laoreet
felis, ac convallis enim purus sed nulla. In sagittis mi quis dolor. Integer
quis neque. Mauris et magna. Mauris id ante. Vestibulum luctus lacus.</p>
<p>Sed rutrum massa quis felis. Pellentesque laoreet, sapien nec rutrum
vulputate, justo tortor ullamcorper dolor, auctor pretium magna purus in orci.
Nam sit amet leo. Proin nec dui. Nunc libero enim, tincidunt vitae, elementum
eu, fermentum et, leo. Maecenas pede tellus, sollicitudin vulputate,
consectetuer a, iaculis id, velit. Curabitur blandit pulvinar libero. Quisque
dolor. Ut nonummy leo non nulla. Maecenas quis enim. Nunc eget pede.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Maecenas vitae ligula quis elit eleifend fermentum. Morbi tempus
magna nec lectus. Vestibulum elementum. Nulla malesuada, sapien non ornare
gravida, pede quam interdum ipsum, ut nonummy enim turpis vitae neque. Etiam
consequat mollis sapien. Nunc congue. Fusce leo nibh, tempus et, pulvinar in,
sollicitudin in, felis. Sed eget est.</p>
<p>Nulla purus eros, nonummy vel, tincidunt nec, ullamcorper malesuada, quam.
Phasellus sem. In non nisi eget justo hendrerit dictum. Suspendisse pharetra leo
in lectus. Duis ultricies. In fringilla justo at pede. Ut pretium nunc vel
massa. Fusce arcu erat, ultrices ac, fringilla eu, iaculis eu, turpis. Duis
tempus, augue et tempor bibendum, est risus dapibus risus, sed sagittis nisl
erat nec nisl. Nulla venenatis placerat odio. Suspendisse sed neque. Duis risus.
Etiam quis est vel neque lacinia porttitor. Integer ipsum. Mauris tristique
scelerisque tortor. Aliquam erat volutpat. Vestibulum et ipsum. Aenean eleifend
pulvinar lectus. Phasellus nec augue.</p>
</div>
</body>
</html>




Also, is there a way i can have IE6 as a standalone in Vista?

The standalone versions don't work in Vista, or at least when I tried back in Vista Beta days it wouldn't. I would say no to that.

Sman5109
04-23-2007, 05:02 AM
Ok, I got everything to work.

Thank You everyone :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum