CSS basics

Hey, I’m trying to get a grasp of CSS. I made a horizontal <ul> for holding my top navigation menu. I added a margin to the <li> but I’m not understanding why it’s not pushing against the other borders. I’ve added borders to get a better idea of position. I thought the yellow region displayed by firebug in FF would be pushing against the border of the <ul>. What am I doing wrong? I’m just trying to get the full grasp of positioning and basic layout.

 

css

#topnav {
margin: 5px;
border: 1px solid black;
}

#topnav a {
text-decoration: none;
color: red;
}

#topnav ul {
margin: 5px;
border: 1px solid black;
}

#topnav li {
display: inline;
list-style: none;
border: 1px solid black;
margin: 10px;

html

<div id="topnav">
	<ul id="topmenu">
		<li><a href="customers/index.php">Customers</a></li>
		<li><a href="environments/index.php">Environments</a></li>
	</ul>
</div>

Remove the margin and they will touch. To make it look nice, change margin to "margin-right: 10px;".

Also, when you set display to inline, any white-space between your elements will cause additional spacing on the page.

<div id="topnav">
    <ul id="topmenu">
        <li><a href="customers/index.php">Customers</a></li>
        <li><a href="environments/index.php">Environments</a></li>
    </ul>
</div>

should be

<div id="topnav">
    <ul id="topmenu"><li><a href="customers/index.php">Customers</a></li><li><a href="environments/index.php">Environments</a></li></ul>
</div>

Otherwise, if you would prefer to keep everything on individual lines and lose the extra space, use floats instead of display:inline and be sure to clear the <ul> container.

Also, when you set display to inline, any white-space between your elements will cause additional spacing on the page.

<div id="topnav">
    <ul id="topmenu">
        <li><a href="customers/index.php">Customers</a></li>
        <li><a href="environments/index.php">Environments</a></li>
    </ul>
</div>

should be

<div id="topnav">
    <ul id="topmenu"><li><a href="customers/index.php">Customers</a></li><li><a href="environments/index.php">Environments</a></li></ul>
</div>

Otherwise, if you would prefer to keep everything on individual lines and lose the extra space, use floats instead of display:inline and be sure to clear the <ul> container.

I have done inline with the top and had no problem at all, to me your second way is bad coding and looks terrible and never seen it set up that way

And you failed to understand what I was saying. I never said it was good writing, and I don’t do that. What I’m saying is that if you use inline and you want to eliminate white-space between objects, then you have to do that. Otherwise, use floats.

Look at the image, you see the margin on the outside of the two elements, but in-between you see white-space. This is caused by the display:inline property and from putting your elements on separate lines.

The code below will have white-space

<ul>
    <li><a href="customers/index.php">Customers</a></li>
    <li><a href="environments/index.php">Environments</a></li>
</ul>

The code below will have white-space

<ul>
<li><a href="customers/index.php">Customers</a></li>
<li><a href="environments/index.php">Environments</a></li>
</ul>

The code below will NOT have white-space

<ul><li><a href="customers/index.php">Customers</a></li><li><a href="environments/index.php">Environments</a></li></ul>

All I’m saying is, if you want to use inline and remove any white-space between your elements, you have to do it this way. Or… You can use floats.

HTML preprocessors output like that.

But if you’re writing HTML like that, then you’re doing it wrong.

I was talking about writing it like that

Here are a few links where you can see I’ve done the same thing you are trying to achieve without using inline.

Hey, I’m trying to get a grasp of CSS. I made a horizontal <ul> for holding my top navigation menu. I added a margin to the <li> but I’m not understanding why it’s not pushing against the other borders. I’ve added borders to get a better idea of position. I thought the yellow region displayed by firebug in FF would be pushing against the border of the <ul>. What am I doing wrong? I’m just trying to get the full grasp of positioning and basic layout.

 

css

#topnav {
margin: 5px;
border: 1px solid black;
}

#topnav a {
text-decoration: none;
color: red;
}

#topnav ul {
margin: 5px;
border: 1px solid black;
}

#topnav li {
display: inline;
list-style: none;
border: 1px solid black;
margin: 10px;

html

<div id="topnav">
    <ul id="topmenu">
        <li><a href="customers/index.php">Customers</a></li>
        <li><a href="environments/index.php">Environments</a></li>
    </ul>
</div>

margin 10px is adding 10 on everything, top right, bottom left, so is the 5

a work around to fix your problem would be

margin: 10px -15px 10px 10px;

that would butt the two of them together

also you define the id for the list as top menu, and have everything under topnav, you may want to change that too

Look at the image, you see the margin on the outside of the two elements, but in-between you see white-space. This is caused by the display:inline property and from putting your elements on separate lines.

The code below will have white-space

<ul>
    <li><a href="customers/index.php">Customers</a></li>
    <li><a href="environments/index.php">Environments</a></li>
</ul>

The code below will have white-space

<ul>
<li><a href="customers/index.php">Customers</a></li>
<li><a href="environments/index.php">Environments</a></li>
</ul>

The code below will NOT have white-space

<ul><li><a href="customers/index.php">Customers</a></li><li><a href="environments/index.php">Environments</a></li></ul>

All I’m saying is, if you want to use inline and remove any white-space between your elements, you have to do it this way. Or… You can use floats.

So putting different lines of code on different lines causes that? I always heard that new lines were just to make it easier for humans to read and they had no bearing on anything in the output. In other words, when a problem compiles and runs, all the "enters" are ignored.

Yes and no… As I said, if you decide to use the inline value for an element, it will be treated as text, meaning if there are any spaces between the elements, it will be treated as an &nbsp;… in a sense. It’s just one of those annoying little things you learn as you work. Just like how an <img /> element has a default line-height that is shared with text and can produce unnecessary padding at the bottom. It doesn’t make sense, but it happens.

Here ya go. I made an example to show you.

No. It will be treated as a space.

A no-break space () means that there will not be a line break, i.e., the space is treated as though it is part of a word.

That’s what I meant.