Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Help Styling Divs

    Im tring to make a custom page for vbulletin, but im having trouble styling the div containers.



    See the colored boxes, i want them to look like this:



    Here's my code:
    Code:
    $stylevar[htmldoctype]
    <html dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
    <head>
    <!-- no cache headers -->
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="-1" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <!-- end no cache headers -->
    <title><phrase 1="$vboptions[bbtitle]">$vbphrase[x_powered_by_vbulletin]</phrase></title>
    
    <style type="text/css">
    .outer {
    width:100%;
    height: 500px;
    border:1px solid red;
    padding: 0px;
    }
    .first {
    float:left;
    width: 219px;
    height: 200px;
    margin: 5px 5px 5px 5px;
    background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
    border:1px solid black;
    }
    
    .second {
    float:left; 
    width: 218px;
    height: 200px;
    margin: 5px 0px 5px 0px;
    background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
    border:1px solid black;
    }
    
    .third {
    float:left;  
    width: 218px;
    height: 200px;
    margin: 5px 0px 5px 5px;
    background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
    border:1px solid black;
    }
    
    .forth {
    float:left; 
    width: 219px;
    height: 200px;
    margin: 5px 5px 5px 5px;
    background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
    border:1px solid black;
    }
    
    </style>
    
    $headinclude </head> <body> $header $navbar
    <table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="$stylevar[cellspacing]" class="all">
      <thead>
    
    
    <div class="outer">
    <div class="first">50</div><div class="second">50</div><div class="third">50</div><div class="forth">50</div>
    </div>
    
    
              <font size="2"><font face="Verdana, Arial, Helvetica, sans-serif"></font></font></div></td>
          <if condition="$vboptions[showmoderatorcolumn]"> </if> </tr>
      </thead>
      $forumbits 
      <tbody>
      </tbody>
    </table>
    $footer 
    </body>
    </html>
    I've added the background image at the top of the box to the div, thats ok
    but then how do i add a alt image inside the box? Below that image?

    And a separate little box around the date posted?


  • #2
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just to summarize:
    Really i need to know how to split each box into sections, so i can use my tcat image for the top of the box, & my alt image for the rest of it. Right now when i add the tcat image to the css for the box, i then cant add another image for below it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •