WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [PROBLEM] CSS + Div + Center Positioning

Reply
  Thread Tools Display Modes
Old 26th February 11, 12:00 AM   #1
aZn
WLC Member
 
aZn's Avatar
 
Join Date: Feb 2011
Posts: 4
Default [PROBLEM] CSS + Div + Center Positioning

Hey,
may I introduce myself. I am a 17 years old guy who lives in Canada. (German citizen, PR in Canada). I visit grade 12 atm., and heading to my Computer Science Degree. My programming Skills are at the basics, pretty decent Design skills though IMHO. Pretty good knowledge about Computer itself, hardware, OS etc. But let's head to my Problem.

The Homepage:

www.xarsenx.de

The Code:
Code:
<html>
<head>
<title>Patrick 'aZn' Ullrich</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>

body
	{
	min-width: 960px;
	text-align: center;
	}
	
div#background
	{
	width: 100%;
	height: 100%;
	background-image: url(images/paddern.jpg);
	z-index: 1;
	}
	
div#center
	{
	margin: 0 auto;
	width: 960px;
	text-align: left;
	}
	
div#header
	{
	position: absolute; top: 0px; width: 960px; height: 193px;
	background-image: url(images/header.gif);
	z-index: 2;
	}

div#wrapper
	{
	background-image: url(images/layout.png);
	z-index: 3;
	}

div#menu
	{
	position: absolute; top: 193px; left: 0px; width: 100%; height: 47px; 
	background-image: url(images/paddern-navi.jpg);
	z-index: 4;
	}
	
	
<!--Menu-Buttons-->
div.about
	{
	position: absolute; top: 193px; 
	z-index: 5;
	}
	
div.works
	{
	position: absolute; top: 193px;
	z-index: 5;
	}
	
div.gallery
	{
	postion: absolute; top: 193px;
	z-index: 5;
	}
	
div.guestbook
	{
	position: absolute; top: 193px;
	z-index: 5;
	}
		
</style>

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">


<div id="background"> 		
	<div id="center">
		<div id="header">
		</div>
		<div id="wrapper">
		</div>
		<div id="menu">
		</div>						

<div class="about">
	<a href="/index.html">
    <img src="images/about.gif" 
    onMouseOver="this.src='images/about-ro.jpg'"
    onMouseOut="this.src='images/about.gif'"
    width="100" height="40" border="0" alt="aboutme">
    </a>
</div>

<div class="works">
	<a href="/works.html">
    <img src="images/works.gif"
    onMouseOver="this.src='images/works-ro.jpg'"
    onMouseOut="this.src='images/works.gif'"
    width="101" height="40" border="0" alt="myworks">
    </a>
</div>

<div class="gallery">
	<a href="/gallery.html">
    <img src="images/gallery.gif"
    onMouseOver="this.src='images/gallery-ro.jpg'"
    onMouseOut="this.src='images/gallery.gif'"
    width="100" height="40" border="0" alt="mygallery">
    </a>
</div>

<div class="guestbook">
	<a href="/guestbook.html">
    <img src="images/guestbook.gif"
    onMouseOver="this.src='images/guestbook-ro.jpg'"
    onMouseOut="this.src='images/guestbook.gif'"
    width="126" height="40" border="0" alt="myguestbook">
    </a>
</div>

</div> <!--End of div#center-->
</div> <!--End of div#background-->

   
</body>

</html>
The Problem:
There were a lot of problems but I got it down to one problem which should be theoretically solvable.
I designed the Page in Photoshop, sliced it and created the index.html.

The Code should be self-explanatory. You may will notice that there are actually 4 Buttons (About/Works/Gallery/Guestbook), though you see only 1.

To get to the point:
I want to position About / Works / Gallery / Guestbook - Centered + xx px Positioned.

I hope you understand what I mean by looking at the Source Code. (My English is not too well and I don't really know how to explain it proper.)

I tried to change:
div.about
{
position: absolute; top: 193px;
z-index: 5;
}
TO
div.about
{
position: absolute; top: 193px; left: xxpx;
z-index: 5;
}

Which didn't succeed, because it now position it xx px from the left border. (Which I understand but don't want. Laughing out loud)

I want that both Attributes effect the Buttons.

My Theory is that i should do:
-Class: div.center
{
margin: 0 auto;
width: 960px;
text-align: left;
}
-Element "Button1" of Class "center"
{
position: absolute; top: 193px; left: xx px;
z-index: 5;
}

-> Resulting to Element Position Centered + xx px


I hope I could make my self and my problem understandable.
Thanks for spend your time on my problem.

greetz
aZn
aZn is offline   Reply With Quote
Old 26th February 11, 01:45 AM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: [PROBLEM] CSS + Div + Center Positioning

Okay, stop using positioning for this, it isn't the proper way.

To get the buttons side by side float them all left. Then use margins to space them out how you want them.

If you want them centered, you can either do the math of buttonWidth*4+buttonMargin*4 or you can use centered widthless floats (Compliments of user Rayzur) by studying the code and duplicating it for your situation.

Also, you may find this post of interest: http://welovecss.com/showthread.php?t=5920
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 26th February 11, 05:55 PM   #3
LearningCoder
WLC Lover
 
LearningCoder's Avatar
 
Join Date: Jan 2011
Location: England
Posts: 115
Default Re: [PROBLEM] CSS + Div + Center Positioning

You could put the buttons in a div and set the div to have the left and right margins set at auto, which will put the div into the center of the page. To align your buttons into the center, and like meesa said, you could float the images left, setting the right (or left) margins on the buttons. Not to mention the margins on the two outter buttons in relation to your div. Hope this helps.
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
LearningCoder is offline   Reply With Quote
Old 26th February 11, 06:13 PM   #4
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: [PROBLEM] CSS + Div + Center Positioning

Keep in mind though that margin:auto only works to center something when the element also has a set width.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 26th February 11, 09:37 PM   #5
aZn
WLC Member
 
aZn's Avatar
 
Join Date: Feb 2011
Posts: 4
Default Re: [PROBLEM] CSS + Div + Center Positioning

Thank you very much, both answers helped me a lot.

The Page:
http://www.xarsenx.de

Links I used:
The 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">
<html>
<head>
<title>Patrick 'aZn' Ullrich</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>

body
	{
	background-image: url(images/paddern.jpg);
	text-align:center;
	width: 100%;
	overflow-x: hidden;
	}
		
div#header
	{
	text-align: left;
	width: 960px;
	height: 193px;
	margin: 0px auto;
	background-image: url(images/header.gif);
	}

#navicontain
	{
	background-image: url(images/paddern-navi.jpg);
	width: 100%;
	heigth: 46px; 
	float: left;
	position: relative;
	}

ul#navi
	{
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	position: relative;
	left: 37.5%;
	}

ul#navi .about
	{
	float: left;
	}
	
ul#navi .works
	{
	float: left;
	}

	
ul#navi .gallery
	{	
	float: left;
	}
	
ul#navi .guestbook
	{
	float: left;
	}

.clearboth 
	{ 
	clear: both; 
	}
		
</style>

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="header">
</div>
<div id="navicontain">
<ul id="navi">
<li class="about">
	<a href="/index.html">
    <img src="images/about.gif"
    onMouseOver="this.src='images/about-ro.gif'"
    onMouseOut="this.src='images/about.gif'"
    width="103" height="41" border="0" alt="myabout">
    </a>
</li>

<li class="works">
	<a href="/works.html">
    <img src="images/works.gif"
    onMouseOver="this.src='images/works-ro.gif'"
    onMouseOut="this.src='images/works.gif'"
    width="102" height="41" border="0" alt="myworks">
    </a>
</li>

<li class="gallery">
	<a href="/gallery.html">
    <img src="images/gallery.gif"
    onMouseOver="this.src='images/gallery-ro.gif'"
    onMouseOut="this.src='images/gallery.gif'"
    width="102" height="41" border="0" alt="mygallery">
    </a>
</li>

<li class="guestbook">
	<a href="/guestbook.html">
    <img src="images/guestbook.gif"
    onMouseOver="this.src='images/guestbook-ro.gif'"
    onMouseOut="this.src='images/guestbook.gif'"
    width="129" height="41" border="0" alt="myguestbook">
    </a>
</li>
</ul>
</div>


</body>

</html>
However in FF on Desktop Resolution 1920x1080, there is all the time a Scroll-bar on the bottom? (Not in IE though), any Idea how to get rid of that?

Besides that, I am wondering if the way i chose is the "best" way or should I try something else?

greetz
aZn
Edit: For study purposes I tried LearningCoders' way, however I ended up using floats again to position the Navi-Buttons next to each other in the div. Resolute to pretty much the same amount of Code. Both works.

Last edited by aZn; 26th February 11 at 09:53 PM.
aZn is offline   Reply With Quote
Old 26th February 11, 09:47 PM   #6
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: [PROBLEM] CSS + Div + Center Positioning

Well, first off, you can only have one unique ID per page, so having the id="navi" on two elements in illegal.

Second, to get rid of that issue, give the body a set width, and set overflow-x:hidden. (If you want, you can give the body a width of 100% and the overflow-x:hidden; and it should take care of the issue)
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 26th February 11, 09:55 PM   #7
aZn
WLC Member
 
aZn's Avatar
 
Join Date: Feb 2011
Posts: 4
Default Re: [PROBLEM] CSS + Div + Center Positioning

Edited the Code:

- Changed div which contains the navi from id="navi" to id="navicontain" (HTML/CSS)

- Added to style:
Code:
body
	{
	background-image: url(images/paddern.jpg);
	text-align:center;
	width: 100%;
	overflow-x: hidden;
	}
Which solved my problem. Thanks
aZn is offline   Reply With Quote
Old 26th February 11, 10:00 PM   #8
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: [PROBLEM] CSS + Div + Center Positioning

For the record, it doesn't look right in IE7 or IE8, I'd suggest you validate your page, that may help.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 26th February 11, 10:02 PM   #9
aZn
WLC Member
 
aZn's Avatar
 
Join Date: Feb 2011
Posts: 4
Default Re: [PROBLEM] CSS + Div + Center Positioning

Quote:
Originally Posted by meesa View Post
For the record, it doesn't look right in IE7 or IE8, I'd suggest you validate your page, that may help.
I worked all the time local and didn't uploaded the new files, just did though. Should be fine now.
aZn is offline   Reply With Quote
Old 26th February 11, 10:04 PM   #10
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: [PROBLEM] CSS + Div + Center Positioning

Ahh, okay. It's good on my side now as well.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

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 On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:39 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.