dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: containers and wrappers

  1. #1
    Join Date
    Mar 2005
    Posts
    128

    containers and wrappers

    i'm trying to centering a float left menu link . i've tried <div> margins and containers, but it doesn't seem to work. here's the code , what am i doing wrong?
    here's the code


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01Transitional//EN">
    <html>
    <head>
    <title>154.html</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style type=text/css>

    body
    { background-image: url(brbg9.jpg);
    background-repeat: repeat;}

    h1 {width:262px; height:22px;
    margin-left:auto; margin-right: auto;
    margin-top: 22px; margin-bottom: 33px;
    font: bold 16px helvetica;
    color:#000099 ;
    background-color: #FFCC00; text-decoration:none;
    border: 4px ridge #00CCFF;
    padding-top: 2px;
    padding-bottom: 2px; padding-left: 12px;
    padding-right: 12px;
    letter-spacing: 6px;
    text-align:center}

    .image {text-align:center}

    p {font: 13px helvetica; color:#FFCC00;
    margin-left:auto; margin-right:auto;
    margin-top:64px; width:55%}


    .buttoncontainer {text-align:center; margin-left:auto
    margin-right:auto }

    a.one { float:left; margin-left:1px;
    color: #0000CC;
    border: 4px solid;
    background-color: #FFCC00;
    font: bold 12px verdana;
    text-decoration: none;
    border-color: #FFFF00 #CC9900 #CC9900 #FFFF00;
    width: 80px; display:inline;
    text-align:center;}

    a.one:hover {
    color:#0000FF;
    border: 4px ridge;
    background-color:#FFCC00;
    font: bold 12px verdana;
    text-decoration: none;
    border-color: #00FFFF;
    width: 80px;
    text-align: center;}

    li {display:inline}

    p.copyright {font:12px helvetica; color: green;
    margin-left:auto; margin-right:auto}


    </head>
    </style>





    <body>


    <h1>Custom Strips</h1>


    <div class="image">
    <img src="images/custom.gif">
    </div>

    <p>"NO, IT CAN'T BE, TELL US MORE!" Alright, keep your drawers on.
    I will draw you a personal strip, incorporating you into the strip.
    Send me a picture or a description of yourself, plus what you love,
    dislike, hobbies etc.... Please describe yourself in as much detail
    as possible, so that I may have a broader range to work from. You can
    even set up the scene, if you like. Once i've finished, I will send you
    an e-mail with your strip. "Hey, wait a minute, this sounds too good to
    be true." Of course it is. This requires your bank account information
    or a small donation to me. "How much of a donation are we talking about?"
    I will leave that up to your discretion. "How do I know this isn't some
    sort of money making scam?" I am deeply hurt that you would question my
    integrity, but to show good faith, I will let you view the strip first,
    then and only if you're satisfied, will I accept a donation. So, what do
    you have to lose. AB-SO-LUTELY NOTHING! Well, um, you would lose your
    hard earned dollars, but besides that, AB-SO-LUTELY NOTHING!
    </p><BR><BR>

    <div class="buttons">
    <li><a class="one" href="brindex.html">HOME</a></li>
    <li><a class="one" href="intro.html">INTRO</a></li>
    <li><a class="one" href="archives.html">STRIPS</a></li>
    <li><a class="one" href="http://cafepress.com/bluesrock">
    SWAG</a></li>
    <li><a class="one" href="donations.html">
    CUSTOM</a></b></li>
    <li><a class="one" href="index.html">FatBottom's</a></li>
    <li><a class="one" a href=mailto:"fatbottoms@fastmail.us">EMAIL</a></li>
    </div><BR><BR>

    <p class="copyright">
    All materials on this website, copyright 2005,creator of this website.</p>





    <!-- Start of StatCounter Code -->
    <script type="text/javascript" language="javascript">
    var sc_project=519122;
    var sc_partition=3;
    var sc_security="";
    </script>

    <script type="text/javascript" language="javascript" src="http://www.statcounter.
    com/counter/counter.js"></script><noscript><a href="http://www.statcounter.com/"
    target="_blank"><img src="http://c4.statcounter.com/counter.php?sc_project=
    519122&java=0&security=" alt="hidden hit counter" border="0"></a> </noscript>
    <!-- End of StatCounter Code -->


    </body>
    </html>

  2. #2
    Join Date
    Apr 2003
    Posts
    32
    First, use a validator on your html:

    http://validator.w3.org/

    Easiest way to do this is to get Firfox and use the WebDeveloper extension. Look under tools and it has validation built into it, VERY HANDY!!!!

    Your code is ugly! Start simple and work towards more complexity. Don't do fancy stuff until your structure is in place and working. Here is something to start with:

    HTML Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01Transitional//EN">
    <html>
    <head>
    <title>154.html</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type=text/css>
    
    body
    { background-image: url(brbg9.jpg);
    background-repeat: repeat;}
    
    h1 {width:262px; height:22px;
    margin-left:auto; margin-right: auto;
    margin-top: 22px; margin-bottom: 33px;
    font: bold 16px helvetica;
    color:#000099 ;
    background-color: #FFCC00; text-decoration:none;
    border: 4px ridge #00CCFF;
    padding-top: 2px;
    padding-bottom: 2px; padding-left: 12px;
    padding-right: 12px;
    letter-spacing: 6px;
    text-align:center}
    
    .image {text-align:center}
    
    p {font: 13px helvetica; color:#FFCC00;
    margin-left:auto; margin-right:auto;
    margin-top:64px; width:55%}
    
    
    .buttoncontainer {text-align:center; margin-left:auto
    margin-right:auto }
    
    a.one { 
    }
    
    a.one:hover {
    
    }
    
    li {display:inline}
    
    p.copyright {font:12px helvetica; color: green;
    margin-left:auto; margin-right:auto}
    
    div.buttons {
    	width: 100%;
    	text-align: center;
    	border: solid 1px green;
    }
    </style>
    
    </head>
    
    
    
    
    
    <body>
    
    
    <h1>Custom Strips</h1>
    
    
    <div class="image">
    <img src="images/custom.gif">
    </div>
    
    <p>"NO, IT CAN'T BE, TELL US MORE!" Alright, keep your drawers on.
    I will draw you a personal strip, incorporating you into the strip.
    Send me a picture or a description of yourself, plus what you love,
    dislike, hobbies etc.... Please describe yourself in as much detail
    as possible, so that I may have a broader range to work from. You can
    even set up the scene, if you like. Once i've finished, I will send you
    an e-mail with your strip. "Hey, wait a minute, this sounds too good to
    be true." Of course it is. This requires your bank account information
    or a small donation to me. "How much of a donation are we talking about?"
    I will leave that up to your discretion. "How do I know this isn't some
    sort of money making scam?" I am deeply hurt that you would question my
    integrity, but to show good faith, I will let you view the strip first,
    then and only if you're satisfied, will I accept a donation. So, what do
    you have to lose. AB-SO-LUTELY NOTHING! Well, um, you would lose your
    hard earned dollars, but besides that, AB-SO-LUTELY NOTHING!
    </p><BR><BR>
    
    <div class="buttons">
    <ul>
    <li><a class="one" href="brindex.html">HOME</a></li>
    <li><a class="one" href="intro.html">INTRO</a></li>
    <li><a class="one" href="archives.html">STRIPS</a></li>
    <li><a class="one" href="http://cafepress.com/bluesrock">
    SWAG</a></li>
    <li><a class="one" href="donations.html">
    CUSTOM</a></b></li>
    <li><a class="one" href="index.html">FatBottom's</a></li>
    <li><a class="one" a href=mailto:"fatbottoms@fastmail.us">EMAIL</a></li>
    </ul>
    </div><BR><BR>
    
    <p class="copyright">
    All materials on this website, copyright 2005,creator of this website.</p>
    
    
    
    
    
    <!-- Start of StatCounter Code -->
    <script type="text/javascript" language="javascript">
    var sc_project=519122;
    var sc_partition=3;
    var sc_security="";
    </script>
    
    <script type="text/javascript" language="javascript" src="http://www.statcounter.
    com/counter/counter.js"></script><noscript><a href="http://www.statcounter.com/"
    target="_blank"><img src="http://c4.statcounter.com/counter.php?sc_project=
    519122&java=0&security=" alt="hidden hit counter" border="0"></a> </noscript>
    <!-- End of StatCounter Code -->
    
    
    </body>
    </html>
    Basically, I added the necessary <ul></ul> around your <li></li> tags. I changed the placement of </head> to come after </style> and I deleted the style you had for the a.one and a.one:hover classes. Happy coding.

  3. #3
    Join Date
    Mar 2005
    Posts
    128

    fatbottoms

    hey, thanks for replying. your code center the buttons, but when i add style to the buttons, it won't center again. i 'm using a library computer, so i can't download anything. is it not possible to center the buttons with the style i have, without using firefox?

  4. #4
    Join Date
    Apr 2003
    Posts
    32
    Add your style one line at a time until you figure out which part breaks the centering. Once you know what is breaking it, let me know and I will help you more.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles