...

View Full Version : Divs are splitting



twistedsoul
12-13-2009, 01:25 PM
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
}

SB65
12-13-2009, 01:47 PM
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:


p {margin:0 0 1em}

or just those in #page:


#page p {margin:0 0 1em}

twistedsoul
12-13-2009, 01:55 PM
Thank you, I just used p {margin: auto;} it seemed to fix all but the gap on top of the page

vineet
12-13-2009, 03:40 PM
to remove top gap. you need margin:0px in your #nav



#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

Kristofa
12-13-2009, 11:03 PM
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.

twistedsoul
12-14-2009, 05:18 PM
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


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
}

abduraooft
12-14-2009, 05:27 PM
Add
*{margin: 0; padding:0;} into your CSS to reset all browser specific default margins and paddings.

vineet
12-14-2009, 05:39 PM
if you dont want to reset all then just add/replace these in your css for removing footer gap



#page p{
margin-bottom:0px;
}

#footer p {
padding-top: 8px;
margin:0px;
}


vineet

twistedsoul
12-14-2009, 05:47 PM
Thanks alot for your help seems to be working fine now

twistedsoul
12-15-2009, 11:18 PM
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.

Excavator
12-16-2009, 12:12 AM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum