Autor Zpráva
Hlupyclovek:)
Profil *
Dobrý deň,

Som dosť velký nováčik vo vytvárani webových stránok, no predsa kúsok z nej viem, ciže som sa pustil do CSS. Mám jeden problém neviem ako ho vyriešiť. Robím si stránku, je to len tak, na skúšku, nieje to žiaden projekt, len tam si chcem dať nejaké info, a dúfam, že to budem postupne uploadovať a niečo sa naučím z robenia webstránok. V mojom 17" monitore vyzerá moja stránka asi takto , ale predpokladám, že v ostatných rozlíšeniach, je to úplne rozhádzané. Prosím pozrite sa mi na [url=www.fullamd.wz.cz]to[/url]. Nejaký link, kde by to ukazovali ako to napraviť. A ešte mám jednu otázku. Keď tam napchám veľa textu, ten div, sa mi nejak nerozširuje, dalo by sa nastaviť cez ten repeatx, ak áno tak ako prosím?

Ďakujem vopred :)
Hlupyclovek:)
Profil *
http://yfrog.com/1frozsireniej / v IE keď dám veľa textu, tak sa to síce pekne rozšíri, ale je ot strašne rozhádzané. A ešte ako by som to mohol spravit, aby ked sa rozšíri obsahovy div, aby sa rozšíril aj ten s menu :(.

ďakujem..
panther
Profil
Hlupyclovek:):
nepozicuj, nezadávej pevné výšky a místo obrázků dávej odkaz na problematický web.

Teď ke konkrétnímu problému:
Ty dva divy nech jen floatovat, pod nimi nazepomeň vyclearovat.
Hlupyclovek:)
Profil *
Nemohli by ste mi poradiť presnejšie?
/* CSS Document */
.header {
text-align:center;
color:red;
float:left;
background-color:black;
border:3px solid #FF0000;
padding: 20px; 20px; 20px; 20px;
position:absolute; top: 75px; left:175px;
width:900px;
}
.menu {
text-align:left;
float:left;
color:red;
background-color:black;
border:3px solid #FF0000;
position:absolute; top:200px; left: 175px;
height: 550px;
background-repeat:repeatx;
width:200px;
 }
.obsah{
background-color:black;
color:red;
border:3px solid #FF0000;
position:absolute; top:200; left:375px;
width:740px;
height:550px;
float:left;
}



Tak to mám nastavené. Nemohli by ste mi prosím napísať čo tam mám zmeniť? Písal som, že som v tomto obore začiatočnik,

Ďakujem
Hlupyclovek:)
Profil *
Tak prepáčte už som sa zaregistroval, aby som mohol editovať. Čiastočne som tú dĺžku textu vo Firefoxe, dal som min-height, čiže ten text rozšíril div. Ale neviem nastavit aby sa dĺžka divu MENU rovnala dĺžka divu Obsah...
Hlupyclovek
Profil
Lenže ako som si všimol v IE zase ten div zmenšilo, ja fakt neviem čo s tým :(
panther
Profil
Hlupyclovek:
Ale neviem nastavit aby sa dĺžka divu MENU rovnala dĺžka divu Obsah
na to CSS nemá nástroje, simuluje se to jen obrázkem na pozadí - to si můžeš najít, řeší se to tu co chvíli.

Nemohli by ste mi poradiť presnejšie?
platí, co jsem napsal výše [#3]: „nepozicuj, nezadávej pevné výšky [...] Ty dva divy nech jen floatovat, pod nimi nezapomeň vyclearovat.“

Ano, mohl bych ti napsat upravený kód, ale pro tebe bude lepší, když jej s nápovědou vymyslíš sám.
Hlupyclovek
Profil
1. No ja photoshop nemám a neviem ako by som urobil 3px v skicáry.
2. Keď nemám zadávať pevné šírky, tak to mám urobiť pomocou margin a padding? A ohľadom pozicovania, ako mám potom nastaviť aby to vyzeralo tak, ako chcem :)?
3. Ako vidíš skúšal som dať clear:left clear:both clear:right, no nepomohlo mi to, tak som dal ten parameter min - aby to nebola pevná výška a aby to text roztiahol, lenže keď som to dal na menu min-výška 550px tak sa mi to zmenší len na ten text.. Tak keď vidíte, že sa s tým trápim už dosť dlho, mohli by ste mi napísať aj ten kód:)
panther
Profil
Hlupyclovek:
1. No ja photoshop nemám a neviem ako by som urobil 3px v skicáry.
na černý obrázek s 3px červeným proužkem nepotřebuješ Photoshop, postačí ti freewareový Gimp nebo malování.

2. Keď nemám zadávať pevné šírky
šířky ano, psal jsem o výšce.

A ohľadom pozicovania, ako mám potom nastaviť aby to vyzeralo tak, ako chcem :)?
s tím si hraj - když dám oběma blokům „float: left“, budou vedle sebe. Co víc chceš? Samozřejmě, pohraj si potom s marginy, paddingy, aby byl výsledek přesně jaký chceš.

tak som dal ten parameter min - aby to nebola pevná výška
to není úplně šťastné - proč mám koukat na 550px vysokou stránku, která je prázdná? Zbytečné.

3. Ako vidíš skúšal som dať clear:left clear:both clear:right, no nepomohlo mi to
no dobrá. Tady máš kostru toho, co chceš. Jde to bez výšek, pozicování. Na pozadí bude černý obrázek s červeným pruhem, který se natáhne podle delšího z divů.
<div style="width: 900px; background: #000 url('obrazek-cerny-s-cervenym-pruhem.jpg') repeat-y">
<div style="width: 200px; float: left;">menu</div>
<div style="width: 700px; float: left;">obsah</div>
<br style="clear: both;">
</div>
Hlupyclovek
Profil
Čize, ak to mám chápať dobre, tak 2. a 3. riadok, mám napísat do divu menu a obsah, a v tom prvom dive, majú byť ohraničený 2 divy...
panther
Profil
Hlupyclovek:
ak to mám chápať dobre
nechápej, ale přemýšlej.

To, co jsem napsal, dáš místo těch tvých dvou divů. To, co jsi tam měl ty, nahradíš tímto. (je to jen kostra, chybí tam header - ten bude nad tímhle celým, pod tím bude patička)
Hlupyclovek
Profil
Hm no tak mi vyšlo toto, teraz tam mám napchať padding a margin, a bg color, alebo ako .. www.fullamd.wz.cz/hm/index.html
panther
Profil
Hlupyclovek:
Hm no tak mi vyšlo toto
ano, tak je to správně.

teraz tam mám napchať padding a margin, a bg color, alebo ako
jestli je tam chceš, tak ano.

Na pozadí jsem psal cosi o obrázku, ten si udělej sám (je to otázka asi 20 sekund). Proč má header absolutní pozici? Pak se nediv, že je tam, kde je.

To, že zkopíruješ, co ti napíšu, ti je k ničemu, nic se tak nenaučíš. Kostru a dobrou radu jsem ti dal, teď si s tím chvíli hraj, přijdeš na to (chvílí nemyslím 10 nebo 20 minut, ale den, týden...).
Hlupyclovek
Profil
No pozrite sa prosím vás na www.fullamd.wz.cz, no už to mám cca tak v exploreri, je to úplne rozhádzané, ale najprv by som chcel vyriešiť tento problém. Už som urobil aj ten obrázok,
.neviem {
width: 900px;
 background: #000 url('mato.jpg') repeat-y;
   background-color:black;
 }

Ale fakt nemám potuchy, keď nemám dávať výšku ako by som mohol dať minimálnu výšku..Aby menu bolo ZAROVNO s obsahom, a nie menu má 200px a obsah 1000px, predsa ako to vyzerá...

Obrázok - http://www.fullamd.wz.cz/mato.JPG
panther
Profil
Hlupyclovek:
1. proč tam pořád cpeš ty bordery (u menu pravý, u obsahu levý)? Místo nich tam bude obrázek, aby ta čára byla stejně dlouhá jako delší z panelů.
2. [#14] „background-color:black;“ - toto tam máš navíc, je to o řádek výše to „#000“.
3. kam se vytratil ten div, který má „menu“ a „obsah“ obalovat (viz [#9])?
4. Cleaner má ukončit floatování prvků, má tedy být pod nimi, ne ve druhém z nich (viz [#9])
4. Proč je div „neviem“ prázdný? Copak já mám v [#9] ten div prázdný? Nemám, „menu“ a „obsah“ je uvnitř něj.

ako by som mohol dať minimálnu výšku
proč sem pořád cpeš minimální výšku? Když tam nebude obsah, proč na mě má zírat 500px čern obrazovky? Je to zbytečné - minimální výška se zadává jen pokud je nutné zachovat nějakou výšku např. kvůli grafickým prvkům. U tebe u tohoto konkrétního webu je (minimální) výška zbytečná.
Hlupyclovek
Profil
Ja sa to chcem práveže naučit, šak predsa nebudem mať ten web naozaj, len chcem si niečo robiť a na tom budem zdokonalovať svoje schopnosti, teraz robim napríklad v tom css, postupne to vylepším tlačítkami, nejakým php kódom a tak to bude postupne pribúdať.
PS: Dik, že so mnou strácaš čas, som blbec, tak mi treba dopodrobna
Pozri ako to vyzerá ja som na koncoch síl s týmto .(
panther
Profil
Hlupyclovek:
proč tam cpeš věci (např. velký levý margin u obsahu), o kterých jsem ti nepsal?

Tak znovu:
<body style="text-align: center;">
<div style="width: 900px; margin: 0 auto; text-align: left;"><!-- obalovy div kvuli centrovani -->
    <div style="width: 900px; height: 70px; background: red;>HEADER</div>
    <div style="width: 900px; background: #000 url('obrazek-cerny-s-cervenym-pruhem.jpg') repeat-y"><!-- neviem -->
        <div style="width: 200px; float: left; background: green">MENU</div>
        <div style="width: 700px; float: left; background: blue">OBSAH</div>
        <br style="clear: both;">
    </div><!-- konec neviem -->
    <div style="width: 900px; height: 70px; background: red">PATICKA</div>
</div>
</body>


Myslím, že jsi nepochopil, jak funguje float [#3], odkazoval jsem ti článek, který by ti měl problematiku osvětlit. Pak bys tam ten velký margin necpal.

Barvy jsem doplnil, aby viděl, jak je který z divů ve skutečnosti velký, byť s obrázkem na pozadí budou vypadat stejně dlouhé.
Hlupyclovek
Profil
Čítal som si ten článok je to obtékaní, a do toho priestoru kde to obtéká, nemôže nič iné nie?
Ja v tom mám trochu nejasno, používam ext. stylopis :((
panther
Profil
Hlupyclovek:
tady máš i odkaz na funkční ukázku kódu napsaného výše [#17].
Hlupyclovek
Profil
Panther, diky veľmi pekne, tak som si to presne predstavoval, ale mám ešte otázku na teba. Ako nastavím aby tam bola minimálna výška ako tento web napríklad. Je tam stále minimum napr. 500px, a keď viac textu tak sa to začne proste repeatovat.. Tu
panther
Profil
Hlupyclovek:
Ako nastavím aby tam bola minimálna výška ako tento web napríklad.
asi potřetí se ptám: Proč tam minimální výšku potřebuješ? Budeš mít 2 řádky obsahu, tak nepotřebuju pod nimi vidět 400px volného místa. Dá se na to použít min-height, ale IMHO je to u tvého webu blbost.

Vymysli si vhodný obsah, nebudeš muset uměle nastavovat délku webu.
Hlupyclovek
Profil
http://fullamd.wz.cz/ Ako mám urobiť aby tá čiara išla aj vyššie?
panther
Profil
Hlupyclovek:
Ako mám urobiť aby tá čiara išla aj vyššie?
neptej se a přemýšlej.

Ten obrázek tam je pořád, něco jej pravděpodobně překrývá. Není těžké přijít na to, co to je.


Musíš zkoušet, co se stane, když změníš jednu věc, co se stane, když změníš druhou věc. Nebudu ti všechno říkat - u sebe mám funkční příklad, z něhož můžeš vycházet. Stačí se podívat, cos tam přidal oproti mně.
Hlupyclovek
Profil
No tak, vobec neviem, cela ta ciara zmizla, a uz ju neviem dostat spat ...
Keby ste mi chceli poradit, je to na www.fullamd.wz.cz css - www.fullamd.wz.cz/css.css :(

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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