Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 11-13-2008, 07:09 PM
Junior Member
 
Join Date: 11-13-08
Posts: 1
iTrader: 0 / 0%
designing with 22"inch monitor and having problems when viewing 15"inch monitor

I'm designing my first webpage, currently with a 22" inch wide screen monitor. It looks fine on a 22"inch monitor screen both firefox and IE. However, When I try loading it on a 15" inch monitor, few things are misplaced. I've been trying to figure this out for quite a while and it's really stressing me out. Is there a way to fix this issue? I'd appreciate anyone's help.
I've pasted my code:


<html>
<head>
<style type="text/css">body {background-color: }
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: ;
background-image: url(http://i225.photobucket.com/albums/d...ground-1.gif);
background-repeat: repeat-x;

background-image: url(http://i225.photobucket.com/albums/d...ground-1.gif);

background-color: #530000;
background-repeat: no-repeat;
background-attachment:fixed;
background-position: center;

}



<head>




</html>

</style>

</style>
<html>
<head>

<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>

</head>


<style>
body {
scrollbar-base-color: #EDEDED;
scrollbar-arrow-color: #F2A900;
scrollbar-3dlight-color: #FCD600;
scrollbar-darkshadow-color: #FCD600;
scrollbar-face-color: #617001;
scrollbar-shadow-color: #EFEFEF;
scrollbar-track-color: #FFFFFF;
}
</style>


<br><br><br>

<img src="http://i225.photobucket.com/albums/dd302/cicicilala/wingscopy1.png" style="position: absolute; top: -120px; left: -300px">

<img src="file:///C:\Users\yoonz\Documents\wings2\wingbaby.gif" style="position: absolute; top: 80px; right:250px">
<img src="file:///C:\Users\yoonz\Documents\wings2\navibar.png" style="position: absolute; top: 60px; right: 181px"><br><br><br><br>


<img src="http://i225.photobucket.com/albums/dd302/cicicilala/button.gif" style="position: absolute; top: 58px; right: 400px"><br><a href=""><font color="white" size="3" face="comic sans ms" style="position: absolute; top: 255px; right: 720px"></font></a>
<img src="http://i225.photobucket.com/albums/dd302/cicicilala/button.gif" style="position: absolute; top: 58px; right: 294px"><br><a href=""><font color="white" size="3" face="comic sans ms" style="position: absolute; top: 255px; right: 610px">Menu</font></a>
<img src="http://i225.photobucket.com/albums/dd302/cicicilala/button.gif" style="position: absolute; top: 58px; right: 186px"><a href=""><font color="white" size="3" face="comic sans ms" style="position: absolute; top: 255px; right: 480px">Contact Us</font></a>
</div>
<head>
<body>

<head>

<html>
<head>


</head>

<p align="center">

<div style="height:3000px; width:800px; background-color: 000000; position: absolute;top:350px;right:430px; font-family:century gothic;font-size:13px;color:white;overflow:auto;border-width: .6em;
border-style: solid;
border-color: #ffffff;">
<br><br><br><p align="center"><html>


<head>
<style type="text/css">
p.rightmargin
{
margin-right:25%
}
p.leftmargin
{
margin-left:10%
}
</style>
</head>
<body>

<p class="leftmargin" style="text-align:left">
<font color="white" size="6" face="Century Gothic"><b><u>Wings</u></b></font><br>
All comes w/celery, bleu cheese or ranch<br><br>
<font color="yellow" size="3"><b>

W1. 10pc $5.79<br>
W2. 15pc $7.99<br>
W3. 20pc $9.99<br>
W4. 30pc $14.99<br>
W5. 50pc $24.99<br>
W6. 75pc $34.99<br>
W7. 100pc $44.99<br></b>
</font></p>
</body></html>
<html><head><font color="red" size="3" face="Arial" style="position: absolute;top:100px;right:200px;"><html>

<head>
<style type="text/css">
ul.disc {list-style-type: disc}</style></head><body>

<li>Plain<br></li>
<li>Mild<br> </li>
<li>Medium<br></li>
<li>Hot<br></li>
<li>Lemon Pepper<br></li>
<li> Braised<br></li>
<li> Teriyaki<br></li>
<li>Garlic Pepper<br></li>
<li>Honey BBQ<br></li>
<li>Honey Mustard<br></li></p></font></ul></body>



<head>
<style type="text/css">
p.rightmargin
{
margin-right:25%
}
p.leftmargin
{
margin-left:10%
}
</style>
</head>
<p class="leftmargin" style="text-align:left"><body>
<br><br><font color="yellow" size="3" face="century gothic">
<b> All Drum or Flat </b><i> (every 10pc)</i> <b> $0.50</b><br>
<b>Extra wet</b><i> (every 10pc)</i><b> $0.50</b><br>
<b>Mixed Flavors</b><i> (every 10pc)</i><b> $0.50</b><br></font>
<br><br><br>


<font color="white" size="6" face="Century Gothic"><b><u>Fried Rice</u></b></font><br>
All rice contain egg & green peas, carrots, onions<br><br>
<font color="Pink" size="2"><b> Med. | Large</b></font><br>
<br><font color="yellow" size="3" face="century gothic">
<b>R1. Beef $4.99 | $5.99 <br>
R2. Chicken $4.99 | $5.99<br>
R3. Shrimp $4.99 | $5.99<br>
R4. House $6.49 | $7.49<br></b>
<i>(Beef,Shrimp,Chicken)</i></font><br><br><br></p></body></html>


<font color="white" size="6" face="Century Gothic" style="position:absolute; top:427px; right:120px"><b><u>Wings Dinners</u></b></font><br>
<font color="white" size="2" face="century gothic" style="position:absolute; top:470px; right:120px">(Dinners <b>DO NOT</b> include a drink)</font><br><br>
<font color="yellow" size="3" face="century gothic" style="position:absolute; top:500px; right:100px">
<p align="right"><b>D1. 12 Wings w/ French Fries $6.99<br>
D2. 12 Wings w/ Vegetables Fried Rice $6.99<br>
D3. 12 Wings w/ Beef Fried Rice $7.99<br>
D4. 12 Wings w/ Chicken Fried Rice $7.99<br>
D5. 12 Wings w/ Shrimp Fried Rice $7.99<br>
D6. 12 Wings w/ House Fried Rice $8.99<br></font></p></body></html>
<br><br>
<head>
<style type="text/css">
p.rightmargin
{
margin-right:25%
}
p.leftmargin
{
margin-left:10%
}
</style>
</head>
<p class="leftmargin" style="text-align:left"><body>
<font color="white" size="6" face="Century Gothic"><b><u>Chicken Tenders</u></b></font><br><br><br>
<font color="yellow" size="3" face="century gothic">
<b>T1. 2pc $3.49<br>
T2. 5pc $5.99<br>
T3. 10pc $10.49<br>
T4. 25pc $24.99<br>
</font><br><br></p></body></html>
<font color="white" size="6" face="Century Gothic" style="position:absolute; top:745px; right:100px"><b><u>Chicken Nuggets</u></b></font><br><br><br>
<font color="yellow" size="3" face="century gothic" style="position:absolute; top:810px; right:100px">
<p align="right"><b>N1. 6pc $2.99<br>
N2. 10pc $4.99<br>
N3. 25pc $11.99<br>
N4. 50pc $19.99<br></font></p>
<br><br>
<p align="center"><font color="white" size="6" face="Century Gothic"><b><u>Combos</u></b></font><br><br></p>
<br>
<html>
<head>
<style type="text/css">
div.img
{
margin: 25px;
border: 1px solid #ffffff;
height: auto;
width: auto;
float: left;
text-align: right;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img
{
border: 1px solid #000000;
}
div.desc
{
text-align: center;
font-weight: normal;
width: 180px;
margin: 2px;
}
</style>
</head>
<body>
<div class="img">
<img src="file:///C:\Users\yoonz\Documents\wings2\combo1.jpg" alt="Klematis" width="200" height="200">
<div class="desc"><b>C1</b> Burgers (Beef or Chicken)</div>
</div>
<div class="img">
<img src="file:///C:\Users\yoonz\Documents\wings2\combo2.jpg" alt="Klematis" width="200" height="200">
<div class="desc"><b>C2</b> Beef or<br> Chicken</div>
</div>
<div class="img">
<img src="file:///C:\Users\yoonz\Documents\wings2\combo3.jpg" alt="Klematis" width="200" height="200"/>
<div class="desc"><b>C3</b> Chicken Tender<br> w/Fries </div>
</div>
<div class="img">
<img src="file:///C:\Users\yoonz\Documents\wings2\combo4.jpg" alt="Klematis" width="200" height="200"/>
<div class="desc"><b>C4</b> 2pc Fish Fillet Whiting or Catfish</div>
</div>
<div class="img">
<img src="file:///C:\Users\yoonz\Documents\wings2\combo5.jpg" alt="Klematis" width="200" height="200" />
<div class="desc"><b>C5</b> Teriyaki Beef or Chicken (Rice & Veggies)</div>
</div>
<div class="img">
<img src="file:///C:\Users\yoonz\Documents\wings2\c6.jpg" alt="Klematis" width="200" height="200" />
<div class="desc"><b>C6</b> 6pc wings<br>hyjiy w/Burger</div>
</div>
<div class="img">
<img src="file:///C:\Users\yoonz\Documents\wings2\c7.jpg" alt="Klematis" width="200" height="200" />
<div class="desc"><b>C7</b> 6pc Wings w/Philly </div>
</div>
<div class="img">
<img src="file:///C:\Users\yoonz\Documents\wings2\c8.jpg" alt="Klematis" width="200" height="200" />
<div class="desc"><b>C8</b> 6pc Wings w/Fish Fillet</div>
</div>
<div class="img">
<img src="file:///C:\Users\yoonz\Documents\wings2\c9.jpg" alt="Klematis" width="200" height="200" />
<div class="desc"><b>C9</b> 6pc Wings w/Fried Rice</div>
</div>
<div class="img">
<img src="file:///C:\Users\yoonz\Documents\wings2\c8.jpg" alt="Klematis" width="200" height="200" />
<div class="desc"><b>C10</b> Teriyaki Spicy Pork(Steamed Rice & Veggies)</div>
</div>

</div>
</body>
</html>


</div>





</html>


</style>

</body>


Thank you so much!!
 
Reply With Quote

Advertisement

Advertisement

  #2 (permalink)  
Old 11-13-2008, 09:01 PM
Contributing Member
Latest Blog:
None

 
Join Date: 08-22-08
Posts: 58
iTrader: 0 / 0%
think your issue is not related to monitor size, but rather resolution.
you have to decide what is minimal supported resolution and design site for it.

Issues i see in code:
1) several HTML sections (<HTML>...</HTML>), while there should be the only one
2) using position 'absolute' which result in showing half of your site
3) inline style

What i can recommend:
1) store styles to external css file
2) get rid of absolute positioning, use 'float' and 'clear' CSS attributes
3) start from beginning

Idea of how to start without absolute positioning below:
<html>
<head>
<style>

BODY
{
text-align: center;
background-color: #57809B;
}

.container
{
background-color: #93AFC1;
width: 1000px;
margin: 0 auto;
text-align: left;
}
</style>
<head>

<body>
<div class="container">
text
</div>
</body>
<html>

Here is a block with fixed size 1000px always positioned on the center
Hope this give you proper direction
 
Reply With Quote
  #3 (permalink)  
Old 11-16-2008, 01:55 PM
Cricket's Avatar
No Longer Active
Latest Blog:
None

 
Join Date: 10-13-03
Location: Texas
Posts: 42,181
iTrader: 0 / 0%
Take a look at this tutorial. I think it will help you a lot.
http://www.htmlbasictutor.ca/html-do...-structure.htm

This site belongs to a member of ours here at the V7N. I highly recommend taking some time to learn the basics of HTML on her sites.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Google problems with special character "|" alfie SEO Forum 7 05-17-2007 06:00 AM
Home page with "latest news", "news archive" and "update" tekitouni Web Design Lobby 1 09-19-2006 07:39 PM
Please only view this site in IE 11.4 on a 27" monitor. spacefem Web Usability 12 06-24-2004 07:18 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 04:35 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2014 Escalate Media




Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.