...

View Full Version : Fix my Beginners Web Page



seminaljim
11-06-2011, 07:27 AM
OK, I'm soo new to this but i'm trying my hardest to build a web site from scratch. I laid out the page how i think it should be done...

Ive put in a header, and a wrapper with three coloums (RGB), inside these coloum i'd like to put modules that i create, then add in php and what later... its just the layout im doing the now. please have a look help with any tips, and fixes.

http://www.snapse.net/tempsite

My problems so far are...

1. I cant space inbetween the modules, eg. Left Module 1 & 2. for some reason the margin top and bottom have no effect.

2. I cant get "Content Module Split 1 & 2" to stay on the same line, clear: both has no effect?

Here is the CSS...


#module
{
float: left;

margin: 0px 0px; padding: 10px;
background: black;

border: 2px solid cornflowerblue;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}

.moduleSide
{
clear: both;
width: 205px;
}

.moduleMain
{
clear: both;
width: 685px;
}

.moduleSplit
{
width: 300px;
}


What am I not doing to make this work?

PS, this is the only way i know how to present this, any help if you's can?

johnki
11-06-2011, 07:46 AM
Try this...



* {
margin: 0;
padding: 0;
}

#module
{
position: relative;
margin: 0px auto;
border: 2px solid cornflowerblue;
border-radius: 15px;
width: 1190px;
}

.moduleSide
{
float: left;
clear: both;
width: 205px;

}

.moduleMain
{
float: left;
clear: both;
width: 685px;
}

.moduleSplit
{
float: left;
width: 300px;
}


This is similar to how I got mine to work, though I used divs extensively, so it would have been "div.moduleSplit", etc, and each column would have been set as a div, with an <div class="moduleSplit"></div> code, for example. I also mixed two of the methods used for two different iterations of the webpage, based on how much of it was done in HTML, and how much of it was inside the style tags, but I think it should work with it like that, all lined up in CSS.

seminaljim
11-07-2011, 12:40 AM
that didnt work either...?

Excavator
11-07-2011, 12:43 AM
Hello seminaljim,
Start with the validator - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.snapse.net%2Ftempsite%2F

See the links about validation in my signature line. There is a link there about DocTypes as well.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum