...

View Full Version : Tab could not go to center and position affected when window size adjusted..



chunzai
12-29-2009, 09:11 AM
Good days all my friend,
first of all i would like to apologize coz im going to paste a bunch of codes here..
The code below would create few tabs in my screen..


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example 5: Sliding Doors of CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
background:#fff;
margin:0;
padding:0;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
} html>body {font-size:small;}

#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal%;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#header a:hover {
color:#333;
}
#header #current {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
color:#333;
padding-bottom:5px;
}
</style>

<script language="javascript">

var newImage = "url(left.gif)";
var newImage2= "url(right.gif)";
var oldImage = "url(left_on.gif)";
var oldImage2= "url(right_on.gif)";

function alo(tabId,anchorId){

defaultValue();
document.getElementById("second").style.color = "#765";
document.getElementById("first").style.color = "#333";
document.getElementById(anchorId).style.background Image = oldImage2;
document.getElementById(tabId).style.backgroundIma ge = oldImage;


}

</script>
</head>

<body>

<div id="header">
<ul>
<li id="home"><a href="#" id="first">Home</a></li>
<li id="news"><a href="#" id="second">News</a></li>
<li id="product"><a href="#" id="third">Products</a></li>
<li id="about"><a href="#" id="forth">About</a></li>
<li id="contact"><a href="#" id="fifth">Contact</a></li>
</ul>
</div>



</body>
</html>



Here's the problem.. the tab was align to right side and i couldnt make it come to center..i try to change the padding in CSS and i make it..but when i minimize the screen or adjust the screen to smaller size, the tab from a horizontal line to vertical line..can someone help me to modify the CSS so i could make it align to center and would not affected the tab when i adjust the screen size...
thanks..

Excavator
12-29-2009, 09:38 AM
Hello chunzai,
Does this work for you?
#header {
/*float:left;*/
width:100%;
background:#DAE0D2 url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal%;
position: relative;
overflow: auto;
}
#header ul {
margin:0;
padding:10px 0 0;
list-style:none;
position: relative;
float: left;
left: 50%; }
#header li {
float:left;
right: 50%;
position: relative;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}

chunzai
12-30-2009, 03:19 AM
thx for your reply Excavator,
i do change as you mention as above..
the tab do move but not at middle of the page..
somemore when i minimize or adjust the screen to smaller,
the <div> appear scroll bar..

Excavator
12-30-2009, 03:38 AM
Here's an example menu that is positioned that way - http://nopeople.com/CSS/menu-h_centered-ul/index.html

It's a handy method of positioning unknown widths.
It may be easier to give your menu a width and center it with margin: 0 auto;

/edit/ I just tried it again and it works well in FF3.5, IE8 and IE7 - maybe I didn't give you all the changes in that little snippet I provided.
Have a look at the entire code -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example 5: Sliding Doors of CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
background:#fff;
margin:0;
padding:0;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
}
html>body {font-size:small;}

#header {
background:#DAE0D2 url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal%;
overflow: hidden;
position: relative;
}
#header ul {
float: left;
position: relative;
left: 50%;
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
position: relative;
right: 50%;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#header a:hover {
color:#333;
}
#header #current {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
color:#333;
padding-bottom:5px;
}
#centered {
width: 70px;
margin: 10px auto;
background: #ccc;
text-align: center;
}

</style>

<script language="javascript">

var newImage = "url(left.gif)";
var newImage2= "url(right.gif)";
var oldImage = "url(left_on.gif)";
var oldImage2= "url(right_on.gif)";

function alo(tabId,anchorId){

defaultValue();
document.getElementById("second").style.color = "#765";
document.getElementById("first").style.color = "#333";
document.getElementById(anchorId).style.background Image = oldImage2;
document.getElementById(tabId).style.backgroundIma ge = oldImage;


}

</script>
</head>

<body>

<div id="header">
<ul>
<li id="home"><a href="#" id="first">Home</a></li>
<li id="news"><a href="#" id="second">News</a></li>
<li id="product"><a href="#" id="third">Products</a></li>
<li id="about"><a href="#" id="forth">About</a></li>
<li id="contact"><a href="#" id="fifth">Contact</a></li>
</ul>
</div>
<div id="centered">one two</div>

chunzai
12-30-2009, 08:45 AM
Hi again Excavator,
thanks for replying me..
it works and success align the menu to center..
but when i adjusted the window..
the tab from 1 row bcome 2 roles..
izzit anyway can let scroll bar appear at btm of window when i make the window smaller??

Excavator
12-30-2009, 09:34 AM
Give #header ul a set width and center it with margin: 0 auto;
When the browser is narrowed past the width you put on the ul you will get a scrollbar instead of rearranging the floats.

chunzai
12-31-2009, 02:05 AM
Hi Excavator,
i know it really disturbing you..
i would like to apologize..
i had added as u said margin: 0 auto; into header of ul but it seem still not work as what i want..
the tab stil bcome 3 line once i adjust the window to smallest size..

Excavator
12-31-2009, 02:12 AM
No worries chunzai, I'm happy to help.
If you are still experiencing float drop when you narrow the browser window your menu must not be getting a set width somehow.
Can you post the most recent version of your code?

chunzai
01-07-2010, 06:15 AM
Hi Excavator..
sorry for a really late reply..
i have been outstation so could not really come to my post..
here is my latest code after modified from your advise..



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example 5: Sliding Doors of CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
background:#fff;
margin:0;
padding:0;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
}
html>body {font-size:small;}

#header {
background:#DAE0D2 url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal%;
overflow: hidden;
position: relative;
}
#header ul {
margin: 0 auto;

float: left;
position: relative;
left: 50%;
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
position: relative;
right: 50%;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#header a:hover {
color:#333;
}
#header #current {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
color:#333;
padding-bottom:5px;
}
#centered {
width: 70px;
margin: 10px auto;
background: #ccc;
text-align: center;
}

</style>

<script language="javascript" type="text/javascript">

var newImage = "url(left.gif)";
var newImage2= "url(right.gif)";
var oldImage = "url(left_on.gif)";
var oldImage2= "url(right_on.gif)";

function alo(tabId,anchorId){

defaultValue();
document.getElementById("second").style.color = "#765";
document.getElementById("first").style.color = "#333";
document.getElementById(anchorId).style.backgroundImage = oldImage2;
document.getElementById(tabId).style.backgroundImage = oldImage;


}

</script>
</head>

<body>

<div id="header">
<ul>
<li id="home"><a href="#" id="first">Home</a></li>
<li id="news"><a href="#" id="second">News</a></li>
<li id="product"><a href="#" id="third">Products</a></li>
<li id="about"><a href="#" id="forth">About</a></li>
<li id="contact"><a href="#" id="fifth">Contact</a></li>
</ul>
</div>
<div id="centered">one two</div>

</body>
</html>

Excavator
01-07-2010, 07:45 AM
In that code you just posted, set a width on the ul. That will stop the float drop.
Make your CSS look like this -

#header ul {
width: 369px;
margin: 0 auto;
padding:10px 10px 0;
list-style:none;
overflow: auto;
}
#header li {
float:left;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}

chunzai
01-08-2010, 04:08 AM
thanks alot..it works perfectly!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum