Autor Zpráva
jeromek
Profil
#1 · Zasláno: 2. 8. 2010, 11:59:00
Odpovědět Citovat
Dobrý den,

Chtěl bych se zeptat na názor zkušených co se týče kódu i designu stránek(i když ten se ještě bude dodělávat). Nějak jsem nevěděl jak jinak pořešit danou situaci s pozadím a obalem stránky který má držet obsah vystředěný. Vše sedí jak má, až na IE 6, jak toto odstranit zatím opravdu nevím(za každou radu budu velmi vděčen).

Jěště jedna doplňující otázka. Používám hvězdičkový reset, v nějakém článku na který byl odkaz zde v diskuzi jsem se dočetl že při stylování formulářů je hvězdičkový reset zcela rozhodí. Tak jestli s tím má někdo zkušenosti, taky budu vděčen za každou radu.

odkaz: http://jeromek.4fan.cz/

css: 
*{
margin: 0px;
padding: 0px;
}

body {
text-align: center;
background-color: white;
}

p {
padding: 20px;
}

div.obal{
width: 960px;
margin: 0 auto;
text-align: left;
}

div#menu{
background:url('grafika/menu-bg.png') repeat-x;
height: 56px;
}

div#hlavicka{
background:url('grafika/hlavicka-bg.png') repeat-x;
height: 239px;
}

div#obsah{
background:url('grafika/obsah-bg.png') repeat-x;
background-color: #d4d4d4;
}

div#paticka{
background:url('grafika/pata-bg.jpg') repeat-x;
height: 88px;
}

ul#nav{
  list-style: none;
  padding: 20px 0;
  }

  ul#nav li{
    display:inline;
    
  }
    ul#nav li a{
    display: block;
    height: 48px;
    width: 150px;
    float: left;
    padding-left: 70px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    }

div#logo{
background:url('grafika/logo.jpg') no-repeat;
width: 643px;
height: 206px;
margin: 0 158px 0 158px;
}

div#logo a{
display: block;
width: 643px;
height: 206px;
}


html: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">;
  <link rel="stylesheet" type="text/css" href="styl.css">
  <title></title>
  </head>
  <body>
  
  
    
    <div id="menu">
        
        <div class="obal">
           
           <ul id="nav">
               
               <li><a href="#">blabla</a></li>
               <li><a href="#">blabla</a></li>
               <li><a href="#">blabla</a></li>
               <li><a href="#">blabla</a></li>
           
           </ul>
        
        </div>
    
    </div>
    
    <div id="hlavicka">
      
      <div class="obal">
          
          <div id="logo">
            <a href="http://www.seznam.cz"></a>
          </div>
      
      </div>
    
    </div>
    
    <div id="obsah">
      
      <div class="obal">
        
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet iaculis sapien lacinia pharetra. Cras scelerisque tortor quis turpis posuere ullamcorper. Nam dictum tristique velit eu volutpat.
        Fusce non tempor justo. In lobortis convallis tellus, in lobortis erat euismod in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac tincidunt ipsum. Donec ut neque eget felis posuere vehicula id nec purus. Cras et imperdiet nulla. 
        Mauris mattis aliquet rhoncus. Duis luctus ante at dolor cursus ornare. Cras ut nibh lacus. Proin pulvinar tortor sed libero consequat varius vulputate vel libero. Phasellus elementum, purus id tincidunt fringilla, odio urna lobortis nunc, 
        vitae blandit nunc diam in lacus. Aenean orci orci, mollis vitae sollicitudin vitae, placerat vulputate metus. 
        </p>
        
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet iaculis sapien lacinia pharetra. Cras scelerisque tortor quis turpis posuere ullamcorper. Nam dictum tristique velit eu volutpat.
        Fusce non tempor justo. In lobortis convallis tellus, in lobortis erat euismod in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac tincidunt ipsum. Donec ut neque eget felis posuere vehicula id nec purus. Cras et imperdiet nulla. 
        Mauris mattis aliquet rhoncus. Duis luctus ante at dolor cursus ornare. Cras ut nibh lacus. Proin pulvinar tortor sed libero consequat varius vulputate vel libero. Phasellus elementum, purus id tincidunt fringilla, odio urna lobortis nunc, 
        vitae blandit nunc diam in lacus. Aenean orci orci, mollis vitae sollicitudin vitae, placerat vulputate metus. 
        </p>
        
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet iaculis sapien lacinia pharetra. Cras scelerisque tortor quis turpis posuere ullamcorper. Nam dictum tristique velit eu volutpat.
        Fusce non tempor justo. In lobortis convallis tellus, in lobortis erat euismod in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac tincidunt ipsum. Donec ut neque eget felis posuere vehicula id nec purus. Cras et imperdiet nulla. 
        Mauris mattis aliquet rhoncus. Duis luctus ante at dolor cursus ornare. Cras ut nibh lacus. Proin pulvinar tortor sed libero consequat varius vulputate vel libero. Phasellus elementum, purus id tincidunt fringilla, odio urna lobortis nunc, 
        vitae blandit nunc diam in lacus. Aenean orci orci, mollis vitae sollicitudin vitae, placerat vulputate metus. 
        </p>
        
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet iaculis sapien lacinia pharetra. Cras scelerisque tortor quis turpis posuere ullamcorper. Nam dictum tristique velit eu volutpat.
        Fusce non tempor justo. In lobortis convallis tellus, in lobortis erat euismod in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac tincidunt ipsum. Donec ut neque eget felis posuere vehicula id nec purus. Cras et imperdiet nulla. 
        Mauris mattis aliquet rhoncus. Duis luctus ante at dolor cursus ornare. Cras ut nibh lacus. Proin pulvinar tortor sed libero consequat varius vulputate vel libero. Phasellus elementum, purus id tincidunt fringilla, odio urna lobortis nunc, 
        vitae blandit nunc diam in lacus. Aenean orci orci, mollis vitae sollicitudin vitae, placerat vulputate metus. 
        </p>
      
      </div>
    
    </div>
    
    <div id="paticka">
    </div>
    
  

  </body>
</html>
Stanley
Profil
#2 · Zasláno: 2. 8. 2010, 15:24:05
Odpovědět Citovat
jeromek:
1. věc: přijde mi, že není dodělané menu, písmo mi tam vůbec nesedí a jsou tam přílis velké mezery.
2.vec: zkus si vypnout obrázky a kliknout na nějakou položku v menu. usíš myslet na to, že když má někdo zakázané obrázky, měl by vidět alespoň text, a to čitelně! Ty máš bálý text na bílém pozadí..
3.věc: nechybí ti něco v patičce ?
4.věc: Na stránce nebudeš mít žádné nadpisy a odkazy ?

Design na mě celkově působí, že si na něm nestrávil moc času, je to takový na rychlo udělaný.
jeromek
Profil
#3 · Zasláno: 2. 8. 2010, 15:57:06
Odpovědět Citovat
Stanley

JJ to je čirá pravda. Mne v tom dotazu jdo o to (asi jsem to nevyjádřil nejlepším způsobem) zda-li je vhodně nakódované pozicování. Konkrétně je-li vhodné takovéto použití třídy obal a vkládání ji do každé části (hlavika, menu, obsah...) ? Je to opravdu udělané vše dost narychlo a práce na tom bude ještě jak na kostele.
aduben
Profil *
#4 · Zasláno: 2. 8. 2010, 17:00:02
Odpovědět Citovat
jabka hrušky.......
proč ty sekektory nezjednodušíš?
#obsah místo div#obsah
#paticka místo div#paticka....atd
Co je v IE špatně? V mém prohlížeči se to centruje.........
To bylo jenom stručně ke kodu, o designu bych nemluvila, je to prázdný, na co to má bejt?
jeromek
Profil
#5 · Zasláno: 2. 8. 2010, 17:13:12 · Upravil/a: jeromek
Odpovědět Citovat
aduben:
Jsem fakt celkem nováček, ale pokud ten kód otevřu za rok, budu hned vědět co se k čemu vztahuje. Proto mám např. :ul#nav ,hned vim. Ale je to spiš styl který jsem přejal. Myslíš, že je to nějaká výraznější chyba ?
Je to jen taková řekněme pokusná stránka.

Chyba je v IE 6, mezi divem menu a hlavička je mezera.
aduben
Profil *
#6 · Zasláno: 2. 8. 2010, 17:57:05 · Upravil/a: Moderátor (editace znemožněna)
Odpovědět Citovat
jeromek:
„Chyba je v IE 6, mezi divem menu a hlavička je mezera.“
Je tam malá mezera, ale vzhledem k tomu, že je tam vše ostatní, jak má bejt, neřešila bych to,myslím že pro IE6 je to optimum.
Ale pokud to chceš mít dokonalý vzhledově i pro IE 5,5 a 6, doporučila bych klidně nějakej hack.
Koukni třeba tady.
Linbor
Profil
#7 · Zasláno: 2. 8. 2010, 21:07:53
Odpovědět Citovat
Nemusíš vypisovat zdrojáky, to si každý může otevřít sám.
Nevím, co mám hodnotit. Žádný obsah, žádná náplň. Jen základní rozvržení, nezačaté, syrové.
V textovém režimu dokonce ani žádné menu, žádné logo, žádný nadpis.
A což takhle copyright? Neztratil se?
Nedokáži hodnotit..
Snad až tomu dáš víc práce, tady jsi v sekci hodnocení kompletně vytvořeného webu..
Časová prodleva: 14 let

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0