2 Replies - 407 Views - Last Post: 15 October 2012 - 05:38 PM

#1 playthalius  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 26
  • Joined: 26-September 12

Im confused on how to position the diferent elements of my page

Posted 13 October 2012 - 04:19 PM

I am trying to create a website for class. This is the first site I have had to do that is not in the book. All I have is a picture of the website and a couple basic guidelines. the width of the page has to be between 800px and 1000px. all the pics and scripts are in the file.

Im almost dont want to show my code cause I know I am way off but here it is.
this is the css file
/*
	New Perspectives on HTML and CSS
	Exam 1
	
	Author: William York
	Date: 10/11/2012
	
	File Name: styles.css
	Supporting Files: 	vancouver-courier-logo.jpg, runner.jpg, 
						parch.jpg, cougar.jpg	
*/

header, section, aside, footer, nav { display: block; }
body * {
	margin: 0px;
	padding: 0px;	
}
body { width: 1000px; border: 1px solid black; }
body { font-family: Verdana, Geneva, sans-serif; }
nav.horizontal { background-color: black; width: 100%; }
nav.horizontal ul { font-size:12px; height: 10px; margin-top: -25px; }
nav.horizontal ul li {
	float: left;
	padding: 25px;
	background-color: black;
}
nav.horizontal ul li a {
	text-decoration: none;
	list-style-type: none;
	font-size: 12px;
	color: #FFF;
	
}
nav.vertical { background-color: black; width: 115px; color: white; }
nav.vertical ul li { margin: 10px; }
nav.vertical ul li a {
	text-decoration: none;
	list-style-type: none;
	font-size: 12px;
	color: #FFF;
}
nav.vertical#contact { background-color: white; }
nav.vertical#contact li { margin: 10px; }
nav.vertical#contact li a {
	text-decoration: none;
	list-style-type: none;
	font-size: 12px;
	color: black;
}
#runner { margin-left: 300px; }
#first { width: 275px; margin-top: -170px; }
div.paragraph { margin-left:125px; margin-top: -300px; }
div.paragraph p {
	margin-left: 15px;
	margin-top: 15px;
	width: 450px;
}

#highway { font-size: 16px; margin-top: 20px; }
#cougar { font-size: 14px;  margin-top: 20px; }
section#marathon { background-color: white; float: left; width: 600px; }




this is the htm file
<!DOCTYPE html>
<html>

	<head>
	<!-- 
		New Perspectives on HTML and CSS
		Exam 1
		
		Author: William York
		Date: 10/11/2012
		
		Filename:			vcourier.htm
		Supporting files: 	vancouver-courier-logo.jpg, runner.jpg, parch.jpg, cougar.jpg,
							styles.css, modernizr-1.5.js	
	-->
	
		<meta charset="UTF-8" />
		<title>The Vancouver Courier</title>
		<script src="modernizr-1.5.js"></script>
		<link rel="stylesheet" type="text/css" href="styles.css">
		
	</head>
	
	<body>
	
		<header>
			<div align="left"><img src="vancouver-courier-logo.jpg" alt="The Vancouver Courier" />
		  </div>
		</header>
		<nav class="horizontal">	
			<div align="left">
			  <ul>
			    <li><a href="#">Home Page</a> </li>
			    <li><a href="#">News</a></li>
			    <li><a href="#">Local</a></li>
			    <li><a href="#">State</a></li>
			    <li><a href="#">National</a></li>
			    <li><a href="#">International</a></li>
			    <li><a href="#">Sports</a></li>
			    <li><a href="#">Weather</a></li>
		      </ul>				
		  </div>
		</nav>
		<nav class="vertical">
			<div align="left">
			  <ul>
			    <li><a href="#">Classifieds</a></li>
			    <li><a href="#">Employment</a></li>
			    <li><a href="#">Real Estate</a></li>
			    <li><a href="#">Personal</a></li>
		      </ul>
		  </div>
		</nav>
		<nav class="vertical">
			<div align="left">
			  <ul>
			    <li><a href="#">Tourism</a></li>
			    <li><a href="#">Attractions</a></li>
			    <li><a href="#">Events</a></li>
			    <li><a href="#">Parks</a></li>
			    <li><a href="#">Camping</a></li>
		      </ul>
		  </div>
		</nav>
		<nav class="vertical">
			<div align="left">
			  <ul>
			    <li><a href="#">Subscriptions</a></li>
		      </ul>
		  </div>
		</nav>
		<nav class="vertical" id="contact">
			<li>
			  <div align="left"><a href="#">Contact Us</a>			    </div>
			</li>
		</nav>
		<div class="paragraph">
		<section id="text">
			<article id="marathon">
				<h2 id="woman" align="left">Local Woman Wins Marathon</h2>
                <img id="runner" src="runner.jpg" alt="Runner">
				<p id="first" align="left">
					Woman wins marathon Vancouver native won the 27th Front Range Marathon over 
					an elite field of the best long-distance runners in the country. STUDENT's 
					time of 2 hr. 28 min. 21 sec. was only 2 minutes off the women's course 
					record set last year by Candice Carrelle. Ashley Foster and Brittany 
					Patterson finished second and third, respectively. STUDENT's victory came 
					on the heels of her performance at the NCAA Track and Field Championships, 
					in which she placed second running for Washington State University.
				</p>
				<p align="left">				
					In an exciting race, Peter Teagan of San Antonio, Texas, used a finishing 
					kick to win the men's marathon for the second straight year, in a time of 
					2 hr. 12 min. 34 sec. Ahead for much of the race, Kyle Wills of Billings, 
					Montana, finished second when he could not match Teagan's finishing pace. 
					Jason Wu of Cutler, Oregon, placed third in a very competitive field.
				</p>
				<p align="left">
					This year's race through downtown Mount Vista boasted the largest field in 
					the marathon's history, with over 9500 men and 6700 women competing. Race 
					conditions were perfect with low humidity and temperatures that never exceeded 
					85 degrees.
				</p>
				</article>
			<article id="highway">
				<h1 id="highway" align="left">Highway 6 Reopens</h1>
				<p align="left">
					Highway 6 will reopen this Friday, May 3rd, after a final safety inspection. A 
					late blizzard delayed road crews, marking this as one of the latest dates on 
					record for the highway's reopening.
				</p>
				<p align="left">
					Rising to an elevation of 12,351 feet at Grace Pass, Highway 6 is a main link 
					between Vancouver and Pleasant Valley. The reopening of the road is one of the 
					annual signs that summer is near and the tourist season will soon be upon us!
				</p>				
			</article>
		</section>
		</div>
		<aside id="cougar">
			<h1 id="cougar">Cougar Sightings Increase</h1>
			<p>
				Cougar sightings have increased 40% in the Vancouver area according to a report 
				released yesterday by the state DNR. In the last month alone, there were ten sightings 
				in Vancouver and the surrounding communities of Riley and Dixon. This compares to only 
				twelve sightings for the entire spring of last year.
			</p>
			<p>
				Reasons for the growing number of cougar sightings include increasing encroachment by 
				people into former wildlife habitats and new wildlife regulations that result in 
				decreasing numbers of elk and deer being taken by hunters. Cougars may be wandering 
				into developed areas, following the herds.
			</p>
			<p>
				DNR spokesman Steve Tasker asks residents to call the DNR report line at 555-6981 if 
				they believe they have seen a cougar or any large predatory animal. Two fatalities have 
				already occurred in the west this year from cougar attacks.
			</p>
		</aside>
		<aside id="inside">
			
		</aside>
		
		<footer>
		</footer>
		
	</body>
	
</html>



Im consused on how to do the horizontal nav list that runs the whole top of the page. I got it to go horizontal but I cant get its height that skinny looking. Im having probhlems with the most basic stuff on here. Every assignment I have did had either the css oor the htm already written and ha dto just fill in stuff by following directions step by step.

I just need to figure out how to arrange the elements or what I am doing wrong. Thanks to anyone who helps
Attached Image

This is what its supposed to look like.

This is what mine looks like

Attached Image

Is This A Good Question/Topic? 0
  • +

Replies To: Im confused on how to position the diferent elements of my page

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4187
  • View blog
  • Posts: 11,851
  • Joined: 18-April 07

Re: Im confused on how to position the diferent elements of my page

Posted 15 October 2012 - 02:59 PM

You have this section in your CSS file...

nav.horizontal ul li {
    float: left;
    padding: 25px;
    background-color: black;
}




Notice the padding is 25px. This means that all around the words in each list item of your nav, you have 25 pixels of padding. That is why your nav is so fat. You have 25 pixels between the top of the list item and the words and another 25 pixels from the bottom of the words to bottom of the list item. You also have 25 pixels between the words and its left/right edges.

Try something like 5 pixels. If you need the menu items to also stretch across more after this, try making the <li> tags block elements and adding a width.

:)
Was This Post Helpful? 0
  • +
  • -

#3 playthalius  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 26
  • Joined: 26-September 12

Re: Im confused on how to position the diferent elements of my page

Posted 15 October 2012 - 05:38 PM

Thanks a ton. Thats exactly what i needed was some laman terms that make sense.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1