|
did i do this page correctly? i used some AP
04-07-2009, 01:01 PM
|
did i do this page correctly? i used some AP
|
Posts: 611
|
hi, i couldnt get my divs to position correctly so i used ap divs(2 of them) and 2 others are floated right. i was wondering if this was done correctly? any help greatly appreciated. thanks. derek
here is the page im talking about.
http://derekvanderven.com/global_industries/home.html
here is the css
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 {
width: 365px;
height: 70px;
float: right;
clear: both;
margin: 65px 63px 0 0;
}
#bottom_links {
width: 200px;
height: 300px;
clear: both;
float: right;
margin: 740px 90px 0 0 ;
}
#top_content {
width: 500px;
position: absolute;
margin: 475px 0 0 120px;
}
#bottom_content {
width: 500px;
position: absolute;
margin: 750px 0 0 120px;
}
here is the html
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 lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<link href="global.css" rel="stylesheet" type="text/css"/>
<title>Global Industries Home</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('on_slices/images/home_top_on.jpg','on_slices/images/started_top_on.jpg','on_slices/images/faq_top_on.jpg','on_slices/images/book_top_on.jpg','on_slices/images/solutions_top_on.jpg','on_slices/images/contact_top_on.jpg','on_slices/images/home_bottom_on.jpg','on_slices/images/news_bottom_on.jpg','on_slices/images/solutions_bottom_on.jpg','on_slices/images/faq_bottom_on.jpg','on_slices/images/forum_bottom_on.jpg','on_slices/images/contact_us_bottom_on.jpg')">
<div id="wrapper">
<div id="toplinks"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','on_slices/images/home_top_on.jpg',1)"><img src="off_slices/images/top_home_off.jpg" name="Image2" width="64" height="70" border="0" id="Image2" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','on_slices/images/started_top_on.jpg',1)"><img src="off_slices/images/started_top_off.jpg" name="Image3" width="67" height="70" border="0" id="Image3" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','on_slices/images/faq_top_on.jpg',1)"><img src="off_slices/images/faq_top_off.jpg" name="Image4" width="50" height="70" border="0" id="Image4" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','on_slices/images/book_top_on.jpg',1)"><img src="off_slices/images/book_top_off.jpg" name="Image5" width="46" height="70" border="0" id="Image5" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','on_slices/images/solutions_top_on.jpg',1)"><img src="off_slices/images/solutions_top_off.jpg" name="Image6" width="67" height="70" border="0" id="Image6" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','on_slices/images/contact_top_on.jpg',1)"><img src="off_slices/images/contact_top_off.jpg" name="Image7" width="67" height="70" border="0" id="Image7" /></a></div>
<div id="bottom_links"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','on_slices/images/home_bottom_on.jpg',1)"><img src="off_slices/images/home_bottom_off.jpg" name="Image8" width="200" height="40" border="0" id="Image8" /></a><br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','on_slices/images/forum_bottom_on.jpg',1)"><img src="off_slices/images/our_forum_bottom_off.jpg" name="Image14" width="200" height="54" border="0" id="Image14" /></a><br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','on_slices/images/news_bottom_on.jpg',1)"><img src="off_slices/images/news_off_bottom.jpg" name="Image10" width="200" height="45" border="0" id="Image10" /></a><br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','on_slices/images/solutions_bottom_on.jpg',1)"><img src="off_slices/images/solutions_off_bottom.jpg" name="Image11" width="200" height="47" border="0" id="Image11" /></a><br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','on_slices/images/faq_bottom_on.jpg',1)"><img src="off_slices/images/faq_off_bottom.jpg" name="Image12" width="200" height="46" border="0" id="Image12" /></a><br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','on_slices/images/contact_us_bottom_on.jpg',1)"><img src="off_slices/images/contact_us_bottom_off.jpg" name="Image13" width="200" height="73" border="0" id="Image13" /></a><br />
</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>
<p> </p>
<p> </p>
</div>
</div>
</body>
</html>
Last edited by silverglade; 04-07-2009 at 01:31 PM..
|
|
|
|
|
04-07-2009, 03:45 PM
|
Re: did i do this page correctly? i used some AP
|
Posts: 10,016
Location: Tennessee
|
Honestly, I have to say no. You don't need AP for that layout at all, floats will work just fine.
What problems were you having with the floats ?
Please, re-read the stickies about clearing your floats. Putting clear:both on the floated div doesn't cut it.
__________________
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
|
|
|
|
|
04-07-2009, 04:33 PM
|
Re: did i do this page correctly? i used some AP
|
Posts: 611
|
i read the css stickies but dont understand them. i changed around my css and used text instead of images for the top links. the page is a mess now, but im not using ap divs. hehe. the link text at top is hidden in firefox now. any more help greatly appreciated. thanks. derek 
here is the page.
http://derekvanderven.com/global_industries/home.html
here is the new css
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;
}
/******** top navigation*********/
ul#top_links
{
font-size:.7em;
font-family: "Courier New";
margin: 100px 0 0 0;
padding-right: 85px;
list-style-type: none;
color: #FFF;
/*width: 100%;*/
}
ul#top_links li
{
display: inline;
}
ul#top_links a
{
float: right;
margin: 0 auto;
display:block;
padding: .2em .3em;
font-weight: bold;
text-decoration:none;
color: #ffffff; /* text color*/
}
ul#top_links a:hover
{
color: #000000; /* hover text */
}
/*********end top navigation*********/
#bottom_links {
width: 200px;
float: right;
margin: 760px 90px 0 0 ;
}
#top_content {
float: left;
width: 550px;
margin: 350px 0 0 95px;
}
#top_content, #bottom_content p {
text-indent: 20px;
}
#bottom_content {
float: left;
width: 550px;
margin: 50px 0 0 95px;
}
and here is the new html
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 lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<link href="global.css" rel="stylesheet" type="text/css"/>
<title>Global Industries Home</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('on_slices/images/home_bottom_on.jpg','on_slices/images/news_bottom_on.jpg','on_slices/images/solutions_bottom_on.jpg','on_slices/images/faq_bottom_on.jpg','on_slices/images/forum_bottom_on.jpg','on_slices/images/contact_us_bottom_on.jpg')">
<div id="wrapper">
<ul id="top_links">
<li><a href=" #">Contacts </a></li>
<li><a href="# ">Solutions |</a></li>
<li></li>
<li><a href= "# ">FAQ's |</a></li>
<li><a href=" #">Started |</a></li>
<li><a href=" #">Home |</a></li>
</ul> <!--end navigation-->
<div id="top_content">
<h2>Global Industries</h2>
<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_links"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','on_slices/images/home_bottom_on.jpg',1)"><img src="off_slices/images/home_bottom_off.jpg" name="Image8" width="200" height="40" border="0" id="Image8" /></a><br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','on_slices/images/forum_bottom_on.jpg',1)"><img src="off_slices/images/our_forum_bottom_off.jpg" name="Image14" width="200" height="54" border="0" id="Image14" /></a><br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','on_slices/images/news_bottom_on.jpg',1)"><img src="off_slices/images/news_off_bottom.jpg" name="Image10" width="200" height="45" border="0" id="Image10" /></a><br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','on_slices/images/solutions_bottom_on.jpg',1)"><img src="off_slices/images/solutions_off_bottom.jpg" name="Image11" width="200" height="47" border="0" id="Image11" /></a><br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','on_slices/images/faq_bottom_on.jpg',1)"><img src="off_slices/images/faq_off_bottom.jpg" name="Image12" width="200" height="46" border="0" id="Image12" /></a><br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','on_slices/images/contact_us_bottom_on.jpg',1)"><img src="off_slices/images/contact_us_bottom_off.jpg" name="Image13" width="200" height="73" border="0" id="Image13" /></a><br />
</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>
Last edited by silverglade; 04-07-2009 at 07:07 PM..
|
|
|
|
|
04-07-2009, 07:45 PM
|
Re: did i do this page correctly? i used some AP
|
Posts: 10,016
Location: Tennessee
|
Have you read this ?? http://www.complexspiral.com/publica...aining-floats/
I know it seems difficult to grasp, but it's a basic principle,so you need to get a grip on it ;)
1 - remove the heights! Add overflow:auto; to #wrapper and that will clear the floats inside it.
2 - Add overflow:auto to your ul#topLinks - to clear the floated links inside it.
__________________
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; 04-07-2009 at 07:51 PM..
|
|
|
|
|
04-07-2009, 07:45 PM
|
Re: did i do this page correctly? i used some AP
|
Posts: 611
|
s##w it. i made my page back the way it was. at least it worked, even if not done the right way. hehe.
edit. i dont understand most of the links about floats. im going to have to do it the best i can. because when i read about it i dont get it. but thanks for trying to help me. i appreciate it.
Last edited by silverglade; 04-07-2009 at 07:56 PM..
|
|
|
|
|
« Reply to did i do this page correctly? i used some AP
|
|
|
| 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
|
|
|
|
