CSS navigation [Archive] - Dynamic Drive Forums

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:

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

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

TimFA

02-23-2008, 04:30 PM

Next time you should use the
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.

<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.

....
</style>

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

Here

<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.

BLiZZaRD

02-23-2008, 06:14 PM

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

EDIT:Nevermind

Yes you can have IDs and classes, classes and classes ids and ids... however you want..

something like:

<div id="ID1" class="class1"></div>

Or:

<div class="class1 class2"></div>

no comas, but make sure there is a space between the classes/ids if doing two together like the second example.

TimFA

02-24-2008, 03:18 AM

WHAT? I remember reading that it has to be only one unique ID...

BLiZZaRD

02-24-2008, 06:12 AM

Backwards. IDs are for one element only, not one element can have one ID. For example, if I make two IDs for text attributes:

#textsize {
font-weight:800;
}

#textstyle {
color: #DEDEDE;
}

Then I can do the following:

<div id-"textsize"><p>hello world</p></div>
<div id="textstyle"><p>Hello World</p></div>
<div id="textsize textstyle"><p>HELLO WORLD!</p></div>

TimFA

02-24-2008, 04:51 PM

I misunderstood what you said, I thought you were saying that <div id="boo" id="baa"></div> was correct HTML and it worked properly. If that does work please correct me.

BLiZZaRD

02-24-2008, 05:14 PM

no but <div id="foo baa"></div> is and does.

Nailgunpro

02-26-2008, 10:56 PM

well this is the problem:
http://i249.photobucket.com/albums/gg205/nailgunpro/help.jpg
I want to make the text wider and have a little space from the navigation. I tried to mess with the CSS to do that, but it screwed it all up. any help?

BLiZZaRD

02-27-2008, 03:08 AM

Do you have a link to the page? Recoding based on an image is pretty tough ;)

tech_support

02-27-2008, 04:33 AM

To have the little space from the navigation you'll need to add some padding to it, like padding:10px; to your content div.