margin/ul problem - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

margin/ul problem

mylife

12:59 am on Sep 22, 2009 (gmt 0)

10+ Year Member

Hey.

I wrote this simple web design. The problem I have is that I can't get the top margin right for the inline aaaa-bbbb-ccc-ddd. The margin should count from the top of the page or from the header?

If I change pixels even to 300px it does nothing.500px still nothing. They remain in the same place.. Strangely enough.

Also I wanted to ask how could I get the whole "ul" list with "li" to get their background changed to lighter tone. Obviously this way I can't give each of them value and I don't know any other way. If I give a different lighter background color to ul-li list then it would be nice.

<snip> This is what I would like.

Also text-decoration:none; doesn't seem to work. Argh, I would love to get these under-lines deleted. Do they go with li brackets or not?

Thanks a ton.

<html>
<head>
<style type="text/css">
body
{
background-color:limegreen;
}

h1.header
{
font-size:65px;
text-align:center;
margin-top:50px;
background-color: #E8E8E8;
}

li{display:inline;}
li{font-size:25px;}
li{margin-left:150px;}
li{margin-top:300px;}
li{text-decoration:none;}
</style>
</head>
<body>

<h1 class="header">aaaaa</h1>

<ul>
<li><a href="/html/default.asp">aaaaa</a></li>
<li><a href="/css/default.asp">bbbbb</a></li>
<li><a href="/js/default.asp">ccccccc</a></li>
<li><a href="/xml/default.asp">dddddd</a></li>
</ul>
</body>
</html>

[edited by: swa66 at 11:42 am (utc) on Sep. 22, 2009]
[edit reason] No URLs, please see ToS and Forum Charter [/edit]

D_Blackwell

1:47 am on Sep 22, 2009 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Welcome to WebmasterWorld. The personal link is going to get chopped, so I will not reference what I saw in this response. I suspect that this will only be a partial answer solution, but it will give you some things to work with and consider.

1)

I wrote this simple web design. The problem I have is that I can't get the top margin right for the inline aaaa-bbbb-ccc-ddd.
The margin should count from the top of the page or from the header?

I would set the margin from header. It is a full width container, not floated, and the next container will naturally follow down the page.

You can set the margin in the <ul> or give the <ul> a <div> wrapper and set the margins there. The same results can be achieved with both, but it can be handy to have a wrapper around <ul> and such.

2)

If I change pixels even to 300px it does nothing.500px still nothing. They remain in the same place.. Strangely enough.

I would be inclined to set the margins to the <ul> or <div> wrapper. They are more 'global', so I would want to apply them to the largest portion of the container. IF I need to move the <li>, THEN I would handle it more specifically within the <li> declaration. I can't say what is best for you, but based on the amount of margin declared, it appear that you are positioning the container of the <li>, not necessarily the <li>. I could be mistaken.

3)

Also I wanted to ask how could I get the whole "ul" list with "li" to get their background changed to lighter tone.

Just class the <ul> and give it a background color.
<ul class="test">

4)

Also text-decoration:none; doesn't seem to work.

text-decoration is not a valid property in the way you intend for <li>, which is 'none' by default. It should be declared on the <a>

ul.class a {
text-decoration: none;
}

5) I added {padding: 0;} to ul.test because browsers vary in assigning default margin and padding. Best to set to 0, then edit to suit your needs.

6) Note the edit to your <li> declarations. Easier to group them all in one block.

7) Hope this helps, but not sure that it addresses every issue with the solution that you want.

<!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" xml:lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
background-color: limegreen;
}
h1.header {
font-size: 65px;
text-align: center;
margin-top: 50px;
background-color: #e8e8Ee8;
}
ul.test {
margin-top: 300px; margin-left: 150px; background-color: red; width: 10%;
}
ul.text li {
display: inline; font-size: 25px;
}
ul.test a {
text-decoration: none;
}
</style>
</head>
<body>
<h1 class="header">aaaaa</h1>
<ul class="test">
<li><a href="/html/default.asp">aaaaa</a></li>
<li><a href="/css/default.asp">bbbbb</a></li>
<li><a href="/js/default.asp">ccccccc</a></li>
<li><a href="/xml/default.asp">dddddd</a></li>
</ul>

</body>
</html>