Need help with some basic HTML, please

Discussion in 'HTML & Website Design' started by COOLORANGEFREEZE, Apr 28, 2009.

0
  1. #1
    Actually this is CSS... my apologies

    I want to place two full banners in a box. One to sit at the left and one to site across at the right side in the box. The following is the code that I am using but the banners are stuck together as one... one needs to move to the right side.

    <style type="text/css">
    UL {background: #FFFFFF;
    margin: 9px 9px 9px 9px;
    padding: 2px 2px 2px 2px;}
    LI {color: #336600;
    background: #FFFFFF;
    margin: 9px 9px 9px 9px;
    padding: 9px 0px 9px 9px;
    list-style: none}
    LI.withborder {border-style: dashed;
    border-width: medium;
    border-color: #FFFFFF;}
    </style>
    </head>
    <body>
    <ul>
    <li><align="left"><a href="http://www.lovebirds.co.nz" target="_blank"><img src="http://www.scottjess.com/lmbanner.gif" width="468" height="60" alt="Visit Lovebird Mania, the website dedicated to Lovebirds " border="0"></a></align="left"><hs="300px"><align="right"><a href="http://www.lovebirds.co.nz" target="_blank"><img src="http://www.scottjess.com/lmbanner.gif" width="468" height="60" alt="Visit Lovebird Mania, the website dedicated to Lovebirds " border="0"></a></align="right">
     
    COOLORANGEFREEZE, Apr 28, 2009 IP
  2. sizzlefire

    sizzlefire Member

    Messages:
    397
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    35
    #2
    Why dont you create a div for each of the banners and use float:left and float:right as that should work if I'm reading this correctly.
     
    sizzlefire, Apr 28, 2009 IP
  3. hkmike

    hkmike Peon

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I placed <div> tags around the images/links, gave them each an id and then used the float property.

    <style type="text/css">
#leftbanner { float: left;
}

#rightbanner { float: right;
}
</style>
</head>
<body>

<div id="leftbanner"?"<a href="http://www.lovebirds.co.nz" target="_blank"><img 
src="http://www.scottjess.com/lmbanner.gif" width="468" height="60" alt="Visit Lovebird Mania, the website dedicated to 
Lovebirds" border="0"></a></div>

<div id="rightbanner"><a href="http://www.lovebirds.co.nz" target="_blank"><img 
src="http://www.scottjess.com/lmbanner.gif" width="468" height="60" alt="Visit Lovebird Mania, the website dedicated to 
Lovebirds" border="0"></a></div>
    Code (markup):
    Edit:
    ahh, you beat me to it... oh well
     
    hkmike, Apr 28, 2009 IP
  4. COOLORANGEFREEZE

    COOLORANGEFREEZE Active Member

    Messages:
    296
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #4
    Thanks a lot, folks. I'm getting closer.
     
    COOLORANGEFREEZE, Apr 28, 2009 IP
  5. Oranges

    Oranges Active Member

    Messages:
    2,610
    Likes Received:
    92
    Best Answers:
    0
    Trophy Points:
    90
    #5
    Yes! div for each Block and then float property will get it done.
     
    Oranges, Apr 28, 2009 IP
  6. alexpr07

    alexpr07 Active Member

    Messages:
    284
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    73
    #6
    You can also use a table to separate the banners and you don't need CSS. Try this script:
    <table><td><a href="http://www.lovebirds.co.nz" target="_blank"><img 
src="http://www.scottjess.com/lmbanner.gif" width="468" height="60" alt="Visit Lovebird Mania, the website dedicated to 
Lovebirds" border="0"></a>
</td><td>
<a href="http://www.lovebirds.co.nz" target="_blank"><img 
src="http://www.scottjess.com/lmbanner.gif" width="468" height="60" alt="Visit Lovebird Mania, the website dedicated to 
Lovebirds" border="0"></a></td></table>
    Code (markup):
    You can add cellspacing=X in the table tag to increase space between banners.
     
    alexpr07, Apr 28, 2009 IP