Layout Help

Frankiiei · #1 Sep 14th, 2007, 11:30

Hi guys, I posted before, and you was all a big help! thanks, but i have white space at the bottom of my web page, and the text is like this;

this is my text and it is going right over tot he side of the pages, but i want it

and i want it to look like this;

to look like this with some space on each side.

Thank you

Frankiiei

Frankiiei · #2 Sep 14th, 2007, 11:30

sorry the second example was meant to be right in the center with space on the right.
Frankiiei

karinne · #3 Sep 14th, 2007, 11:31

I don't see any examples?!

Frankiiei · #4 Sep 14th, 2007, 11:33

oh, ok it doesnt seam to work. never mind, i want the content, not just centered but with space at each side so it looks a bit neater, would this mean having a border?

dab42pat · #5 Sep 14th, 2007, 11:34

Can you post a link as I dont understand what you mean.

karinne · #6 Sep 14th, 2007, 11:34

I don't know ... I can't see what you're talking about?!

Do you have a link? Use the attachments to show your images.

Frankiiei · #7 Sep 14th, 2007, 11:36

my website is seogenius.co.uk, it is so basic at the moment, i need to do the layout before i can do any content. I gnore the text on there at the moment, its just rubbish, so i can see how it will look.
Thanks
Frankiiei

karinne · #8 Sep 14th, 2007, 11:38

OK ... so ... what do you want again?! Space on the sides??!

Frankiiei · #9 Sep 14th, 2007, 11:38

yep, sorry if i confused you all before!

Frankiiei · #10 Sep 14th, 2007, 11:42

To be more persific, I want the text the be in by a few cm or so, just so it looks a bit more tidy. And also when i preview my site, I have 'white space' at the bottom, which i dont know how to get rid of, if anyone has any ideas id be real greatfull
Thanks

karinne · #11 Sep 14th, 2007, 11:51

Ok well ... first of all, ditch the design view in DW. Use code view only if you absolutely want to use DW.

Next, your separations need to be better define. For example:

What you have now is a column layout right? So ... no problems there.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
</head>

<body>

</body>
</html>

Next, that purple portion is a header/branding section so ... let's go and add that

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
</head>

<body>

<div id="branding">
    <h1>Seo Genius</h1>
</div>


</body>
</html>

Then you have your content

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
</head>

<body>

<div id="branding">
    <h1>Seo Genius</h1>
</div>

<div id="content">
    <h2> This website provides a guide to the basics of SEO.</h2>

    <p>SEO means Search engine optimasation, basically SEO is used to rank you page higher on search engines, such as 'Google' and 'Yahoo'.
Some websites use a SEO company, and some people do the SEO themselves, which ever you chooses, it is important to get it right.</p>

    <p>If there are any words that you do not understand, just click on the '<a href="dictionary.php">dictionary</a>' link, for a full list of the 'seo words'. </p>

    <p>Everyone would love to be No.1 in their category, but what if you could be No.1 in every category in the search engine results. If someone searched for hotels, boats, phones, whatever: you want your website 'decorators.com' to be the first item on every list. And what if you could be the first 100 positions for lots of searches, you would really be bringing the business in then.</p>

    <p>Back when search engines used only the 'meta-keywords' to index the page(s) 'spammers' discovered that someone could type in computers, windows, kylie and many more top keywords in their websites meta-keywords, and when people searched for these they would find them selfs on the spammers websites, which had no revelance what so ever to what the person had searched for. </p>

    <p>Unfortunately it DOES NOT work like this.</p>

    <h3><a href="What-is-seo.php">WHAT IS SEO ?</a></h3>

    <p> USEO means Search Engine Optimisation.</p>

    <p>We optimise our websites, or websites we are building, to get good rankings on search engines. Obviously everyone want the top spot on 'Google' and 'Yahoo' to get the most traffic into your site, but you need to do your optimising righ to be able to try and achieve this. We optimise our websites in various ways, there are some <a href="critical-componants.php">critical componants</a> of SEO that will be a major player in your SEO. Your search engine ranking depend on quite a few things, theses are all explained in the links. </p>

</div> 

</body>
</html>

Noticed I removed all the styles5 stuff that DW put in ... you don't need all that junk.

So next post ... we'll style it

Frankiiei · #12 Sep 14th, 2007, 12:06

ok i have done that, my sites looks really plain now, no color lol

I hope i done that right?
Frankiiei

karinne · #13 Sep 14th, 2007, 12:06

Now let's get on with some styles ...

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <link rel="stylesheet" type="text/css" media="screen" href="styles.css">
    
</head>

<body>

<div id="branding">
    <h1>Seo Genius</h1>
</div>

<div id="content">
    <h2> This website provides a guide to the basics of SEO.</h2>

    <p>SEO means Search engine optimasation, basically SEO is used to rank you page higher on search engines, such as 'Google' and 'Yahoo'.
Some websites use a SEO company, and some people do the SEO themselves, which ever you chooses, it is important to get it right.</p>

    <p>If there are any words that you do not understand, just click on the '<a href="dictionary.php">dictionary</a>' link, for a full list of the 'seo words'. </p>

    <p>Everyone would love to be No.1 in their category, but what if you could be No.1 in every category in the search engine results. If someone searched for hotels, boats, phones, whatever: you want your website 'decorators.com' to be the first item on every list. And what if you could be the first 100 positions for lots of searches, you would really be bringing the business in then.</p>

    <p>Back when search engines used only the 'meta-keywords' to index the page(s) 'spammers' discovered that someone could type in computers, windows, kylie and many more top keywords in their websites meta-keywords, and when people searched for these they would find them selfs on the spammers websites, which had no revelance what so ever to what the person had searched for. </p>

    <p>Unfortunately it DOES NOT work like this.</p>

    <h3><a href="What-is-seo.php">WHAT IS SEO ?</a></h3>

    <p> USEO means Search Engine Optimisation.</p>

    <p>We optimise our websites, or websites we are building, to get good rankings on search engines. Obviously everyone want the top spot on 'Google' and 'Yahoo' to get the most traffic into your site, but you need to do your optimising righ to be able to try and achieve this. We optimise our websites in various ways, there are some <a href="critical-componants.php">critical componants</a> of SEO that will be a major player in your SEO. Your search engine ranking depend on quite a few things, theses are all explained in the links. </p>

</div> 

</body>
</html>

First things first, I started dropping the universal selector ( * ) lately because I noticed that was reseting the margin only to put them back really so ... for this instance I will not use it just to show you.

Let's remove the margins and padding for body

Code: Select all

html, body {
    margin: 0;
    padding: 0;
}

I always keep those separate that way, if I want to reset list I can just add them there.

Now ... if you want do remove the white-space at the bottom that's caused because of screen resolution, just apply the blue background to the body. We'll add the fonts there and the color of the text

Code: Select all

<style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
   }
   
   body {
        font: 14px Verdana, Geneva, sans-serif;
        background-color: #09f;
        color: #fff;
    }

Now, let's deal with the header

Code: Select all

<style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
    }
    
    body {
        font: 14px Verdana, Geneva, sans-serif;
        background-color: #09f;
        color: #fff;
    }
    
    #branding {
        background-color: #c3c;
        margin: 0;
        padding: 40px 0 0 0;
        text-align: right;
    }

Now ... if you save this and view it, you'll notice the blue background peeking above the header, that's because the <h1> element we use has a margin-top default value and it's pushing the header down. So ... let's remove that

Code: Select all

html, body {
        margin: 0;
        padding: 0;
    }
    
    body {
        font: 14px Verdana, Geneva, sans-serif;
        background-color: #09f;
        color: #fff;
    }
    
    #branding {
        background-color: #c3c;
        margin: 0;
        padding: 40px 0 0 0;
        text-align: right;
    }
    
    #branding h1 {
        margin-top: 0;
    }

Now ... on to the content {

Code: Select all

html, body {
        margin: 0;
        padding: 0;
    }
    
    body {
        font: 14px Verdana, Geneva, sans-serif;
        background-color: #09f;
        color: #fff;
    }
    
    #branding {
        background-color: #c3c;
        margin: 0;
        padding: 40px 0 0 0;
        text-align: right;
    }
    
    #branding h1 {
        margin-top: 0;
    }
    
    #content {
        padding: 10px 40px;
    }

The padding 10px 40px; is what will give you your space on the sides

And instead of having   in there, just set the margins to your <p> elemen

Code: Select all

html, body {
        margin: 0;
        padding: 0;
    }
    
    body {
        font: 14px Verdana, Geneva, sans-serif;
        background-color: #09f;
        color: #fff;
    }
    
    #branding {
        background-color: #c3c;
        margin: 0;
        padding: 40px 0 0 0;
        text-align: right;
    }
    
    #branding h1 {
        margin-top: 0;
    }
    
    #content {
        padding: 10px 40px;
    }

    p {
        margin-bottom: 10px;
    }

Hope that helped.

karinne · #14 Sep 14th, 2007, 12:07

Quote:

Originally Posted by Frankiiei

ok i have done that, my sites looks really plain now, no color lol

I hope i done that right?
Frankiiei

Yes ... that was to show you how to code it properly. This is also to show you how people with screen readers will see your site

Frankiiei · #15 Sep 14th, 2007, 12:08

ok I have this ;

<title>Seo Genius</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

so i get rid of the <style 5 {color ............
part of leave this?
because i did delte it and i lost the text so i put it back in?

karinne · #16 Sep 14th, 2007, 12:13

Delete the whole thing and start from scratch with the code I gave you above.

The final code should be this

HTML

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <link rel="stylesheet" type="text/css" media="screen" href="styles.css">
    
</head>

<body>

<div id="branding">
    <h1>Seo Genius</h1>
</div>

<div id="content">
    <h2> This website provides a guide to the basics of SEO.</h2>

    <p>SEO means Search engine optimasation, basically SEO is used to rank you page higher on search engines, such as 'Google' and 'Yahoo'.
Some websites use a SEO company, and some people do the SEO themselves, which ever you chooses, it is important to get it right.</p>

    <p>If there are any words that you do not understand, just click on the '<a href="dictionary.php">dictionary</a>' link, for a full list of the 'seo words'. </p>

    <p>Everyone would love to be No.1 in their category, but what if you could be No.1 in every category in the search engine results. If someone searched for hotels, boats, phones, whatever: you want your website 'decorators.com' to be the first item on every list. And what if you could be the first 100 positions for lots of searches, you would really be bringing the business in then.</p>

    <p>Back when search engines used only the 'meta-keywords' to index the page(s) 'spammers' discovered that someone could type in computers, windows, kylie and many more top keywords in their websites meta-keywords, and when people searched for these they would find them selfs on the spammers websites, which had no revelance what so ever to what the person had searched for. </p>

    <p>Unfortunately it DOES NOT work like this.</p>

    <h3><a href="What-is-seo.php">WHAT IS SEO ?</a></h3>

    <p> USEO means Search Engine Optimisation.</p>

    <p>We optimise our websites, or websites we are building, to get good rankings on search engines. Obviously everyone want the top spot on 'Google' and 'Yahoo' to get the most traffic into your site, but you need to do your optimising righ to be able to try and achieve this. We optimise our websites in various ways, there are some <a href="critical-componants.php">critical componants</a> of SEO that will be a major player in your SEO. Your search engine ranking depend on quite a few things, theses are all explained in the links. </p>

</div> 

</body>
</html>

CSS

Code: Select all

html, body {
        margin: 0;
        padding: 0;
    }
    
    body {
        font: 14px Verdana, Geneva, sans-serif;
        background-color: #09f;
        color: #fff;
    }
    
    #branding {
        background-color: #c3c;
        margin: 0;
        padding: 40px 0 0 0;
        text-align: right;
    }
    
    #branding h1 {
        margin-top: 0;
    }
    
    #content {
        padding: 10px 40px;
    }

    p {
        margin-bottom: 10px;
    }

Frankiiei · #17 Sep 14th, 2007, 12:26

Thank you so much Karinne, your help is much appreciated! I'm only 17 so I'm hoping by learnin young , Ill be a pro in a good few years

Any way like I said THANK YOU!

Frankiiei

		Webforumz.com > Main Forums > Design Your Website > Starting Out
Layout Help