Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Design 2

Status
Not open for further replies.
d0nny

d0nny

IS-IT--Management
Dec 18, 2005
278
GB
Can anyone help with a CSS layout as displayed here?
This is built using tables! :-(

I have attempted a CSS layout here but cannot seem to get this quite right.
What I have attemted to do is create the containers in 4 blocks (header, navigation, main content, then footer) and then within the main content I was going to add further DIVs for this layout, but getting DIVs inside other DIVs is difficult, I think??

Any help?
 
Sort by date Sort by votes
Did you read the articles suggested in the Web Site Designers forum?
getting DIVs inside other DIVs is difficult, I think
Click to expand...
That is the way it should be done.

Put this test code in your container div.
Code: 
<div style='width:200px; height:100px; float:left; background-color:#ddd;'>
1
</div>
<div style='width:200px; height:100px; float:left; background-color:#aaa;'>
2
</div>
<div style='width:200px; height:100px; float:left; background-color:#123456;'>
3
</div>


Keith
 
Upvote 0 Downvote
Yes, I have been reading this plus lots of others but I still get very confused with the position element of a DIV and also the float element.

Really can't get my head round this.
I really can't understand why this is so difficult?
Maybe its just me....

Thanks for your assistance though, I'll give this a try.
 
Upvote 0 Downvote
Easiest way to start is to ignore the position element altogether, it does have its uses but just don't use it.
Floating numerous elements left will make them all sit along side each other if there is room (unlike tables which just self align).

Try to get the theory of tables out of your mind and look at divs as a stack of different sized boxes rather than a self aligning grid, as in tables. The control you have over the appearance of divs is brilliant but you have to play around with them to learn the rules.

If you get stuck, ask specific questions here

Keith
 
Upvote 0 Downvote
I had a little tinker and then got bored.
This is as far as I got:

Code: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Amanda Hutson</title>
    <style>
      .main {
        width:                  1024px;
        margin:                 0 auto;
      }
      .topbar, .menubar {
        position:               relative;
      }
      .logo {
        width:                  720px;
        height:                 150px;
        background-image:       url([URL unfurl="true"]http://www.amandahutson.com/images/header.jpg);[/URL]
      }
      .basket {
        width:                  298px;
        height:                 150px;
        position:               absolute;
        top:                    0px;
        left:                   726px;
        background-color:       #999;
        color:                  black;
      }
      .basket div {
        margin-top:             25%;
      }
      .menubar {
        height:                 40px;
      }
      .menubar ul {
        list-style-image:       none;
        list-style-position:    outside;
        list-style-type:        none;
        margin:                 0px;
        padding:                0px;
        margin-top:             8px;
      }
      .menubar ul li {
        font-family:            arial;
        font-size:              1.5em;
        color:                  white;
        width:                  14.28571%;
        height:                 40px;
        line-height:            40px;
        background-color:       #999;
        text-align:             center;
        float:                  left;
      }
      .menubar li:hover {
        background-color:       black;
      }
      .workarea {
        clear:                  both;
        height:                 400px;
        position:               relative;
        margin-top:             8px;
        background-color:       white;
      }
      .info {
        background-color:       #999;
        width:                  335px;
        height:                 400px;
        float:                  left;
        font-family:            arial;
        font-size:              1.8em;
        font-weight:            bold;
        text-align:             center;
      }
      .grid>div {
        float:                  left;
      }
      .grid>div>p {
        margin:                 0px;
        background-color:       #999;
        width:                  335px;
        height:                 200px;
        font-family:            arial;
        font-size:              1.8em;
        font-weight:            bold;
      }
      .workarea>p, .grid>p {
        width:                  9px;
        height:                 400px;
        background-color:       white;
        float:                  left;
        top:                    0px;
      }
      .copyright {
        font-family:            verdana;
        font-size:              14px;
        text-align:             center;
        clear:                  both;
        background-color:       #999;
      }
    </style>
  </head>

  <body>
    <div class="main">
      <div class="topbar">
        <div class="logo">
        </div>
        <div class="basket">
          <div>
            Basket
          </div>
        </div>
      </div>
      <div class="menubar">
        <ul>
          <li>home</li>
          <li>about</li>
          <li>furniture</li>
          <li>lighting</li>
          <li>finishes</li>
          <li>bespoke</li>
          <li>contact</li>
        </ul>
      </div>
      <div class="workarea">
        <div class="grid">
          <div>
            <p>
              FURNITURE
            </p>
            <p style="background: #ff0;">
              CUSTOMISE
            </p>
          </div>
          <p></p>
          <div>
            <p style="background: #f0f;">
              LIGHTING
            </p>
            <p style="background: #0ff;">
              INFLUENCES
            </p>
          </div>
        </div>
        <p></p>
        <div class="info">
          <p>
            AMANDA HUTSON<br />
            <br />
            INFO BOX<br />
            ABOUT AMANDA
          </p>
        </div>
      </div>
      <div class="copyright">
        Copyright &copy;2009 Amanda Hutson Limited. All Rights Reserved.
      </div>
    </div>
  </body>
</html>

Feel free to use any ideas from it that you might find useful.



Trojan.
 
Upvote 0 Downvote

Seems to work ok.
I'm sure there are little tweaks I would need to add but this seems to function well enough.
There are things like the spacing between the coloured boxes. This needs to be all uniform.
And the footer seems adrift a little.

But looks good. Wish I could write CSS like that! :)

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
682
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
354
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
281
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
310
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
127
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top