...

View Full Version : Beginner..



Stephen
12-22-2005, 03:15 AM
Iíve just finished reading through css-p and beginning to get the grips of it. Anyway, Iím having a little trouble configuring for all browsers.

View the following page in ie or opera first and you will get an idea of what I want it to look like it all browsers, 'cause it looks funny in firefox. :( I also wanted to position the buttons in the centre of the middle column, and centre the middle column in the middle of the page, lol..

.click (http://www.xtopic.net/css)

Thanks for all your help.

_Aerospace_Eng_
12-22-2005, 03:27 AM
Try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title> Stephen Daly </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Stephen Daly" />
<style type="text/css">
body {
background: #e0e4e5 url(http://www.xtopic.net/css/images/background.gif) repeat-x;
margin: 0;
padding: 0;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

#container {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 720px;
}

#content {
background: #fff;
margin: 0;
padding: 0;
width: 650px;
height: 300px;
margin:auto;
}

#menu{
background: #f1f1f1;
width: 650px;
margin:auto;
}

#menu ul{
list-style: none;
margin: 0 auto;
padding:0;
width:420px; /*this is the width of your links plus the 5px left margin for each li*/
}

#menu ul li{
display: block;
float: left;
margin-top: 0;
margin-bottom: 0;
margin-left: 5px;
text-align: center;
}

* html #menu ul li { /*this is needed to fix IE double margin bug, floated element with right or left margin, margin gets doubled*/
display:inline;
}

#menu ul li a{
display: block;
text-decoration: none;
font: 10px verdana, arial, sans-serif;
color: #000;
width: 100px;
line-height: 20px;
border-bottom: none;
background: #fff;
}

#menu ul li a:hover{
background: #000;
color: #fff;
}

#menu ul li a.active{
background: #000;
color: #fff;
font-weight: bold;
}

#menu ul li a.active:hover{
background: #474747;
color: #fff;
}

.clear { /*this takes care of the extra height due to font-size and line-height*/
clear:both;
font-size:1px;
line-height:0px;
}
</style>
</head>

<body>
<!--XHTML IN HERE-->
<!--START DIV CONTAINER-->
<div id="container">
<!--START TOP-->
<div id="menu">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
<div class="clear">&nbsp;</div><!--You can't self close a div in XHTML-->
</div>
<!--START DIV CONTENT-->
<div id="content">Blah</div>
<!--END DIV CONTAINER-->
</div>
</body>
</html>
Looks the same in IE and FF now, should look okay in Opera as well. I added comments to try and explain things, if you have any questions about them just ask.

Stephen
12-22-2005, 03:41 AM
It looks perfect in all browsers, thanks for your quick reply and help! Much appreciated!! :)

You know if I add:


#menu ul li a:hover{
background: #000;
color: #fff;
height: 25px;

so on mouse over it expands, is it possible to to code it so it doesn't push the content div below it downwards?

Stephen
12-23-2005, 01:46 AM
I tried switching the divs around but it made the menu go below the content div, which I over looked. Any suggestions?

_Aerospace_Eng_
12-23-2005, 07:53 AM
What are you trying to achieve by making the height 25px? Right now it looks fine to me.

Stephen
12-23-2005, 09:09 PM
Oh, sorry. I wanted it so that when you rollover the button it enlargens to 25px, that's why I added it in the ul li a:hover. But when you rollover and it expands, it pushes the white content area downwards

_Aerospace_Eng_
12-23-2005, 09:53 PM
Try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title> Stephen Daly </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Stephen Daly" />
<style type="text/css">
body {
background: #e0e4e5 url(http://www.xtopic.net/css/images/background.gif) repeat-x;
margin: 0;
padding: 0;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

#container {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 720px;
}

#content {
background: #fff;
margin: 0;
padding: 0;
width: 650px;
height: 300px;
margin:auto;
}

#menu{
background: #f1f1f1;
width: 650px;
margin:auto;
}

#menu ul{
list-style: none;
margin: 0 auto;
padding:0;
width:420px; /*this is the width of your links plus the 5px left margin for each li*/
}

#menu ul li{
display: block;
float: left;
margin-top: 0;
margin-bottom: 0;
margin-left: 5px;
text-align: center;
}

* html #menu ul li { /*this is needed to fix IE double margin bug, floated element with right or left margin, margin gets doubled*/
display:inline;
}

#menu ul li a{
display: block;
text-decoration: none;
font: 10px verdana, arial, sans-serif;
color: #000;
width: 100px;
line-height: 20px;
border-bottom: none;
background: #fff;
position:relative;
}

#menu ul li a:hover{
background: #000;
color: #fff;
}
#menu ul li a span {
display:none;
}
#menu ul li a:hover span {
display:block;
width:100px;
height:5px;
line-height:0px;
font-size:1px;
position:absolute;
bottom:-5px;
left:0;
background:#CDD3C6;
color:#000;
}
#menu ul li a.active{
background: #000;
color: #fff;
font-weight: bold;
}

#menu ul li a.active:hover{
background: #474747;
color: #fff;
}

.clear { /*this takes care of the extra height due to font-size and line-height*/
clear:both;
font-size:1px;
line-height:0px;
}
</style>
</head>

<body>
<!--XHTML IN HERE-->
<!--START DIV CONTAINER-->
<div id="container">
<!--START TOP-->
<div id="menu">
<ul>
<li><a href="#">link 1<span></span></a></li>
<li><a href="#">link 2<span></span></a></li>
<li><a href="#">link 3<span></span></a></li>
<li><a href="#">link 4<span></span></a></li>
</ul>
<div class="clear">&nbsp;</div><!--You can't self close a div in XHTML-->
</div>
<!--START DIV CONTENT-->
<div id="content">Blah</div>
<!--END DIV CONTAINER-->
</div>
</body>
</html>

Stephen
12-24-2005, 01:20 AM
woo :) that's great. Mac browsers appear to render it slightly differntly though, when viewed on a mac there is a slight gap between the buttons and the container div. See attached image below;

http://img352.imageshack.us/img352/5131/picture18tr.th.png (http://img352.imageshack.us/my.php?image=picture18tr.png)

_Aerospace_Eng_
12-24-2005, 01:26 AM
What browser is that? Try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title> Stephen Daly </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Stephen Daly" />
<style type="text/css">
body {
background: #e0e4e5 url(http://www.xtopic.net/css/images/background.gif) repeat-x;
margin: 0;
padding: 0;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

#container {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 720px;
}

#content {
background: #fff;
margin: 0;
padding: 0;
width: 650px;
height: 300px;
margin:auto;
}

#menu{
background: #f1f1f1;
width: 650px;
margin:auto;
}

#menu ul{
list-style: none;
margin: 0 auto;
padding:0;
width:420px; /*this is the width of your links plus the 5px left margin for each li*/
}

#menu ul li{
display: block;
float: left;
margin-top: 0;
margin-bottom: 0;
margin-left: 5px;
text-align: center;
}

* html #menu ul li { /*this is needed to fix IE double margin bug, floated element with right or left margin, margin gets doubled*/
display:inline;
}

#menu ul li a{
display: block;
text-decoration: none;
font: 10px verdana, arial, sans-serif;
color: #000;
width: 100px;
line-height: 20px;
border-bottom: none;
background: #fff;
position:relative;
}

#menu ul li a:hover{
background: #000;
color: #fff;
}
#menu ul li a span {
display:none;
}
#menu ul li a:hover span {
display:block;
width:100px;
height:5px;
line-height:0px;
font-size:1px;
position:absolute;
bottom:-5px;
left:0;
background:#CDD3C6;
color:#000;
}
#menu ul li a.active{
background: #000;
color: #fff;
font-weight: bold;
}

#menu ul li a.active:hover{
background: #474747;
color: #fff;
}

.clear { /*this takes care of the extra height due to font-size and line-height*/
clear:both;
font-size:0px;
line-height:0px;
}
</style>
</head>

<body>
<!--XHTML IN HERE-->
<!--START DIV CONTAINER-->
<div id="container">
<!--START TOP-->
<div id="menu">
<ul>
<li><a href="#">link 1<span></span></a></li>
<li><a href="#">link 2<span></span></a></li>
<li><a href="#">link 3<span></span></a></li>
<li><a href="#">link 4<span></span></a></li>
</ul>
<div class="clear"></div><!--You can't self close a div in XHTML-->
</div>
<!--START DIV CONTENT-->
<div id="content">Blah</div>
<!--END DIV CONTAINER-->
</div>
</body>
</html>

Stephen
12-24-2005, 01:28 AM
that is safari, however it looks like that in firefox also, not sure about ie.

_Aerospace_Eng_
12-24-2005, 01:30 AM
I changed some things, I revised my post above.

Stephen
12-24-2005, 01:47 AM
It still appears the same apparantly, I've got a mac user testing it for me :eek:

_Aerospace_Eng_
12-24-2005, 01:53 AM
Try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title> Stephen Daly </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Stephen Daly" />
<style type="text/css">
body {
background: #e0e4e5 url(http://www.xtopic.net/css/images/background.gif) repeat-x;
margin: 0;
padding: 0;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

#container {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 720px;
}

#content {
background: #fff;
margin: 0;
padding: 0;
width: 650px;
height: 300px;
margin:auto;
}

#menu{
background: #f1f1f1;
width: 650px;
height:20px;
margin:auto;
}

#menu ul{
list-style: none;
margin: 0 auto;
padding:0;
width:420px; /*this is the width of your links plus the 5px left margin for each li*/
}

#menu ul li{
display: block;
float: left;
margin-top: 0;
margin-bottom: 0;
margin-left: 5px;
text-align: center;
}

* html #menu ul li { /*this is needed to fix IE double margin bug, floated element with right or left margin, margin gets doubled*/
display:inline;
}

#menu ul li a{
display: block;
text-decoration: none;
font: 10px verdana, arial, sans-serif;
color: #000;
width: 100px;
height:20px;
line-height:20px;
border-bottom: none;
background: #fff;
position:relative;
}

#menu ul li a:hover{
background: #000;
color: #fff;
}
#menu ul li a span {
display:none;
}
#menu ul li a:hover span {
display:block;
width:100px;
height:5px;
line-height:0px;
font-size:1px;
position:absolute;
bottom:-5px;
left:0;
background:#CDD3C6;
color:#000;
}
#menu ul li a.active{
background: #000;
color: #fff;
font-weight: bold;
}

#menu ul li a.active:hover{
background: #474747;
color: #fff;
}

.clear { /*this takes care of the extra height due to font-size and line-height*/
clear:both;
font-size:0px;
line-height:0px;
}
</style>
</head>

<body>
<!--XHTML IN HERE-->
<!--START DIV CONTAINER-->
<div id="container">
<!--START TOP-->
<div id="menu">
<ul>
<li><a href="#">link 1<span></span></a></li>
<li><a href="#">link 2<span></span></a></li>
<li><a href="#">link 3<span></span></a></li>
<li><a href="#">link 4<span></span></a></li>
</ul>
</div>
<!--START DIV CONTENT-->
<div id="content">Blah</div>
<!--END DIV CONTAINER-->
</div>
</body>
</html>
Make sure they are hard refreshing, not sure what the command is for a Mac, on windows its CTRL + F5

Stephen
12-24-2005, 02:35 AM
:D genious, it worked. What did you change?

_Aerospace_Eng_
12-24-2005, 02:39 AM
Just set a height to the #menu div and the lis, took out the clearing div (which I think may have been causing the problem.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum