www.webdeveloper.com
Results 1 to 3 of 3

Thread: Can't apply what I've learned

  1. #1
    Join Date
    May 2014
    Posts
    3

    Can't apply what I've learned

    I'm new so please bear with my stupidity on this matter. I recently completed an HTML/CSS program by code academy and I'm having trouble applying what I've learned.

    The problem I'm having is that I'm stuck. I've forgotten/don't know how to move my <nav> <h1> and <p>'s up.

    example: http://i.imgur.com/Hg4bUgl.jpg

    I want to move the navigation links up 35px, "Holla" up 75px, and the tagline up 86 pixels. Can someone explain to me how I'd do that?


    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Solo Site</title>
    		<meta charset="urf-8" />
    
    		<link rel="stylesheet" href="style.css" type="text/css">
    	</head>
    	<body>
    		<header>
    			<nav>
    				<ul>
    					<li class="active"><a href="#">Home</a></li>
    					<li><a href="#">Services</a></li>
    					<li><a href="#">Portfolio</a></li>
    					<li><a href="#">Blog</a></li>
    					<li><a href="#">About</a></li>
    					<li><a href="#">Contact</a></li>
    				</ul>
    			</nav>
    		</header>
    
    		<article>
    			<h1>Holla</h1>
    				<p>I'm <b>John Doe</b> a Canadian-based <b>web</b> & <b>graphic</b> designer who creates<br/>clean and modern designs for the world of web.</p>
    		</article>
    	</body>
    </html>
    Code:
    body {
    	background-color: #559c67;
    	color: #fff;
    	font-family: Open Sans;
    	font-size: 16px;
    }
    
    a {
    	text-decoration: none;
    	color: #fff;
    }
    
    header {
    	width: 1600px;
    	height: 90px;
    	background-color: #559C67;
    }
    
    nav ul {
    	float: right;
    	margin: 90px 330px;
    
    }
    nav li {
    	text-align: right;
    	margin-left: 40px;
    	display: inline;
    }
    
    article {
    	background-color: #559C67;
    	width: 1600px;
    	height: 570px;
    }
    
    article h1 {
    	font-size: 72px;
    	font-weight: lighter;
    	text-align: left;
    	margin-left: 330px;
    }
    
    article p {
    	text-align: left;
    	margin-left: 330px;
    	padding-bottom: 60px;
    }
    Any help appreciated, thank you.

  2. #2
    Join Date
    Oct 2013
    Location
    3rd planet from the sun
    Posts
    166
    in the css you can try margin-top: -35px; (this example would move the item up 35px)

  3. #3
    Join Date
    May 2014
    Posts
    911
    For the most part, just make your margins smaller... You want the H1 up higher, don't put 90px of bottom margin on the UL above it, put 55px on it.


    I would also suggest you STOP declaring widths and heights on elements for 'no reason'. You've got a 90px height on the (IMHO unneccesary HTML 5 bloat) header -- but you've got 90px of top and bottom margin on the UL inside it! You can't do that -- that UL is 180px + the line-height in size, that won't fit a 90px tall shell.

    Some other observations -- avoid trying to use font-weights other than 'normal' and 'bold' - they do NOT work consistently cross browser AT ALL. Likewise, if you redeclare the font-size, redeclare your line-heights so you have some clue what you're dealing with; line-height inheritance CANNOT be trusted, and failing to redeclare it when you change the font-size WILL bite you in the backside. Some ignorant fools will tell you that you can get inheritance that works by omitting a metric on the outermost declaration, for example: "line-height:1.5", but that does NOT work cross browser either no matter how many halfwits ignore the evidence to the contrary. (sorry, pet peeve)

    Also, left is the default text-align, you shouldn't have to say it, avoid declaring font sizes in px since that's accessibility rubbish (see the "web content accessibility guidelines - WCAG for more on that) and likewise, avoid declaring fixed widths too. Best practice would be min-width and max-width; the so called "semi-fluid" layout.

    Of course, I'd have to see what your CONTENT is going to be before weighing in more on the markup, though all those HTML 5 tags like ARTICLE, HEADING, NAV being redundant to numbered headings and horizontal rules I'd pitch in the trash before going much further.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles