CSS Forum

**Rajaie** · 01-21-2008, 06:21 AM

HTML CODE:

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">
<head>
<title>Default Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id=wrapper>
<div id=header></div>
<div id=navmenu>
<a class=btnContinue href=#>Link</a><a class=btnContinue href=#>Link</a>
</div>
<div id=main></div>
</div>
</body>
</html>

CSS CODE:

Code:

html,body {
margin: 0;
height: 700px;
background-image: url('bg.png');
background-repeat: repeat-x;
}

div#wrapper { 
width: 70%;
min-height: 700px;
margin-left: auto;
margin-right: auto;
}

div#header {
text-align: center;
min-height: 100px;
border-right: 2px solid black;
border-top: 2px solid black;
border-left: 2px solid black;
border-bottom: 2px solid black;
width: 100%;
background-image: url('header.png');
background-repeat: no-repeat;
background-position: center;
}

div#main {
width: 100%;
min-height: 700px;
border-right: 2px solid black;
border-bottom: 2px solid black;
border-left: 2px solid black;
}

div#navmenu {
width: 100%;
border-right: 2px solid black;
border-left: 2px solid black;
margin: 0;
border-bottom: 2px solid black;
}

p {
padding: 2px;
margin: 0;
}

h1 {
margin: 0;
}

img {
margin: 0;
}

.btnContinue {
text-align: center;
width: 140px;
height: 40px;
display: block;
text-decoration: none;
background-repeat: no-repeat;
background-image: url(button.png)
}

.btnContinue:hover {
background-image: url(button_hover.png)
}

As you can see, the tabs are not on the same line, although I haven't used <br> .

And I would like the text in the tabs to be vertically centered.
Any help is welcome!

**chrishirst** · 01-21-2008, 06:50 AM

float the tab element left.

vertical-align only applies to in-line elements
http://www.candsdesign.co.uk/referen...ertical-align/

You can use line-height set to the same value as the height of the element, provided the text in the element does NOT wrap to a second line. Or use overflow:hidden if you don't mind part of the text disappearing.

You need to put quotes around your class names when using a XHTML DTD

**tripy** · 01-21-2008, 07:05 AM

You use a display:block in your class, thus you specify that the link should take the whole line and the next element be placed under it.
Remove the display:block to have the 2 links lined together.

For the centering, use "margin:0 auto" on the container of the links, and it should do the trick.
I said, it should... I always had a lot of problem with the margin: auto to make it center. Never took the time to look why.
I did not tested it, and I'm not a css pro.

**Rajaie** · 01-21-2008, 07:46 AM

Thanks to you both, it now looks perfect!!