1

I am trying to make the following design for a web site. The last time I made a web site, everything was usually done using a bunch of tables to align the element on the page. I can understand that this is not how we roll in 2011, where it's all about the css. I have tried to implement the following design using css, but I have not succeeded. Can someone point me in the right direction?

The layout is located here: http://imageshack.us/photo/my-images/828/layoutcx.png/

Edit:

I forgot to include the CSS and HTML I had produced so far. (The wife distracted me by shopping orders.) Sorry about that. I never intended for anyone to do my work, although I can tell that someone has already done it. Very helpful indeed, thank you!

My issue was with the "float" attribute/property. Although I can, by dissection of the various suggestions, tell that there are things like !important that really are important.

kasperhj
  • 10,052
  • 21
  • 63
  • 106
  • 2
    It seems like you're asking us to do your layout for you... it may be more effective if you post some code you've written and ask for specific suggestions instead. – sscirrus May 05 '11 at 08:42

6 Answers6

3

I think no one will give you the complete design, it's some heavy work.

You should have a look a this positioning tutorial to begin with. Then, if you have a precise question, come back here ;)

krtek
  • 26,334
  • 5
  • 56
  • 84
  • I agree. The [Floatutorial](http://css.maxdesign.com.au/floatutorial/tutorial0916.htm) is a good one also. – Mon Noval May 05 '11 at 09:16
3

To create that layout and understand it, you are best off learning CSS as soon as possible rather than asking someone to create it for you. I'd recommend: https://developer.mozilla.org/es/learn/css

As a right direction push - the html would look something like:

<div id="navBar"></div>
<div id="middleBody">
  <div id="header"></div> 
  <div id="newsBar"></div>
  <div id="flashingNews"></div>
  <div id="mainPage">
    <div id="leftBar"></div>
    <div id="rightBar"></div>
  </div>
  <div id="footer"></div>
</div>

And the CSS would be similar to:

#navBar {
  width:100%;
  height:30px;
}

#middleBody {
  margin:0 auto; /* This will centre the middle body */
}

#header {
  height:200px;
}

etc...

tinyBIGideas
  • 194
  • 4
  • 13
3

You start from largest, end with smallest, go from top, to bottom, as that is way, you should understand HTML.

I won't show you any serious tricks or CSS3 fastest-way-to-do stuff, that you will need to learn by yourself.

With such a tasks, you do, like you would write a document, at first, you write a content, second, you format it.

Begin with basic HTML, sand continue with some basic construction of frames:

<!DOCTYPE HTML>
<html>
<head>
    <title>My layout</title>
</head>
<body>
<div id="zones_theSite">
    <div id="zones_unb"><p>Universal navgiation bar</p></div>
    <div id="zones_body">
        <div id="zones_header"><p>Header</p></div>
        <div id="zones_fnnb"><p>Flashing news navigation bar</p></div>
        <div id="zones_fn"><p>Flashing news</p></div>
        <div id="zones_main">
            <div id="zones_lsb" class="column"><p>Left side bar</p></div>
            <div id="zones_mp" class="column"><p>Main page</p></div>
            <div id="zones_rsb" class="column"><p>Right side bar</p></div>
            <div class="clearfix"></div>
        </div>
        <div id="zones_footer"><p>Footer</p></div>
    </div>
</div>
</body>
</html>

And now, with formatting. CSS can do anything you like, with divisions (DIV).

<head>
    <title>My layout</title>
    <style type="text/css">
    body {
        background-color: #616161;
        margin: 0;
    }
    div { position: relative; }
    p {
        margin: 0; padding: 3px;
        color: #FFF;
        text-transform: uppercase;
        font-family: Verdana, sans-serif;
        font-weight: bold;
    }
    .clearfix { clear: both; }
    #zones_unb {
        width: 100%;
        background-color: #000;
        line-height: 2em;
        text-align: center;
    }
    #zones_body {
        width: 1000px;
        margin: 0 auto;
        background-color: #616161;
    }
    #zones_body div {
        width: 100%;
        text-align: center;
    }
    #zones_header {
        height: 100px;
        background-color: #E20000;
    }
    #zones_fnnb {
        background-color: #0078FF;
        line-height: 2em;
    }
    #zones_fn {
        height: 80px;
        background-color: #003ACE;
    }
    #zones_main p {
        color: #000;
    }
    #zones_main {
        width: 984px!important;
        padding: 5px;
        background-color: #FFF;
        border: 3px solid #000;
    }
    #zones_main .column {
        float: left;
    }
    #zones_lsb, #zones_rsb {
        width: 200px!important; height: 300px;
        border: 3px solid #000;
        padding: 5px;
    }
    #zones_mp {
        width: 552px!important;
    }
    #zones_footer {
        height: 80px;
        background-color: #3FCE00;
    }
    </style>
</head>

Now, just replace last HEAD part with HEAD part in first HTML code and done. Next, you should seperate CSS to single .css file and tune it to your liking. :)

Deele
  • 3,728
  • 2
  • 33
  • 51
1

Such designs are easy to setup using CSS frameworks:

Lars Wiegman
  • 2,397
  • 1
  • 16
  • 13
1

Something like this:

<html>
<head></head>
<body>
<div style="width:100%; height: 150px; background:#f00;">Header</div>
<div style="width:100%; height: 20px; background:#00f;"">Nav</div>
<div style="width:100%; height: 150px; background:#005;"">News</div>
<div style="width:100%;">
  <div style="width:200px; float:left; height: 300px; border: 1px solid #000;">Left col</div>
  <div style="width:200px; float:right; height: 300px;border: 1px solid #000">Right col</div>
  Center text
</div>
<div style="width:100%; height: 150px; background:#0f0; clear: both;"">Footer</div>
</body>
</html>

This reproduces your layout reasonably well, with all the css inlined.

Richard H
  • 38,037
  • 37
  • 111
  • 138
  • I think giving an exemple with inline css to someone trying to learn is one of the wrongest thing to do. You should never use inline styling. – krtek May 05 '11 at 09:22
  • 1
    well, I did mention the css was inlined. Also it shows the OP some of the styles he'll need to use. And I disagree with "never" use. Why? Sometimes inline css is a necessity - to over-ride other styles or provide initial values for js as 2 examples. – Richard H May 05 '11 at 09:31
  • css inlining can always be avoided, you can easily override styles or provide initial value with a css class. Concerning the "never" it's a religious war I don't want to start here ;) – krtek May 05 '11 at 09:34
1

it is briefly something like:

HTML:

<div id="universial-navigation"></div>
<div id="wrapper">
  <div id="header"></div>
  <div id="navigation-bar"></div>
  <div id="flashing-news"></div>
  <div id="main">
    <div id="left-sidebar"></div>
    <div id="content"></div>
    <div id="right-sidebar"></div>
  </div>
  <div id="footer"></div>
</div>

CSS:

* { margin:0; padding:0 }
#universial-navigation { width:100%; height:20px }
#wrapper { width:960px; margin:0 auto }
#header { width:960px; height:200px }
#navigation-bar { width:960px; height:40px }
#flashing-news { width:960px; height:150px }
#main { width:960px; height:100px }
#left-sidebar { position:relative; float:left; width:180px; overflow:hidden }
#right-sidebar { position:relative; float:left; width:180px; overflow:hidden }
#content { position:relative; float:left; width:600px; overflow:hidden }
#footer { width:960px; height:100px }
bogatyrjov
  • 5,317
  • 9
  • 37
  • 61
  • 2
    Hmmm. First I won't say that this code is wrong. But repeating css attributes all deep down is a bad discipline. CSS is a mess but it always tries to inherit styles from the parent html selector, using this we can try to organize our styles. – Mon Noval May 05 '11 at 09:14
  • Never use IDs to do styling : http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ – krtek May 05 '11 at 09:20
  • @Krtek: "Never use IDs" is bad advice. You should intelligently use a mix of classes and `id`s where and when it's sensible to use each. – thirtydot May 05 '11 at 09:36
  • ragingmon - I agree, that it's not a candy :) but straightly illustrates, which divs have which attributes. Krtek - thanks, I've never dived in that issue that deep, but can not fully agree with You, though : http://stackoverflow.com/questions/84378/div-class-vs-id – bogatyrjov May 05 '11 at 09:39
  • @thirtydot did you at least gave a look at the video I linked ? don't think so judging the time of your answer ;) Nearly all CSS professionals making speaks recommends to use IDs only in javascript these days... @Jevgeni I didn't say don't use IDs at all, I said don't use them for styling ;) using them in javascript is the way to go ! – krtek May 05 '11 at 09:43
  • @Krtek: I don't have time to watch a *35 min video* at the moment. I did however read your linked article in its entirety. Clearly, `#sidebar #accounts #accountDetails h3{}` *is bad*, but that's not how you have to use `id`s. How do you propose to `"use IDs only in javascript"`? You have to use `id`s in your HTML if you want to use them in your JavaScript. – thirtydot May 05 '11 at 09:51
  • @thirtydot Sure you have to put IDs on your HTML elements, what I was meaning is that you don't use them in your CSS files but only in your scripts to identify the elements. Once again, I'm talking about styling, nothing else. – krtek May 05 '11 at 09:54
  • the girl's point in the video seems not convincing enough for me unfortunately, i think i am still going to use id's for styling the elements, that appear once. Also, if, for example, we assign an ID for an element, that is going to be used in JS later, why do I have to assign that element an extra class, if I can use the # for styling ? Edit: on the other hand, the thought of using LESS ID-s for styling is interesting and could reduse CSS size for big projects. – bogatyrjov May 05 '11 at 10:01