LinuxQuestions.org
Review your favorite Linux distribution.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices

Reply
 
Search this Thread
Old 04-07-2009, 12:22 PM   #1
mitchell7man
Member
 
Registered: Jan 2007
Location: Provo, UT
Distribution: OSX - Fedora
Posts: 458

Rep: Reputation: 31
Using CSS Styling, for first time... (putting custom border around outside)


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

Last edited by mitchell7man; 04-07-2009 at 12:24 PM.
 
Old 04-07-2009, 05:54 PM   #2
mitchell7man
Member
 
Registered: Jan 2007
Location: Provo, UT
Distribution: OSX - Fedora
Posts: 458

Original Poster
Rep: Reputation: 31
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
 
Old 04-07-2009, 06:27 PM   #3
jlinkels
Senior Member
 
Registered: Oct 2003
Location: Bonaire
Distribution: Debian Lenny/Squeeze/Wheezy/Sid
Posts: 4,160

Rep: Reputation: 504Reputation: 504Reputation: 504Reputation: 504Reputation: 504Reputation: 504
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
 
Old 04-08-2009, 01:57 PM   #4
mitchell7man
Member
 
Registered: Jan 2007
Location: Provo, UT
Distribution: OSX - Fedora
Posts: 458

Original Poster
Rep: Reputation: 31
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
 
Old 04-08-2009, 06:41 PM   #5
jlinkels
Senior Member
 
Registered: Oct 2003
Location: Bonaire
Distribution: Debian Lenny/Squeeze/Wheezy/Sid
Posts: 4,160

Rep: Reputation: 504Reputation: 504Reputation: 504Reputation: 504Reputation: 504Reputation: 504
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
 
Old 04-09-2009, 03:13 AM   #6
pg99
Member
 
Registered: May 2008
Location: UK
Distribution: Slackware
Posts: 73

Rep: Reputation: 18
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 :-)
 
Old 04-09-2009, 07:10 PM   #7
jlinkels
Senior Member
 
Registered: Oct 2003
Location: Bonaire
Distribution: Debian Lenny/Squeeze/Wheezy/Sid
Posts: 4,160

Rep: Reputation: 504Reputation: 504Reputation: 504Reputation: 504Reputation: 504Reputation: 504
Quote:
Originally Posted by pg99 View Post
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
 
Old 04-11-2009, 08:03 PM   #8
mitchell7man
Member
 
Registered: Jan 2007
Location: Provo, UT
Distribution: OSX - Fedora
Posts: 458

Original Poster
Rep: Reputation: 31
Using absolute position, solved the problem - Thanks dreamweaver for doing the pixel calculations!!


Thanks for your help,
 
  


Reply

Tags
css, design, help, html, web


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS - Is there a way to put several lines of HTML into one line using CSS? Chronothread Programming 12 01-05-2011 06:06 AM
Custom CSS Hitboxx LQ Suggestions & Feedback 2 10-04-2008 06:50 PM
LXer: Serving and styling maps with Geoserver LXer Syndicated Linux News 0 09-25-2008 03:30 AM
HTML/CSS/JS: Problem with <p> not having an absolute position with CSS. RHLinuxGUY Programming 7 03-03-2007 12:21 AM
I'm styling man tearinox Linux - Newbie 1 10-16-2003 11:19 PM


All times are GMT -5. The time now is 11:32 PM.

Main Menu
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
identi.ca: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration