ďťż

Optymalizacja strony pod różne rozdzielczości Czyli pytanie z serii jak to zrobić ;)

Podstrony

telcocafe

Robie stronke, a wlasciwie dopiero sie ucze gdyz jest to moja druga czy trzecia strona w zyciu... Niestety nie wiem jak ją zaoptymalizować pod różne rozdzielczości. Tworzyłem ją na monitorze o rozdz. 1680x1050. Jak zobaczyłem jak wygląda na laptopie z 1280x800 to prawy panel nachodzi na opisy. W związku z tym pytanie jak to zrobić żeby niezależnie od rozdz. strona wyglądała tak samo.

link: www.sklep.cheapchip.co.uk

Nadaj głównemu obiektowi <div> z ID = #main styl - position: absolute. Wtedy będziesz mógł definiować położenia LEFT i TOP względem tego elementu. Ściągnij narzędzie Firebug, aby lepiej przetestować różne ustawienia.

Można też próbować znaleźć Javascript, który pobiera rozdzielczość ekranu, a potem dopasowuje inne wymiary

Można też próbować znaleźć Javascript, który pobiera rozdzielczość ekranu, a potem dopasowuje inne wymiary

Javascript nie służy zapewnieniu podstawowej funkcjonalności, za którą odpowiada CSS i HTML.

Najlepiej podawać procentowe proporcje długości poszczególnych elementów, wtedy będą się ładnie skalować dla różnych rozdzielczości - pod warunkiem że nie napchasz długich grafik.

A jak by to mialo wygladac w %. Nie wiem za bardzo, ktore wartosci pozmieniac. Probowalem, ale bylo jeszcze gorzej ;)

zależy jaki masz css i ile masz grafik ;)

kod CSS

body { margin:20px 40px; font-size:0.9em; font- family: "Myriad Pro", "Trebuchet MS", Arial; font- size:14px; border:1px solid #000; background: url (images/bckg.jpg) repeat-x #8fe909; } a { color:#64a520; text-decoration:none;} a:hover { text-decoration:underline;} p { padding: 0 10px 5px 10px; } h1 { text-transform:uppercase; font-size:18px; color:#fff; } h1 span { background-color:#477b1d; padding:0 10px;} h1 rest { background-color:blue; padding:0 10px;} h4 rest { background-color:#FF9900; padding:0 10px;} img {} #box {height: 400 width: 600} #data {background-color:#blue} #top { height:30px; background-color:#477b1d;border- bottom:4px solid #000; } #name { float:left; border-left:20px solid #70c32e; border-right:20px solid #70c32e;} #name a{ color:#fff; font-weight:bold; font- size:24px; text-transform:uppercase; background- color:#70c32e; text-decoration:none;} #split { float:left; height:30px; width:20px; border -left:3px solid #000000;} #slogan { float:left; color:#fff; text- transform:uppercase; padding:3px 0 0 10px;} #contact_us{ float:right; background- color:#7abb37;height:20px; padding:2px 5px;} #contact_us a { color:#fff; text-transform:uppercase; text-decoration:none; } #logo { background:url(images/head_bckg.jpg) no- repeat #78ce31;} #logo_text { float:right; width:200px; height:80px; background-color:#70c32e; margin:40px 20px 53px 0; font-family: Tahoma, Arial; font-size:11px; color:#fff; padding:10px; font-weight:bold; } #menu { background:#70c32e; height:21px; width:600px; margin: 0 auto; clear:both; border:1px solid #a8f534; text-align:center; color:#fff; padding-top:4px;} #menu a { color:#fff; font-size:14px; text- transform:uppercase; font-weight:bold; text- decoration:none; margin:0 20px; margin-top:3px;} #menu a:hover{ color:#d4ffa1} .item img { background-color:#fff; padding:6px; border:1px solid #d0d0d0;} .description { display:block; float:right; width:220px; padding: 10px 20px 20px 0; line- height:12px; font-family:Tahoma, Arial;} p.additional { margin:0 10px; color:#9c9c9c; font- size:10px; line-height:12px; border-top:1px solid #bdbdbd; padding: 10px 0; font-weight:normal; font- family:Tahoma, Arial;} p.personality {font-size:10px; font-family: Tahoma} p.tytul {font-size: 18px; font-family: Tahoma, Arial; font-style: bold; color:#66cc33;} p.cena {font-size: 14px; font-family: Verdana, Tahoma, Arial; color: red;} #contenttext {position: absolute; top: 300px; left: 65px;} #contenttext2 {float: right; padding: 20px 20px 0 30px;} #contenttext3 {position: absolute; top: 300px; left: 260px;} #contenttext4 {position: absolute; top: 43%; left: 43%;} #form {position:absolute; top: 260px; left: 930px; float: right} #text { margin: 0 292px 0 0; padding:10px; max- width:850px; max-height: 600px; top: 10px; left: 10px; font-color: green; font-style: bold} #text li { list-style:none; padding-left:20px; background:url(images/li.gif) no-repeat 0px 4px;line -height:18px;} #sidebar { float:right; width:245px; padding: 20px 20px 0 30px; font-size:10px; } #bar {position: absolute; top: 300px; left: 1095px;} #bar2 {position: absolute; top: 710px; left: 1095px;} #items {position: absolute; width: 20%; padding: 20px 20px 0 30px; font-size: 10px; top: 43%; left: 15%;} #sidebar a{ font-weight:bold; } #sidebar h2 { margin:0; padding:0 0 20px 0; text- transform:uppercase; color:#000; font-size:18px;} #onmouse a:hover{ color:orange} .item img { background-color:#fff; padding:6px; border:1px solid #d0d0d0;} .description { display:block; float:right; width:220px; padding: 10px 20px 20px 0; line- height:12px; font-family:Tahoma, Arial;} #brand {position: absolute; top:300px; left: 1140px; float:right} #menu2 {position:absolute; top: 300px; left: 65px; float: left} #main { float:left; background:url (images/sidebar_bckg.gif) no-repeat top right #fff; } #footer { background:url(images/footer_bckg.gif) repeat-x #000; height:55px; clear:both; } #left_footer { float:left; padding:20px 0 0 30px; color:#fff; font-size:12px;} #left_footer a { color:#fff;} #left_footer a:hover { text-decoration:none;} #right_footer { float:right; padding:20px 30px 0 0; color:#fff; font-size:10px; text-align:right;} #right_footer a { color:#fff;}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2 " /> <title></title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="flashobject.js"></script> </head> <body BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> <div id="menu2"> <div id="flat-1-layer-flashblock_id" >123 Flash Menu Placeholder.</div> <script type="text/javascript"> var fo = new FlashObject("menu.swf","flat-1-layer-flashblock","165","858", "6","#000000"); fo.addParam("menu","false"); fo.addParam("quality","best"); fo.addParam("scale","noscale"); fo.addParam("salign","LT"); fo.addParam("wmode", "transparent"); fo.write("flat-1-layer-flashblock_id"); </script> </div> <div id="top"> <div id="name"><a href="#">CHEAPCHIP</a></div> <div id="split"></div> <div style="border-top:6px solid #7abb37; background-color:blue; "> <div id="slogan"> najtańsze komputery w UK/solidność i niezawodność</div> <div id="contact_us"><a href="#">Sitemap</a></div> </div> </div> <div id="logo"> <div id="logo_text"> Codziennie nowe oferty i promocje!!! <br>Szeroka gama komputerów, laptopów i części komputerowych </div> <div id="menu"> <a href="#">Home</a>| <a href="#">Usługi</a>| <a href="#">Promocje</a>| <a href="o nas.html">O Nas</a>| <a href="kontakt.html">Kontakt</a> </div> </div> <div id="main"> <div id="sidebar"> <h2>Promocje dnia</h2> <div class="item"><a href="#"><img src="images/case.jpg" alt=" " width="160" height="160"/></a> <span class="description"> Apevia X-Plorer Black & Red Gaming Midi Pc Case</span> </div> <div class="item"><a href="#"><img src="images/cpu.jpg" alt=" " width="160" height="160" /></a> <span class="description">Tu bedzie opis komponentu</span> </div> <div class="item"><a href="#"><img src="images/mobo.jpg" alt=" " width="160" height="160"/></a> <span class="description"> Gigabyte GA-N650SLI-DS4L NF650i SLi, S 775, PCI-E (x16), DDR2 533/667/800, SATA II, SATA RAID, ATX </span> </div> <div class="item"><a href="#"><img src="images/memory.jpg" alt=" " width="160" height="160"/></a> <span class="description"> 2GB Dane-Elec Celenade Major, DDR2 PC2-6400 (800), 240 Pins, Non-ECC Unbuffered, CAS 6, Retail </span> </div> <div class="item"><a href="#"><img src="images/graphic.jpg" alt=" " width="160" height="160"/></a> <span class="description"> 512MB Palit/XVision 9600GT, PCI-E 2.0, Mem1800MHz, DDR3, GPU650MHz, Stream64, 2x DL DVI-I/S-Video </span> </div> <div class="item"><a href="#"><img src="images/disk.jpg" alt=" " width="160" height="160"/></a> <span class="description"> 500GB Samsung HD502IJ Spinpoint F1, SATA II, 7200 rpm, 16MB Cache, 8.9 ms, NCQ </span> </div> <div class="item"><a href="#"><img src="images/dvd.jpg" alt=" " width="160" height="160"/></a> <span class="description"> Samsung SH-S202N/BEBN 20x DVDąR, 16xDVDąDL, DVD+RW x8/-RW x6, PATA,Lightscribe, Black, OEM inc. Nero </span> </div> <div class="item"><a href="#"><img src="images/psu.jpg" alt=" " width="160" height="160"/></a> <span class="description"> 650W Coolermaster eXtreme PSU (RP-650-PCAP) </span> </div> </div> <div id="contenttext3" > <h1><span> Strona główna</span></h1> <br> </div> <p> <div id="items"> <div class="item"><a href="#"><img src="images/qosmio.jpg" alt=" " width="75%" height="75%"/></a> </div> <div class="item"><a href="#"><img src="images/6910p.jpg" alt=" " width="75%" height="75%" /></a> </div> <div class="item"><a href="#"><img src="images/a200f.jpg" alt=" " width="75%" height="75%"/></a> </div> <div class="item"><a href="#"><img src="images/c200.jpg" alt=" " width="75%" height="75%"/></a> </div> </div> <div id="contenttext4"> <p class="tytul">Toshiba Qosmio<br> <p> Specyfikacja:<br><br> * Intel Core 2 Duo T7500 2.20GHz<br> * 2048MB DDR2<br> * 250GB SATA HDD<br> * 15,4" WXGA<br> * DVD-RW DL<br> * GeForce G8400M GS<br> * Wi-Fi<br> * Bluetooth<br> * Windows Vista Home Premium<br> <p> <p class="cena">cena: Ł799 <p class="tytul"> HP/Compaq 6910P <p> Specyfikacja:</p> * Intel Core 2 Duo T2330 1.6GHz<br> * 1024MB DDR2<br> * 100GB SATA HDD<br> * 15,4" WXGA<br> * DVD-RW DL<br> * Intel GMA X3100<br> * Wi-Fi<br> * Bluetooth<br> * Windows Vista Home Premium<br> <p> <p class="cena">cena: Ł489</p> <p class="tytul"> Toshiba Equium A200-1V0</p> <p> Specyfikacja:<br><br> * Intel Core 2 Duo T7500 2.20GHz<br> * 2048MB DDR2<br> * 250GB SATA HDD<br> * 15,4" WXGA<br> * DVD-RW DL<br> * GeForce G8400M GS<br> * Wi-Fi<br> * Bluetooth<br> * Windows Vista Home Premium<br> <p> <p class="cena">cena: Ł429</p> <p class="tytul"> Lenovo C200 3000</p> <p> Specyfikacja:<br><br> * Intel Core 2 Duo T2330 1.6GHz<br> * 1024MB DDR2<br> * 100GB SATA HDD<br> * 15,4" WXGA<br> * DVD-RW DL<br> * Intel GMA X3100<br> * Wi-Fi<br> * Bluetooth<br> * Windows Vista Home Premium<br> <p> <p class="cena">cena: Ł399</p> </div> <div id="contenttext2"> <strong>Dane teleadresowe<strong><br> <h4><rest>Nazwa:</rest></h4><p class="personality"> Cheapchip Computers Technology</P> <h4><rest>Adres:</h4></rest><p class="personality"> 119 Sunnyside Road<br> AB24 3LS Aberdeen <br> Scotland</p> <h4><rest>telefon: </h4></rest> <p class="personality">01224</p> <h4><rest>Godziny otwarcia:</h4></rest> <p class="personality">9-17 (od Poniedziałku do Piątku)<br> 9-14 (w Soboty)</p> <h4><rest>e-mail:</h4></rest> <p class="personality">sklep@cheapchip.co.uk<br> <IMG SRC="http://www.gadu-gadu.pl/users/status.asp?id=/1099329/" width="16" height="16">gadu gadu: 1099329</p> <h4><rest>Numer rachunku banowego:</h4></rest></div> </div> </div> </div> <div id="footer"> <div id="left_footer">© Copyright 2008 <b>Cheapchip</b></div> <div id="right_footer"> </p> <a href="#">Pomoc-FAQ</a>  |  <a href="#">Regulamin</a>  |  <a href="#">Forum</a> </a> </div> </div> </body> </html>

MOderatorzy na tym forum są śmiesznie niepoważni. Generalnie to moge dostac i 100% wisi mi to, ale dawanie % z takimi smiesznymi argumentami jest juz sporą przesadą. W regulaminie nie ma nic, że kod ma być pisany w codebox
Użytkownik yellowww21 edytował ten post 01 czerwiec 2008, 09:38
Powód edycji: Używaj codebox!

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL