using <div> to create the menu

  • (2 Pages)
  • +
  • 1
  • 2

19 Replies - 1667 Views - Last Post: 16 February 2014 - 10:15 AM

#1 DATAfiend  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 17-February 12

using <div> to create the menu

Posted 19 January 2014 - 10:19 PM

I'm trying to use div to get a menu on my left side of my index page.
I'm getting into div and honsetly, how do I get my menu to the left side of the page? I'm using Chrome
and the code I have here is sticking it in a random spot
<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html>

<link rel="Shortcut Icon" href="/favicon.ico" />



	<head>
		<meta http-equivalent="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>SACMAP</title>
		<link type="text/css" rel="stylesheet" href="style.css" />

	
		<style type="text/css">
				body 	{
				background-image: url(greysq.gif);
				margin-left: 20%;
				margin-right: 20%;
				border: 1px dotted gray;
				padding: 100px 100px 100px 100px;
				font-family: sans-serif;
					}
				
				
								

		</style>

		
		
	</head>

	
	<body>
	

	<p>

		<img src="PMILogo.gif" />
	
	</p>

	<h1> 
		
		Welcome to SACMAP, WE'RE UNDER CONSTRUCTION...STILL</em>

	 </h1>

	<p> 
		
	<a href="about.html">about</a>
	

	</p>

	
<a href="http://www.twitter.com/gisdude"><img src="http://twitter-badges.s3.amazonaws.com/t_logo-a.png" alt="Follow gisdude on Twitter"/></a>


	</body>
	<div id="menu" style="background-color:#669999;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
Javascript</div>

	

</html>



I don't understand how to line up the menu.

Thanks for any help

Is This A Good Question/Topic? 0
  • +

Replies To: using <div> to create the menu

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,226
  • Joined: 08-June 10

Re: using <div> to create the menu

Posted 19 January 2014 - 11:28 PM

first thing you would need to do is put the <div> back inside the <body>.
Was This Post Helpful? 0
  • +
  • -

#3 DATAfiend  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 17-February 12

Re: using <div> to create the menu

Posted 20 January 2014 - 12:33 AM

I did that and the menu is now on top of everything.
<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html>

<link rel="Shortcut Icon" href="/favicon.ico" />



	<head>
		<meta http-equivalent="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>SACMAP</title>
		<link type="text/css" rel="stylesheet" href="style.css" />

	
		<style type="text/css">
				body 	{
				background-image: url(greysq.gif);
				margin-left: 20%;
				margin-right: 20%;
				border: 1px dotted gray;
				padding: 100px 100px 100px 100px;
				font-family: sans-serif;
					}
				
				
								

		</style>

		
		
	</head>

	
	<body>
		<div id="menu" style="background-color:#669999;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
Javascript</div>
	

	<p>

		<img src="PMILogo.gif" />
	
	</p>

	<h1> 
		
		Welcome to SACMAP, WE'RE UNDER CONSTRUCTION...STILL</em>

	 </h1>

	<p> 
		
	<a href="about.html">about</a>
	

	</p>

	
<a href="http://www.twitter.com/gisdude"><img src="http://twitter-badges.s3.amazonaws.com/t_logo-a.png" alt="Follow gisdude on Twitter"/></a>


	</body>


	

</html>

How do you get the div tag to move all the way to the left?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,226
  • Joined: 08-June 10

Re: using <div> to create the menu

Posted 20 January 2014 - 12:38 AM

give it a width and float it.

PS. <link>s belong inside <head>.
Was This Post Helpful? 0
  • +
  • -

#5 DATAfiend  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 17-February 12

Re: using <div> to create the menu

Posted 27 January 2014 - 01:46 PM

Here is what I have so far. Could use another hint or 2.
<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>  
	<head>
		<link rel="Shortcut Icon" href="/favicon.ico" />
		<meta http-equivalent="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>SACMAP</title>
		<link type="text/css" rel="stylesheet" href="style.css" />
		<style type="text/css">
			.body 	{
    background-image: url(greysq.gif);
    margin-left: 20%;
    margin-right: 20%;
    border: 1px dotted gray;
    padding: 100px 100px 100px 100px;
    font-family: sans-serif;
    overflow: auto;
}	

.left {
    float:left;
}

.clear {
    clear: both;
}

.menu {				
    background-color:#669999;
    height:100%;
	width:100px;
    margin: 0;
}

			body, html  {
				height:100%;
				margin: 0;
}
			
		</style>
	</head>
	<body>
	<div class="left">				
		<ul class="menu" >		
		<li>Menu</li>
		<li>HTML</li>
		<li>CSS</li>
		<li>Javascript</li>
	</ul>	
</div>
		<div class="body">
			<p>	 
				<img src="PMILogo.gif" />
			</p>
			<h1>Welcome to SACMAP, WE'RE UNDER CONSTRUCTION...STILL</em></h1> 
		
			
			<div class="center">
				<p> 			
					<a href="about.html">about</a>
				</p>
				<a href="http://www.twitter.com/gisdude">
					<img src="http://twitter-badges.s3.amazonaws.com/t_logo-a.png" alt="Follow gisdude on Twitter"/>
				</a>
			</div>
 		</div>
	</body>
</html>
			

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3459
  • View blog
  • Posts: 11,718
  • Joined: 12-December 12

Re: using <div> to create the menu

Posted 27 January 2014 - 01:55 PM

You have an incorrect closing em-tag in this line:
<h1>Welcome to SACMAP, WE'RE UNDER CONSTRUCTION...STILL</em></h1>

But your menu is on the left, so I don't know what you are now asking?
Was This Post Helpful? 0
  • +
  • -

#7 DATAfiend  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 17-February 12

Re: using <div> to create the menu

Posted 27 January 2014 - 07:07 PM

@andrewsw: I'm trying to get the menu to be full size. I thought it might be
height:100% (
or something else that would get it to be full size. I'm stuck.
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3459
  • View blog
  • Posts: 11,718
  • Joined: 12-December 12

Re: using <div> to create the menu

Posted 27 January 2014 - 07:36 PM

No, height: 100% on its own won't work.

But it looks like you are heading towards a 2 or possibly 3-column layout. You should start from this decision, and then search among the very many tutorials that you will find on this subject; that is, css layouts.

I do not recommend that you continue with your current piecemeal approach. Study css layouts, get the overall layout that you want working, then you can continue to add further elements and content.
Was This Post Helpful? 0
  • +
  • -

#9 DATAfiend  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 17-February 12

Re: using <div> to create the menu

Posted 28 January 2014 - 09:57 PM

thanks andrewsw. I know it's piecemeal (and prolly not a great way to start). The layout decision hasn't been made. I'm just playing/experimenting now. I like to get my skills up by this method. I really like the link you posted up. Other than some of the courses (Udemy/Codecademy) this is a really good resource.

I'll look through this site some more and try and get something going.

Thanks again.
Was This Post Helpful? 0
  • +
  • -

#10 grizrule  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 88
  • Joined: 29-December 13

Re: using <div> to create the menu

Posted 30 January 2014 - 08:52 PM

I've noticed that you have both an external stylesheet AND and internal stylesheet. What I mean by internal and external is you have a link to a stylesheet (external) in the head, then you have the internal style sheet (everything inside the style tags). If you put the styling code there on purpose then my bad. If not, you should really put everything in an external style sheet, it is much easier. With an external style sheet you can edit the style of multiple webpages by just editing one file.

This post has been edited by grizrule: 30 January 2014 - 08:58 PM

Was This Post Helpful? 1
  • +
  • -

#11 DATAfiend  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 17-February 12

Re: using <div> to create the menu

Posted 01 February 2014 - 10:47 AM

View Postgrizrule, on 30 January 2014 - 08:52 PM, said:

What I mean by internal and external is you have a link to a stylesheet (external) in the head, then you have the internal style sheet (everything inside the style tags). If you put the styling code there on purpose then my bad. If not, you should really put everything in an external style sheet, it is much easier. With an external style sheet you can edit the style of multiple webpages by just editing one file.

thanks for the reply. To be honest, I've scraped a bunch of code from various sites' that I've looked at. As far as "internal/external" style sheets, I didn't even think of that. I'm going to work on it a little bit this weekend (however, the superbowl is tomorrow). I'll try to make the style sheet external. So what you're saying is to take the style sheet code and stick it in the head? Yes?

Thanks again for the help.

<head>
		<link rel="Shortcut Icon" href="/favicon.ico" />
		<meta http-equivalent="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>SACMAP</title>
		<link type="text/css" rel="stylesheet" href="style.css" />
		<style type="text/css">


So, if I grab the portion that says "link type="text/css"..." so...where would I place this? After the closing tag for head?
Was This Post Helpful? 0
  • +
  • -

#12 grizrule  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 88
  • Joined: 29-December 13

Re: using <div> to create the menu

Posted 03 February 2014 - 09:01 PM

What you do is place the
<link type="text/css" rel="stylesheet" href="style.css" />
in the head. Once you've done that take all the styling code out like this...

  .body   {
	    background-image: url(greysq.gif);
	    margin-left: 20%;
	    margin-right: 20%;
	    border: 1px dotted gray;
	    padding: 100px 100px 100px 100px;
	    font-family: sans-serif;
	    overflow: auto;
	}  
	 
	.left {
	    float:left;
	}
	 
	.clear {
	    clear: both;
	}
	 
	.menu {            
	    background-color:#669999;
	    height:100%;
	    width:100px;
	    margin: 0;
	}
	 
	            body, html  {
	                height:100%;
	                margin: 0;
	}


After you've done that, insert the code you took out above into the stylesheet which in your case is style.css. Once you've done that take the style tags out of the head in the original file. Now you have an external style sheet! Now just edit your styling in the style.css file.
Was This Post Helpful? 1
  • +
  • -

#13 DATAfiend  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 17-February 12

Re: using <div> to create the menu

Posted 07 February 2014 - 09:18 PM

Ok, I've really messed this one up. I tried to change the style.css but have totally screwed it up.
I left the [code<link type="text/css" rel="stylesheet" href="style.css"/>[/code]
in the head. I think that's what you're saying, right?

Here is my style.css
.body 	{
    background-image: url(greysq.gif);
    margin-left: 20%;
    margin-right: 20%;
    border: 1px dotted gray;
    padding: 100px 100px 100px 100px;
    font-family: sans-serif;
    overflow: auto;
}	

.left {
    float:left;
}

.clear {
    clear: both;
}

.menu {				
    background-color:#669999;
    float: left;
	width:200px;
    margin: 0;
}

			.body, html  {
				height:100%;
				margin: 0;
}
					}



Now I have a REALLY messed up page. Can u spot what I'm doing wrong here?
Was This Post Helpful? 0
  • +
  • -

#14 grizrule  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 88
  • Joined: 29-December 13

Re: using <div> to create the menu

Posted 10 February 2014 - 04:10 PM

I did notice you have an extra } at the bottom of your style.css, but it should be working. Is it giving you any errors? You might want to post your home page code again (the one with the link to style.css)
Was This Post Helpful? 0
  • +
  • -

#15 DATAfiend  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 17-February 12

Re: using <div> to create the menu

Posted 10 February 2014 - 11:30 PM

ok. let me make sure I'm getting this right. I have moved all the css code to the .css file. Now, I have my index.html file and a .css file. Correct? Here is the index html code:
<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>  
	<head>
		<link rel="Shortcut Icon" href="/favicon.ico" />
		<meta http-equivalent="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>SACMAP</title>
		<link type="text/css" rel="stylesheet" href="style.css" />
		
			
			
		
	</head>
	<body>
	<div class="left">				
		<ul class="menu" >		
		<li>Menu</li>
		<li>HTML</li>
		<li>CSS</li>
		<li>Javascript</li>
	</ul>	
</div>
		<div class="body">
			<p>	 
				<img src="PMILogo.gif" />
			</p>
			<h1>Welcome to SACMAP, WE'RE UNDER CONSTRUCTION...STILL</em></h1> 
		
			
			<div class="center">
				<p> 			
					<a href="about.html">about</a>
				</p>
				<a href="http://www.twitter.com/gisdude">
					<img src="http://twitter-badges.s3.amazonaws.com/t_logo-a.png" alt="Follow gisdude on Twitter"/>
				</a>
			</div>
 		</div>
	</body>
</html>
			



This is the index.html after I've moved the style code. I'm wondering if you wanted the <link type = "text/css"...OUT OF THE HEAD and put in the body? Be advised, I haven't uploaded this yet, but I'd like to post it up on my website sooner rather than later. Thanks for the help.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2