New to all this

frankiiei4 · #1 Nov 5th, 2007, 09:31

Hi there I am new to all of this, I have been given a task, in wich i must design a basic website, could someone please help me as I need to made a Header and Footer (just a block of color)
Hope this makes sense, thanks
Frankiiei

c010depunkk · #2 Nov 5th, 2007, 11:04

Well, here's a simple HTML page....

HTML: Select all

<html>
<head>
<title>blub</title>
<style type="text/css">
    .head { background-color:#EAEAEA;padding:10px; }
    .content { padding:20px; }
    .footer { background-color:#999999;padding:5px; }
</style>
</head>
<body>
<div class="head">
    <h1>Header</h1>
</div>
<div class="content">
    <h2>Header 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus a tortor. Fusce lacinia. Cras convallis egestas elit. Integer non ipsum. Maecenas eu felis. Suspendisse potenti. Vestibulum ut mauris. In ut augue. In malesuada suscipit nunc. Sed eleifend neque at pede. Pellentesque quis quam ac lectus laoreet egestas.</p>
</div>
<div class="footer">
    <p>footer</p>
</div>
</body>
</html>

frankiiei4 · #3 Nov 5th, 2007, 11:29

ok thanks, the only problem is im doing it in a css style sheet so that didnt really make sence to me?!?!?!

Lchad · #4 Nov 5th, 2007, 11:33

Ok.. so this part here

Code: Select all

.head { background-color:#EAEAEA;padding:10px; }
    .content { padding:20px; }
    .footer { background-color:#999999;padding:5px; }

will go into your stylesheet and save it as something.css

This is your html which will be saved as something.html

Code: Select all

<body>
<div class="head">
    <h1>Header</h1>
</div>
<div class="content">
    <h2>Header 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus a tortor. Fusce lacinia. Cras convallis egestas elit. Integer non ipsum. Maecenas eu felis. Suspendisse potenti. Vestibulum ut mauris. In ut augue. In malesuada suscipit nunc. Sed eleifend neque at pede. Pellentesque quis quam ac lectus laoreet egestas.</p>
</div>
<div class="footer">
    <p>footer</p>
</div>
</body>
</html>

In the html between the <head></head>
place this code to link the css to the html page:

Code: Select all

<link href="something.css" rel="stylesheet" type="text/css" />

frankiiei4 · #5 Nov 5th, 2007, 11:42

ok thats cool thanks, ok now how do I make it small and cenered in the page. I also need a background color, where does that fit in do you know?

AdRock · #6 Nov 5th, 2007, 11:52

What do you need to make small and centered....the text?

frankiiei4 · #7 Nov 5th, 2007, 11:54

no the whole thing, I was given a task and all i had put in front of me was a little drawing and at the top it says 720. thats how long it had to be. The whole thing need to be centered in the page. umm this is an example : http://www.nickclarkecoaching.co.uk/ it needs to be laid out like that.

frankiiei4 · #8 Nov 5th, 2007, 11:58

oh and i need to make a menue on the left the same as that one. if anyone can help that would be great!

AdRock · #9 Nov 5th, 2007, 12:00

Have a look here
http://www.456bereastreet.com/lab/de...slayout/2-col/

frankiiei4 · #10 Nov 5th, 2007, 12:09

ok i cant find out there how to put it to the side. as i want to right on the left, not underneath on the left.

AdRock · #11 Nov 5th, 2007, 12:11

That didn't make any sense to me. Can you explain what you are trying to do or show us a screenshot or something of the problem?

frankiiei4 · #12 Nov 5th, 2007, 12:14

ok what I am trying to do is exatly the same as this example : http://www.nickclarkecoaching.co.uk/
The navigation needs to be on the left, i dont know how to position it there.

AdRock · #13 Nov 5th, 2007, 12:22

Here it is with column on left

HTML: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title>Simple 2 column CSS layout, final layout | 456 Berea Street</title>
    <meta name="description" content="How to create a simple two column CSS layout with full width header and footer.">
    <meta name="copyright" content="Copyright (c) 2004 Roger Johansson">
    <meta name="author" content="Roger Johansson">
    <style type="text/css">
    body,
    html {
        margin:0;
        padding:0;
        background:#a7a09a;
        color:#000;
    }
    body {
        min-width:750px;
    }
    #wrap {
        background:#99c;
        margin:0 auto;
        width:750px;
    }
    #header {
        background:#ddd;
    }
    #header h1 {
        padding:5px;
        margin:0;
    }
    #nav {
        background:#c99;
        padding:5px;
    }
    #nav ul{
        margin:0;
        padding:0;
        list-style:none;
    }
    #nav li{
        display:inline;
        margin:0;
        padding:0;
    }
    #main {
        background:#9c9;
        float:right;
        width:500px;
    }
    #main h2, #main h3, #main p {
        padding:0 10px;
    }
    #sidebar {
        background:#99c;
        float:left;
        width:240px;
    }
    #sidebar ul {
        margin-bottom:0;
    }
    #sidebar h3, #sidebar p {
        padding:0 10px 0 0;
    }
    #footer {
        background:#cc9;
        clear:both;
    }
    #footer p {
        padding:5px;
        margin:0;
    }
    </style>
</head>
<body>

<div id="wrap">
    <div id="header"><h1>Simple 2 column CSS layout, final layout</h1></div>
    <div id="nav">
        <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>

            <li><a href="#">Option 4</a></li>
            <li><a href="#">Option 5</a></li>
        </ul>
    </div>
    <div id="sidebar">
        <h3>Column 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>

            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
            <li><a href="#">Link 6</a></li>
            <li><a href="#">Link 7</a></li>
            <li><a href="#">Link 8</a></li>

            <li><a href="#">Link 9</a></li>
            <li><a href="#">Link 10</a></li>
            <li><a href="#">Link 11</a></li>
            <li><a href="#">Link 12</a></li>
            <li><a href="#">Link 13</a></li>
            <li><a href="#">Link 14</a></li>

            <li><a href="#">Link 15</a></li>
        </ul>
    </div>
    <div id="main">
        <h2>Column 1</h2>
        <p><a href="/">456 Berea Street Home</a> | <a href="/lab/developing_with_web_standards/csslayout/2-col/">Simple 2 column CSS layout</a> | <a href="http://www.456bereastreet.com/lab/developing_with_web_standards/">Developing with web standards index</a></p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
        <p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>
        <h3>Consectetuer adipiscing elit</h3>
        <p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        <p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p>

    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
</div>
</body>
</html>

frankiiei4 · #14 Nov 5th, 2007, 12:36

hmmm for somereason tht didnt work!

AdRock · #15 Nov 5th, 2007, 12:42

What did you do as I just tested the code and it works fine.

I've attached the page so all you have to do is save it

karinne · #16 Nov 5th, 2007, 12:43

have a look at some CSS tutorials by HTML Dog to help you get started.

To center a site, I covered this in the FAQ for the August Edition

As for some layout example, this thread will be of some help - Resources for learning how to use CSS for layout

frankiiei4 · #17 Nov 5th, 2007, 13:03

ok thats cool, now i need them to have boxes around them, or at least look boxed in

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
New to all this