Log In · Register

 
 
 Closed TopicStart new topic
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. : )
 
HeartOfPandora
post Oct 13 2009, 06:53 PM
Post #2


i like boobies, yes I do. I like boobies - how 'bout you?
*****

Group: Member
Posts: 620
Joined: Jun 2008
Member No: 662,457
Can haz screencap?
 
synapse
post Oct 13 2009, 08:14 PM
Post #3


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

Group: Staff Alumni
Posts: 10,142
Joined: Apr 2007
Member No: 514,926
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
post Oct 13 2009, 09:22 PM
Post #4


~* Traditional Witch
***

Group: Member
Posts: 73
Joined: Jul 2007
Member No: 553,061
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:
 
synapse
post Oct 13 2009, 10:35 PM
Post #5


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 #6


~* 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.
 
TheOn3LeftBehind
post Oct 15 2009, 09:10 PM
Post #7


~* Traditional Witch
***

Group: Member
Posts: 73
Joined: Jul 2007
Member No: 553,061
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. :]
 
« 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: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic