7 Replies - 3985 Views - Last Post: 20 December 2010 - 07:00 PM

#1 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Left & Right Navigation

Posted 19 December 2010 - 07:09 PM

I'm trying to make a left and right navigation. I know that I use the left and right float. I just don't know where to add the class left and right. I'm using HTML5.
			<nav>
				<ul>
					<li><h3>Tutorials</h3></li>
					<li><a href="#">C (C++)</a></li>
					<li><a href="#">C#</a></li>
					<li><a href="#">HTML & CSS</a></li>
					<li><a href="#">Java</a></li>
					<li><a href="#">Javascript</a></li>
					<li><a href="#">PHP</a></li>
					<li><a href="#">VB.net</a></li>
					<li><h3>Help</h3></li>
					<li><a href="#">C (C++)</a></li>
					<li><a href="#">C#</a></li>
					<li><a href="#">HTML & CSS</a></li>
					<li><a href="#">Java</a></li>
					<li><a href="#">Javascript</a></li>
					<li><a href="#">PHP</a></li>
					<li><a href="#">VB.net</a></li>
				</ul>
			</nav>

I'm sure if I would set the class for the nav element or the unorded list, list item, and link elements. How would I go about doing this?

Is This A Good Question/Topic? 0
  • +

Replies To: Left & Right Navigation

#2 Sadin56  Icon User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 183
  • Joined: 19-December 10

Re: Left & Right Navigation

Posted 19 December 2010 - 10:13 PM

What exactly are you trying to align left/right?

the <h3>Tutorials</h3> and <li><h3>Help</h3></li>?
Was This Post Helpful? 0
  • +
  • -

#3 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Left & Right Navigation

Posted 20 December 2010 - 04:38 AM

View PostSadin56, on 19 December 2010 - 11:13 PM, said:

What exactly are you trying to align left/right?

the <h3>Tutorials</h3> and <li><h3>Help</h3></li>?

I don't have the second navigation made. It would look similar to the one on the left but be on the right side of the webpage.
Was This Post Helpful? 0
  • +
  • -

#4 jjsaw5  Icon User is offline

  • I must break you
  • member icon

Reputation: 90
  • View blog
  • Posts: 3,059
  • Joined: 04-January 08

Re: Left & Right Navigation

Posted 20 December 2010 - 07:34 AM

Are you using CSS? Any chance of posting more of the code for this page so get a better look at it?
Was This Post Helpful? 0
  • +
  • -

#5 Sadin56  Icon User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 183
  • Joined: 19-December 10

Re: Left & Right Navigation

Posted 20 December 2010 - 08:35 AM

Well if your using multiple navs i would place each in its own <div> and then align them left or right separately

Example:
<div style="float:left;">
...Left Nav Here...
</div>
<div style="float:right;">
...Right Nav Here...
</div>



You could use an external stylesheet to float but that was just to show what should be floated

Hope that helps if thats not what you mean just let me know

if anyone has a better fix please by all means correct me.
Was This Post Helpful? 0
  • +
  • -

#6 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Left & Right Navigation

Posted 20 December 2010 - 01:38 PM

View PostSadin56, on 20 December 2010 - 09:35 AM, said:

Well if your using multiple navs i would place each in its own <div> and then align them left or right separately

Example:
<div style="float:left;">
...Left Nav Here...
</div>
<div style="float:right;">
...Right Nav Here...
</div>



You could use an external stylesheet to float but that was just to show what should be floated

Hope that helps if thats not what you mean just let me know

if anyone has a better fix please by all means correct me.

I'm not using any divs because I'm using HTML5, but I know what you're saying. My CSS is:
section, nav
{
	display: block;
}
html 
{
	height: 100%;
}
body
{
	
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
	background: -moz-linear-gradient(top, #ccc, #fff);
	font-family: Arial, Helvtica, sans-serif;
	font-size: 100%;
	margin-left: 200px;
	margin-right: 200px;
}
section
{
	background-color: #fff;
}
nav h3
{
	padding: 0 0 0 10px;
}
nav ul
{
	list-style: none;
	display: block;
	width: 200px;
	padding: 60px 0 60px 0;
	background: url(../images/shad2.png) no-repeat;
	-webkit-background-size: 50% 100%;
}
nav li
{
	margin: 5px 0 0 0;
}
nav ul li a
{
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	background: #cbcbcb url(../images/boder.png) no-repeat;
	color: #174867;
	padding: 7px 15px 7px 15px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	width: 100px;
	display: block;
	text-decoration: none;
	-webkit-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
}
nav ul li a:hover
{
	background: #ebebeb url(../images/boder.png) no-repeat;
	color: #67a5cd;
	padding: 7px 15px 7px 30px;
}
footer
{
	margin-left:200px;
	padding-top: 50px;
}

Was This Post Helpful? 0
  • +
  • -

#7 Sadin56  Icon User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 183
  • Joined: 19-December 10

Re: Left & Right Navigation

Posted 20 December 2010 - 03:17 PM

hmmm well im sorry i couldnt help im more of an XHTML man myself :)

HTML 5 is bnext on my list of things to learn
Was This Post Helpful? 1
  • +
  • -

#8 Sadin56  Icon User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 183
  • Joined: 19-December 10

Re: Left & Right Navigation

Posted 20 December 2010 - 07:00 PM

this is just a suggestion but could you try making an ID or a CLASS for each specified <nav>?

Example:

<nav class="left-nav">
		 		<ul>
					<li><h3>Tutorials</h3></li>
					<li><a href="#">C (C++)</a></li>
					<li><a href="#">C#</a></li>
					<li><a href="#">HTML & CSS</a></li>
					<li><a href="#">Java</a></li>
					<li><a href="#">Javascript</a></li>
					<li><a href="#">PHP</a></li>
					<li><a href="#">VB.net</a></li>
					<li><h3>Help</h3></li>
					<li><a href="#">C (C++)</a></li>
					<li><a href="#">C#</a></li>
					<li><a href="#">HTML & CSS</a></li>
					<li><a href="#">Java</a></li>
					<li><a href="#">Javascript</a></li>
					<li><a href="#">PHP</a></li>
					<li><a href="#">VB.net</a></li>
				</ul>
			</nav>


then add some CSS

left-nav{
float:left;
}



and then duplicate for the right or is this not able to be performed in HTML5?

This post has been edited by Sadin56: 20 December 2010 - 07:12 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1