Hey guys, wondering if it would be possible to get a simplified way of laying out elements. I have been reading basic html and css and know that setting margins, z-index, absolute, and relative positioning can get a required layout, but i seem to struggle on beginning any sort of layout for myself.

 

For example how can i get the effect of everything centralised with white space on either side? I am only a beginner learning so if i don’t make sense in some way i will try to reiterate.

 

It would also be nice if someone could maybe try and explain what there beginning stages of creating a website would be bearing in mind all sites are different how do you find yourself creating the layout you want.

 

I understand this maybe asking to much but if you catch my drift sort of speak hopefully I can get some guidance in the right path.

The easiest way of centering evenrything...

 

<div id="wrapper">

Your stuff...

</div>

and the csss...

#wrapper {
width: 760px;
margin: 0 auto;
}

It would also be nice if someone could maybe try and explain what there beginning stages of creating a website would be bearing in mind all sites are different how do you find yourself creating the layout you want.

 

This is a very good article to read. Start of by thinking about the content you want on your site. A lot of beginners tends to design first and add content later, but that is quite bad practise as you won't be displaying what is neccasary and important for your site.

 

When you know what content you want on your site, start looking for inspiration. Smashing Magazine, Best Web Gallery, Web Creme, CSS remix and lots of other sites are great for inspiration. Try not to duplicate a design, but think about which elements you love at the sites you are watching.

 

Try to think about which layout suits your content the most. Do you need to display huge amounts of text? Do you want to tell people about something you are selling? This is a great design (in my opinion) for a web designer, but it won't work if you are planing on creating an online newspaper.

 

Do several mock-ups in photoshop, gimp, etc. Don't be afraid to change things around and try different things. Show your work here and take critique profesional. Even if you think your design is great, it may not be so. Don't "defend" your work, but change those things that don't fits and come back for some more reviews. Remeber to trust yourself though. Listen to what you think is right, but a good tip is to listen if several people are telling you the same thing.

 

When you're done designing, start on the coding. I can't give a lot of tips there, but always start off by using Eric Meyers CSS reset, and use a good refference like www.htmldog.com.

 

Hope that works out for you.

Sono hit the nail on the <head>!

 

A lot of the top notch web designers look at the content and the needs of the visitor first and foremost, and what you might think of as the "design" is the very last thing they do. In reality a "design" is really no more than a wrapper for the content.

 

Another thing to read up about is "wireframing" which is a useful to for defining how and where to place content and page layout.

Sono hit the nail on the <head>!

 

A lot of the top notch web designers look at the content and the needs of the visitor first and foremost, and what you might think of as the "design" is the very last thing they do. In reality a "design" is really no more than a wrapper for the content.

 

Another thing to read up about is "wireframing" which is a useful to for defining how and where to place content and page layout.

 

 

Hey guys many thanks for your replies there is some good info for me to look in to. I have read in to wireframing a little what are the drawbacks of using this method/software? It seems that I could use this method for some of the problems that scares me regarding layout, am i right in saying that using wireframes i can create my layout, actually position certain elements and use the co-ordinates from that within my code for precise positioning, if that’s so it would give me more confidence in layout because co-ordinates and positioning via relative, absolute, pixels etc in code blows my mind.

 

As a learner of webdesign i find myself thinking im in over my head at the endless amounts of information/software/tutorials/code etc available. I am a home learner and have only the tools available on the internet, books, people etc and what i want to achieve is basic but professional looking pages mostly for information based websites, other forms will follow. I am not so bad with html and css so I have some grounding its just putting this in to practice and the only thing stopping me from creating what I have learnt so far is layout and wrappers, the above code you quoted for a wrapper is there any chance you could just include some basic css so it functions and I can copy the code and preview it as a webpage and also would there be a visual border on each side? that would be great I no I must sound dumb but a simple example like that could help me a lot.

http://www.webdesignerforum.co.uk/index.php?showtopic=2473

 

 

That topic should help you understand wrappers better

 

 

(nice to see you posting on the forum again )

http://www.webdesignerforum.co.uk/index.php?showtopic=2473

That topic should help you understand wrappers better

(nice to see you posting on the forum again )

 

I have followed all the instructions given in that and can not get any result, must i be doing something wrong, probebly only thing i can think of is that i just use some text to look at the wrapper. I'm becoming a little furstrated because there is a very small amount of code yet i can not get a result i wish to see. Will this wrapper give me an effect of two sides of white space with a border just like this page i'm currently typeing in?

I have replied to your PM as to where you are going a little wrong.

 

 

As for will it give you a border, no it won't not as the code stands. What you would need to do is tell it in the css to have a border if that is what you are after.

 

You can do that by adding this to your wrapper css:

 

 

border: 2px solid #000000;

 

 

2px is how thick it will be

 

solid is the style (look here for all the different styles you can use, all you would do is change the word solid to one of these)

 

#000000 is the colour at the moment is is set to black but just change the numbers after the # and you can have any colour you want

Hey,

 

Not sure if this will help, but I'm in the same boat as you. I have all the theory but when it comes to practice I tend fumble my way around hoping for the best.

 

I personally have made my own mental structure which I stick to, almost every website I build before I even touch the html file I set out a css file that has three main elements that make up the Screen: the Header, the Body and The Footer. In my head you can't have a page without those three elements.

 

From there I say ok well the Header needs a Banner and a Top Navigation. Then the Body can either just be the text that spans across the size of the Screen ( I think what I call "Screen" others might refer to as a wrapper, but not sure...). Or the Body can have a Left Navigation or a Right Navigation with a Text space or all three. Then the footer is the part that has the copyright and the terms and conditions and disclaimers etc and sometimes a link to a Site Map depending on how big your website is. A lot of websites also add a link for Contact Us in the footer area.

 

The Navigation bars and basically links that you add to a list, by norm I use <UL> lists.

 

I've also learnt that an amazing banner can save your website from looking dull. So put a lot of effort in designing just the right banner.

 

I can give you an example of a code I wrote now that follows this format, I've used terrible colours, but I was in a rush so I just did this quick quick. If you can, imagine it with good graphics and the right colour scheme. Just copy and paste it in an html file and open it up in a browser. Hope this helps:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Untitled Document</title>

</head>

 

<style type="text/css">

 

body {

background:#CCFF00;

}

 

#screen {

position:absolute;

top:0px;

left:0px;

width:100%;

height:auto;

}

 

#header {

position:relative;

width:1024px;

height:200px;

top: 0px;

margin:0px auto;

}

 

#banner {

position:relative;

width:1024px;

height:150px;

background-color:#006633;

}

 

#topnavigation {

position:relative;

width:1024px;

height:50px;

background-color:#003366;

}

 

#topnavigation ul {

position:relative;

list-style:none;

margin:0px 300px;

}

 

#topnavigation ul li {

display:block;

float:left;

padding-left:10px;

}

 

#topnavigation ul li a {

color:#009900;

float:left;

height:35px;

text-decoration:none;

background-color: #000033;

padding-top: 15px;

padding-left: 15px;

padding-right: 15px;

}

 

#topnavigation ul li a:hover {

color:#00CC00;

float:left;

height:35px;

text-decoration:none;

background-color: #000000;

padding-top: 15px;

padding-left: 15px;

padding-right: 15px;

}

 

#body {

position:absolute;

width:100%;

height:800px;

background:#0099FF;

top:200px;

left:0px;

}

 

#bodyarea {

position:relative;

width:1024px;

height:800px;

margin:0px auto;

}

 

#text {

position:relative;

width:600px;

height:800px;

background-color: #0033FF;

top: -800px;

left: 210px;

}

 

#leftnavigation {

position:relative;

width:200px;

height:800px;

background-color: #000033;

}

 

#leftnavigation ul {

position:relative;

list-style:none;

margin:0px;

}

 

#leftnavigation ul li {

display:block;

float:left;

padding-left:10px;

}

 

#leftnavigation ul li a{

color:#009900;

float:left;

height:50px;

text-decoration:none;

padding-left: 50px;

background-color: #000033;

width: 150px;

margin-left: -50px;

}

 

#leftnavigation ul li a:hover{

color:#00CC00;

float:left;

height:50px;

text-decoration:none;

padding-left: 50px;

background-color: #000000;

width: 150px;

margin-left: -50px;

}

 

#rightnavigation {

position:relative;

width:200px;

height:800px;

background-color: #000033;

top: -1600px;

left: 824px;

}

 

#rightnavigation ul {

position:relative;

list-style:none;

margin:0px;

}

 

#rightnavigation ul li {

display:block;

float:left;

padding-left:10px;

}

 

#rightnavigation ul li a{

color:#009900;

float:left;

height:50px;

text-decoration:none;

padding-left: 50px;

background-color: #000033;

width: 150px;

margin-left: -50px;

}

 

#rightnavigation ul li a:hover{

color:#00CC00;

float:left;

height:50px;

text-decoration:none;

padding-left: 50px;

background-color: #000000;

width: 150px;

margin-left: -50px;

}

 

#footer {

position:absolute;

bottom:0px;

width:100%;

height:auto;

background-color: #000000;

top: 1000px;

}

 

#footernavigation {

position:relative;

width:1024px;

height:50px;

margin:0px auto;

background-color: #000000;

}

 

 

 

 

 

 

</style>

 

<body>

 

<div id="screen">

<div id="header">

<div id="banner">

<!-- insert banner image here -->

</div>

 

<div id="topnavigation">

<ul>

<li>

<a href="#">Link 1 </a>

</li>

 

<li>

<a href="#">Link 2 </a>

</li>

 

<li>

<a href="#">Link 3 </a>

</li>

</ul>

</div>

</div>

 

<div id="body">

<div id="bodyarea">

<div id="leftnavigation">

<ul>

<li>

<a href="#">Link 1 </a>

</li>

 

<li>

<a href="#">Link 2 </a>

</li>

 

<li>

<a href="#">Link 3 </a>

</li>

</ul>

</div>

 

<div id="text">

 

</div>

 

<div id="rightnavigation">

<ul>

<li>

<a href="#">Link 1 </a>

</li>

 

<li>

<a href="#">Link 2 </a>

</li>

 

<li>

<a href="#">Link 3 </a>

</li>

</ul>

</div>

</div>

</div>

 

<div id="footer">

<div id="footernavigation">

 

</div>

 

</div>

</div>

 

 

</div>

 

</body>

</html>

 

 

(Oh PS. I use Mozilla Firefox, there might be some glitches when it's run through Internet Explorer. Just mess around with the CSS codes to counteract that.)

I recomend you to use a site like www.htmldog.com. That is a great refrence tool. In the beginning, I looked up just to check spelling (and etc), but as I became secure on my own work, I tend not to need it anymore.

 

I don't agree with terrorsreign. It's not smart to design every site with such boundaries. A header is, as an example, not always a nice thing on a web site. This is a good site with an alternative layout. Think about what you want your website to say. Do you want to sell something? Is your site political? You should think about what fits your site, and it's readers, the most.

 

Btw, that is a good start for a website, but it's not great. You lack browser resetting, lots of meta-data, a print stylesheet, and you serve your site as iso. (Why do that when Utf-8 is better choice?)

 

I think I will write a little start for you guys. I won't include any layout-styling as I feel that is just not right. Take a look in my tread "Did you know?" in the forum "CSS and XHTML/HTML Design & Layout".

I have followed all the instructions given in that and can not get any result, must i be doing something wrong, probebly only thing i can think of is that i just use some text to look at the wrapper. I'm becoming a little furstrated because there is a very small amount of code yet i can not get a result i wish to see. Will this wrapper give me an effect of two sides of white space with a border just like this page i'm currently typeing in?

 

I think it will be better if you post your code here along with the CSS and we will review it and give you let you know where you are wrong..

This is a very good article to read. Start of by thinking about the content you want on your site. A lot of beginners tends to design first and add content later, but that is quite bad practise as you won't be displaying what is neccasary and important for your site.

 

When you know what content you want on your site, start looking for inspiration. Smashing Magazine, Best Web Gallery, Web Creme, CSS remix and lots of other sites are great for inspiration. Try not to duplicate a design, but think about which elements you love at the sites you are watching.

 

Try to think about which layout suits your content the most. Do you need to display huge amounts of text? Do you want to tell people about something you are selling? This is a great design (in my opinion) for a web designer, but it won't work if you are planing on creating an online newspaper.

 

Do several mock-ups in photoshop, gimp, etc. Don't be afraid to change things around and try different things. Show your work here and take critique profesional. Even if you think your design is great, it may not be so. Don't "defend" your work, but change those things that don't fits and come back for some more reviews. Remeber to trust yourself though. Listen to what you think is right, but a good tip is to listen if several people are telling you the same thing.

 

When you're done designing, start on the coding. I can't give a lot of tips there, but always start off by using Eric Meyers CSS reset, and use a good refference like www.htmldog.com.

 

Hope that works out for you.

 

that is some good advice.

 

I recomend you to use a site like www.htmldog.com. That is a great refrence tool. In the beginning, I looked up just to check spelling (and etc), but as I became secure on my own work, I tend not to need it anymore.

 

I don't agree with terrorsreign. It's not smart to design every site with such boundaries. A header is, as an example, not always a nice thing on a web site. This is a good site with an alternative layout. Think about what you want your website to say. Do you want to sell something? Is your site political? You should think about what fits your site, and it's readers, the most.

 

Btw, that is a good start for a website, but it's not great. You lack browser resetting, lots of meta-data, a print stylesheet, and you serve your site as iso. (Why do that when Utf-8 is better choice?)

 

I think I will write a little start for you guys. I won't include any layout-styling as I feel that is just not right. Take a look in my tread "Did you know?" in the forum "CSS and XHTML/HTML Design & Layout".

 

Hmmm... Cool. I actually don't get much comments in terms of how I design so I never know what I'm lacking. But I have noticed my designs are a bit... rigid... I'll try move away from that. Going to check out those sites as well and see what I can learn.

 

Cari.