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 11 of 11
  1. #1
    New Coder twistedsoul's Avatar
    Join Date
    Jul 2008
    Location
    UK
    Posts
    94
    Thanks
    3
    Thanked 1 Time in 1 Post

    Divs are splitting

    Hi, I've just started to code a site but for some reason the div's are splitting leaving white space. I've checked the code and cant seem to put my finger on it? could anyone point me in the right direction of fixing this.

    thanks

    http://www.render-uk.com/euro/

    XHTML

    <body id="home">
    <div id="wrapper">
    <div id="head">
    <ul id="nav">

    <li id="nav_contact"><a href="#">Contact Us<br />
    <span>Get in touch</span></a></li>
    <li id="nav_services"><a href="#">Services<br />
    <span>What we offer</span></a></li>
    <li id="nav_work"><a href="#">Work<br />
    <span>Recent projects</span></a></li>

    <li id="nav_home"><a href="#">Home<br />
    <span>The hompage</span></a></li>
    </ul>
    </div>
    <div id="top">
    <div id="scroller">
    <div id="slide">
    <img src="images/1.jpg" alt="Rendered school" />
    <img src="images/2.jpg" alt="Rendered building" />

    <img src="images/3.jpg" alt="Rendered office buildings" />
    <img src="images/4.jpg" alt="Rendered flats" />
    </div>
    </div>
    </div>
    <div id="content">
    <div id="page">
    <p>By moving executive focus from lag financial indicators to more actionable lead indicators, the three cs - customers, competition and change - have created a new world for business whether the organization's core competences are fully in line, given market realities. That will indubitably lay the firm foundations for any leading company in order to build a shared view of what can be improved, an investment program where cash flows exactly match shareholders' preferred time patterns of consumption. Whenever single-loop learning strategies go wrong, by moving executive focus from lag financial indicators to more actionable lead indicators, from binary cause and effect to complex patterns. Exploiting the productive lifecycle combined with optimal use of human resources, to focus on improvement, not cost.</p>
    <p>Empowerment of all personnel, not just key operatives, while those at the coal face don't have sufficient view of the overall goals. Taking full cognizance of organizational learning parameters and principles, an investment program where cash flows exactly match shareholders' preferred time patterns of consumption as knowledge is fragmented into specialities. The strategic vision - if indeed there be one - is required to identify the balanced scorecard, like the executive dashboard, is an essential tool in order to build a shared view of what can be improved.</p>

    <p>Empowerment of all personnel, not just key operatives, an investment program where cash flows exactly match shareholders' preferred time patterns of consumption exploitation of core competencies as an essential enabler. To focus on improvement, not cost, the three cs - customers, competition and change - have created a new world for business quantitative analysis of all the key ratios has a vital role to play in this. Through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. Defensive reasoning, the doom loop and doom zoom as knowledge is fragmented into specialities organizations capable of double-loop learning. Highly motivated participants contributing to a valued-added outcome.</p>
    <p>The components and priorities for the change program motivating participants and capturing their expectations, the balanced scorecard, like the executive dashboard, is an essential tool. Whenever single-loop learning strategies go wrong, while those at the coal face don't have sufficient view of the overall goals. That will indubitably lay the firm foundations for any leading company an important ingredient of business process reengineering to ensure that non-operating cash outflows are assessed. Exploitation of core competencies as an essential enabler. Measure the process, not the people.</p>
    <p>Exploiting the productive lifecycle taking full cognizance of organizational learning parameters and principles, defensive reasoning, the doom loop and doom zoom. An important ingredient of business process reengineering organizations capable of double-loop learning, that will indubitably lay the firm foundations for any leading company. Combined with optimal use of human resources, working through a top-down, bottom-up approach, defensive reasoning, the doom loop and doom zoom. To ensure that non-operating cash outflows are assessed.</p>
    </div>
    </div>
    <div id="footer">
    <p>&copy; Render-UK 2009 - All rights reserved - Designed by Klever media</p>
    </div>

    </div>
    </body>
    </html>
    CSS

    body, td,th {
    font-family:Arial, Verdana, Helvetica, sans-serif;
    font-size:11px;
    color:#FFF;
    margin: 0px;
    }
    #wrapper {
    margin: 0px;
    }
    #head {
    height: 155px;
    background-image: url(../images/head.gif);
    }
    #top {
    background-image:url(../images/top.gif);
    height: 348px;
    margin: 0px;
    }
    #scroller {
    width: 690px;
    margin-left: 45px;
    }
    #slide {
    float:left;
    margin-top: 20px;
    margin-left: 10px;
    width: 665px;
    height: 315px;
    }
    #slide img {
    width: 665px;
    height: 315px;
    }
    #content {
    background-image:url(../images/content.gif);
    margin: 0px;
    }
    #page {
    margin-left: 55px;
    width: 665px;
    }
    #footer {
    background-image:url(../images/footer.gif);
    text-align:center;
    height: 25px;
    }
    #footer p {
    padding-top: 8px;
    }
    /***** NAVIGATION *****/

    #nav {
    margin-left:50px;
    background-image:url(../images/logo.png);
    background-repeat:no-repeat;
    background-position:left;
    height:155px;
    padding-right:80px;
    list-style-type: none;
    }
    #nav li a {
    display:block;
    padding-left: 20px;
    padding-top: 25px;
    width:100px;
    height:60px;
    text-decoration:none;
    font-family:verdana, arial, sans-serif;
    font-size:16px;
    color:#1582ba;
    line-height:20px;
    float:right;}

    #nav a:hover {
    background-image:url(../images/button_hover.gif);
    }
    #home #nav_home a, #work #nav_work a, #services #nav_services a, #contact #nav_contact a {
    color:#FFF;
    background-image:url(../images/button.gif);
    }
    span {
    color:#ccc;
    font-size:10px
    }
    Whatever you do, do not click me!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The gap is caused by the default top margin on the <p> element in #page.

    You could either remove the top margin on all <p> elements:

    Code:
    p {margin:0 0 1em}
    or just those in #page:

    Code:
    #page p {margin:0 0 1em}

  • #3
    New Coder twistedsoul's Avatar
    Join Date
    Jul 2008
    Location
    UK
    Posts
    94
    Thanks
    3
    Thanked 1 Time in 1 Post
    Thank you, I just used p {margin: auto;} it seemed to fix all but the gap on top of the page
    Whatever you do, do not click me!

  • #4
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    to remove top gap. you need margin:0px in your #nav

    Code:
    #nav {
    	margin-left:50px;
    	background-image:url(../images/logo.png);
    	background-repeat:no-repeat;
    	background-position:left;
    	height:155px;
    	padding-right:80px;
    	list-style-type: none;	
    	margin:0px;
    	}
    vineet

  • #5
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by twistedsoul View Post
    Thank you, I just used p {margin: auto;} it seemed to fix all but the gap on top of the page
    Doing this could give you a different result depending on which browser your page is viewed in, for example, in Firefox 3.5.3, I still see a load of white strips after adding that CSS. Putting in what SB65 gave you is a lot better.


    Also, what vineet posted will also get rid of your margin-left, which I presume you want to keep. Use margin-top, instead of just a general margin property.
    Learning along the way...

  • #6
    New Coder twistedsoul's Avatar
    Join Date
    Jul 2008
    Location
    UK
    Posts
    94
    Thanks
    3
    Thanked 1 Time in 1 Post
    I'm still finding this a little odd, I've used all the stated advice which I'd like to say thanks. But I still cant get rid of the footer space.

    This is the updated code

    Code:
    body, td,th { 
    	font-family:Arial, Verdana, Helvetica, sans-serif;
    	font-size:11px;
    	color:#FFF;
    	margin: 0px; 
    	}
    #wrapper {
    	margin: 0px;
    }	
    #head {
    	height: 155px;
    	background-image: url(../images/head.gif);
    }
    #top {
    	background-image:url(../images/top.gif);
    	height: 348px;
    }
    #scroller {
    	width: 690px;
    	margin: 0px 0px 0px 45px;
    }
    
    #slide {
    	float:left;
    	margin: 20px 0px 0px 10px;
    	width: 665px;
    	height: 315px;
    } 
    #slide img {
        width: 665px;
        height: 315px;
    }
    #content {
    	background-image:url(../images/content.gif);
    }
    #page {
    	margin: 0px 0px 0px 55px;
    	width: 665px;
    }
    #page p {
    	margin:0 0 1em
    }
    #footer {
    	background-image:url(../images/footer.gif);
    	text-align:center;
    	height: 25px;
    	padding-top: 1px;
    }
    
    /***** NAVIGATION *****/	
    
    #nav {
    	margin: 0px 0px 0px 50px;
    	background-image:url(../images/logo.png);
    	background-repeat:no-repeat;
    	background-position:left;
    	height:155px;
    	padding-right:80px;
    	list-style-type: none;	
    }
    #nav li a {
    	display:block;
    	padding-left: 20px;
    	padding-top: 25px;
    	width:100px;
    	height:60px;
    	text-decoration:none;
    	font-family: arial, verdana,sans-serif;
    	font-size:16px;
    	color:#1582ba;
    	line-height:20px;
    	float:right;}
    
    #nav a:hover {
    	background-image:url(../images/button_hover.gif);
    }
    #home #nav_home a, #work #nav_work a, #services #nav_services a, #contact #nav_contact a {
    	color:#FFF;
    	background-image:url(../images/button.gif);
    }
    span {
    	color:#ccc;
    	font-size:10px
    }
    Whatever you do, do not click me!

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Add
    Code:
    *{margin: 0; padding:0;}
    into your CSS to reset all browser specific default margins and paddings.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    if you dont want to reset all then just add/replace these in your css for removing footer gap

    Code:
    #page p{
    margin-bottom:0px;
    }
    
    #footer p {
    padding-top: 8px;
    margin:0px;
    }
    vineet

  • #9
    New Coder twistedsoul's Avatar
    Join Date
    Jul 2008
    Location
    UK
    Posts
    94
    Thanks
    3
    Thanked 1 Time in 1 Post
    Thanks alot for your help seems to be working fine now
    Whatever you do, do not click me!

  • #10
    New Coder twistedsoul's Avatar
    Join Date
    Jul 2008
    Location
    UK
    Posts
    94
    Thanks
    3
    Thanked 1 Time in 1 Post
    Urgh I hate i.e

    http://www.render-uk.com/euro/services.html

    It's really not doing well with i.e and I don't see what the problem is? I've set a 100% width and a 1280px min width but its still not doing its job, it displays the telephone number and other list items in the content area instead of the blue bar.
    Whatever you do, do not click me!

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,683
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Hello twistedsoul,
    We all hate IE but, if it was easy to do we would not be able to charge for it.
    What happens when you remove the 690px width you've set on #scroller?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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