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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div layout problems

    Hi,

    I'm having my first go at div layouts on a design I'd rather use tables for. It's a very simple design, and I'm getting quite close to what I want, but I've been confounded by a number of things and wondered if anybody could offer some help.

    The layout is essentially 4 "rows". The first 3 rows are divided into 2 "columns". The final row is a single column, acting as a footer. I'm putting a small transparent gap of 2px between each row, and between the 2 columns of the first 3 rows.

    The top row's divs will contain images and are both fixed size. In the 2nd row's divs, the first column will hold an unordered list for navigation, the second will hold an image of fixed size.
    The 3rd row will both contain text, and will not have height specified, but will both be as wide as the divs immediately above them.
    The final row is a single column and will contain text, and will be as wide as the entire mess above.

    The HTML is:
    <!-- Whole Site -->
    <div id="container">

    <!-- Header -->
    <div id="wrapperhead">
    <div id="logo"><img src=".jpg" /></div>
    <div id="title"><img src=".jpg" /></div>
    </div>

    <!-- Navigation -->
    <div id="wrappernav">
    <div id="navigation">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    </ul>
    </div>
    <div id="picture"><img src=".jpg" /></div>
    </div>

    <!-- Content -->
    <div id="wrappercontent">
    <div id="testimonial"></div>
    <div id="content"></div>
    </div>

    <!-- Footer -->
    <div id="wrapperfooter">
    <div id="footer"></div>
    </div>
    </div>

    My CSS is:
    #container{
    width: 630px;
    }
    #wrapperhead{
    width: 630px;
    }
    #wrappernav{
    width: 630px;
    }
    #wrappercontent{
    width: 630px;
    }
    #logo{
    width: 180px;
    height: 100px;
    float: left;
    }
    #title{
    width: 450px;
    height: 100px;
    float: right;
    }
    #navigation{
    width: 180px;
    height: 150px;
    float: left;
    }
    #picture{
    width: 450px;
    height: 150px;
    float: right;
    }
    #testimonial{
    width: 180px;
    height: 150px;
    float: left;
    }
    #content{
    width: 450px;
    height: 150px;
    float: right;
    }
    #footer{
    width: 630px;
    }

    Now, the questions:
    Firstly, I am not able to produce the 2px transparent gap between each div in any robust way. Margin-bottom works in IE, but not in FF. Border's work, but not without their problems.
    Secondly, when I add a 450x150px jpg to #picture, the div next to it appears slightly shorter in both IE and FF.
    Thirdly, when I add the <ul> to #navigation, I seem to have very little control over its placement.
    Lastly, I am not able to align the entire site in the centre of the browser without using an overly complicated method which doesn't respond well to the browser window being made very narrow (and therefore not to small screens).

    I am very tempted to go back to a table design, but thought I would ask online as someone brighter than me might be prepared to help.

    Lee

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    The are the screen images from your code using my own jpg.s
    Are they wrong. Have I understood what you are after?

    Frank
    Attached Thumbnails Attached Thumbnails Div layout problems-screenhunter_01-jan.-05-23.56.jpg   Div layout problems-screenhunter_02-jan.-05-23.57.jpg   Div layout problems-screenhunter_03-jan.-05-23.57.jpg  
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,627
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    A link to an online example would help here as it’s hard to tell you what’s best to do without seeing any images and/or content at all.

    Today’s approach in web development is:
    1. Have some content and mark it up with semantic HTML.
    2. Get the full information and functionality properly working (without having used any CSS or JavaScript yet).
    3. Style the content with CSS.


    Now, try this for centering the site:
    Code:
    #container {
    	width: 630px;
            margin: auto;
    }
    Secondly: The semantic approach also means that we separate content from design and this means that all images that are only for the site design, i.e. images that are not directly related to the understanding of the content/information on the site have to be applied through CSS (background images). On this note I think you’re still too much thinking in tables and I suspect that the separation of #logo and #title is redundant. You could easily remove those two divs and have the title either as h1 or still as HTML image in #wrapperhead (since it’s a logo we can make an exception here), and the image you’re currently using in #title applied as background to this #wrapperhead.

    In the same way, you should ponder about how to apply the image in #picture. Is the picture indispensible for the understanding of the site/content or is it just to make the page look pretty? If the latter one is the case it has to be put as background image. The advantage is that you can put anythin in that div as actual content and the image won’t be in the way.

    Thirdly: Read some tutorials about floats to learn why a bottom margin isn’t working here. Basically by floating the divs within the wrapper divs, the wraper divs collapse to zero (apply a background color and a height to #wrappernav, for example, to see the effect). You would need to apply a bottom margin to these floated elements in order to get some space. Containing floats are a solution – and maybe that article I just linked to helps you understand floats in general.

    Quote Originally Posted by leec View Post
    Border's work, but not without their problems.
    And what are those problems if I may ask? In case you’re not aware of it: a border adds to the overall size of an element.

    Quote Originally Posted by leec View Post
    Secondly, when I add a 450x150px jpg to #picture, the div next to it appears slightly shorter in both IE and FF.
    Actually the div in which you put the image will get longer and here’s why: http://developer.mozilla.org/en/docs...ysterious_Gaps

    Quote Originally Posted by leec View Post
    Thirdly, when I add the <ul> to #navigation, I seem to have very little control over its placement.
    Lists have a default margin and/or padding which differs in different browsers. Set both to zero for cross browser consistency and start adding from there if necessary.

    I hope that helps a little.
    Last edited by VIPStephan; 01-06-2008 at 12:38 AM.

  • #4
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    The are the screen images from your code using my own jpg.s
    Are they wrong. Have I understood what you are after?

    Frank
    Hi Frank,

    That's pretty much what I'm going for, yes. What have you used to create the gaps between the images?
    Also, I noticed I left height properties in the CSS for the #testimonial and #content divs. Those will be removed, as those divs are not fixed-height.

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Stephan. Thanks for replying so thoroughly.

    Regarding the first two 'cell's' (obviously I am thinking too much of tables hehe), #logo will serve up the company's logo. #title will actually have an image applied through CSS as a background. On top of that, I will print the current page's title as a H1.

    On a similar note, although #picture's picture is partially decorative, it is intended to summarise the page's content. Whilst not indispensable, I would like to stick to this idea as it's not only visually pleasing but also will help emphasise the 'corporate ethos' related to that page.

    The problems of borders were quite diffuse. And I was also adding margins and padding. In my frustration, I didn't take a particularly critical approach to finding out which problems were caused by which. Sorry, I simply can't remember. Hope this doesn't make you think I'm a time waster. I simply got quite frustrated and only included that line to indicate I had tried several things.

    Thanks a lot for the links. I'm just about to check both of them out. I found searching for help on divs, annoyingly, brought up tons of MySpace tutorials and templates.

    In the absence of a decent result so far to indicate my progress, I've created a mock-up graphic to show what result I'm trying to achieve.
    Attached Thumbnails Attached Thumbnails Div layout problems-sitemock.jpg  
    Last edited by leec; 01-06-2008 at 01:51 AM.


  •  

    Posting Permissions

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