|
cant position content text floated left without it popping down to bottom of page
05-11-2009, 10:50 AM
|
cant position content text floated left without it popping down to bottom of page
|
Posts: 611
|
hi, i had to use absolute positioning to position my 2 content text columns, when i try to position the top content div to the right, it interferes with the links div above it and pops way down on the page. if anyone can please let me know how to position both of my content divs without absolute positioning id greatly appreciated it. derek
here is the page im talking about
http://derekvanderven.com/global_industries/index.html
here is the css for the page.
the divs are #bottom_content and #top_content.
Code:
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
background-color: #4E7272;
}
#wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( background.jpg);
background-repeat:no-repeat;
}
#toplinks {
font-weight:bold;
width:400px;
height: 70px;
float:right;
clear: both;
margin: 100px 20px 0 0;
}
#toplinks ul {
list-style-type:none;
margin:0;
padding:0;
}
#toplinks ul li {
display:inline;
margin:0 3px;
line-height:1.5em;
}
#toplinks ul li a:link, #toplinks ul li a:visited {
color:#fff;
text-decoration:none;
height:1.8em;
}
#toplinks ul li a:hover, #toplinks ul li a:active{
color:#375B97;
text-decoration:none;
}
#bottom_links {
width: 200px;
height: 300px;
clear: both;
float: right;
margin: 700px 90px 0 0;
background: url(blue-bg.gif) repeat-x;
}
#bottom_links ul li a:link, #bottom_links ul li a:visited {
font-weight:bold;
color:#375B97;
text-decoration:none;
font-size:150%;
display:block;
height:1.8em;
}
#bottom_links ul li a:hover, #bottom_links ul li a:active{
color: #000;
text-decoration:none;
}
#bottom_links ul li {
position:relative;
left:-20px;
list-style-type:none;
}
#top_content {
width: 500px;
position: absolute;
margin: 475px 0 0 120px;
}
#bottom_content {
width: 500px;
position: absolute;
margin: 750px 0 0 120px;
}
/****************************WRAPPERS*********************/
#started_wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( background_started.jpg);
background-repeat:no-repeat;
}
#faq_wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( faq_final.jpg);
background-repeat:no-repeat;
}
#book_wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( book_background.jpg);
background-repeat:no-repeat;
}
#solutions_wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( background_solutions.jpg);
background-repeat:no-repeat;
}
#contact_wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( background_contact.jpg);
background-repeat:no-repeat;
}
#contactinfo {
width:50%; /* puts the box near center by its size compared to whole width*/
float:right; /*<!-- top 0, (right left 0) , bottom 5 --> /* a margin of 5em bottom pushes down the form content */
margin-top: 1em;
margin-right: 0;
margin-bottom: 3em;
margin-left: 0;
line-height:100%;
padding-top: 10px;
}
#contactform {
width: 60%; /* this box flows right under the contactinfo box naturally? */
float:right;
margin-top: 1.5em;
clear:both ;
margin-right: 7em;
}
#contactform label {
float:left; /* floats inputs left, then pushes them 120 to the right*/
width:120px;
}
#contactform input, #contactform textarea {
clear:right;
}
and here is the html for the page
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--[if lte IE 7]>
<link href="iefixes_instruction.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="global_instruction.css" rel="stylesheet" type="text/css">
<title>Global Industries Home</title>
</head>
<body>
<div id="wrapper">
<div id="toplinks">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="started.html">Started</a></li>
<li><a href="faq.html">FAQ's</a></li>
<li><a href="book.html">Book</a></li>
<li><a href="solutions.html">Solutions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="bottom_links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our Forum</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="top_content">
<p><strong>Global Industries</strong></p>
<p>Global Industries industriously provides global offshore construction and
support services including pipeline construction, platform installation and
removal, and diving services to the oil and gas industry in the all of the
world's major offshore oil patches. </p>
<p>Global's services include pipeline installation pipelay, simultaneous
multiple pipeline laying, pipeline burial, and pipeline maintenance and
repair. Global installs pipelines, insulated pipe-in-pipe, and bundled
flowlines. </p>
</div>
<div id="bottom_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultrices, erat eu pulvinar placerat, felis dui pellentesque nisi, a
eleifend turpis enim a libero. Duis id massa non quam accumsan volutpat.
Praesent ornare nisl at tortor. Nullam justo lectus, suscipit at,
euismod sit amet, facilisis eget, sem. Sed elit augue, convallis
aliquam, egestas eu, porttitor quis, purus. Praesent ac risus id ante
gravida vulputate. Quisque eu libero. Nullam ac nunc. Proin adipiscing
ligula et orci hendrerit scelerisque. Sed vitae metus quis odio euismod
pulvinar. Etiam enim nulla, aliquam vel, hendrerit eu, semper sed,
turpis. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Nunc a odio at ligula luctus euismod.
Donec vel erat ac felis hendrerit convallis. Nulla lectus. Donec nec
ligula.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultrices, erat eu pulvinar placerat, felis dui pellentesque nisi, a
eleifend turpis enim a libero. Duis id massa non quam accumsan volutpat.
Praesent ornare nisl at tortor. Nullam justo lectus, suscipit at,
euismod sit amet, facilisis eget, sem. Sed elit augue, convallis
aliquam, egestas eu, porttitor quis, purus. Praesent ac risus id ante
gravida vulputate. Quisque eu libero. Nullam ac nunc. Proin adipiscing
ligula et orci hendrerit scelerisque. Sed vitae metus quis odio euismod
pulvinar. Etiam enim nulla, aliquam vel, hendrerit eu, semper sed,
turpis. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Nunc a odio at ligula luctus euismod.
Donec vel erat ac felis hendrerit convallis. Nulla lectus. Donec nec
ligula.</p>
</div>
</div>
</body></html>
|
|
|
|
|
05-11-2009, 01:39 PM
|
Re: cant position content text floated left without it popping down to bottom of page
|
Posts: 10,017
Location: Tennessee
|
You still don't understand how to properly clear floats, do you ? Adding clear:both to the floated element is not the way, the clearing element has to come AFTER the floats.
Using that huge static background is not a good way to do a layout. That kind of setup cannot stretch vertically with it's content.
This will work for what you have:
Quote:
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
background: #4E7272
}
#wrapper {
position: relative;
margin: 0 auto;
width: 1007px;
height: 1274px;
background: url(background.jpg) no-repeat;
overflow: auto; /* clears the floated columns inside it */
font-size: 80%;
}
#toplinks {
font-weight:bold;
width:400px;
height: 70px;
float:right;
margin: 90px 20px 0 0;
}
#toplinks ul {
list-style-type:none;
margin:0;
padding:0;
}
#toplinks ul li {
display:inline;
margin:0 3px;
line-height:1.5em;
}
#toplinks ul li a:link, #toplinks ul li a:visited {
color:#fff;
text-decoration:none;
height:1.8em;
}
#toplinks ul li a:hover, #toplinks ul li a:active{
color:#375B97;
text-decoration:none;
}
#bottom_links {
width: 200px;
height: 300px;
float: right;
margin: 210px 90px 0 0;
background: url(blue-bg.gif) repeat-x;
}
#bottom_links ul li a:link, #bottom_links ul li a:visited {
font-weight:bold;
color:#375B97;
text-decoration:none;
font-size:150%;
display:block;
height:1.8em;
}
#bottom_links ul li a:hover, #bottom_links ul li a:active{
color: #000;
text-decoration:none;
}
#bottom_links ul li {
position:relative;
left:-20px;
list-style-type:none;
}
#top_content {
clear:both;
width: 500px;
float: left;
margin: 290px 0 0 120px;
padding-top: 1px;
}
#bottom_content {
width: 500px;
float: left;
margin: 20px 0 0 120px;
}
/****************************WRAPPERS************** *******/
#started_wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( background_started.jpg);
background-repeat:no-repeat;
}
#faq_wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( faq_final.jpg);
background-repeat:no-repeat;
}
#book_wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( book_background.jpg);
background-repeat:no-repeat;
}
#solutions_wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( background_solutions.jpg);
background-repeat:no-repeat;
}
#contact_wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( background_contact.jpg);
background-repeat:no-repeat;
}
#contactinfo {
width:50%; /* puts the box near center by its size compared to whole width*/
float:right; /*<!-- top 0, (right left 0) , bottom 5 --> /* a margin of 5em bottom pushes down the form content */
margin-top: 1em;
margin-right: 0;
margin-bottom: 3em;
margin-left: 0;
line-height:100%;
padding-top: 10px;
}
#contactform {
width: 60%; /* this box flows right under the contactinfo box naturally? */
float:right;
margin-top: 1.5em;
clear:both ;
margin-right: 7em;
}
#contactform label {
float:left; /* floats inputs left, then pushes them 120 to the right*/
width:120px;
}
#contactform input, #contactform textarea {
clear:right;
}
|
Quote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--[if lte IE 7]>
<link href="iefixes_instruction.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="derek_index_files/global_instruction.css" rel="stylesheet" type="text/css">
<title>Global Industries Home</title>
</head>
<body>
<div id="wrapper">
<div id="toplinks">
<ul>
<li><a href="http://derekvanderven.com/global_industries/index.html">Home</a></li>
<li><a href="http://derekvanderven.com/global_industries/started.html">Started</a></li>
<li><a href="http://derekvanderven.com/global_industries/faq.html">FAQ's</a></li>
<li><a href="http://derekvanderven.com/global_industries/book.html">Book</a></li>
<li><a href="http://derekvanderven.com/global_industries/solutions.html">Solutions</a></li>
<li><a href="http://derekvanderven.com/global_industries/contact.html">Contact</a></li>
</ul>
</div>
<div id="top_content">
<h1>Global Industries</h1>
<p>Global Industries industriously provides global offshore construction and
support services including pipeline construction, platform installation and
removal, and diving services to the oil and gas industry in the all of the
world's major offshore oil patches. </p>
<p>Global's services include pipeline installation pipelay, simultaneous
multiple pipeline laying, pipeline burial, and pipeline maintenance and
repair. Global installs pipelines, insulated pipe-in-pipe, and bundled
flowlines. </p>
</div>
<div id="bottom_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultrices, erat eu pulvinar placerat, felis dui pellentesque nisi, a
eleifend turpis enim a libero. Duis id massa non quam accumsan volutpat.
Praesent ornare nisl at tortor. Nullam justo lectus, suscipit at,
euismod sit amet, facilisis eget, sem. Sed elit augue, convallis
aliquam, egestas eu, porttitor quis, purus. Praesent ac risus id ante
gravida vulputate. Quisque eu libero. Nullam ac nunc. Proin adipiscing
ligula et orci hendrerit scelerisque. Sed vitae metus quis odio euismod
pulvinar. Etiam enim nulla, aliquam vel, hendrerit eu, semper sed,
turpis. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Nunc a odio at ligula luctus euismod.
Donec vel erat ac felis hendrerit convallis. Nulla lectus. Donec nec
ligula.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultrices, erat eu pulvinar placerat, felis dui pellentesque nisi, a
eleifend turpis enim a libero. Duis id massa non quam accumsan volutpat.
Praesent ornare nisl at tortor. Nullam justo lectus, suscipit at,
euismod sit amet, facilisis eget, sem. Sed elit augue, convallis
aliquam, egestas eu, porttitor quis, purus. Praesent ac risus id ante
gravida vulputate. Quisque eu libero. Nullam ac nunc. Proin adipiscing
ligula et orci hendrerit scelerisque. Sed vitae metus quis odio euismod
pulvinar. Etiam enim nulla, aliquam vel, hendrerit eu, semper sed,
turpis. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Nunc a odio at ligula luctus euismod.
Donec vel erat ac felis hendrerit convallis. Nulla lectus. Donec nec
ligula.</p>
</div><!-- end bottom_content -->
<div id="bottom_links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our Forum</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div><!-- end wrapper -->
</body></html>
|
You ARE going to need conditional comments and a fix for the doubled-float margin bug triggered by the left margin/float:left combination on top and bottom content boxes.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
Last edited by LadynRed; 05-11-2009 at 01:40 PM..
|
|
|
|
|
05-11-2009, 06:22 PM
|
Re: cant position content text floated left without it popping down to bottom of page
|
Posts: 611
|
WOW thank you ladynred for taking the time for that! ok i will add overflow: auto; to my wrappers. and if they pop all over i will try clear both on it and the iefixes. does that sound right? also, what should i have done with my background, please? i wasnt sure if i should slice it up or what to slice. any more help GREATLY appreciated. i hope i have a better understanding now. derek 
also, if my code is not perfect , but the page works, can i still get hired? |
|
|
|
|
05-11-2009, 08:24 PM
|
Re: cant position content text floated left without it popping down to bottom of page
|
Posts: 10,017
Location: Tennessee
|
The overflow:auto on #wrapper will clear the floats within it, there's no need to add clear:both to anything at this point.
You WILL need the iefixes to combat the doubled-float margin bug you are triggering.
Quote:
|
what should i have done with my background, please? i wasnt sure if i should slice it up or what to slice
|
Yes, slice it up. What makes sense ? Carve out a header piece. Carve out a horizontal piece in the middle that will tile vertically for your background.
Quote:
|
also, if my code is not perfect , but the page works, can i still get hired?
|
That depends on who's looking at your code. If it's NOT someone like me.. you probably could get hired. Some people only care that it appears to work, and nothing about what's underneath.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
05-12-2009, 08:56 AM
|
Re: cant position content text floated left without it popping down to bottom of page
|
Posts: 611
|
thank you for answering, that gives me some hope because ive been studying a long time and im not even good yet. i sliced up my page into 3 sections, header, left_background and right_background then i will try to put divs within those parts for the link text, and 2 paragraph texts. i hope thats the right way. also, my right_background div would pop to the bottom when i floated it left even when i added it to iefixes file. then i removed the overflow: auto on the wrapper and it popped in place. i dont know why. i hope my other divs act right now. thanks. derek
Last edited by silverglade; 05-12-2009 at 09:02 AM..
|
|
|
|
|
« Reply to cant position content text floated left without it popping down to bottom of page
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
