PDA

Click to See Complete Forum and Search --> : small gap....

BaptistKitty
12-02-2005, 09:34 AM
I'm just learning all about the div tags and find that they're the greatest thing once you figure them out but I have a problem...

I'm trying to build this page: http://projectidaho.baptistrevival.com/new2
but if you look there's a small gap on the right of the moose pic in the top right corner. It wasnt there till I put the title pic in.... how do I get rid of it?

Also I dont understand the % width thing.... I have the maroon bar set to 102% and it looks good but I the striped div set to 80%, the grey bar set to 80% and the main white box set to 80% and all 3 of them are not the same size... how do I get them to line up?

Here's the code

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Northwest Baptist Church</title>
</head>

<body>
<div style="position: absolute; left: 0px; top: 0px; height: 30px; width:102%; padding: 0em; z-index: 1; background-image: url(topgrad.gif); repeat-x"></div>

<div style="position: absolute; left: 216px; top: 29px; height: 140px; width:80%; padding: 0em; z-index: 3; background-image: url(linebkg.gif);">
<img src="title.gif" align="left"><img src="mooseline.jpg" align="right">
</div>

<div style="position: absolute; left: 0px; top: 29px; height: 330px; width:220px; padding: 0em; z-index:2; background-image: url(menu.gif); background-repeat: no-repeat"></div>
<div style="position: absolute; left: 0px; top: 359px; height: 100%; width:217px; padding: 0em; z-index: 4; background: #dddddd url(shadow.jpg) repeat-x"></div>
<div style="position: absolute; left: 217px; top: 160px; height: 20px; width:80%; padding: 0em; border: 2px white solid; z-index:4; background: #dddddd"></div>
<div style="position: absolute; left: 218px; top: 182px; height: 100%; width:80%; padding: 0em; z-index: 5; background: #ffffff url(lightshadow.jpg) repeat-x">
<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;main body

</div>

</body>


Thanks...
ray326
12-02-2005, 11:45 PM
It has to do with the top bar being 100% wide but not the rest. You need to ditch the absolute positioning, too.
BaptistKitty
12-03-2005, 09:34 PM
Ok, the top bar is actually 102% but it fit as if it was 100%... (didnt make sence to me) and how do I work with relative positioning? The explanation I saw didnt make sence to me. How does it work?

Thanks!
ray326
12-04-2005, 12:18 AM
Check the pointers in my sig and here's a couple of advanced layout sites.
http://www.glish.com/css/
http://www.positioniseverything.net/
Oh, and step #1 is to use a proper doctype or you'll never get it looking consistent between IE and web browsers.
BaptistKitty
12-08-2005, 01:14 PM
ok, those site were way over my head or just confusing.... I did figure out relative positioning though but I cant figure out why my divs want to wrap (one below the other) I tryed nobr and display: inline; but it wont go up why not?

http://projectidaho.baptistrevival.com/new2
BaptistKitty
12-08-2005, 01:50 PM
ok, I still don't understand why, but I put in some more div and it looks better but I don't understand why there is a small bit of "padding" to the right of the moose picture, why when you shrink your browser that bar disapears, and why 100% height is longer than the screen.

Any help would be great!
Thanks
ray326
12-08-2005, 04:57 PM
I'll see if I can make any sense out of it.
---------------
Here's something pretty close except I can't get Fx to show the danged background image for the container. I'm sure someone will point out something really stupid I did with it but the only way I could get it in Fx was to make it the body background. The problem with that was it always stretches across the full width of the screen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Northwest Baptist Church</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background: #fff;
}

#container {
width: 800px;
margin: 0 auto;
padding: 0;
background: transparent url(http://baptistrevival.com:8081/projectidaho/new2/topgrad.gif) repeat-x;
}

#menu {
float: left;
margin-top: 30px;
width:215px;
height: 330px;
background: url(http://baptistrevival.com:8081/projectidaho/new2/menu.gif) no-repeat;
}

#shadow {
margin-top: 330px;
width:215px;
height: 100%;
background: #ddd url(http://baptistrevival.com:8081/projectidaho/new2/shadow.jpg) repeat-x
}

#title {
margin-top: 30px;
height: 130px;
width: 585px;
float:left;
background: url(http://baptistrevival.com:8081/projectidaho/new2/linebkg.gif);
}

#main {
border-top: 20px solid #ddd;
height: 100%;
width: 585px;
float: left;
background: url('http://baptistrevival.com:8081/projectidaho/new2/lightshadow.jpg') repeat-x;
color: #602e01;
text-align: center;
}

#main h2 {
float:left;
height: 33px;
width: 280px;
margin: 20px 0 0 5px;
border-bottom: #602e01 2px solid;
font: normal small-caps bold 26px times new roman;
text-align: left;
}

#wel2 {
background-color:#602e01;
float:right;
height: 33px;
width: 50.5%;
margin-top: 20px;
border-bottom: #602e01 2px solid;
}

#main p {
text-align: left;
margin-left: 20px;
}

#main table {
margin: 0 auto;
font-family: verdana, arial, sans-serif;
font-weight: bold;
}

div.clear { clear: both; margin: 0; padding: 0; line-height: 1px; }

</style>

</head>

<body>
<div id="container">
<div id="menu">
<div id="shadow">&nbsp;</div>
</div>
<div id="title">
<img src="http://baptistrevival.com:8081/projectidaho/new2/title.gif" style="float:left">
<img src="http://baptistrevival.com:8081/projectidaho/new2/mooseline.jpg" style="float:right">
</div>
<div id="main">
<h2>Welcome</h2><div id="wel2">&nbsp;</div>
<div class="clear">&nbsp;</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>

<table border="0" width="80%" height="213" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td background="http://baptistrevival.com:8081/projectidaho/new2/gb1.gif" width="50">&nbsp;</td>
<td background="http://baptistrevival.com:8081/projectidaho/new2/gb2.gif">Now is the time for all good men to come to the aid of their country.</td>
<td background="http://baptistrevival.com:8081/projectidaho/new2/gb3.gif" width="50">&nbsp;</td>
</tr>
</table>

</div>
</div>
</body>
</html>
BaptistKitty
12-09-2005, 08:26 AM
Ok, I have to take the time to look at it now, but it worked much better in firefox than mine did. I don't understand this thought: "I can't get Fx to show the danged background image for the container" what are you talking about there? Also, I'm not sure if your working in 600x800 or what but its skinny, I think I can fix that though (i think lol). thanks for the help so far though!
ray326
12-09-2005, 01:20 PM
I made the bar at the top the background image of the #container. It doesn't show in Fx.

I'm working in 1200x1024 but I don't design pages for that. I put a fixed size on it to keep the floated divs in place. The right way to do that would probably be min-width but IE doesn't understand that.