Jump to content

Layout

snowboard01

By snowboard01
in HTML/XHTML

 Share

Recommended Posts

snowboard01 Member

snowboard01

Posted
Posted (edited)

I have read the tutorials I have searched the forum nothing could help me with this! This is a page that has absolute positions vertically put percentages horizontally. Because I am a strong believer that if a user sees a verticle scroll bar they will think its ok. But a horizontal scrollbar gos to far. Well in Internet explorer 6 it does what I want. Everything fits into a nice small window. Also it doesnt waste any screen space in a large window.Heres a linkIn Firefox (FF) It just displays my image in a yellow blob. :) Heres the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head>  <meta name="description" content="Website about dundas district me and my freinds" />  <meta name="keywords" content="Dundas, Josh, Fun, Cool," />  <meta name="developer" content="Josh Bradshaw" />  <meta name="rating" content="general" />  <meta name="author" content="Josh Bradshaw" />   <title>♫Sax World♫</title>  <!--functions script-->  <script type="text/javascript">   //key to background changer   function change()    {     document.bgColor=document.list.colors.options    [document.list.colors.selectedIndex].value;    }   function style()   {   document.getElementById("style").background.backgroundColor=document.list.colors.options   [document.list.colors.selectedIndex].value;    }  </script>  <!-- end functions script-->    <!--place stylesheet links here-->  <link href="http://www.freewebs.com/gamestrats/music_note.ico" type="image/x-icon" rel="shortcut icon"/>  <link rel="stylesheet" type="text/css" href="http://saxworld.awardspace.com/css/home.css" />  <!--end place stylesheet links here-->    </head> <body> <!--Big title--><div class="centerim">   <img alt="title" src="http://www.freewebs.com/gamestrats/saxworldbetterbanner.gif" width="468px" height="60px" />  </div>  <!--end title-->    <!--iframe-->  <div class="frame">  <iframe class="blog" frameborder="0" name="blog" scrolling="auto" src="http://saxworld.awardspace.com/welcome.html">Your Browser does not support Iframes or does not have Iframes enabled Upgrade it to view my blog!!!!My personal suggestion is <a href="http://www.mozilla.com/">Get Firefox</a> Or you may have them turned off.  </iframe>  </div>  <!--end iframe--><!--Left menu--><div class="left"><b>My Site</b><br /><hr /><!--remember page break tags--><a href="http://saxworld.awardspace.com/welcome.html" target="blog">Home</a><br /><a href="http://saxworld.awardspace.com/message.html" target="blog">Message Boards</a><br /><a href="http://saxworld.awardspace.com/comment.html" target="blog">Contact</a><br /><a href="http://saxworld.phpbbnow.com/" target="_blank">My forum</a><br /><a href="http://saxworld.awardspace.com/faq.html" target="blog">FAQ</a><br /><a href="http://saxworld.awardspace.com/Guestlog.htm" target="blog">Guest Book</a><br /><a href="http://saxworld.awardspace.com/sitemap.html" target="blog">Site Map</a><br /> <a href="http://saxworld.awardspace.com/credits.html" target="blog">Credits</a><br /><a href="http://saxworld.awardspace.com/school.html" target="blog">School</a><br /><a href="http://saxworld.awardspace.com/news.html" target="blog">News</a><br /><a href="http://saxworld.awardspace.com/about.html" target="blog">About me</a><br /><a href="http://saxworld.awardspace.com/links.html" target="blog">Links</a><br /><a href="http://saxworld.awardspace.com/reflex.html" target="blog">Reflex tester</a><br /><a href="http://saxworld.awardspace.com/sitemap.html" target="blog">Site Map</a><br /><hr /></div><!--end left menu--><!--right menu--><div class="right"><b>Blog Entries</b><br /><hr /><!--remember page break tags--><a href="http://saxworld.awardspace.com/Blog/entry13.html" target="blog">Day 13</a><br /><a href="http://saxworld.awardspace.com/Blog/entry12.html" target="blog">Day 12</a><br /><a href="http://saxworld.awardspace.com/Blog/Entry11.html" target="blog">Day 11</a><br /><a href="http://saxworld.awardspace.com/Blog/entry10.html" target="blog">Day 10</a><br /><a href="http://saxworld.awardspace.com/Blog/Entry9.html" target="blog">Day 9</a><br /><a href="http://saxworld.awardspace.com/Blog/Entry8.xml" target="blog">Day 8</a><br /><a href="http://saxworld.awardspace.com/Blog/entry7.xml" target="blog">Day 7</a><br /><a href="http://saxworld.awardspace.com/Blog/Entry6.html" target="blog">Day 6</a><br /><a href="http://saxworld.awardspace.com/Blog/Entry5.html" target="blog">Day 5</a><br /><a href="http://saxworld.awardspace.com/Blog/entry4.html" target="blog">Day 4</a><br /><a href="http://saxworld.awardspace.com/Blog/Entry3.html" target="blog">Day 3</a><br /><a href="http://saxworld.awardspace.com/Blog/entry2.html" target="blog">Day 2</a><br /><a href="http://saxworld.awardspace.com/Blog/Entry1.html" target="blog">Day 1</a><br /><br /><hr /></div><!--end right menu--><div class="form">   <!--way this works: action is the change color statement in head. submit submits the option to the action then action to the function-->   <form name="list" action="java script:change()">     <!--Start Drop down list here -->     <select name="colors">       <option value="red">Red </option>      <option value="blue">Blue</option>       <option value="green">Green </option>      <option value="orange">Orange </option>      <option value="white">White</option>       <option value="#00FFFF">Cyan</option>      <option value="#000000">Black</option>      <option value="#7FFFD4">Aqua</option>      <option value="#FFD700">Gold</option>      <option value="#1E90FF">Dodger blue</option>      <option value="#8B0000">Dark Red</option>      <option value="#9ACD32">YellowGreen</option>      <option value="#COCOCO">Silver</option>      <option value="#008B8B">Dark Cyan</option>      <option value="#B22222">Fire Brick</option>      <option value="#000080">Navy</option>      <option value="#87CEEB">Sky Blue</option>      <option value="#00CED1">Dark Turquoise</option>      <option value="#00FF00">Lime</option>      <option value="#ADFF24">GreenYellow</option>     </select>      <!-- end drop down list--><input type="submit" value="Change Background color" /></form><!--valid info--><a class="w3c" href="http://validator.w3.org/check?uri=http%3A%2F%2Fsaxworld.awardspace.com%2Findex.html"><img  src="http://www.w3.org/Icons/valid-xhtml10"  alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>  <a class="w3c" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fsaxworld.awardspace.com%2Fcss%2Fhome.css&usermedium=all"> <img style="border:0;width:88px;height:31px" src="http://www.freewebs.com/gamestrats/vcss.png"  alt="Valid CSS!" /></a>  <!--end valid info--></div></body></html>

Heres the Css

a{float:left;width:7em;text-decoration:none;color:blue;background-color: yellow;padding:0.1em 0em;}a:link{color:blue;text-decoration: none;background-color: yellow;}a:visited{float:left;width:7em;text-decoration:none;color: red;background-color: yellow;padding:0.1em 0em;}a:hover{color: yellow;text-decoration: underline;background-color:red;}a:active{color: blue;text-decoration: none;}iframe.blog{width: 700px;height: 500px;position: absolute;top: 0px;left: 0px;}.frame{border-style: solid;border-color: black;border-width: 6px;position:absolute;left: 133px;top: 125px;width: 700px;height: 500px;}.left{background-color:yellow;position: absolute;top: 125px;left: 5px;height: 500px;width: 125px;}.right{background-color:yellow;position: absolute;top: 125px;left: 847px;width: 125px;height: 500px;overflow:auto;}.form{position:absolute;top: 640px;left: 5px;background-color:yellow;width: 972px;height: 60px;}.valid{position: absolute;top:640px;left: 605px;background-color: yellow;height: 90px;z-index:1;width:372px;}a.w3c:link{background-color:yellow;color:white;text-decoration: none;z-index: 5;}a.w3c:visited{color:white;background-color:yellow;text-decoration: none;}a.w3c:hover{background-color:yellow;color: white;text-decoration: none;}a.w3c:active{color:white;background-color:yellow;text-decoration: none;}/*heres is the top image*/.centerim{position:absolute;left:200px;width:470px;height:62px;border-width:5px;border-style:solid;border-color:black;}

heres a screen shot of it in FF:Edit:Screen shot removed. was far to large. Problem the screenshot was displaying is resolved anywaysorry if I have talked about this problem way to much it is driving me crazy. :) Thanks in advance,Snowboard01.

Edited by snowboard01
Link to comment
Share on other sites
snowboard01 Member

snowboard01

Posted
  • Author
Posted

Don't worry about it. I moved the valid icons and deleted the bgcolor changer. You should see the awful website that i made that to replace It only works nice in a couple of zooms I'll make this one look a little better and add some features to the resizing. like if the divs are viewed on a screen thats less than 400px X 400px the text size will change. Is there a way to do that? maybe javascript?I know this won't work just what im thinking of.

function textsize(){if browser window < 400px X 400px{make the text size smaller}else{make it normal}}

that would be nice but I have no idea how to do it. If you do please tell me.also i will add aural stylesheets.once again scott100 thanks for the help. I puzzled over that for around two weeks. You solved it in like 10 seconds! That page can now increase text size move to fit window ect. ect. because I deleted one drop down menu that I was going to get rid of anyway. thanx very much and maybe you even know the answer to that text size javascript thing?Also my logo is there a way to switch images depending on screen size. In a screen more that 1040px wide it starts to look horible. (the logo I use has changed since the first post. click the link in the first post to see the new one.)thats all for now.

Link to comment
Share on other sites
scott100 Dedicated Member

scott100

Posted
Posted

The javascript thing = yes its possible. both text + imageI done it before for someone but i cant remember if it was for this forum or another :) I'll search for it and post back.

Link to comment
Share on other sites
scott100 Dedicated Member

scott100

Posted
Posted
like if the divs are viewed on a screen thats less than 400px X 400px the text size will change. Is there a way to do that? maybe javascript?

I couldn't find the one i done before so i rustled up something.Here it is
<head><script>function resizeBody(){if (parseInt(navigator.appVersion)>3) { if (navigator.appName=="Netscape") {  winW = window.innerWidth; } if (navigator.appName.indexOf("Microsoft")!=-1) {  winW = document.body.offsetWidth; }}if ((winW>0)&&(winW<200)){document.getElementById('myText').style.fontSize="5px";}else if ((winW>200)&&(winW<350)){document.getElementById('myText').style.fontSize="10px";}else if ((winW>350)&&(winW<500)){document.getElementById('myText').style.fontSize="15px";}else if ((winW>500)&&(winW<750)){document.getElementById('myText').style.fontSize="20px";}else if ((winW>750)&&(winW<900)){document.getElementById('myText').style.fontSize="25px";}else if (winW>900){document.getElementById('myText').style.fontSize="30px";}}</script><style>div{font-size: 30px}</style></head><body onresize="resizeBody()"><div id="myText">Please resize the window</div></body>

Link to comment
Share on other sites
snowboard01 Member

snowboard01

Posted
  • Author
Posted

My next question is aural style sheets. Do you think they would do my site any good? Do you think they are nessessary? Normally I would just leave it normal but the thing about my site is that its in layouts and the browser might read the text in the wrong order

Link to comment
Share on other sites
scott100 Dedicated Member

scott100

Posted
Posted

Do your visitors fall into this category/have a screen reader:

Aural presentation can be used:by blind people to help users learning to read to help users who have reading problems for home entertainment in the car by print-impaired communities
If so then i'm sure your visitors would appreciate your consideration of them.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...