Help me with making my code stand out

+1 Robert Summers · October 4, 2014
Okay so i am learning HTML5 and CSS3 and need to present my code better, please help many thanks. 


Need to put the HTML and CSS file in a folder and put the two image attachments into a (images) folder. 

I changed the logo filename as logo.png and the html image as the filename image.png

Logo image download here: http://thevisualcommunicationguy.com/wp-content/uploads/2013/11/Starbucks-Logo-051711.gif

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta http-equiv="Content-Type" type="text/html" charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<header id="the_header">
<div id="inHeader">
<img id="the_img" src="images/logo.png" width="120" height="120"/>
<br/><h1 id="the_title">  Welcome to My Website</h1>
</div>
</header>
<nav id="the_nav">
<a href="home.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
<section id="main_content">
<article>
<header>
<hgroup>
<h2>Hey look here stupid!</h2>
<h3>Please read me, Its here what I am for?</h3>
</hgroup>
</header>
<p>This is my story. The cat sat on the mat. The end!</p>
<footer>
<p>- written by Quentin Watt</p>
</footer>
</article>

<article>
<header>
<hgroup>
<h2>Hey look here handsome</h2>
<h3>Please read me</h3>
</hgroup>
</header>
<p>Story Time</p>
<footer>
<p>- written by Quentin Watt</p>
</footer>
</article>
</section>

<aside id="the_news">
<h2>Recent news!</h2>
add me on twitter @QuentinWatt
</aside>

<footer id="the_footer">
Copyright Robert Summers 2014
</footer>

</body>
</html>



CSS code

*{
margin: 0px;
padding: 0px;
}
body{
display:block;
}
#the_header{
border:5px solid blue;
font: bold 20px Tahoma;
}
#the_header img{
float:left;
padding:5px;
}
#the_header h1{
padding:10px;
padding-bottom:50px;
display:block;
}
#the_nav{
clear:both;
font: bold 14px Tahoma;
padding:10px;
border: 5px solid red;
}
#main_section{
padding:5px;
}


/images/forum/upload/2014-10-04/02f823f11f197c884bd09cd2c0b6394a.png
Thank you for your help

Post a Reply

Replies

Oldest  Newest  Rating
0 Pieter Moens · October 5, 2014
What is it that you're asking exactly?
If I'm right, you just want us to create the folders and files for you? It really isn't that hard to do...

Just create these files/folders :


  • yourprojectname (folder)


    • index.php (file)

    • main.css (file)

    • images (folder)


      • logo.png





I hope this helped you.

Kind regards,
Pieter Moens
0 Robert Summers · October 5, 2014
I messed up the layout, I have used too many <br/> Break Lines in my HTML

and I need the layout too look like this one as I am trying to see if I can do this myself first but struggled so I want to find where I am going wrong: https://www.youtube.com/watch?v=wpt-qVFIutg&index=39&list=PLEAFE1C118B3ED6AE

10:46 = the layout i need
0 Pieter Moens · October 5, 2014
I've created the code you needed in order to fit everything perfectly. (I hope you just take a brief look and try to type it entirely by yourself, because that's the best way to learn)

I want to point out some basic mistakes you're making :


  • you should watch the basic HTML & CSS tutorial on the use of <div>

  • you only need to split up the content in as many blocks you need, don't split it up too much, because it's unneacessary 



main.php
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <meta http-equiv="Content-Type" type="text/html" charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
    <header id="the_header">
        <div id="inHeader">
            <img id="the_img" src="images/logo.png" width="120" height="120"/>
            <br/><h1 id="the_title">  Welcome to My Website</h1>
        </div>
    </header>
    <nav id="the_nav">
        <a href="home.html">Home</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
    </nav>
    <div id="main_content">
        <ul class="article">
            <ul class="header">
                <ul class="hgroup">
                    <h2>Hey look here stupid!</h2>
                    <h3>Please read me, Its here what I am for?</h3>
                    <p>This is my story. The cat sat on the mat. The end!</p>
                    <p>- written by Quentin Watt</p>
                </ul>
            </ul>
        </ul>
        <ul class="article">
                    <h2>Hey look here handsome</h2>
                    <h3>Please read me</h3>
                    <p>Story Time</p>
                    <p>- written by Quentin Watt</p>
        </ul>
    </div>
    
    <div id="the_news">
        <h2>Recent news!</h2>
        <p>add me on twitter @QuentinWatt</p>
    </div>
    
    <div id="the_footer">
        Copyright Robert Summers 2014
    </div>
    
</body>
</html>



main.css
*{
    margin: 0px;
    padding: 0px;
}
body{
    display:block;
}
#the_header{
    border:5px solid blue;
    font: bold 20px Tahoma;
    margin:10px 10px 10px 10px;
}
#the_header img{
    float:left;
    padding:5px;
}
#the_header h1{
    padding:10px;
    padding-bottom:50px;
    display:block;
}
#the_nav{
    clear:both;
    font: bold 14px Tahoma;
    padding:10px;
    border: 5px solid red;
    margin:0px 10px 10px 10px;
}
#main_content{
    padding:10px;
    border:5px solid green;
    width:900px;
    margin:0px 10px 10px 10px;
    float:left;
    height:200px;
}

#the_news {
    float:left;
    border:5px solid orange;
    padding:10px;
    width:610px;
}

#the_footer {
    clear:both;
    float:bottom;
    border:5px solid black;
    margin:0px 10px 10px 10px;
    padding:10px;
}


I hope this helped and I hope you learn from it.

Kind regards,
Pieter Moens
  • 1

HTML / CSS / Web Design

107,172 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators