Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts

    Measuring width and height

    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.

    Code:
     #tabs {
       margin: 0;
       padding: 0;
    }
    
     #tabs ul {
       list-style: none;
    }
    
      #tabs li {
        display:inline;
       padding: 1em 3em 1em 3em;
    }
    Code:
    <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>

  • #2
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    What is the content of or the rest of the float.css, or do you intend to have a vertical menu ?

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    If that is all of your float.css file then the following should get you started.

    You are also advised to use a doctype.

    Code:
    <!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>

  • #4
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    .....

    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.
    Last edited by Aurora.Light; 04-16-2011 at 07:01 AM.

  • #5
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    Code:
    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;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •