Log In · Register

 
Navigation Cut Off In Lower Resolutions
TheOn3LeftBehind
post Oct 13 2009, 06:45 PM
Post #1


~* Traditional Witch
***

Group: Member
Posts: 73
Joined: Jul 2007
Member No: 553,061
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. : )
 
 
 Start new topic
Replies
synapse
post Oct 13 2009, 10:35 PM
Post #2


Live long and prosper.
********

Group: Staff Alumni
Posts: 10,142
Joined: Apr 2007
Member No: 514,926
well, if you're gonna have your nav in a sidebar use php and css.
 
TheOn3LeftBehind
post Oct 14 2009, 05:19 PM
Post #3


~* Traditional Witch
***

Group: Member
Posts: 73
Joined: Jul 2007
Member No: 553,061
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.
 

Posts in this topic
TheOn3LeftBehind   Navigation Cut Off In Lower Resolutions   Oct 13 2009, 06:45 PM
HeartOfPandora   Can haz screencap?   Oct 13 2009, 06:53 PM
tcunningham   That's what happens when you use divs. :P Your...   Oct 13 2009, 08:14 PM
TheOn3LeftBehind   Oh poop. ]: I don't know how to use anythin...   Oct 13 2009, 09:22 PM
tcunningham   well, if you're gonna have your nav in a sideb...   Oct 13 2009, 10:35 PM
TheOn3LeftBehind   QUOTE(tcunningham @ Oct 13 2009, 10:35 PM...   Oct 14 2009, 05:19 PM
TheOn3LeftBehind   AH HAH! I figured it out with the help of a f...   Oct 15 2009, 09:10 PM

« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic