Register

The Most Active and Friendliest
Affiliate Marketing Community Online!

Register
“Adavice”/  “1Win

css web page styling

M

misheck

New Member
affiliate
I need to to format or design my webpage using CSS. I want to have a body size of the page just large enough to accomodate all screen sizes. Then inside the body I need to have few boxes/columns inside the webpage there is basically going to be 3 columns 40%, 20% & 30 % and the rest used up by padding etc. All this will be done using css div.largecolumn, div.small column etc.
What I dont know how to do is to fomat the whole body to a size that I want and then after I aslo need to format the div tags to be able to fit into the new body size. Will I be able to format the div tags in css directly eg. div.largecolumn {width: 40%} also will I be able to use percentage rather than px because I have no clue how to measure a page using pixels or will I need to reference them after body tag?
 
The name, CSS - cascading style sheet, tells us all about it. :)
The selectors with higher cascade levels or weight all be applied to the final elements or tags on your pages. Generally practice like this: naming an outer container div to hold all the contents and setting a width as you want via % or px, both would be OK.
 
misheck said:
I need to to format or d...

...eference them after body tag?
Click to expand...

Hi mishec,

As a quick example (because example is a better tool to learn from than theory, imo) I will show you the structure I would use below:

The HTML:

Be sure to add your DOC type etc. I normally use XHTML 1.0 Strict and there maybe issues using my code below in anything other than this.

HTML: 
<body>
     <div id="wrapper">
          <div id="largecolumn">
               <h2>Title</h2>
               <p>The small red fox jumped over the lazy brown dog.</p>
          </div>
          <div id="smallcolumn">
               <h2>Title</h2>
               <p>The small red fox jumped over the lazy brown  dog.</p>
          </div>
          <div id="mediumcolumn">
               <h2>Title</h2>
               <p>The small red fox jumped over the lazy brown  dog.</p>
          </div>
          <p class="clear"></p>
     </div>
</body>

So what we have here is:

ID: Wrapper, this is used to contain your columns.
ID's: large, medium, small - The columns.
Class: Clear, This is used to stop anything below, i.e. footer etc, from bumping up into your columns or floating underneath a short colum when you dont want it to.

The basic CSS is as follows:

Code: 
/* Reset your elements */
div, h2, p { margin:0; padding:0; }

/* Classes */
.clear { clear:both; }

/* ID's */
#wrapper, #largecolumn, #mediumcolumn, #smallcolumn { float:left; }

#wrapper {
     width: 96%;
     padding: 0 2%;
}
#largecolumn {
     width: 40%;
     margin: 0 1%;
}
#mediumcolumn {
     width: 30%;
     margin: 0 1%;
}
#smallcolumn {
     width: 20%;
     margin: 0 1%;
}

#wrapper div h2 {
     margin: 5px 5%;
}
#wrapper div p {
     margin: 3px 5%;
}

This will produce your 3 columns and it gives a small gutter between each one, I have also popped a little spacing around the header and paragraph.

Most importantly, experiment. Deleting a line or style may mess up the page but you can always change it back, the best way to learn is to experiment and learn from your achivements, mistakes and failures/sucesses.

I hope this post has given you atleast a little insight.
 
One thing to consider when building using fluid widths, is that when viewed on a widescreen monitor, some paragraphs can become very wide & difficult to read as a result.
 

Similar threads

Honeybadger
What's the Best Way to Create Quiz on Web Page?
Replies
13
Views
3K
PureLander
PureLander
Graybeard
Instant page link preloader
Replies
4
Views
2K
Graybeard
Graybeard
N
How do you clean landing pages?
Replies
14
Views
3K
PureLander
PureLander
L
Compressing files for landing page
Replies
4
Views
1K
jeremielp
J
Honeybadger
Fastest web search in the world?
2
Replies
21
Views
8K
petrderbikov
petrderbikov
banners
Back