Using CSS Styling, for first time... (putting custom border around outside)

mitchell7man · 04-07-2009, 12:22 PM

Okay, so i'm working on a website and trying to use CSS styling to accomplish this, now I'm fairly new to using css styling so i' need some help, anyhow, this is my html code

Code:

<!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>Al-Hashmi Group</title>
<link href="mjmxdesing-styling2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:180px;
	top:62px;
	width:872px;
	height:677px;
	z-index:1;
}
-->
</style>
</head>
<body>
<div id="borderoutline">

<div id="innerbordertwo">
<div id="banner"></div>
  <div align="left"></div>
</div>

<div id="topleftb" z-index: "1">
  <div id="horizontal" z-index: "1"> <div id="topright" z-index: "1"> </div> </div>
</div>
<div id="verticalb" z-index: "1">

  <div id="innerborder" z-index: "1">


  <div id="verticalbright" z-index: "1"></div>
</div>
</div>
<div id="bottomleftb" z-index: "1">
<div id="horizontal" z-index: "1"> <div id="bottomright" z-index: "1"> </div> </div>
</div>
</div>
</div>
</body>
</html>

And here is my .CSS code

Code:

@charset "utf-8";
/* CSS Document */

body {background:url(pics/backgroundmain.jpg) 
repeat;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
margin:0;
text-align:center;
}

#borderoutline {background:none
height:1000px;
width:1000px;
position:relative;
margin-left:auto;
margin-right:auto;
padding:inherit;
text-aligin:left;
overflow:hidden;
}

#innerborder
{height:680px;
width:940px;
position:relative;
float:left;
overflow:hidden;
margin-left:60px;
z-index: -1
}

#innerbordertwo
{
	height:680px;
	width:880px;
	position:absolute;
	float:left;
	overflow:hidden;
	margin-left:60px;
	z-index: 1;
	left: 3px;
	top: 61px;
}


#verticalb  {background:url(pics/vericalborder.jpg)
repeat-y;
width:60px;
height:680px;
position:relative;
}

#verticalbright  {background:url(pics/vericalborder.jpg)
repeat-y;
width:60px;
height:680px;
position:relative;
float:right;
text-align:left;
z-index: -1;
}



#topleftb {background:url(pics/topleftborder.jpg) no-repeat;
height:60px;
width:60px;
position:relative;
}

#bottomleftb {background:url(pics/bottomleftborder.jpg) no-repeat;
height:60px;
width:60px;
position:relative;
}

#horizontal {background:url(pics/borderhorizontal.jpg) repeat-x;
height:60px;
width:940px;
margin-left:60px;
margin-right:60px;
position:relative;
}





#topright
{
	background:url(pics/toprightborder.jpg)
no-repeat;
	height:60px;
	width:60px;
	position:relative;
	float:right;
}

#bottomright
{background:url(pics/bottomrightborder.jpg)
no-repeat;
height:60px;
width:60px;
position:relative;
float:right;
}


#banner
{background:url(pics/banner.jpg)
no-repeat;
height:150px;
width:880;
position:relative;
}

What I am trying to do is wrap a border around the page, have a div in the center with a div at top with banner and left with navigation.
Like i drew out below.

http://mjmxdesign.com/images/image.jpg

Now, i'm running a demo of the site off of http://alhashmi.mjmxdesign.com/page1.html
The problem is that it displays incorrectly in IE7 - mozilla seems to read it fine. So, I need to know of an easier or alternative method to do this that works, or some help fixing up the code. I'm just having a hard time layering this up correctly, anyhow, any help that can be offered would be greatly appreciated.

Thanks,
MJ

mitchell7man · 04-07-2009, 05:54 PM

Hmmm, no takers? - Well i guess the question is, how can i make divs on top of each other? - or make this work!! Gaaaah.

Well thanks if you can help me

jlinkels · 04-07-2009, 06:27 PM

Don't be surprised if your page look different in the MS browsers. There are "standard compliant" browsers like Firefox, Mozilla, Opera, and those which are not, i.e. IE6 and IE7. IE8 seems to be compliant and users are complaining because all script kiddies in the world write IE6 and IE7 compliant code without knowing it is different.

Complete books have been written about how to write CSS code which is partially ignored by IE but understood by Mozilla and the other way around so you can cheat. There are so many cases and examples, Google is your friend here.

I can't dive into your code right now, but the best way to do overlapping DIVs is by positioning them absolute instead of relative. All other variants try to tile the DIVs in certain ways. Absolute works fairly in all browsers but it is pixel calculation hell.

I haven't seen z-index before, check w3c.org to see if IE understands it.

jlinkels

mitchell7man · 04-08-2009, 01:57 PM

Hmm, i'll have to look more into that, but my problem is that I do need the site to be viewable in IE, considering that so many people use it. - If I use position absolute, how do I ensure that the page would be centered on different screen resolutions?

-If I have a relative frame centered, (margin left right top bottom - as auto) and absolute frames inside, will they align inside of the main frame? - I'm not sure if i make sense. Anyway, any help you can offer I will appreciate... -- or if I have absolute frame is there such thing as outo margining it into the center?

Thanks,
MJ

jlinkels · 04-08-2009, 06:41 PM

OK, I got a wrong understanding what you meant with "overlapping". As long as you place one DIV inside the other, you are fine, and you can stack as many DIV on top of each other as you like, as long as the parent DIV fully encloses the child DIV.

Now there are few errors in your style definition. Those are treated differently by various browsers. Some ignore the errors, some ignore the entire class or id.
For example:

Code:

text-aligin:left;
<div id="topleftb" z-index: "1">

In addition, you might want to indent your DIVs so it becomes clear what the structure is, what is placed inside what:

Code:

<div id="borderoutline">
	<div id="innerbordertwo">
		<div id="banner">
                </div>
  		<div align="left">
                </div>
	</div>

	<div id="topleftb" >
  		<div id="horizontal" >
			<div id="topright" > 
			</div> 
		</div>
	</div>
	<div id="verticalb" >
	  	<div id="innerborder" >
         		<div id="verticalbright" >
	                </div>
                </div>
        </div>
</div>

Then, the next step is to put a thin border around ALL your DIVs so you can see what you are doing. Leave the DIV empty except for a string which writes the class or id name of the DIV so you can see what is what.

Then put in one single DIV at a time in your code and view it in various browsers. Usually you only need 3 or 4 or so, you'll get the hang of what browsers display equally.

Lat but not least, take into account that IE counts the OUTSIDE dimensions of a DIV, that is including margins and borders, while others count the inside of a DIV and add borderwidth and margins to that. If you try to float two DIVs in a parent DIV using exact dimensions, you'll see awkward differences in the two browsers.

This is a good web site to learn and experiment with CSS: http://w3schools.com/

Debugging complicated pages like yours usually take me a day. So hopefully I gave you some pointers to get you underway.

jlinkels

pg99 · 04-09-2009, 03:13 AM

If you're trying to get things right on IE, the IE Developer Toolbar really helps
http://www.microsoft.com/downloads/d...displaylang=en

it allows you to examine the DOM, see what styles are being applied and change them temporarily to see the affect.

Personally I would just use tables, but then I'm old-fashioned :-)

jlinkels · 04-09-2009, 07:10 PM

Quote:

Originally Posted by pg99

Personally I would just use tables, but then I'm old-fashioned :-)

I don't think it has something to do with old fashioned. Depends on you presentation needs. I have written quite a few tabular overviews using tables, and I am still figuring out how to get it all right in all browsers.

For a simple 3-column overview where all layout is right as long as it contains all data, there is no problem. But if you want to put a lot of data in a confined space and you want exact alignment, no columns getting squeezed to 10 pixels etc, using DIVs inside cells, it is difficult.

Eventually I ended up with writing my CSS in PHP, taking into account all IE6 quirks in effect for my page. Now it looks right down to the pixel in all browsers. But it was hard.

jlinkels

mitchell7man · 04-11-2009, 08:03 PM

Using absolute position, solved the problem

- Thanks dreamweaver for doing the pixel calculations!!

Thanks for your help,