Measuring width and height

Aurora.Light

04-16-2011, 05:29 AM

Hey guys,

from what I've heard, you have to put the width and height in #tabs ul li { }. how do I measure this? the reason is that the tabs "collapse" when browser size is decreased.

#tabs {
margin: 0;
padding: 0;
}

#tabs ul {
list-style: none;
}

#tabs li {
display:inline;
padding: 1em 3em 1em 3em;
}

<html>
<head>
<title>Testing Float Strength</title>
<link rel="stylesheet" type="text/css" href="float.css"/>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>
</div>
</body>
</html>

jasonpc1

04-16-2011, 05:50 AM

What is the content of or the rest of the float.css, or do you intend to have a vertical menu ?

jasonpc1

04-16-2011, 05:55 AM

If that is all of your float.css file then the following should get you started.

You are also advised to use a doctype.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Testing Float Strength</title>
<link rel="stylesheet" type="text/css" href="float.css"/>
<style type="text/css">
#tabs {
width: 700px;
margin: 0;
padding: 0;
}

#tabs ul {
list-style: none;
}

#tabs li {
float: left;
display:inline;
padding: 1em 3em 1em 3em;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>
</div>
</body>
</html>

Aurora.Light

04-16-2011, 05:57 AM

.....

anyways for those who are wondering, you just set the width: 1200px or whatever number you want (instead of default: 100%). My question got answered before I just didn't know. you can also set a min-width size for any container.

Aurora.Light

04-16-2011, 06:00 AM

body {width: 1200px;
height: 100%;
min-width: 650px;
margin: 0 auto;}

#tabs ul li {
width: 200px;
height: 160px;
}

#tabs {
margin: 0 auto;
}

#tabs ul {
list-style: none;
overflow: hidden;
}

#tabs li {
display: inline;
border: 1px solid;
float: left;
padding: 10px;
}