I need a little help coding CSS+DIV

Discussion in 'HTML & Website Design' started by NickBe, Mar 20, 2008.

0
  1. #1
    This is driving me crazy, I have read from 11 websites, I have copied precisely what they show on some sites but it just never works. I do not understand what I am missing. I am using Firefox but also tested on IE and opera.

    Here is my sites basic layout in tables+css, how do I achieve this in DIVS+css?

    <table width="975" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>left header image</td>
    <td>right header image</td>
  </tr>
</table>

<table width="975" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>BODY</td>
  </tr>
</table>
<table width="975" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>FOOTER</td>
  </tr>
</table>
    PHP:
    So basically the header is split into two columns. I cannot get those two columns centered and stuck together in DIV.

    Can somebody please give me the CSS values and HTML values?

    Here is my actual site: forex4noobs.com
     
    NickBe, Mar 20, 2008 IP
  2. NickBe

    NickBe Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    bump........
     
    NickBe, Mar 20, 2008 IP
  3. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #3
    EDIT: you could try something like this

    the HTML would be:

    <div id="wrap">
<div id="header">
<div class="headerl">whatever
</div>
<div class="headerr">whatever
</div>
</div>
<div id="content">your content
</div>
<div id="footer">your footer
</div>
</div>
    Code (markup):
    and the CSS would be:

    #wrap { width: 975px; margin:0;}
#header { width: 100%;}
#content { width: 100%;}
#footer { width: 100%; clear:both;}
.headerl { background-image:your image; background-repeat:no-repeat; margin: 0; padding:0; float:left;}
.headerr {  background-image:your image; background-repeat:no-repeat; margin: 0; padding:0; float:left; width: 50%}
    Code (markup):
    in this you would set the width of headerl and headerr to whatever the width of the background pic is. and you could also add a div for a menu or a sidebar.
     
    wd_2k6, Mar 20, 2008 IP
  4. pilotX

    pilotX Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Did you define a width on the header images?
     
    pilotX, Mar 20, 2008 IP
  5. NickBe

    NickBe Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    @wd_2k6 thanks! I will try it later.

    @pilotX Yeh, I defined both width and height.
     
    NickBe, Mar 20, 2008 IP
  6. pilotX

    pilotX Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    If you want to center your content, you can create here's a quick solution...

    <body>
<div id="wrap">   
[All your content within here]  
</div> 
</body> 
</html>
    Code (markup):
    in between the close <head> and </head>

    <style type=" text/css">
#wrap{
margin:0, auto; text-align:left; padding:0px; width:975px;
}
</style>
    Code (markup):
    Sorry if this is stuff you already know, Im not sure of your skill level
     
    pilotX, Mar 20, 2008 IP
  7. pilotX

    pilotX Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Refer to wd_2k6's example for the header alignment, thats how I would do it
     
    pilotX, Mar 20, 2008 IP