CSS problem: Plzzzzz help

S

sanchitjain

New Member
Messages
1
Reaction score
0
Points
0
Hi!!

I'm new 2 web development.

I created a menu using CSS but it gets distorted when I resize the page. U can find the page at http://sanchitspeaks.co.cc/a.html.

Plzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz help me out.

Code: 
<?xml version = "1.0" encoding = "utf-8"?>
 <!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>Just a menu</title>
</head>
<style type="text/css">

ul.menu { list-style-type: none; position: absolute; left: 10%}

ul.menu li { display: inline;
float: left; }

ul.menu a { background-color: black;
color: white;
padding-left: 5em;
padding-right: 5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-style: solid;
border-color: black;
border-size: 2px;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
text-decoration: none}

ul.menu li div { display: inline;
background-color: black;
color: white;
}

ul.menu span { background-color: black;
color: white;
padding-left: 5em;
padding-right: 5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-style: solid;
border-color: black;
border-size: 2px;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
text-decoration: none }

ul.menu li div a { display : none;
background-color: black;
color: white;
padding-left: 4em;
padding-right: 4em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-style: solid;
border-color: black;
border-size: 2px;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
text-decoration: none}

ul.menu li:hover a{ background-color: blue; border-color: blue }

ul.menu li:hover div span { background-color: blue; border-bottom-color: black }

ul.menu li:hover div a { display: block; }

ul.menu div a:hover { background-color: green; border-color: green }

body { background-color: grey }
</style>
</head>
<body>
<center>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><div><span>Tech world</span><a href="#">Open source</a><a href="#">Microsoft</a><a href="#">Other</a></div></li>
<li><a href="#">Forum</a></li>
</ul>
</center>
</body>
</html>
 
Last edited:
Twinkie

Twinkie

Banned
Messages
1,389
Reaction score
12
Points
0
Similar problems have led me to do research on the difference between block and inline elements. The <a> tag in your menu in an inline element, which means that a it cannot retain excessive padding and margins the way a <div> element can. In the way your menu is placed, it looks like the size is dictated by the amount of padding you place on the <a>. Here are some pictures that demonstrate the problem:

3329c3c.png

The first segment shows the <a> element, with excessive padding. The second segment shows how the padding is not contained within the <li> element. The third segment shows the distortion from the browsers point of view.

This is caused by the fact that an <a> element is an inline element, and therefore cannot use block features like padding, margins or contain other block level elements. Some other inline elements are <span> and <b>. A remedy to this can be to use the line-height css property to force the expansion of the <a>. Simply set the <a> to 'line-height: 2.5em;', and the wrapping of the menu will extend around the padding.

HTML: 
ul.menu a {
background-color: black;
color: white;
padding-left: 5em;
padding-right: 5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-style: solid;
border-color: black;
border-size: 2px;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
text-decoration: none;
line-height: 2.5em;
}
This causes some other issues with your menu, which I will fix later. I am too tired right now, I will get back to you tomorrow :)
 
Last edited:
espfutbol98

espfutbol98

New Member
Messages
200
Reaction score
2
Points
0
Try setting ul.menu to left: 15%; instead of left: 10%;. It looks fine on my screen after that but that could differ depending on screen size, I'm not sure because CSS isn't really my thing.
 
You must log in or register to reply here.
Top