+ Reply to Thread
Results 1 to 3 of 3

Thread: CSS problem: Plzzzzz help

  1. 01-31-2010 10:55 PM #1
    sanchitjain
    sanchitjain is offline     x10Hosting Member sanchitjain is an unknown quantity at this point
    Join Date
    Jan 2010
    Posts
    1

    Exclamation CSS problem: Plzzzzz help

    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 by sanchitjain; 01-31-2010 at 10:57 PM. Reason: 4got 2 write something
    Reply With Quote Reply With Quote
  2. 01-31-2010 11:55 PM #2
    Twinkie
    Twinkie is offline     Banned Twinkie is an unknown quantity at this point
    Send a message via MSN to Twinkie
    Join Date
    Sep 2007
    Location
    Ft. Lauderdale, Florida
    Posts
    1,389

    Re: CSS problem: Plzzzzz help

    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:


    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 Code:
    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 by Twinkie; 01-31-2010 at 11:57 PM.
    Reply With Quote Reply With Quote
  3. 02-01-2010 12:04 AM #3
    espfutbol98's Avatar
    espfutbol98
    espfutbol98 is offline     x10 Sophmore espfutbol98 is an unknown quantity at this point
    Join Date
    Apr 2009
    Location
    Zagreb... želim
    Posts
    200

    Re: CSS problem: Plzzzzz help

    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.
    Reply With Quote Reply With Quote
+ Reply to Thread
« Previous Thread | Next Thread »

Similar Threads

  1. Another Problem
    By beast474 in forum Free Hosting
    Replies: 1
    Last Post: 08-27-2008, 07:22 PM
  2. Slight Problem
    By rmb1993 in forum Free Hosting
    Replies: 2
    Last Post: 08-14-2008, 06:04 AM
  3. A problem with certificate
    By eon01 in forum Free Hosting
    Replies: 1
    Last Post: 07-31-2008, 01:27 PM
  4. DB number problem
    By lionheart8 in forum Free Hosting
    Replies: 5
    Last Post: 04-08-2008, 08:26 AM
  5. Ad code problem!
    By Akkarin in forum Free Hosting
    Replies: 8
    Last Post: 08-29-2005, 10:39 AM

Posting Permissions

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

Forum Rules

x10hosting free hosting for the masses
dedicated servers