Tažké začiatky

Snipo · Napísal **Snipo**: 09.08.2013 17:02 | Tažké začiatky

Ahojte, tak sa už asi týždeň venujem CSS a pokúsil som sa zbúchať nejaký ten základný layout. Poprosil by som o váš názor že čo je tam zle, ako by sa to dalo urobiť, nejako moja hlava nechce pochopiť no poziciovanie ale asi to je len o praxi.

http://uloz.to/x8fkRW6z/pbs-rar

DeiForm · Napísal **DeiForm**: 09.08.2013 17:29 | Tažké začiatky

Menu mas rozbite na mensich monitoroch resp na mensom rozliseni okna: http://prntscr.com/1ka69d

Neviem ci taketo rozlozenie mas mat ale asi nie: (1920px) http://prntscr.com/1ka6fe

Dalej nepouzivaj tie HTML5 tagy - section header nav atd nie su podporovanep ri vsetkych prehliadacoch pekne si ostav pri divoch a spanoch

Ked tam uz mas ID tak ID maju byt jedinecne:

Kód:

     <li><p id="menutlacitko"><b>Technik BOZP</b></p></li>
      <li><p id="menutlacitko"><b>Technik PO</b></p></li>
      <li><p id="menutlacitko"><b>Školenia</b></p></li>
      <li><p id="menutlacitko"><b>Školenia VZV</b></p></li>
      <li><p id="menutlacitko"><b>Služby</b></p></li>

Snipo · Napísal autor témy **Snipo**: 09.08.2013 17:39 | Tažké začiatky

no, cakal som ze to bude na prd

povenujem sa tomu este 2-3 tyzdne s skusim nieco

Este mam jednu otazku, v knihe sa pisalo, ze pouzivajte position:absolute s rozumom, co tym mysleli ze sa nema pouzivat vela? A este k tej mojej stranke tak ked dam na #topmenu margin: 0px auto tak by sa malo dat do stredu headeru nie? Asi som nieco zle pochopil ale nefungovalo mi to.

chrono · Napísal **chrono**: 09.08.2013 17:56 | Tažké začiatky

V dnešnej dobe je asi rozumnejšie používať nejaký framework, ktorý rieši bežné problémy (odkazy na nejaké su napr tu).

shaggy · Napísal **shaggy**: 09.08.2013 18:01 | Tažké začiatky

Nemyslím, že by bol "frontend framework" v dnešnej dobe rozumnejšia voľba. Je to rozumnejšia voľba pre rôznych grafikov (a podobných nie-koderov), ktorí potrebujú rýchlo zbúchať web a nechcú sa učiť. Ale väčšinou ti to len zaprasí kód zbytočnými zápismi.

crysis10 - position:absolute by si pri takom jednoduchom webe, aký robíš ty (hodnotím len z obrázkov, web nebudem sťahovať), nemal vôbec použiť. Väčšinou ho vôbec nepotrebuješ.

Snipo · Napísal autor témy **Snipo**: 09.08.2013 18:11 | Tažké začiatky

a ako inak to mám zarovnávať? len okrajmi? a position:relative?

DeiForm · Napísal **DeiForm**: 09.08.2013 19:05 | Tažké začiatky

float ti nehovori nic?

Snipo · Napísal autor témy **Snipo**: 21.08.2013 14:13 | Tažké začiatky

tak som som zase niečo skúsil, http://sgu-wot.4fan.cz/, keby ste si nasli trocha casu sa na to pozriet ze co by sa dalo urobit inak/lepsie

Co sa tyka uz objavenych problemov je to nejak divné rozložené menu v IE a neviem prísť na to čím to je.

EDIT//: Ináč tým vzhľadom som sa inšpiroval (niesom na grafiku)

Ďuri · Napísal **Ďuri**: 21.08.2013 18:16 | Tažké začiatky

Ad IE - myslim, ze bude stacit zmenit doctype na <!doctype html> (to urob kazdopadne, aj keby to nepomohlo). Prip. daj vediet, ktoru verziu mas.

Snipo · Napísal autor témy **Snipo**: 21.08.2013 19:09 | Tažké začiatky

Takže, keď som to zmenil tak mi to rozhadzalo cely web pretoze som nemal px za kazdou hodnotou pri okrajoch. Pritom som si vsimol aj jednu chybu pri rozmere tak uz je to v pohode

Ďuri · Napísal **Ďuri**: 21.08.2013 21:50 | Tažké začiatky

Parada. Tu si o tom mozes precitat nieco viac (trochu outdated, ale stale celkom citatelne) -> http://www.jakpsatweb.cz/css/mody-prohlizecu.html

kaktuss · Napísal **kaktuss**: 21.08.2013 23:36 | Tažké začiatky

shaggy píše:

Nemyslím, že by bol "frontend framework" v dnešnej dobe rozumnejšia voľba. Je to rozumnejšia voľba pre rôznych grafikov (a podobných nie-koderov), ktorí potrebujú rýchlo zbúchať web a nechcú sa učiť. Ale väčšinou ti to len zaprasí kód zbytočnými zápismi...

Ty asi nemas ani sajnu, co ten "frontend framework" je.

kaktuss · Napísal **kaktuss**: 21.08.2013 23:38 | Tažké začiatky

crysis10: noo, takym stylom sme robili weby pred viac ako 10 rokmi :-)

... len studuj studuj...

Snipo · Napísal autor témy **Snipo**: 22.08.2013 9:15 | Tažké začiatky

a akým štýlom sa robia? skús mi to priblížiť trochu

čo sa týka toho box modelu u IE, on ešte stále počíta tie rozmery inak?

kaktuss · Napísal **kaktuss**: 22.08.2013 10:33 | Tažké začiatky

Za najvacsi fail povazujem pouzivanie gif-ov s nazvami v menu. To hadam nemyslis vazne :-)

. Text ma byt text a nie obrazok. To plati aj pri "Hlavna novinka". To sa robilo tak pred rokom 2000. Zbytocne si tym zvysujes velkost stranky (teraz ma len menu okolo 37kb, rovnako vyzerajuce by sa dalo urobit okolo 5-7kb) a na druhej strane, vyzera to hrozne, myslim nazvy - text, to nemas ziadne esteticke citenie? :-)

Ostatne uz len take zaciatocnicke chyby:
- zbytocne to v kode "preklasujes":
napriklad:
<div class="novinka">
<img class="novinkaobrazok" src="images/video.jpg" alt="Video">
<p class="novinkanadpis">Novinka č. 1</p>
<p class="novinkatext">Text novinky</p>
</div>

sa da napisat aj takto:
<div class="novinka">
<img src="images/video.jpg" alt="Video">
<h3>Novinka č. 1</h3>
<p>Text novinky</p>
</div>

potom v css:
.novinka {definicia}
.novinka img {definicia}

h3 {definicia globalne}
p {definicia globalne}

keby si naahodou potreboval definovat aj tie, tak .novinka h3 {} atd...
To sa da pouzit aj na ostatne veci na stranke, zbytocne davas class kazdemu <p>. Mozno pri takej stranke sa to neprejavi, ale pri niecom vacsom je to zbytocny kod - zly navyk

.

- to, o com som pisal vyssie sa ti prejavi aj v css:

- teraz mas pri kazdom p-ckovom class zbytocne definovane font-family, ktore by si mal v principe definovat pre <p> len raz globalne.

- v css mas na mnohych miestach deklarovane marginy a paddingy bez jednotiek, cize napr. padding: 20 20 20 20; a to ti nemoze fungovat. V tomto pripade, ked uz, tak padding: 20px 20px 20px 20px; (alebo ine jednotky) a ani tak nie, pretoze v tomto pripade je to lepsie napisat takto: padding: 20px;

Zatial tolko len tak narychlo.

A radsej png ako gif.

Snipo · Naposledy upravil Snipo dňa 22.08.2013 18:03, celkovo upravené 1

Tak som to trošku prerobil (adresa tá istá) lenže mám pár problémov. Prvý je zlá diakritika ale nechápem tomu pretože keď to otvorím v pc tak je to dobré a keď to nahrajem na web tak sa to takto domrví. Ďalej prečo sa mi nezobrazuje ten istý font ako vo Photoshope? Font zadávam ten istý akurát inak vyzerá. Ďalší je že keď to footeru pridám akýkoľvek blokový element, tak sa footer odsunie od toho obsahu. A jedna maličkosť, ako odstrániť to podčiarknutie pri odkaze.

EDIT:// Diakritika na druhom hostingu funguje bez problémov

Ďuri · Napísal **Ďuri**: 22.08.2013 16:17 | Tažké začiatky

crysis10 píše:

čo sa týka toho box modelu u IE, on ešte stále počíta tie rozmery inak?

Uz dvanast rokov nie.

kaktuss · Napísal **kaktuss**: 22.08.2013 22:43 | Tažké začiatky

crysis10 píše:

Tak som to trošku prerobil (adresa tá istá) lenže mám pár problémov. Prvý je zlá diakritika ale nechápem tomu pretože keď to otvorím v pc tak je to dobré a keď to nahrajem na web tak sa to takto domrví. Ďalej prečo sa mi nezobrazuje ten istý font ako vo Photoshope? Font zadávam ten istý akurát inak vyzerá. Ďalší je že keď to footeru pridám akýkoľvek blokový element, tak sa footer odsunie od toho obsahu. A jedna maličkosť, ako odstrániť to podčiarknutie pri odkaze.

- nemas definovane kodovanie, chyba ti tam v head:
<meta charset="utf-8">
co uz zaroven samo napoveda -> pis texty v UTF-8...

- font-family stale definuj viac fontov, napr. font-family: 'Agency FB', Helvetica, Arial, Sans-serif; ked dany font uzivatel nema, pouzije sa dalsi dostupny, pochybujem, ze Agency FB ma niekto standardne... a Arial nemusis dat do uvodzoviek

- nepodciarknutie pri odkaze: a {text-decoration: none;}
- problem footer, tazko povedat, momentalne tam ziadny element nevidim...

Snipo · Napísal autor témy **Snipo**: 23.08.2013 18:52 | Tažké začiatky

no lenže ak dám UTF-8, tak miesto tých písmen tam mám nejaké trojuholníky s otáznikom

EDIT:// vyriešené, ja debil som to ukladal v inej sade

a pridal som aj ten element do footeru, vidíte ako sa to odsunie a neviem prečo

EDIT:// pridal som border tomu footer a prestalo to, nejako nechápem čo sa to deje...

kaktuss · Napísal **kaktuss**: 23.08.2013 20:03 | Tažké začiatky

stacilo ti pridat #footer {float:left}, ale to by si potom bud musel aj tak pridat border alebo zmenit sirku o 2px viac.

Snipo · Napísal autor témy **Snipo**: 27.08.2013 13:51 | Tažké začiatky

Tákže doba trosku pokrocila a ja mam zase dalsi problem

http://sgu-wot.4fan.cz/ Ide o ten dátum v novinkách. Chcem aby bol na spodku tesne nad tou ciarou co oddeluje novinky. Ak mám 2 riadky v novinke, tak je to dobre, no keď iba jeden tak je to trocha vyššie. Ako by som to mohol čo najefektívnejšie urobiť?

EDIT:// Tak som to už vyriešil s position absolute, s tym ze rodicovskemu prvu som dal position relative, iné riesenie ma nenapadlo.

Prípadne ešte by som potreboval poradiť ako spraviť menu tak aby keď nadídem na nejakú položku tak sa zvýrazní. Našiel som niečo s onmouseover atď. lenže to mi nefungovalo v IE a veľkosť menu to asi z 10-násobilo

Ako by sa to dalo urobit?

Ďuri · Napísal **Ďuri**: 27.08.2013 17:05 | Tažké začiatky

crysis10 píše:

Prípadne ešte by som potreboval poradiť ako spraviť menu tak aby keď nadídem na nejakú položku tak sa zvýrazní. Našiel som niečo s onmouseover atď. lenže to mi nefungovalo v IE a veľkosť menu to asi z 10-násobilo

Ako by sa to dalo urobit?

Najjednoduchsie pomocou CSS pseudotriedy :hover.

A prosim ta, nerob nam tu live report tvojich zazitkov z debugovania. Az narazis na problem, trap sa s nim dva-tri dni a teprve potom sa nas opytaj s poriadnym popisom problemu. Tvojich tisic editov sa tu nikomu citat nechce.

Snipo · Napísal autor témy **Snipo**: 21.10.2013 18:28 | Tažké začiatky

Tákže, trochu som nemal teraz čas ale zase som si povedal že niečo skúsim aby som nepozabúdal a overil svoje schopnosti. Bolo to robené zo stiahnutej free šablóny. Keby sa náhodou niekto nudil a nemal čo na robote, bol by som mu vďačný za to keby to len tak prebehol a napísal nejaký svoj názor čo som spravil zle, ako by si to spravil inak/lepšie.

HTML:

Spoiler: zobraziť

Kód:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Corporatix - Home</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>

<div id="top-panel">
   <div id="top-panel-content">
       <img src="img/logo-corporatix.png" alt="Corporatix logo">
        <div id="top-menu">
           <div class="top-menu-button">
               <a href="#">Home</a>
            </div>
            <div class="top-menu-button">
               <a href="#">Services</a>
            </div>
            <div class="top-menu-button">
               <a href="#">Portfolio</a>
            </div>
            <div class="top-menu-button">
               <a href="#">Testimonial</a>
            </div>
            <div class="top-menu-button">
               <a href="#">Blog</a>
            </div>
            <div class="top-menu-button">
               <a href="#">Contact Us</a>
            </div>
        </div>
    </div>
</div>

<div id="top-slider">
   <div id="top-slider-content">
       <img src="img/top-slider-img.png" alt="Top slider">
    </div>
</div>

<div id="content">
   <div id="main-content-top">
       <h1>We can make your online business <br> easy & usable for all walks of people</h1>
        <img src="img/corporatix-top-content.png" alt="Let's start your website"> 
    </div>
    <div id="main-content">
        <div class="box">
           <img src="img/box-img.png" alt="Box img">
            <h2>Business Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt mi id libero egestas ut interdum               nibh cursus. </p>
        <div class="box-button">
               <a href="#">Read more ></a>
            </div>
        </div>
      <div class="box">
           <img src="img/box-img.png" alt="Box img">
            <h2>Business Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt mi id libero egestas ut interdum               nibh cursus. </p>
        <div class="box-button">
               <a href="#">Read more ></a>
            </div>
        </div>
        <div class="box">
           <img src="img/box-img.png" alt="Box img">
            <h2>Business Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt mi id libero egestas ut interdum               nibh cursus. </p>
            <div class="box-button">
               <a href="#">Read more ></a>
            </div>
        </div>
      <div class="box2">
           <img src="img/box-img.png" alt="Box img">
            <h2>Business Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt mi id libero egestas ut interdum               nibh cursus. </p>
        <div class="box-button">
               <a href="#">Read more ></a>
            </div>
        </div>
        <div class="bottom-left-box">
           <div class="bottom-left-box-left">
               <img src="img/bottom-box-image.png" alt="Bottom Box Image"><h3>Title Heading</h3>
                <p>Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Aliqu am tincidunt mi id libero egestas ut interdum nibh cursus.</p>
            </div>
            <div class="bottom-left-box-right">
               <img src="img/bottom-box-image.png" alt="Bottom Box Image"><h3>Title Heading</h3>
                <p>Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Aliqu am tincidunt mi id libero egestas ut interdum nibh cursus.</p>
            </div>
            <div class="bottom-left-box-left">
               <img src="img/bottom-box-image.png" alt="Bottom Box Image"><h3>Title Heading</h3>
                <p>Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Aliqu am tincidunt mi id libero egestas ut interdum nibh cursus.</p>
            </div>
            <div class="bottom-left-box-right">
               <img src="img/bottom-box-image.png" alt="Bottom Box Image"><h3>Title Heading</h3>
                <p>Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Aliqu am tincidunt mi id libero egestas ut interdum nibh cursus.</p>
            </div>
        </div>
        <div class="bottom-right-box">
           <h3>About the Company</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt mi id libero egestas ut interdum nibh cursus. Nulla erat orci, adipiscing vel molestie ac, vehicula in dui. Proin vel lorem in tellus placerat eleifend. Duis iaculis lorem a ipsum euismod vel ullamcorper arcu placerat. Aenean elementum tortor vel nisi bibendum bibendum. Aliquam fringilla feugiat ante in vestibulum. Sed non justo justo. Aenean et quam dolor. Vivamus aliquet gravida nunc, sed elementum elit blandit vel. Aliquam neque quam, dignissim ac mattis at, hendrerit nec elit. Cras commodo gravida placerat. </p>
            <a href="#">Read More ></a>
        </div>
    </div>
</div>

<div id="footer">
   <div id="footer-content">
       <p id="footer-menu">
        <a href="#">Home</a> &nbsp|&nbsp <a href="#">Services</a> &nbsp|&nbsp <a href="#">Portfolio</a> &nbsp|&nbsp <a href="#">Testimonial</a> &nbsp|&nbsp <a href="#">Blog</a> &nbsp|&nbsp <a href="#">Contact Us</a> 
        </p>
        <p id="copyright">
        © 2010 WebCorp LLC | Terms of service | Privacy policy<br>
icons courtesy IconFinder.com
</p>
      <img src="img/contact-us.png" alt="Contact Us">
    </div>
</div>

</body>
</html>

CSS:

Spoiler: zobraziť

Kód:

a  {
   font-size: 13px;
   font-family: Arial;
}

h1 {
   font-family: Arial;
   font-size: 34px;
   color: #132445;
   font-weight: lighter;
}

h2 {
   font-family: Arial;
   font-size: 20px;
   color: #132445;
}

h3 {
   font-family: Arial;
   font-size: 15px;
   color: #132445;
}

p {
   font-family: Arial;
   font-size: 13px;
   color: #132445;
   font-weight: lighter;
}

#top-panel {
   background-image: url('img/top-panel-bg.png');
   background-repeat: repeat-x;
   width: 100%;
   height: 91px;
}

#top-panel-content {
   width: 960px;
   height: 91px;
   margin: 0px auto;
}

#top-menu {
   height: 91px;
   float: right;
}

.top-menu-button {
   float: left;
   height: 25px;
   margin: 33px 30px 0px 0px;
   width: 80px;
}

.top-menu-button:hover {
   background: linear-gradient(#ffffff, #c8c8c8);
   border-radius: 20px;
   box-shadow: 0px 1px 1px 1px #888888;
}

.top-menu-button a {
   font-size: 13px;
   text-decoration: none;
   font-family: Arial;
   font-weight: bold;
   color: #2f57a1;
   display: block;
   margin-top: 6px;
   text-align: center;
}

.top-menu-button a:hover {
   color: #000000;
}

#top-slider {
   width: 100%;
   height: 498px;
   background-image: url('img/top-slider-bg.png');
   background-repeat: repeat-x;
   margin-bottom: 1px;
}

#top-slider-content {
   width: 1181px;
   margin: 0px auto;
}

#content {
   width: 100%;
   background-color: #dadfeb;
}

#main-content-top {
   width: 960px;
   height: 123px;
   background-image: url('img/top-content-bg.png');
   background-repeat: no-repeat;
   margin: 0px auto;
}

#main-content-top h1 {
   float: left;
   margin: 10px 10px 0px 0px;
}

#main-content-top img {
   margin-top: 5px;
   float: right;
}

#main-content {
   background-image: url('img/main-content-bg.png');
   background-repeat: no-repeat;
   background-position: top center;
   width: 960px;
   min-height: 500px;
   margin: 0px auto;
   padding: 40px 0px;
   background-color: #dadfeb;
   min-height: 660px;
}

.box {
   background-color: #FFFFFF;
   width: 181px;
   min-height: 300px;
   float: left;
   border: 1px solid #bfc4d1;
   margin-right: 20px;
   border-radius: 5px;
   padding: 21px;
}

.box2 {
   background-color: #FFFFFF;
   width: 181px;
   min-height: 300px;
   float: left;
   border: 1px solid #bfc4d1;
   border-radius: 5px;
   padding: 21px;
}

.box-button {
   float: left;
   height: 25px;
   margin: 33px 30px 0px 0px;
   width: 100px;
   background: linear-gradient(#ffffff, #c8c8c8);
   border-radius: 20px;
   box-shadow: 0px 1px 1px 1px #888888;
}

.box-button a {
   font-size: 13px;
   text-decoration: none;
   font-family: Arial;
   display: block;
   margin-top: 6px;
   text-align: center;
}

.bottom-left-box {
   width: 465px;
   float: left;
   margin-right: 20px;
   margin-top: 20px;
}

.bottom-left-box img {
   float: left;
   margin-right: 5px;
}

.bottom-left-box-left {
   width: 220px;
   margin-right: 25px;
   float: left;
   margin-bottom: 20px;
}

.bottom-left-box-right {
   width: 220px;
   margin-bottom: 20px;
   float: left;   
}

.bottom-left-box h3 {
   position: relative;
   top: 7px;
}

.bottom-right-box {
   width: 465px;
   margin-top: 20px;
   float: left;
}

#footer {
   width: 100%;
   background-color: #565f81;
   height: 130px;
}

#footer-content {
   width: 960px;
   margin: 0px auto;
   padding: 20px 0px;
}

#footer-content img {
   float: right;
   position: relative;
   bottom: 90px;
}

#footer-menu a{
   color: #dadfeb;
   text-decoration: none;
}

#copyright {
   color: #9fa8bd !important;
}

Prípadne tuto na stiahnutie http://uloz.to/xCN19NjS/corporatix-zip (heslo: pcforum). A k tým ikonkám FB atď. na spodku, už sa mi nechcelo s tým babrať preto to je také ake je.

shaggy · Napísal **shaggy**: 21.10.2013 23:10 | Tažké začiatky

Prečo sem dávaš html a css kód priamo do príspevku a stránku na stiahnutie? Daj ju priamo na hosting, my si ju nechceme sťahovať, my si ju chceme rovno pozrieť (očakávaš od nás rady, tak prejav trochu iniciatívy)

Snipo · Napísal autor témy **Snipo**: 22.10.2013 7:11 | Tažké začiatky

Tu je link: http://sgu-wot.4fan.cz/corporatix/, a ešte k tomu hornému slideru, to bolo nad moje sily...

shaggy · Napísal **shaggy**: 22.10.2013 18:01 | Tažké začiatky

Nevadí ti, že si na body nechal 10px margin? Vôbec si si to nevšimol (to bola prvá vec, ktorá mi udrela do očí)?
A nebudeš nám dávať takto hodnotiť každý web, však (len sa pre istotu pýtam)?

Lebo toto sú... toto sú proste začiatky. Všetci sme si tým prešli, ale je vidieť, že to nie je ono (a dobré to bude, až nazbieraš skúsenosti - naučíš sa to jedine tak, že to budeš robiť).
- páči sa mi použitie nadpisov, s tým majú problémy aj skúsenejší (použil si ich logicky),
- máš tam príliš veľa div-ov, napr. menu by malo byť v nečíslovanom zozname (UL, samotné položky v LI),
- neklikateľné logo - pokojne ho nechaj ako IMG, akurát to ešte vlož do odkazu (väčšinou logo slúži na to, aby si sa dostal na domovskú stránku),
- nepoužívaš veľa !important v css (čo začiatočníci zvyknú robiť). Použil si to iba pri #copyright, kde je to tiež zbytočné, väčšinou v css !important netreba,
- tak ako pri body si nechal margin, tak odkazom v tele si nechal štandardnú farbu. Neverím, že v tom template boli odkazy takou škaredou modrou

Napriek tomu, že je to začiatočnícky počin, tak celkovo ten kód nie je až taký zlý. Príde mi prehladnejšie napísaný, ako väčšina tých nakódovaných free šablón (kde je zbytočne veľa elementov).

Snipo · Napísal autor témy **Snipo**: 22.10.2013 19:08 | Tažké začiatky

No, trošku mi nedopína asi

Aký margin na body?

shaggy · Napísal **shaggy**: 22.10.2013 22:33 | Tažké začiatky

Nevidíš ten biely border hore, dole, vľavo a vpravo?
Otvori si túto pôvodnú stránku v prehliadači, urob si kópiu súborov, dopíš do css body {margin: 0} a otvor túto novú stránku a porovnaj si ich

Snipo · Napísal autor témy **Snipo**: 17.11.2013 18:26 | Tažké začiatky

No, takže mám ďalší problém a týka sa prispôsobovania layoutu rozlíšeniu zariadenia. Povedzme žeby som chcel aby sa napr. v rozmedzí 1024x768 až 1920x1080 layout automaticky prispôsoboval. Šírku by som vyriešil percentami to by nebol problém ale čo s výškou? Teda logicky čím väčšia šírka, tým väčšia výška. Dalo by sa to nejako vyriešiť len pomocou CSS a HTML? Alebo mám zvoliť nejaký zlatý stred výšky? Ale zase potom čím väčšie rozlíšenie tým bude prípadný panel vyzerať tenšie...