Autor Zpráva
Jamares
Profil *
Zdravím, na stránce: http://gaarners.bluefile.cz/pages/serial.html , je levé menu, za kterým se schová text když se prohlížeč třeba zmenší nebo když má někdo jiné rozlišení. Chtěl bych to tak, že až text z leva narazí na levé menu, tak nepojede za něj, ale zastaví se u něho. Je to asi jednoduché, ale já na to nepřišel. Díky.


*oprava: myslel jsem text Z PRAVA, ne z leva.
Tomáš123
Profil
Jamares:
Prvku, ktorý obaľuje obidva stĺpce stačí pridať deklaráciu min-width: xx px, ktorej hodnota má zodpovedať súčtu šírky stĺpca a obsahu tesne predtým, než sa zlejú dokopy.

Tebe by sa ale hodilo v takom prípade posunúť obsah do strany (kde je iba prázdne miesto). Bohužiaľ však, so súčasnou štruktúrou tvojej stránky to nejde. div.content je totiž vystredený pomocou deklarácie margin: auto, čo mu znemožňuje akýkoľvek posun. Lepšie by bolo použiť CSS vlastnosť float. Ako príklad takejto štruktúry si pozri jednoduchú ukážku.
Jamares
Profil *
Pomohli byste mi to upravit, když to css mám takhle:

#sidebar {
    margin-right: auto;
    margin-top: auto; 
    position: absolute;
    background: white;
    width: 195px;
    height: 55%;
    box-sizing: border-box;
   -moz-box-sizing: border-box;
}
#sidebar ul { 
    margin-top: 60px;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;
}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: black;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #000010;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
    background: #C9223D;
}
/*konec leveho menu /*
Tomáš123
Profil
Jamares:
Pridané CSS je v tomto prípade irelevantné. Problém štruktúry je v tom, že nemá vhodný obaľovací prvok. Teoreticky je možné učiniť obaľovacím elementom prvok <body> a deklarácie nastavené jemu posunúť vyššie ku <html>. Obaľovací prvok musí poskytovať hranice (teda má mať nastavenú šírku) obsahu (aby sa nemusel centrovať pomocou deklarácie margin: 0 auto), ktorý sa sám ako blokový element roztiahne na celú šírku. Potom ho stačí marginom odsadiť zľava, aby sa neprelínal s navigáciou.

Alternatívne môžeš v kóde vytvoriť nový obaľovací prvok (napríklad <div>) a potrebnú šírku deklarovať jemu. Je to na tebe.

Chcem, aby si to najprv skúsil sám, takže porozmýšľaj a príď späť až keď narazíš na reálny problém alebo ak nebudeš rozumieť. Celé to za teba neurobím. :-)
Jamares
Profil *
Upřímně si moc nevím rady. Zkoušel jsem nastavovat menu a sloupci z textem, content min min-width a nebo margin-left, u marginu-left se mě to potom sice do menu neleze, ale zase je to na místě a nehýbe se to. Nemužete mi prosím poradit, kam a co přesně umístit, aby to menu bylo pevné. Děkuji.
Sennin
Profil
Nazdar Jamares
Niečo takéto máš na mysli? Pohled na 2015 alebo chceš aby obe stáli na svojom mieste a len tam sa stiahli podľa toho aká je momentálna veľkosť okna.

Nemal som čas na to ísť prednostne ale ak budeš chcieť pomôžem.... ináč máš veľa chýb kontroluj si ich po sebe :)

Test na kod.djpw.cz
Tomáš123
Profil
Jamares:
Dobre teda. Upravil som to tak, ako si praješ. V HTML som pridal obaľovací <div> s identifikátorom obal, ktorého deklarácie sú v CSS na riadkoch 20 a 21. Šírku som nastavil podľa najširšieho prvku na stránke, ktorým je div#menu-box. Ku div#content som pridal ľavé vonkajšie odsadenie margin: 200px a zrušil deklaráciu šírky, ktorá je zbytočná. To je asi všetko. Tu je ukážka: Pohled na 2015 . Po odstránení pomlčky na konci možno ukážku editovať.
Jamares
Profil *
Díky moc, konečně to funguje.
Sennin
Profil
Jamares:
Uteká ti menu pretože si ul nastavil width: 1200px; pritom obal máš width: 1102px a #menu-box width: 1102px buď mu nastav 100% alebo 1102px

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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