Forums > Navigation Cut Off In Lower Resolutions

Full Version: Navigation Cut Off In Lower Resolutions

Forums > Resource Center > Webmasters' Corner

TheOn3LeftBehind

Oct 13 2009, 06:45 PM

Well, I made my layout (and keep in mind I haven't made one in a LONGGGG time) and it looks great on resolutions bigger than 1024x768 (such as my 13" Macbook) but on my brothers iBook G4 12" (1024x768 resolution) the navigation is cut off so that you can only see the last letter of each part. I'm going to include my coding in here; pleaseee don't say how much of an idiot I am with coding because I completely forgot how to do it so I just went with what worked for me:

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Shattered &hearts; Hearts</title>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<style>

body {
	background-color:  #e7e7e7;
	font-family: arial;
	font-size: 8.5pt;
	color: #e7e7e7;
	scrollbar-3dlight-color: #000000;
	SCROLLBAR-ARROW-COLOR: #000000; 
	scrollbar-darkshadow-color: #000000;
	scrollbar-face-color: #000000;
	SCROLLBAR-SHADOW-COLOR: #000000; 
	SCROLLBAR-HIGHLIGHT-COLOR: #000000;
	scrollbar-track-color: #e7e7e7;
	
	
background-image:url("http://img.photobucket.com/albums/v225/BloodyTears666/Layouts/bg3.jpg");
background-repeat : repeat;
	
}



h1 {
	background-color: #000;
	
	color: #FFF;
	font-family: georgia;
	font-size: 7pt;
	font-weight: bold;
	letter-spacing: 5px; 
	text-align: left;
	margin: 0;

}

h2 {color: #660000; font-family: georgia; font-size: 15pt; font-weight: bold; letter-spacing: 6px; text-align: center; text-transform: uppercase; margin: 0;}
  

a.home {display:block;width:59px;height:25px; background-color:transparent; background-image:url("http://img.photobucket.com/albums/v225/BloodyTears666/Layouts/home-2.png"); background-repeat:no-repeat;}

a:hover.home {display:block;width:59px;height:25px; background-color:transparent; background-image:url("http://img.photobucket.com/albums/v225/BloodyTears666/Layouts/home-1.png"); background-repeat:no-repeat;}

a.resources {display:block;width:96px;height:34px; background-color:transparent; background-image:url("http://img.photobucket.com/albums/v225/BloodyTears666/Layouts/resources.png"); background-repeat:no-repeat;}

a:hover.resources {display:block;width:96px;height:34px; background-color:transparent; background-image:url("http://img.photobucket.com/albums/v225/BloodyTears666/Layouts/resources-hover.png"); background-repeat:no-repeat;}

a.portfolio {display:block;width:121px;height:34px; background-color:transparent; background-image:url("http://img.photobucket.com/albums/v225/BloodyTears666/Layouts/portfolio.png"); background-repeat:no-repeat;}

a:hover.portfolio {display:block;width:121px;height:34px; background-color:transparent; background-image:url("http://img.photobucket.com/albums/v225/BloodyTears666/Layouts/portfolio-hover.png"); background-repeat:no-repeat;}

a.links {display:block;width:121px;height:34px; background-color:transparent; background-image:url("http://img.photobucket.com/albums/v225/BloodyTears666/Layouts/links.png"); background-repeat:no-repeat;}

a:hover.links {display:block;width:121px;height:34px; background-color:transparent; background-image:url("http://img.photobucket.com/albums/v225/BloodyTears666/Layouts/links-hover.png"); background-repeat:no-repeat;}


a:link, a:active, a:visited {
	color: #cccccc;
	text-decoration: none;
	font-family: georgia;
  font-size: 9px;
	font-weight: bold;
	cursor: help;
	
}



a:hover {
	text-decoration: none;
	color: #1d1d1d;
	cursor: help;
	font-weight: bold;
	font-family: georgia;
	font-size: 9px;

}


b {
	font-family: georgia;
	font-size: 7px;
	color: #cccccc;
}

 input, textarea{
  overflow-x: hidden; 
	font-family: tahoma;
	font-size: 9px;
 
 }

</style>

</head>
<body>
   
	
<img src="http://img.photobucket.com/albums/v225/BloodyTears666/Layouts/Screenshot2009-10-11at15536PM.png" style="position:absolute; margin-left:-400px; left:50%; top:5px;">
 
 


<!--IMAGE ROLLOVERS--!>

<center><div name="homerollover" style="position: absolute; width:100px; margin-left:-550px; left:50%; top: 65px;">
<a class="home" href="http://shatteredhearts.freehostia.com/index.html"></a>
</div></center>


<center><div name="resourcesrollover" style="position: absolute; width:100px; margin-left:-550px; left:50%; top: 175px;">
<a class="resources" href="http://shatteredhearts.freehostia.com/resources.html"></a>
</div></center>


<center><div name="portfoliorollover" style="position: absolute; width:100px; margin-left:-563px; left:50%; top: 285px;">
<a class="portfolio" href="http://shatteredhearts.freehostia.com/portfolio.html"></a>
</div></center>


<center><div name="linksrollover" style="position: absolute; width:100px; margin-left:-563px; left:50%; top: 395px;">
<a class="links" href="http://shatteredhearts.freehostia.com/links.html"></a>
</div></center>


<!--END OF IMAGE ROLLOVERS--!>




<div name="content" style="position: absolute; width: 650px; height: 480px; margin-left: -280px; left:50%; top: 425px;">
<h2>Welcome to the site</h2>
<P>
<P>
<P>

<center>The music player has an auto-resume feature so whenever you go to a different page, the song will resume to the same place it was before (most of the time). :)</center>
<P>

<!--START OF MUSIC PLAYER--!>
<center><object type="application/x-shockwave-flash" width="380" height="15" data="http://shatteredhearts.freehostia.com/xspf_player_slim.swf?playlist_url=http://shatteredhearts.freehostia.com/playlist.xspf&autoplay=1&autoresume=1 ">
<param name="movie" value="http://shatteredhearts.freehostia.com/xspf_player_slim.swf?playlist_url=http://shatteredhearts.freehostia.com/playlist.xspf&autoplay=1&autoresume=1" />
</object></center>
<!--END OF MUSIC PLAYER--!>

<br />

<center>Inspired by the Victorian era &hearts;<br />
<br />
<img src="http://img.photobucket.com/albums/v225/BloodyTears666/Layouts/gentlemansilhouette.jpg"></center>
</div>




<div name="menu" style="position:absolute; width:110px; margin-left: -400px; left: 50%; top:425px;">
<h1>Owner</h1>

<br />

<a href="http://www.theon3leftbehind.deviantart.com/">Andy</a><br />
&uarr;<P>
deviantArt
<br />
<br />

<h1>Site</h1>
<br />

<a href="http://freedomain.co.nr">Free Domain</a>

<br />
<br />
<br />

<h1>Dates</h1>
<br />

Oct. 31: <u>Samhain</u>
Dec. 21: <u>Yule</u>

<br />
<br />
<br />

<br />
<br />



<h1>Copyright</h1>
<br />

Andrew Fitzgerald &copy;2009-10
<br />
<br />
 
<br />
<br />

</div>



</body>

</html>

Sorry for my really bad coding, but I haven't mastered it yet (obviously) so I do whatever works best for me. Any help would be awesomeeeee. : )

HeartOfPandora

Oct 13 2009, 06:53 PM

Can haz screencap?

tcunningham

Oct 13 2009, 08:14 PM

That's what happens when you use divs. :P Your telling the browser to position them in the center with all the <center> codes as block elements tho :\

TheOn3LeftBehind

Oct 13 2009, 09:22 PM

Oh poop. ]: I don't know how to use anything else so that's what I use. So, I should take out the center codes? : O

So what would you suggest I do instead of using divs? :'( I feel like I'm a beginner again. Damn yo. :P

Screeny:

tcunningham

Oct 13 2009, 10:35 PM

well, if you're gonna have your nav in a sidebar use php and css.

TheOn3LeftBehind

Oct 14 2009, 05:19 PM

QUOTE(tcunningham @ Oct 13 2009, 10:35 PM)

well, if you're gonna have your nav in a sidebar use php and css.

Are there any sites you would suggest for tutorials on making navigation in PHP and CSS? : O I know how to do sidebar navigation in CSS, but not PHP.

TheOn3LeftBehind

Oct 15 2009, 09:10 PM

AH HAH! I figured it out with the help of a few sites:

http://erraticwisdom.com/2006/01/29/tutorial-coding-a-layout <--For getting the sidebar and page CSS code idea. I finally figured it out! : D Now I just have to fix my images. so they're all located in the center or left side, I haven't decided yet.

I did use divs, but it worked out well for me. :]

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.