SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div's inline and centred?

    is this possible?
    i have two div floating left so there are inline and level thats gret but i now need them in the centre of the page ( preferable with a small space between them ) problem i have i need them tobe a strict 180px wide. code below ( i know the images are all the same and linking to the same place.)
    <div align="centre">
    <!-- Scrolling Images Fullhouse Start -->
    <!-- Change width, border size, background colour, padding and heading colour and size below -->
    <noscript><a href="www.fullhousemagzine.co.uk"><img src="images/FH34_01.jpg" /></a></noscript>
    <div style="float:left; width: 180px; text-align:left; border: solid 1px #C0C0C0; background: #FFFFFF; padding: 0px;
    color: #000000; font-size: 12px"><CENTER><strong>FullHouse Magazine</strong></CENTER>
    <!-- Change marquee direction height and speed below Change image link and image with yours below -->
    <marquee onmouseover='this.stop();' onmouseout='this.start();' direction="up" height="300" scrollamount="6" >
    <div id="FHpicture scroll0"><a href="http://www.fullhousemagazine.co.uk" rel=�nofollow� target="_blank"><img src="images/FH34_01.jpg" width="180" height="250" alt="FullHouse" border="0"/></a></div>
    <div id="FHpicture scroll1"><br><br><a href="http://www.fullhousemagazine.co.uk" rel=�nofollow� target="_blank"><img src="images/FH35_01.jpg" width="180" height="250" alt="FullHouse" border="0"/></a></div>
    <div id="FHpicture scroll2"><br><br><a href="http://www.fullhousemagazine.co.uk" target="_blank"><img src="images/FH36_01.jpg" width="180" height="250" alt="FullHouse" border="0"/></a></div>
    </marquee>
    </div>
    <!-- Scrolling Images Fullhouse End -->

    <!-- Scrolling Images LoveIt Start -->
    <!-- Change width, border size, background colour, padding and heading colour and size below -->
    <noscript></noscript>
    <div style="float:left; width: 180px; text-align:center; border: solid 1px #C0C0C0; background: #FFFFFF; padding: 0px;
    color: #000000; font-size: 12px"><CENTER><strong>LoveIt</strong></center>
    <!-- Change marquee direction height and speed below Change image link and image with yours below -->
    <marquee onmouseover='this.stop();' onmouseout='this.start();' direction="up" height="300" scrollamount="6" >
    <div id="LIpicture scroll0"><a href="http://www.fullhousemagazine.co.uk" rel=�nofollow� target="_blank"><img src="images/FH34_01.jpg" width="180" height="250" alt="FullHouse" border="0"/></a></div>
    <div id="LIpicture scroll1"><br><br><a href="http://www.fullhousemagazine.co.uk" rel=�nofollow� target="_blank"><img src="images/FH34_01.jpg" width="180" height="250" alt="FullHouse" border="0"/></a></div>
    <div id="LIpicture scroll2"><br><br><a href="http://www.fullhousemagazine.co.uk" target="_blank"><img src="images/FH34_01.jpg" width="180" height="250" alt="FullHouse" border="0"/></a></div>
    </marquee>
    </div>
    <!-- Scrolling Images LoveIt End -->
    </p>

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    All you need to do to center something block level is to give it a width and margin: 0 auto;
    You really need to start writing your own HTML, that's obviously spewed out by a wysiwyg editor.
    Here's the type of HTML you should be using instead.
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>untitled </title>
    <style type="text/css">
    .wrapper {
      width: 364px;
      margin: 0 auto;
    }
    .section {
      float: left;
      width: 180px;
      height: 300px;
      border: 1px solid #C0C0C0;
      font-size: 12px;
    }
    .section h2 {
      text-align: center;
    }
    </style>
    </head>
    <body>
    <div class="wrapper">
      <div class="section">
        <h2>FullHouse Magazine</h2>
        <ul>
          <li><a href="#">FullHouse</a></li>
          <li><a href="#">FullHouse</a></li>
          <li><a href="#">FullHouse</a></li>
        </ul>
      </div>
      <div class="section">
        <h2>LoveIt</h2>
        <ul>
          <li><a href="#">FullHouse</a></li>
          <li><a href="#">FullHouse</a></li>
          <li><a href="#">FullHouse</a></li>
        </ul>
      </div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,820
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    @James1987

    Try this - demo with source:

    http://johns-jokes.com/downloads/sp-a/marquee/index.php




    When copying and pasting it is easier to read when enclosed in

    [ code ] your script and code tags without spaces [/ code ]

    Code:
     your script and code tags with spaces


Bookmarks

Posting Permissions

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