Autor Zpráva
cartman
Profil
Dobrý den.

Jsem v tvorbě webu celkem začátečník. Když píšu kód tak kolem všech ostatních elementů udělám obal v divu. Pokud, ale chci použít použít nějáké pozadí třeba barvu musím obalu nastavit výšku jinak se nezobrazí celé. Výšku, ale nastavovat nechci, protože když se zvětší text nebo dám do stránky více textu tak to přeteče. Je možné toto něják řešit? Popřípadě bych chtěl vědět co mi uniká.

Děkuji
Rellik
Profil
cartman:
Když píšu kód tak kolem všech ostatních elementů udělám obal v divu.
Vysvětli pořádně tuto část. Co jsou to pro tebe ostatní elementy? Jinak pokud chceš nastavovat pouze barvu, tak stačí když ji prostě nastavíš. Ten div se natáhne podle obsahu sám.
cartman
Profil
Tím myslím, že obsah, záhlaví, navigaci - zabalím do divu obal. Například takto:

  <body>
  
  <div class="obal">
   
   <div class="zahlavi">
    <h1>
     Záhlaví
    </h1>
   </div>
   
   <div class="obsah">
    
    <p>
     <p>Lorem ipsum dolor sit amet consectetuer purus In et Fusce dapibus. Tempor quis id in est quam amet ante hac accumsan neque. Mattis justo vitae Aenean Quisque id orci ante pretium pretium eu. Urna interdum Curabitur Maecenas odio Fusce nibh et mauris dictum Curabitur. Pretium Curabitur Phasellus tincidunt Vestibulum consequat leo diam sit malesuada congue. Ut.</p>

    </p>
    
   </div>
   
  </div>

  </body>
</html>

Obalu nenastavuju výšku a když chci vložit obrázek jako pozadí nebo třeba jen barvu tak se zobrazí jen v záhlaví a dál ne.
Rellik
Profil
cartman:
Obalu nenastavuju výšku a když chci vložit obrázek jako pozadí nebo třeba jen barvu tak se zobrazí jen v záhlaví a dál ne.
V tom případě děláš něco špatně.
Když to takhle zkusíš funguje to jak má:
<div class="obal" style="background-color: #dcdcdc">
   
   <div class="zahlavi" style="background-color: #cdcdcd">
    <h1>
     Záhlaví
    </h1>
   </div>
   
   <div class="obsah">
    
    <p>
     <p>Lorem ipsum dolor sit amet consectetuer purus In et Fusce dapibus. Tempor quis id in est quam amet ante hac accumsan neque. Mattis justo vitae Aenean Quisque id orci ante pretium pretium eu. Urna interdum Curabitur Maecenas odio Fusce nibh et mauris dictum Curabitur. Pretium Curabitur Phasellus tincidunt Vestibulum consequat leo diam sit malesuada congue. Ut.</p>
 
    </p>
    
   </div>
   
  </div>
Jinak ty inline styly mají být v externím souboru - tohle je jen pro ukázku... Můžeš odmazat ten styl ze záhlaví a pořád to bude obarvené celé...
waran
Profil
cartman:
Ještě jeden dotaz:
Mohl bys sem postnout i ten kód, kde to styluješ?
IMHO bude chyba tam.
cartman
Profil
Díky ještě to něják zkusím. Chtěl jsem vědět ještě jednu věc - když chci udělat tří sloupcový layout musí být všechno v plavoucím umístění nebo to můžu udělat takto - levý sloupec má nějákou velikost a plave do leva. Pravý taky tak jen plave do prava. A prostřední umístit v absolutním umístění. Je to použitelné, aby se layout nerozpadal při zvětšení písma a stránky?
Plaváček
Profil
cartman:

Ne. Dodej živou ukázku, jinak plýtváš naším i svým časem.
Rellik
Profil
Tady máš inspiraci. Ber to jako nakopávku, chce to ještě trochu doladit a hlavně udělat externí CSS soubor...
cartman
Profil
Problém tří sloupců jsem už vyřešil. Rellik díky za ukázku pomohla mi. Zkoumal jsem ten problém s obalem. Když je text normálně pod sebou tak se normálně zabarvý celý obsah, ale když je to v plovoucím umístění nejde to. Posílám příklad.

  <body>

  
 <div class="obal">
   
   <div class="zahlavi">
    <h1>
     Záhlaví
    </h1>
   </div>
   
   <div class="nav">
    <ul>
     <li>odkaz</li>
    <li>odkaz</li>
    </ul>
   </div>
   
   <div class="obsah">
    
    <p>
     <p>Lorem ipsum dolor sit amet consectetuer purus In et Fusce dapibus. Tempor quis id in est quam amet ante hac accumsan neque. Mattis justo vitae Aenean Quisque id orci ante pretium pretium eu. Urna interdum Curabitur Maecenas odio Fusce nibh et mauris dictum Curabitur. Pretium Curabitur Phasellus tincidunt Vestibulum consequat leo diam sit malesuada congue. Ut.</p>
 
    </p>
    
    <div class="nav">
    <ul>
     <li>odkaz</li>
    <li>odkaz</li>
    </ul>
   </div> 
    
   </div>
   
  </div>
 
  </body>

 
</html>

a css

.obal {
background-color: rgb(0,204,255);
width: 700px;

}

.nav {
float: left;
display: block;

}

.obsah {
float: left;

}
preca1
Profil
Zdravim,
Obtékaný prvek je vyjmut z toku dokumentu (stejně jako position: absolute).

Řeší se pomocí tzv. clearfixu.
cartman
Profil
preca1 - Díky už to mám.

Nechci zbytečně zakládat nové téma tak se zeptám tady - zkouším responzivní design. Do HTML jsem dal toto -
<link type="text/css" href="../styly/mobil.css" rel="stylesheet" media="handheld">
    <link type="text/css" href="../styly/styly_main.css" rel="stylesheet">

První je odkaz na styly pro mobil a druhý na normální styl pro počítače. Stylu pro mobil jsem určil červené pozadí namísto bílého, ale nefunguje to. Druhá věc, která mě zajímá je flexibilita obrázků na jiných zařízeních. V css jsem určil základ

img {
max-width: 100%;
height: auto;

}
, ale nedělá to požadovaný efekt - obrázek se zvětší nebo zmenší podle toho jaký je náhled. Na notebooku mi to funguje když zvětším písmo nebo stránku.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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