CSS navigation

**Nailgunpro** · 02-23-2008, 03:33 PM

Hi, im new to css but not that much to HTML. I created a navigation for my site, but how do I make the text in my site be to the right of my navigation, not below it? I tryd this:

(navigation code bla bla bla)
<div align="right">
This is my site text.
</div>

But It just still appeared below the navigation. Any suggestions?

**TimFA** · 02-23-2008, 04:02 PM

To make DIVs appear next to each other in CSS you use:

Code:

<div id="containter">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>

Code:

div#container {
width: 300px;
height: 20px;
}

div#div1, div#div2, div#div3 {
width: 100px;
height: 20px;
float: left;
}

Or you can use <div class="div"></div> and .div {. That should align them, and do what you asked. Unless I misunderstood, let me know.

Tim

**Nailgunpro** · 02-23-2008, 04:21 PM

Wow thanks. none of the online HTML tuts told me that. Thanks.

**TimFA** · 02-23-2008, 04:23 PM

So did that answer your question?

**Nailgunpro** · 02-23-2008, 04:24 PM

Well actually, if my navigation div already has "id=navigation" can a div have 2 ID's?

EDIT:Nevermind

**TimFA** · 02-23-2008, 04:26 PM

No, can you post your CSS and page? I can tell you what to do if I see it.

**Nailgunpro** · 02-23-2008, 04:28 PM

Code:

<style type="text/css">
















/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.arrowlistmenu{
width: 180px; /*width of menu*/
}

.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}

.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(http://nailgunpro.468mb.com/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}</style>
<div class="arrowlistmenu" id="div1">
<h3 class="headerbar">-Main</h3>
<ul>
    <li><a href="http://www.nailgunpro.468mb.com/">Home</a> </li>
    <li><a href="http://http://www.nailgunpro.468mb.com/movies.htm">Movies</a> </li>
    <li><a href="http://www.nailgunpro.468mb.com/games.htm/">Games</a> </li>
    <li><a href="http://http://www.nailgunpro.468mb.com/mymovies.htm">Our Movies</a> </li>
    <li><a href="http://www.nailgunpro.468mb.com/news.htm">News</a> </li>
    <li><a href="http://www.nailgunpro.468mb.com/sponsors.htm">Sponsors</a> </li>
    <li><a href="http://www.nailgunpro.468mb.com/guestbook.htm">Guestbook</a> </li>
</ul>
</div>
<div id="div2">Welcome to the official Nailgun Productions homepage! </div>

Edit: Wrapped code in [code] tags.

**TimFA** · 02-23-2008, 04:30 PM

Next time you should use the [code] tags

First, do you have a normal page?

As in:

Code:

<html>
<head>
</head>
<body>
</body>
</html>

or is your entire page simply what you posted?

**Nailgunpro** · 02-23-2008, 04:33 PM

well now I added those tags (i forgot before) but it still doesnt work.

Heres what i have now.

Code:

<style type="text/css">


/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.arrowlistmenu{
width: 180px; /*width of menu*/
}

.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}

.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(http://nailgunpro.468mb.com/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}</style>
<div class="container">
<div class="arrowlistmenu" id="div1">
<h3 class="headerbar">-Main</h3>
<ul>
    <li><a href="http://www.nailgunpro.468mb.com/">Home</a> </li>
    <li><a href="http://http://www.nailgunpro.468mb.com/movies.htm">Movies</a> </li>
    <li><a href="http://www.nailgunpro.468mb.com/games.htm/">Games</a> </li>
    <li><a href="http://http://www.nailgunpro.468mb.com/mymovies.htm">Our Movies</a> </li>
    <li><a href="http://www.nailgunpro.468mb.com/news.htm">News</a> </li>
    <li><a href="http://www.nailgunpro.468mb.com/sponsors.htm">Sponsors</a> </li>
    <li><a href="http://www.nailgunpro.468mb.com/guestbook.htm">Guestbook</a> </li>
</ul>
</div>
<div id="div2">Welcome to the official Nailgun Productions homepage! </div>
</div>
<div></div>

**TimFA** · 02-23-2008, 04:43 PM

First, you should have your <style> tags in the <head> of the page, and you never began the style tag.

Code:

....
</style>

but there is no <style> in the code you gave me.

Here

Code:

<html>
<head>
<style>
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.arrowlistmenu {
width: 180px; /*width of menu*/
float: left;
}

.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}

.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(http://nailgunpro.468mb.com/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

.container {
width: 300px;
}

div#welcome {
width: 120px;
height: 20px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="arrowlistmenu">
<h3 class="headerbar">-Main</h3>
<ul>
    <li><a href="http://www.nailgunpro.468mb.com/">Home</a> </li>
    <li><a href="http://http://www.nailgunpro.468mb.com/movies.htm">Movies</a> </li>
    <li><a href="http://www.nailgunpro.468mb.com/games.htm/">Games</a> </li>
    <li><a href="http://http://www.nailgunpro.468mb.com/mymovies.htm">Our Movies</a> </li>
    <li><a href="http://www.nailgunpro.468mb.com/news.htm">News</a> </li>
    <li><a href="http://www.nailgunpro.468mb.com/sponsors.htm">Sponsors</a> </li>
    <li><a href="http://www.nailgunpro.468mb.com/guestbook.htm">Guestbook</a> </li>
</ul>
</div>
<div id="welcome">Welcome to the official Nailgun Productions homepage!</div>
</div>
</body>
</html>

Its not pretty, but some margins should fix that

Adapt everything as needed.

Thread: CSS navigation

Thread Tools

Search Thread

CSS navigation

Bookmarks

Bookmarks

Posting Permissions