Diskuze: nastavení velikosti stránek

Volná diskuze nastavení velikosti stránek

Avatar
Tomáš Nazarov:
dobrý den, při tvorbě webu jsem narazil na jeden problém. Nevím jak nastavit velikost a pozici <div> tak aby i na větších monitorech to vypadalo stejně jako na menších.

zkoušel jsem to pomocí margin a zadávat v procentech ale nejde mi to.

díky za radu

 
Odpovědět 4. dubna 15:37
Avatar
Nahoru Odpovědět  +1 4. dubna 15:58
2x piš, jednou debuguj
Avatar
Tomáš Nazarov:

na webovou stránku

 
Nahoru Odpovědět  -2 4. dubna 16:01
Avatar
Odpovídá na Tomáš Nazarov
Josef Kuchař (Pepa489):

Nějaký výjimečný případ? Weby se mají dělat tak, aby se velikosti monitoru přispůsobovali, ne aby se jen zvětšovali

Nahoru Odpovědět 4. dubna 19:23
2x piš, jednou debuguj
Avatar
Odpovídá na Josef Kuchař (Pepa489)
Petr Čech (czubehead):

Nauč se prosím pravopis.

@OP dělá se to tak, že nastavíš rodičovskému elementu šířku na 100% a tomu vloženému také v procentech, třeba 40%.
Pokud to nepomohlo, hoď sem kód, u kterého to máš udělat.

Nahoru Odpovědět 4. dubna 19:39
Why so serious? -Joker
Avatar
Tomáš Nazarov:

no jde mi o to aby ten web vypadal stejně na malém rozlišení obrázovky tak na velkém
aby ty objekty byli vždy na stejné pozici a i ve stejné velikosti (myslím tim třebas bay tabulka vždy byla (v 30 od zhoda 30 od spoda)
přikládám zdroják

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<link rel="stylesheet" href="autofolie.css" type="text/css" media="screen"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/nav.js"></script>
<body>
<hgroup>
</hgroup>
<section id="overlay">
<table id="tfhover" class="tftable" border="1">
<style type="text/css">
table.tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #9dcc7a;border-collapse: collapse;}
table.tftable th {font-size:12px;background-color:#abd28e;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;text-align:left;}
table.tftable tr {background-color:#ffffff;}
table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;}
</style>
<tr><U><BIG><th colspan="3" ><U><BIG>Ceník služeb</BIG> </U> </th></th></tr>
<tr><th>Auta typu/značka folie</th><th>fusion</th><th>global</th></tr>
<tr><td> Hatchback, 3-dveřové</td><td>1 800,-Kč</td><td>2 000,-Kč</td></tr>
<tr><td>Sedan, Kombi</td><td>2 000,-Kč</td><td>2 400,-Kč</td></tr>
<tr><td>VAN</td><td>2 500,-Kč</td><td>2 900,-Kč</td></tr>
<tr><td colspan="3" >Uvedené ceny jsou bez přeních stahovaček </td></tr>
<tr><th colspan="3" >Doplňkové služby:</th></tr>
<tr><td>Přední stahovačky</td><td>600,-Kč</td><td>900,-Kč</td></tr>
<tr><td>Bezpečnostní folie - jedno okno</td><td colspan="3" >600,-Kč</td></tr>
<tr><td colspan="3">Ceny vč. DPH</td></tr>
</table>
</section>
<section id="bg">
<style>
ol li {list-style-type:url (images/odrazka.gif}
</style>
<img src="images/album.png" alt="fotoalbum naší práce"><a/>
<div><U><BIG>Potisluneční okenní autofólie</BIG> </U> </div>
<div><img src="images/odrazka.gif">Odrážejí až 65% dopadající sluneční energie, čímž vytvářejí ve voze příjemnější klima</li> </div>
<div><img src="images/odrazka.gif">Snižují průhled skly dovnitř vozu, čímž vzniká větší pocit soukromí </div>
<div><img src="images/odrazka.gif">Zlepšují celkový vzhled automobilu </div>
<div><img src="images/odrazka.gif">Pohlcují až 99% škodlivého UV záření, čímž chrání cestující a prodlužují životnost interiéru </div>
<div><img src="images/odrazka.gif">Fólie lze tvarovat, na každé sklo lze tedy instalovat fólii z jednoho kusu bez napojování </div>
<div>
<img src="images/odrazka.gif">Všechny typy fólií na sklo mají atest Ministerstva dopravy a spojů České republiky </div>
<div> </div>
<div><U><BIG>Potisluneční okenní autofólie</BIG> </U> </div>
<div><img src="images/odrazka.gif">Snižuje riziko vykradení automobilu a při nehodě chrání před střepy </div>
<div><img src="images/odrazka.gif">Pohlcuje přes 96% UV záření </div>
<div><img src="images/odrazka.gif">Má atest Ministerstva dopravy a spojů České republiky </div>
</section>
css:
html, body {
height:100%;
overflow:hidden;
}
body {
margin:0px;
padding:0px;
background-image: url(images/tapeta/wrap.jpeg);
backgourn: relative;
background-size: 100% 100%;
background-repeat: no-repeat ;
background-position: center ;
font-family:'Century Gothic', arial, serif;
}
#obr {
width: 60px;
height: 60px;
top: 200px;
left:50px;
color:#FFF;
}
#bg {
position: relative;
margin:0;
margin-top:-22%;
margin-left:1%;
font-size:11px;
HEiGHT:000;
color:#FFF;
}
#overlay {
position: relative;
margin:0;
margin-top:19%;
margin-left:65%;
color:#FFF;
}
 
Nahoru Odpovědět 5. dubna 8:34
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Tomáš Nazarov
Jiří Gracík:

Máš problém v naprostých základech, nemáš ukončené tady, ukončuješ neexistující tagy, mícháš html a css, používáš U a BIG tagy, vlastní seznam se zarážkami se určitě nedělá takhle ale pomocí opravdového seznamu. Syntaxe a formátování ti nic neříká, kdo to má opravovat?

Nahoru Odpovědět 5. dubna 13:02
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Tomáš Nazarov
Jiří Gracík:

Nevím proč to dělám, ale tady je lehce zlepšená verze s odebranýmy nebo přidanými end/open tagy, odděleným css a html a tak podobně, kdyby měl někdo zájem:
https://jsfiddle.net/ezLx51dp/

Nahoru Odpovědět 5. dubna 13:08
Creating websites is awesome till you see the result in another browser ...
Avatar
Tomáš Nazarov:

díky, vím teprve se učím :-)

 
Nahoru Odpovědět 5. dubna 13:24
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Tomáš Nazarov
Jiří Gracík:

Zkus na tom zapracovat. Co je tady tedy konkrétně za problém?

Nahoru Odpovědět 5. dubna 13:26
Creating websites is awesome till you see the result in another browser ...
Avatar
Tomáš Nazarov:

no chtěk jsem jednotlivé sekce (tabulku, text) umístit na stránku tak aby byli vždy ve stejné velikosti a místě bez ohledu na rozlišení obrazovky.
ale je možné že s tím mám problém jelikož mám ten kod v bordelu jak si mi napsal

 
Nahoru Odpovědět 5. dubna 13:30
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Tomáš Nazarov
Jiří Gracík:

Takhle žádné webové, desktopové ani mobilní aplikace nefungují. Zabil bys tím potencionál velké obrazovky a znemožnil použití na menších (zkus si vzít obrázek ve fullhd nebo 4k a podívat se na něm na telefonu, aniž bys ho roztáhl). Nejlepší je obsah přízpůsobovat, jak bylo naznačeno dříve.

Nahoru Odpovědět  +1 5. dubna 15:19
Creating websites is awesome till you see the result in another browser ...
Avatar
Tomáš Nazarov:

a můžeš mě lehce naťuknout. díky

 
Nahoru Odpovědět 5. dubna 19:38
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Tomáš Nazarov
Jiří Gracík:

Knock knock ... Who's there? ... Not a <table>

Tabulka úplně s responzivním designem nekamarádí. Pokud má málo sloupečků jako tahle, tak jí můžeš dát do containeru, který bude široký 100% (nebo něco blížící se 100%) do nějaké šířky a dále se vycentruje a zůstane uprostřed. Je tu návod na psaní responzivního webu :)

Nahoru Odpovědět 5. dubna 19:49
Creating websites is awesome till you see the result in another browser ...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 14 zpráv z 14.