SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Location
    Québec City, Canada
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please, I need help with this complex css layout

    Hi I am new to this forum.

    My question is that the footer of my website has a pretty complex layout that I can't figure out.
    I provide a JPG of the layout and the html and CSS so you can understand what I mean.

    Thanks very much,

    It would be great if someone helps me with this,

    Camaalot
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Can you just post the code here? That'll be faster then us waiting for the stuff to be approved

    Also, a link to the site would be best because we can just copy the code/images
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,838
    Mentioned
    114 Post(s)
    Tagged
    1 Thread(s)
    We have had a couple of threads recently looking at footers - have you had a look at those to see if they answer your question? Especially seeing as you haven't actually asked a question that we can answer yet...

    http://www.sitepoint.com/forums/show...ghlight=footer
    http://www.sitepoint.com/forums/show...ghlight=footer

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Looking at your drawing you could do something roughly like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css"  href="../Scripts/CSS/footer2.css" />
    <style type="text/css">
    #footer_main {
        width: 940px;
        margin: auto;
        border: 1px solid #666;
        background:#eaeaea url(../../_Images/footer-border.png) no-repeat;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 17px;
        font-weight: bold;
        padding:10px;
        overflow:hidden;/* clear floats*/
        text-align:left;
    }
    #footer_main h4 {
        width: 450px;
        text-indent: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid #333;
        margin:0;
    }
    .recommend {
        float: left;
        width: 450px;
        overflow:hidden;
    }
    #footer_main ul {
        width: 450px;
        font-size: 14px;
        border-bottom: 1px solid #333;
        list-style:none;
        margin:0;
        padding:0 0 5px;
    }
    #footer_main li {
        display:inline
    }
    #footer_main li strong, #footer_main li a {
        display:inline-block;
        width:200px;
        text-decoration:none;
        color:#000;
        padding:20px 5px 5px;
        border-top:1px solid #333;
    }
    #footer_main li.first strong, #footer_main li.first a {
        border-top:none
    }
    #footer_main li strong {
        margin-right:30px;
        text-align:right;
    }
    #footer_main li a {
        margin-right:-10px
    }
    #footer_main .contact {
        float: right;
        width: 450px;
        text-indent: 5px;
    }
    fieldset, form, legend {
        border:none;
        margin:0;
        padding:0;
    }
    #footer_main legend b,
    #footer_main legend{
        position:absolute;
        left:-999em;
        top:-999em
    }
    #footer_main label {
        display:inline-block;
        width:150px;
        padding:5px 10px 5px 0;
        text-align:right;
    }
    #footer_main input {
        width:200px;
    }
    .contact form {
        padding:1px 0 15px;
        border:1px solid #666;
        margin:15px 0 5px;
    }
    </style>
    </head>
    <body>
    <div id="footer_main">
        <div class="recommend">
            <h4>We recommend you : </h4>
            <ul>
                <li class="first"><strong>Affiliates websites :</strong> <a href="#">www.affiliates.com</a></li>
                <li><strong>sponsors websites :</strong> <a href="#">www.sponsors.com</a></li>
                <li><strong>Affiliates websites :</strong> <a href="#">www.interest.com</a></li>
            </ul>
        </div>
        <div class="contact">
            <h4>Contact Us :</h4>
            <form id="form1" name="form1" method="post" action="">
                <fieldset>
                <legend><b>Contact Form details</b></legend>
                <br />
                <label for="name">Name :</label>
                <input type="text" name="name" id="name" />
                <br />
                <label for="address">Address :</label>
                <input type="text" name="address" id="address" />
                <br />
                </fieldset>
            </form>
        </div>
    </div>
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Oct 2010
    Location
    Québec City, Canada
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I am sorry for not replying, I was busy trying to solve my own problem.

    And, here it is. I succeeded i making this footer working.

    You can go to this address if you want to take a look : http://www.ageac.ca/_Fr/index_fr.html.

    What I did is this:
    First : I wanted two separate columns. "NOUS VOUS RECOMMANDONS" and ÉCRIVEZ-NOUS. That was easy enough. Two <div> floating left.
    To be sure that these columns will keep same aspect and distance in every browsers, I inserted another <div> in between called spacer.

    Second : The most complicated part was to create 3 columns and 6 rows under the "NOUS VOUS RECOMMANDONS" column.
    Even if I tried to float the <div>, they would always fall underneath one another, making the "table" crappy.

    Actually, I repeated what I did above :Two <div> floating left with a spacer <div> in between.

    I hope I am clear enough. I am not to good at explaining stuff like this. But I'm sure that if you look at the HTML and CSS, you'll understand.

    I know I have yet to organize the styling much better, t5hat is coming pretty soon.

    Thank you guys trying to help me, trying to figure out what I meant, even though my question was lousy. tup:

    Thank you again.

    Camaalot

    P.S. I'll try next time to write a real question.:

  6. #6
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,074
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Your footer looks quite different depending on which browser I view it in. Also, there are a few validation errors. Maybe you should give Paul's suggestion a try.
    <cfset myblog = "http://cydewaze.org/">

  7. #7
    SitePoint Member
    Join Date
    Oct 2010
    Location
    Québec City, Canada
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I've tested the footer on the latest versions of IE, Fx, Chrome, Opera and Safari and it works great. What version did you view it with so I can fix the problems.

    Also, I'm pretty sure that there's bugs if you view it with IE6. But the question is : Is it worth paying attention to IE6 anymore ? Some say that it is a lost cause, so !

    Concerning validation errors, what are Paul's suggestions and how can I use them.
    By the way I've been on W3c site and the validator found nothing.

    Thanks

    Camaalot

  8. #8
    SitePoint Member
    Join Date
    Oct 2010
    Location
    Québec City, Canada
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again.

    Forget about Paul's suggestions. I found them up a few threads.

    camaalot

  9. #9
    SitePoint Member
    Join Date
    Oct 2010
    Location
    Québec City, Canada
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    I owe you many thanks, I've never thought of using unordered lists. It makes things much simpler.

    I'll get back to you soon.

    Thanks again,

    camaalot

  10. #10
    SitePoint Member
    Join Date
    Oct 2010
    Location
    Québec City, Canada
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again,

    I been working on Paul's style.
    There's a problem : what if there's more than one link ? The <ul>, doesn't work.

    Camaalot

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Your image doesn't show more than one link so you will need to clarify a bit what you want


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
  •