PDA

View Full Version : Need some help with Css



Elements
Aug 24th, 2009, 11:02 PM
First of all, I'm new to these forums :) .

I didnt studied any web coding so its just a hobbie.I'm building this website and I would like to use only div tags.

The problem is that the banner, the top navigation bar and the side navigation bar worked well with div tags, but everthing else after the side navigation bar, the content of the div tags are not visible.

I was told that the problem is from CSS not from php.

Here is the php coding (I know its a little messy) :

<!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>Wallpaper Heaven - Home</title>
<link href="CSS.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:252px;
top:196px;
width:282px;
height:190px;
z-index:1;
background-image: url(images/image_22.gif);
background-repeat: no-repeat;
background-position: left top;
clear: left;
float: left;
}
-->
</style>
</head>
<body onload="MM_preloadImages('images/Side Nav Bar Over/image_16.gif','images/Side Nav Bar Over/image_18.gif','images/Side Nav Bar Over/image_26.gif','images/Side Nav Bar Over/image_28.gif','images/Side Nav Bar Over/image_30.gif','images/Side Nav Bar Over/image_32.gif','images/Side Nav Bar Over/image_34.gif','images/Side Nav Bar Over/image_38.gif','images/Side Nav Bar Over/image_40.gif','images/Side Nav Bar Over/image_42.gif','images/Side Nav Bar Over/image_44.gif','images/Side Nav Bar Over/image_46.gif','images/Side Nav Bar Over/image_48.gif','images/Side Nav Bar Over/image_50.gif','images/Side Nav Bar Over/image_52.gif','images/Side Nav Bar Over/image_54.gif','images/Side Nav Bar Over/image_56.gif')">
<div align="center" class="Banner">
<div id="Logo"></div>
<div id="BannerGFX"></div>
<div id="Login"></div>
<div id="Search"></div>
</div>

<div class="NavBar">
<div id="Left"></div>
<div id="Top"></div>
<div id="Right"></div>
<div id="Left2"></div>
<div id="HomeButton"></div>
<div id="NavbarSpacer"></div>
<div id="ContactButton"></div>
<div id="RightNavBar"></div>


<div id="TopBody"> </div>

<div class="Body" id="Sidenavbar">
<table>
<tr>
<td height="32"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','DigitalArt','images/Side Nav Bar Over/image_16.gif',1)" onmouseover="MM_nbGroup('over','DigitalArt','images/Side Nav Bar Over/image_16.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/Side Nav Bar Original/side_16.gif" alt="" name="DigitalArt" width="192" height="32" border="0" id="DigitalArt" /></a>
<a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer','',1)" onmouseover="MM_nbGroup('over','Spacer','','',1)" onmouseout="MM_nbGroup('out')"><img src="images/Side Nav Bar Over/image_17.gif" alt="" name="Spacer" width="192" height="2" border="0" id="Spacer" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Animation','images/Side Nav Bar Over/image_18.gif',1)" onmouseover="MM_nbGroup('over','Animation','images/Side Nav Bar Over/image_18.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/Side Nav Bar Original/side_18.gif" alt="" name="Animation" border="0" id="Animation" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer2','',1)" onmouseover="MM_nbGroup('over','Spacer2','','',1)" onmouseout="MM_nbGroup('out')"><img src="images/Side Nav Bar Over/image_17.gif" alt="" name="Spacer2" width="192" height="2" border="0" id="Spacer2" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Animals','images/Side Nav Bar Over/image_26.gif',1)" onmouseover="MM_nbGroup('over','Animals','images/Side Nav Bar Over/image_26.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/Side Nav Bar Original/side_26.gif" alt="" name="Animals" width="192" height="32" border="0" id="Animals" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer4','',1)" onmouseover="MM_nbGroup('over','Spacer4','','',1)" onmouseout="MM_nbGroup('out')"><img src="images/Side Nav Bar Original/side_17.gif" alt="" name="Spacer4" width="192" height="2" border="0" id="Spacer4" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Cartoons','images/Side Nav Bar Over/image_28.gif',1)" onmouseover="MM_nbGroup('over','Cartoons','images/Side Nav Bar Over/image_28.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/Side Nav Bar Original/side_28.gif" alt="" name="Cartoons" width="192" height="32" border="0" id="Cartoons" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer3','',1)" onmouseover="MM_nbGroup('over','Spacer3','','',1)" onmouseout="MM_nbGroup('out')"><img src="images/Side Nav Bar Original/side_17.gif" alt="" name="Spacer3" width="192" height="2" border="0" id="Spacer3" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Computers','images/Side Nav Bar Over/image_30.gif',1)" onmouseover="MM_nbGroup('over','Computers','images/Side Nav Bar Over/image_30.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Computers" src="images/Side Nav Bar Original/side_30.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer5','',1)" onmouseover="MM_nbGroup('over','Spacer5','','',1)" onmouseout="MM_nbGroup('out')"><img name="Spacer5" src="images/Side Nav Bar Original/side_17.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Female','images/Side Nav Bar Over/image_32.gif',1)" onmouseover="MM_nbGroup('over','Female','images/Side Nav Bar Over/image_32.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Female" src="images/Side Nav Bar Original/side_32.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer6','',1)" onmouseover="MM_nbGroup('over','Spacer6','','',1)" onmouseout="MM_nbGroup('out')"><img name="Spacer6" src="images/Side Nav Bar Over/image_17.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Games','images/Side Nav Bar Over/image_34.gif',1)" onmouseover="MM_nbGroup('over','Games','images/Side Nav Bar Over/image_34.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Games" src="images/Side Nav Bar Original/side_34.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer7','',1)" onmouseover="MM_nbGroup('over','Spacer7','','',1)" onmouseout="MM_nbGroup('out')"><img name="Spacer7" src="images/Side Nav Bar Original/side_17.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Holiday','images/Side Nav Bar Over/image_38.gif',1)" onmouseover="MM_nbGroup('over','Holiday','images/Side Nav Bar Over/image_38.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Holiday" src="images/Side Nav Bar Original/side_38.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer8','',1)" onmouseover="MM_nbGroup('over','Spacer8','','',1)" onmouseout="MM_nbGroup('out')"><img name="Spacer8" src="images/Side Nav Bar Over/image_17.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Landscape','images/Side Nav Bar Over/image_40.gif',1)" onmouseover="MM_nbGroup('over','Landscape','images/Side Nav Bar Over/image_40.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Landscape" src="images/Side Nav Bar Original/side_40.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer9','',1)" onmouseover="MM_nbGroup('over','Spacer9','','',1)" onmouseout="MM_nbGroup('out')"><img name="Spacer9" src="images/Side Nav Bar Original/side_17.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Military','images/Side Nav Bar Over/image_42.gif',1)" onmouseover="MM_nbGroup('over','Military','images/Side Nav Bar Over/image_42.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Military" src="images/Side Nav Bar Original/side_42.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer10','',1)" onmouseover="MM_nbGroup('over','Spacer10','','',1)" onmouseout="MM_nbGroup('out')"><img name="Spacer10" src="images/Side Nav Bar Over/image_17.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Misc','images/Side Nav Bar Over/image_44.gif',1)" onmouseover="MM_nbGroup('over','Misc','images/Side Nav Bar Over/image_44.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Misc" src="images/Side Nav Bar Original/side_44.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer11','',1)" onmouseover="MM_nbGroup('over','Spacer11','','',1)" onmouseout="MM_nbGroup('out')"><img name="Spacer11" src="images/Side Nav Bar Original/side_17.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Movies','images/Side Nav Bar Over/image_46.gif',1)" onmouseover="MM_nbGroup('over','Movies','images/Side Nav Bar Over/image_46.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Movies" src="images/Side Nav Bar Original/side_46.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer12','',1)" onmouseover="MM_nbGroup('over','Spacer12','','',1)" onmouseout="MM_nbGroup('out')"><img name="Spacer12" src="images/Side Nav Bar Over/image_17.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Music','images/Side Nav Bar Over/image_48.gif',1)" onmouseover="MM_nbGroup('over','Music','images/Side Nav Bar Over/image_48.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Music" src="images/Side Nav Bar Original/side_48.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer13','',1)" onmouseover="MM_nbGroup('over','Spacer13','','',1)" onmouseout="MM_nbGroup('out')"><img name="Spacer13" src="images/Side Nav Bar Original/side_17.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Photography','images/Side Nav Bar Over/image_50.gif',1)" onmouseover="MM_nbGroup('over','Photography','images/Side Nav Bar Over/image_50.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Photography" src="images/Side Nav Bar Original/side_50.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer14','',1)" onmouseover="MM_nbGroup('over','Spacer14','','',1)" onmouseout="MM_nbGroup('out')"><img name="Spacer14" src="images/Side Nav Bar Over/image_17.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Space','images/Side Nav Bar Over/image_52.gif',1)" onmouseover="MM_nbGroup('over','Space','images/Side Nav Bar Over/image_52.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Space" src="images/Side Nav Bar Original/side_52.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer15','',1)" onmouseover="MM_nbGroup('over','Spacer15','','',1)" onmouseout="MM_nbGroup('out')"><img name="Spacer15" src="images/Side Nav Bar Original/side_17.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Sports','images/Side Nav Bar Over/image_54.gif',1)" onmouseover="MM_nbGroup('over','Sports','images/Side Nav Bar Over/image_54.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Sports" src="images/Side Nav Bar Original/side_54.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Spacer16','',1)" onmouseover="MM_nbGroup('over','Spacer16','','',1)" onmouseout="MM_nbGroup('out')"><img name="Spacer16" src="images/Side Nav Bar Over/image_17.gif" border="0" alt="" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Vehicles','images/Side Nav Bar Over/image_56.gif',1)" onmouseover="MM_nbGroup('over','Vehicles','images/Side Nav Bar Over/image_56.gif','',1)" onmouseout="MM_nbGroup('out')"><img name="Vehicles" src="images/Side Nav Bar Original/side_56.gif" border="0" alt="" onload="" /></a>
</td>
</tr>
</table>
</div>
<div id="LeftSpacer"></div>
<div id="Sample1"></div>
</div>


</body>
</html>

And the Css coding :

.Banner {
width: 990px;
height: 79px;
margin:0 auto;
}
#Logo {
background-image: url(images/image_01.gif);
background-repeat: no-repeat;
background-position: left top;
height: 79px;
width: 128px;
clear: left;
float: left;
}
#BannerGFX {
background-image: url(images/image_02.gif);
background-repeat: no-repeat;
background-position: left top;
height: 79px;
width: 636px;
clear: right;
float: left;
}
#Login {
background-image: url(images/image_03.gif);
background-repeat: no-repeat;
background-position: left top;
clear: right;
float: left;
height: 55px;
width: 226px;
}
#Search {
background-image: url(images/image_04.gif);
background-repeat: no-repeat;
background-position: right top;
clear: right;
float: right;
height: 24px;
width: 226px;
}
.NavBar {
width: 990px;
margin:0 auto;
}
#Left {
background-image: url(images/image_05.gif);
background-repeat: no-repeat;
background-position: left top;
height: 27px;
width: 46px;
clear: left;
float: left;
}
#Top {
background-image: url(images/image_06.gif);
background-repeat: no-repeat;
background-position: left top;
clear: right;
float: left;
height: 27px;
width: 204px;
}
#Right {
background-image: url(images/image_07.gif);
background-repeat: no-repeat;
background-position: left top;
clear: right;
float: left;
height: 27px;
width: 740px;
}
#HomeButton {
background-image: url(images/image_09.gif);
background-repeat: no-repeat;
clear: right;
float: left;
height: 45px;
width: 91px;
background-position: center top;
}
#Left2 {
background-image: url(images/image_08.gif);
background-repeat: no-repeat;
background-position: left top;
clear: left;
float: left;
height: 45px;
width: 46px;
}
#NavbarSpacer {
background-image: url(images/image_10.gif);
background-repeat: no-repeat;
background-position: left top;
clear: right;
float: left;
height: 45px;
width: 22px;
}
#ContactButton {
background-image: url(images/image_11.gif);
background-repeat: no-repeat;
background-position: left top;
clear: right;
float: left;
height: 45px;
width: 91px;
}
#RightNavBar {
background-image: url(images/image_12.gif);
background-repeat: no-repeat;
background-position: left top;
clear: right;
float: left;
height: 45px;
width: 740px;
}
.Body {
width: 190px;
clear: right;
float: left;
margin:0 auto;
}
#Top {
background-image: url(images/image_06.gif);
background-repeat: no-repeat;
background-position: left top;
clear: right;
float: left;
width: 204px;
margin:0 auto;
}
#TopBody {
background-image: url(images/image_13.gif);
background-repeat: no-repeat;
background-position: left top;
height: 28px;
width: 990px;
clear: left;
float: left;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;



}
#LeftSpacer {
background-repeat: no-repeat;
background-position: left top;
clear: left;
float: left;
height: auto;
width: auto;
background-image: url(images/image_21.gif);
}
#Sample {
background-repeat: no-repeat;
background-position: left top;
clear: right;
float: left;
height: 190px;
width: 797px;

}
#samples2 {
width: 797px;
}
#Copyright {
background-image: url(images/image_61.gif);
background-repeat: no-repeat;
background-position: left top;
clear: left;
float: left;
height: 198px;
width: 990px;
}
.Copyright {
width: 990px;
margin:0 auto;
}
.Sample {
height: 190px;
width: 800px;
margin:0 auto;
}
#leftspacer {
background-image: url(images/image_21.gif);
background-repeat: no-repeat;
background-position: left top;
clear: left;
float: left;
height: 190px;
width: 53px;
}
#spacerleft {
background-image: url(images/image_21.gif);
background-repeat: no-repeat;
background-position: left top;
height: 190px;
width: 53px;
}
#Sample1 {
background-image: url(images/image_22.gif);
background-repeat: no-repeat;
background-position: left top;
height: 190px;
width: 218px;
clear: left;
float: left;
margin: 0px;
}



Any help would be much appreciated
Elements

_Aerospace_Eng_
Aug 24th, 2009, 11:32 PM
I think you are going about this the wrong way. You are in the notion that you need spacers and things that you once did when using tables. Can you post a smaller version of how your design should look?

Elements
Aug 25th, 2009, 09:49 AM
This is how it should look

http://i29.tinypic.com/2m3012p.png

Note that the Gray boxes which are empty need to be with a picture like the "swirl" one.

I uploaded the files to a free web hosting for now, so you can see where I was able to finish.

My Website (rednblack.vndv.com)

Elements
Aug 25th, 2009, 04:25 PM
so what should I do now, so i can get that div tags content visible ?

Elements
Aug 26th, 2009, 11:27 PM
Can anyone help me pls :|

djm0219
Aug 26th, 2009, 11:34 PM
The page you loaded doesn't have any contents to display so it's not surprising that it's blank except for the navigation and header. Your boxes aren't there at all either.

Elements
Aug 27th, 2009, 12:15 AM
The page you loaded doesn't have any contents to display so it's not surprising that it's blank except for the navigation and header. Your boxes aren't there at all either.

So what do i need to do ?

Remake the class and ID with different names ?

djm0219
Aug 27th, 2009, 12:41 AM
Your content would go in the Sample1 div.


<div id="Sample1">
The content goes here.
</div>

Elements
Aug 27th, 2009, 11:31 AM
If you havent noticed every div id is empty. I left them empty because i was making the background image with CSS.I dont have to fill them.

As i am typing this post, I tried to fill the div id with blank spaces (by hitting the space bar) and removed them, now the CSS background is visible.

The problem now is the positioning. The side navigation is showing like the pic below in the design view of dreamweaver, so the navigation bar as it is, is not letting me to position the 2 div tags at the left top of the white screen (like the pic i posted before)

http://i27.tinypic.com/29oixag.jpg

Can you help me with that, please ?

I really appreciate what you are doing with me, thanks a lot

Elements
Aug 27th, 2009, 11:37 AM
Ok, messed around the float and clear and the positions are now as i need them.

Thanks again :)