PDA

View Full Version : problem with header

ithirst4chaos
09-04-2007, 12:17 PM
I've got a problem. My header on my page will not line up with the rest of my page. I put a divtag around the entire thing thinking that it would adjust, but nothing happened. When my browser window is fully expanded ,the header looks off center. However if I make the browser window smaller it fits. I want everyone to be able to view it the same way with the fully expanded window. How do I do this?

http://i2.photobucket.com/albums/y47/CarlsonTwinsRule/Image3.jpg

http://i2.photobucket.com/albums/y47/CarlsonTwinsRule/Image2.jpg


Any help would be greatly appreciated.

Thanks,
ithirst4chaos
TORCH511
09-04-2007, 01:10 PM
It would be a whole lot easier if you posted the HTML along with the problem.

I can think of two things though:

The So Fitch and the line underline (what I am assuming is your header) sould be in it's own DIV, and that DIV has margins:auto; and width: (size of image of 2 guys)px; assigned to it, which would center it.

Or you can nest that header DIV (with the width set as above, no margins) inside of another DIV that contains the whole page (a popular technique for CSS positioning) that has the align="center" property.
ithirst4chaos
09-04-2007, 01:38 PM
ok sorry, really new to dreamweaver.

here's 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=iso-8859-1" />
<title>HOME</title>
<script type="text/JavaScript">
<!--
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_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}

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_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>
<style type="text/css">
<!--
.style6 {
font-family: Arial;
font-size: 12px;
}
body {
margin-left: 00.0px;
margin-right: 0px;
}
#Layer1 {
position:absolute;
width:323px;
height:147px;
z-index:1;
left: 691px;
top: 662px;
}
#Layer2 {
position:absolute;
width:97px;
height:59px;
z-index:1;
left: 615px;
top: 474px;
}
#Layer3 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 72px;
top: 601px;
}
-->
</style></head>

<body onload="MM_preloadImages('images/homeon.jpg','images/homeon.gif','images/menson.gif','images/aboutuson.gif','images/faceson.gif','images/forumson.gif','images/linkson.gif','images/newson.gif')">
<pre align="center"><img src="images/sofitch_header2.gif" width="1008" height="53" /></pre>
<div align="center">
<pre align="center"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/homeon.gif',1)"><img src="images/homeoff.gif" alt="homeoff" name="home" width="45" height="17" border="0" id="home" /></a> <a href="news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/newson.gif',1)"><img src="images/newsoff.gif" alt="newsoff" name="news" width="44" height="17" border="0" id="news" /></a> <a href="mens.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/menson.gif',1)"><img src="images/mensoff.gif" alt="mensoff" name="Image10" width="44" height="17" border="0" id="Image10" /></a> <a href="about_us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/aboutuson.gif',1)"><img src="images/aboutusoff.gif" alt="about" name="about" width="62" height="17" border="0" id="about" /></a> <a href="sf_new_faces.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('newfaces','','images/faceson.gif',1)"><img src="images/facesoff.gif" alt="facesoff" name="newfaces" width="87" height="17" border="0" id="newfaces" /></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('forums','','images/forumson.gif',1)"></a><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','images/linkson.gif',1)"><img src="images/linksoff.gif" name="links" width="44" height="17" border="0" id="links" /></a><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','images/linkson.gif',1)"><br /></a><img src="images/divider2.gif" width="1008" height="6" /><br /></pre>
</div>
<div align="center">
<pre align="center"><img src="images/frontpagepic.jpg" width="1008" height="408" />
<a href="mailto:vintage_crombie@yahoo.com"><img src="images/contact.gif" width="52" height="17" border="0" /></a> <a href="faq.html"><img src="images/faq.gif" width="28" height="17" border="0" /></a> <a href="affiliates.html"></a><a href="http://www.myspace.com/sofitch"><img src="images/myspace.gif" width="62" height="17" border="0" /></a></pre>
<div id="Layer2">
<div style="text-align: center; margin-left: auto; visibility:visible; margin-right: auto; width:450;">
<embed style="width:1px; visibility:invisible; height:1px;" allowScriptAccess="never" src="http://www.greatprofilemusic.com/mc/mp3player-othersite.swf?config=http://www.greatprofilemusic.com/mc/config/config_black_shuffle.xml&mywidth=435&myheight=270&playlist_url=http://www.greatprofilemusic.com/loadplaylist.php?playlist=3326289" menu="false" quality="high" width="435" height="95" name="mp3player" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0"/>
<BR>
<a href=http://www.greatprofilemusic.com></a><a href=http://www.greatprofilemusic.com/standalone/3326289 target=_blank></a><a href=http://www.greatprofilemusic.com/download/3326289></a> </div>
</div>
<p>&nbsp;</p>
</div>
<p align="center"><img src="images/disclaimer.gif" width="973" height="78" /></p>
</body>

</html>
ithirst4chaos
09-04-2007, 01:41 PM
hey, if you would like to give me some feedback that would be great but someone else just helped me with putting <center>mycontenthere</center> in my code.....

thanks,
ithirst4chaos
TORCH511
09-04-2007, 03:57 PM
Hence why I do not like using the WYSIWYG editor... the code is messy and all of the scripts could be replaced with some really space saving and elegant CSS.

That being said.

Your header image is placed in a <pre> element tag. The PRE element is used to retain the text formatting within the HTML file. White space and line breaks (typically) will be followed. The PRE element does not take the align="center" attribute. Browsers ignore the white space and line breaks.

You could have simply just changed the PRE to DIV and it would have been fine.

<div align="center"><img src="images/sofitch_header2.gif" width="1008" height="53" /></div>
ithirst4chaos
09-04-2007, 11:40 PM
hey, thanks for taking the time for that explanation....I was wondering though, using the other <center> code, has had a few unforseen effects on my pages that have layers. now when expanded the layers are stewn across the side what do i need to do to fix this?
TORCH511
09-05-2007, 09:04 AM
The <center> element has been depreciated and while it still works on HTML documents using A Doctype of 4.01 Transitional (that is what you are using, specified in the page header) the W3C prefers that text be stylized trough the use of CSS and has depreciated the use of stylistic elements like <center>.

the <center> element was designed to center any text within. If you are placing more than plain type within the element, undesireable effects may happen in different browsers, hence why you are having problems with the placement of you <div> elements (What you call layers are really <div> elements) Especially since your "Layers" are positioned absolutly, which is not helping any.

I would again recommend getting rid of the <center> element and just change your header <div>.

And I appreciate you taking the time to read and ask questions. More than happy to answer them. I will say this to anyone who likes to tinker in Dreamweaver (which I use, and think is the best HTML editor on the market)...

Go buy yourself 2 books, a "HTML & CSS for Beginners" book, any one will do, and an HTML/CSS reference book. Really they will serve you well. You can learn the core concepts of HTML in a week just by keeping the book in the bathroom. And once you understand the basics, the reference book will take you further. You don't even have to read it, just keep it handy. if you do not want to pay for a book, you can find references online, as well as basic tutorials.