PDA

View Full Version : did i do this page correctly? i used some AP divs


silverglade
04-07-2009, 05:23 PM
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 my css

@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'

<!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>&nbsp;</p>
<p>&nbsp; </p>
</div>
</div>
</body>
</html>

dwaddict321
04-07-2009, 05:55 PM
Hi, Silver.

Very nice page.

Also appreciate you sharing the code though I don't believe it will do me much good.

I was especially interested in the mouse over section as that is something I am trying to do. I take it the mouse over text is 2 different color graphics?

silverglade
04-07-2009, 06:04 PM
yes, in photoshop, you make the text one color, slices it, then make a layer comp, then use the "layer comps to slices" script you can get from lynda.com.
it makes one color text, then you repeat that for the other color text, and then you have two image slices to work with, and in dreamweaver, you use the automated rollover menu to make the 2 images appear as one , it alters your code, then you look in browser, and bang, youve got your rollover text. hope this helps. for coding just stay in this forum and ask a lot of questions, code by hand, and dont use dreamweaver code. derek

coloeagle
04-07-2009, 09:35 PM
HI Derek,

Nice page :-D

As to your question "Did I do it right" if it works and displays as intended on different browsers then yes, you did it right.

Might be me being on the picky side, I do have some comments/questions.

Above the fold you have rounded corners on the side and the navigation, but not the content box, to me this looks odd.

You are using images for your navigation links, I don't see anything special about the font style. Couldn't you use regular text?

You have your wrapper set to a fixed height of 1274px. What if a pages content exceeds this height? Same issue with your bottom links being set at 300px.

I have a few others but will stop with what I consider the biggies for now -lol

Jody

silverglade
04-07-2009, 09:43 PM
i redid the css for the page and altered the position of the divs in the code. but now i just have one problem. my #bottom_links pops all the way down to the bottom, way down. any more help greatly appreciated. i think it has to do with #bottom_content pushing it down somehow.

here is the page im talking about

http://derekvanderven.com/global_industries/home.html


here is the new css with no ap divs

@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;
margin: 65px 63px 0 0;
}

#bottom_links {
width: 200px;
height: 300px;
float: right;
clear: both;
margin: 740px 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

<!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="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_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 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>
</body>
</html>

coloeagle
04-07-2009, 09:58 PM
Try removing the clear specifiers in both bottom content and bottom links.
In the html move your bottom links div above the bottom content div

silverglade
04-07-2009, 11:02 PM
i did as you said, and i changed the links at the top from images to text. the page is looking pretty bad here below any more help greatly appreciated if you can. the link text at top is hidden in firefox now. derek:confused:

http://derekvanderven.com/global_industries/home.html

here is the new css

@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

<!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>

silverglade
04-07-2009, 11:45 PM
s##w it. i made my page back the way it was. at least it worked, even if not done the right way. hehe. :confused:

coloeagle
04-08-2009, 12:45 AM
Looks good from here.

silverglade
04-08-2009, 12:59 AM
thanks for trying to help me. :)

dwaddict321
04-08-2009, 02:49 AM
yes, in photoshop, you make the text one color, slices it, then make a layer comp, then use the "layer comps to slices" script you can get from lynda.com.
it makes one color text, then you repeat that for the other color text, and then you have two image slices to work with, and in dreamweaver, you use the automated rollover menu to make the 2 images appear as one , it alters your code, then you look in browser, and bang, youve got your rollover text. hope this helps. for coding just stay in this forum and ask a lot of questions, code by hand, and dont use dreamweaver code. derek

Ok, thanks.

Corrosive
04-08-2009, 07:11 AM
Ok, thanks.

Chaps. Take particular note of Colo's point about not using rollover images for stuff you can create with CSS. If you just want rollover text then use html. Something more complicated then consider images but you'll be surprised what you can do with html/css alone <<< my two cents worth :wink:

silverglade
04-08-2009, 01:48 PM
i did do a ul#navigation list for the links, but it looked bad against the background so i got rid of it and went back to the images. thanks. derek
from now on ill try to use text where i can.

domedia
04-08-2009, 03:36 PM
i did do a ul#navigation list for the links, but it looked bad against the background so i got rid of it and went back to the images. If it looks bad you fix it, change the styles, you don't remove it.