PDA

View Full Version : Help with CSS code 'display:inline' in DW5


weirdbeard
07-23-2011, 07:04 PM
I am trying to set my navigation links to be in a line rather than a column after setting them up as an Unordered List. I have already done it for the social-network-icons but the same css command just won't apply itself for the navigation element which is in an unordered list. Any help would be appreciated.

Here is the code for the website I am working on to teach myself DW:

<!DOCTYPE HTML>

<html>

<head>

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/print.css" rel="stylesheet" type="text/css" media="print">

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-type" content="cache" />
<meta name="robots" content="INDEX, FOLLOW" />
<meta name="keywords" content="Enter Keywords" />
<meta name="description" content="Description Here" />

<title>Hittite Education by Weirdbeardink</title>

</head>

<body>

<div id="outer">
<div id="wrapper">


<div id="logo">
<ul>
<li><img src="images/Logo-2.jpg" /></li>
</ul>
</div>

<div id="social-media-icons"> <--THIS IS THE SECTION THAT WORKS WITH THE COMMAND display:inline; -->
<ul>
<li><a href="http:/www.facebook.com"><img src="images/icons/facebook-icon.png" /></a></li>
<li><a href="http:/www.twitter.com"><img src="images/icons/twitter-icon.png" /></a></li>
<li><a href="#"><img src="images/icons/rss-icon.png" /></a></li>
</ul>
</div>

<div id="topnav"> <--THIS IS THE SECTION THAT DOESN'T WORK WITH THE COMMAND display:inline -->
<ul>
<li><p><a href="index.html">HOME</a></p></li>
<li><p><a href="about.html">ABOUT</a></p></li>
<li><p><a href="contact.html">CONTACT</a></p></li>
</ul>
</div>

<div id="topstripe">
<ul>
<li><img src="images/stripe.jpg" /></li>
</ul>
<div id="picture">
<ul>
<li><img src="images/coverpic500px.jpg" /></li>
</ul>
</div>

<div id="content">

<ul>
<li><h1>Introduction</h1></li>
<li><p>This will be the main body of text.</p></li>
</ul>

</div>


<div id="bottomstripe">
<ul>
<li><img src="images/stripeflip.jpg" /></li>
</ul>
</div>

<div id="footer">

<ul>
<li><p>Copyrite 2011 Hittite Education | All rites reserved</p></li>
</ul>

</div>

</div>
</div>

</body>
</html>

Here is the relevent parts of styles.css that I have applied (If you need me to paste the whole file, just let me know) :

#social-media-icons { float:right; }
#social-media-icons ul li { display:inline; }
#social-media-icons ul { margin-top:100px; }

#topnav { clear:both; }
#topnav { width:700px; margin: 0 auto; background-color:#FFF; }
#topnav ul { padding:10px; }
#topnav ul li { display:inline; } <!-- THIS IS THE LINE THAT WONT WORK -->
#topnav ul li a { padding:0 15px;}


#topnav a:link {color:#000; }
#topnav a:visited {color:#000; }
#topnav a:active {color:#000; }
#topnav a:focus {color:#666; }
#topnav a:hover {color:#F38E00; }

gentleone
07-24-2011, 02:32 AM
Remove the p tags. They're redundant anyways for what you have now.

<ul>
<li><p><a href="index.html">HOME</a></p></li>
<li><p><a href="about.html">ABOUT</a></p></li>
<li><p><a href="contact.html">CONTACT</a></p></li>
</ul>

gentleone
07-24-2011, 02:35 AM
By the way... what's the meaning of wrapping everything in a unordered list? :confused:

DWcourse
07-24-2011, 05:03 AM
The icons work because of:

#social-media-icons { float:right; }

But for the menu list items you have:

#topnav ul li { display:inline; }

Inline is how things display anyway. you want

#topnav ul li {
display:block;
float:left; (or right)
width:300px; (a float requires a width, you can set teh width to what you want.
}

weirdbeard
07-24-2011, 06:44 AM
Thank you both for your advice :-D

Removing the <p> tags is what did it. I will look at the suggested code rewrite too. The code I am using derives from a series of YouTube videos I am using to teach myself DW5 as I can't afford to pay for lessons :???:.

Corrosive
07-24-2011, 07:02 AM
A paragraph is a block element by default, just so you know :)

gentleone
07-24-2011, 04:06 PM
The code I am using derives from a series of YouTube videos.
Did you learn form that youtube vid also to wrap everything in an unordered list? If so I'd recommend to find another source to teach yourself the basics of HTML & CSS..

DWcourse
07-24-2011, 04:16 PM
Yeah, you should really ignore my reply on this one. The display:inline (as you already know) works fine. I was getting a couple of things confused and being wrong about both of them. It was a rough week.

weirdbeard
07-24-2011, 06:55 PM
The <p> tags was my fault, but the tutorial did instruct me to create the navmenu out of an unordered list. I don't know if this was just to illustrate the use of display:inline or whether this will highlight a problem later on in the tutorials that he will then show how to fix. I don't suppose anyone knows of a any good videos/tutorials that are free?

Thanks again for being so helpful :-D

gentleone
07-24-2011, 11:01 PM
Yeah, you should really ignore my reply on this one. The display:inline (as you already know) works fine. I was getting a couple of things confused and being wrong about both of them. It was a rough week.
Yes, display:inline works fine indeed :)
With not supporting IE6 anymore (most of the time) I tend to use it (and his bigger brother, display:inline-block) more and more to lay out whole pages. No elements anymore floating around to unwanted positions (if you use a lot of floats), so no hassle with clearing them... just steady in the normal flow.