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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    310
    Thanks
    86
    Thanked 3 Times in 3 Posts

    Help with div elements?

    Hello

    I'm trying to create a div element here:

    http://www.inspireaway.co.uk/question/rep.htm

    But I've wracked my brain and can't get it to work. Can anyone help me get it like my graphical element i've created on the page?

    Thanks

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Code:
    <html>
        <head>
            <title>divElement.html</title>
            <style type="text/css">
                * {
                    margin: 0;
                    padding: 0
                }
                
                #fleetTown-bar {
                    border: 1px solid #ccc;
                    height: 60px;
                    width: 620px;
                }
                
                #fleetTown-bar #logo {
                    float: left;
                    width: 60px;
                    height: 60px;
                    text-indent: -9999px;
                    background-image: url();
                    background-repeat: no-repeat;
                }
                
                #fleetTown-bar #middle {
                    background-color: #fff;
                    float: left;
                    width: 500px;
                }
                
                #fleetTown-bar #middle #top {
                    background-color: #006;
                    color: #fff;
                }
                
                #fleetTown-bar #middle #top h3 {
                    font-family: Verdana, Arial, sans-serif;
                    font-size: 13px;
                    text-transform: uppercase;
                    padding: 3px;
                }
                
                #fleetTown-bar #middle #bottom p {
                    padding: 5px 5px 5px 0;
                }
                
                #fleetTown-Bar #number {
                    background-color: #ddd;
                    float: left;
                    padding: 10px;
                    height: 40px;
                    width: 40px;
                    text-align: center;
                    font-size: 35px;
                    color: #000;
                }
            </style>
        </head>
        <body>
            <div id="fleetTown-bar">
                <div id="logo">
                    <span>Fleet Town Insignia</span>
                </div>
                <div id="middle">
                    <div id="top">
                        <h3>Fleet Town</h3>
                    </div>
                    <div id="bottom">
                        <p>Name here.</p>
                    </div>
                </div>
                <div id="number">
                    <span>1</span>
                </div>
            </div>
        </body>
    </html>
    Remember to change the background picture. You may need to alter the height and width a little, then you'll have to change the dimensions of most of the child elements. I assumed the logo was 60px by 60px. Tested it in FF3, looks exactly like what you are looking for.
    Last edited by BWiz; 07-11-2008 at 05:40 PM.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    CSS

    Code:
    * { padding:0; margin: 0; }
    
    
    body {
     font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; 
     font-size:12px;
     background: #FFF;
     color: #666;
    }
    
    #rep_holder {
    float:left;
    width:653px;
    border:1px solid #999;
    background: #FFFFFF;
    }
    
    h2 {
      float:left;
      
      width:545px;
      color:#FFFFFF;
      background:#17186B;
      font-size:0.90em;
      margin-bottom:2px;
      height:20px;
      text-transform:uppercase;
      line-height:20px;
      text-indent:4px;
    }
    
    .score {
    
    float:left;
    
    width:50px;
    height:50px;
    margin-left:0px;
    background: #EEEEEE;
    font-size: 40px;
    color:#333;
    text-indent:12px;
    }
    
    p {
    float:left;
    }
    
    .middle {
    float:left;
     width:543px;
    text-align:left;
    }
    HTML

    Code:
    <div id="rep_holder">
    <img src="img.jpg" style="float: left; display: inline; margin-right:10px;">
    <div class="middle">
    <h2>Fleet Town</h2>
    
    
    
    <p>Name here, name here, name here</p>
    </div>
    <div class="score">1</div>
    </div>
    
    <div style="clear: left;"></div>
    <br>
    <p><strong>Ideally want it like this...</strong></p>
    <br>
    <img src="fleet.jpg">
    **EDIT: oops too slow!!!

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    h2 {
    background:#17186B none repeat scroll 0&#37;;
    color:#FFFFFF;
    font-size:0.9em;
    height:20px;
    line-height:20px;
    margin-bottom:2px;
    text-indent:4px;
    text-transform:uppercase;
    /*display:inline;
    float:left;
    width:100%;*/
    }
    .score {
    background:#EEEEEE none repeat scroll 0%;
    color:#333333;
    display:inline;
    float:right;
    font-size:40px;
    height:50px;
    margin-left:4px;
    text-align:left;
    text-indent:12px;
    width:50px;
    Code:
    <div id="rep_holder">
    <img src="img.jpg" style="float: left; display: inline;">
    <div class="score">1</div>
    <h2>Fleet Town</h2>
     
     
    <p>Name here, name here, name here</p>
     
    </div>
    
    <div style="clear: left;"></div>
    <br>
    <p><strong>Ideally want it like this...</strong></p>
    <br>
    <img src="fleet.jpg">
    All the floated elements should be placed before all non floated elements.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    310
    Thanks
    86
    Thanked 3 Times in 3 Posts
    Thanks all

  • #6
    New Coder
    Join Date
    Jul 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    or you can have a container div
    and use a 3 column fluid layout?


  •  

    Posting Permissions

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