HTML/CSS pruh v One page

30. 11. 2015 15:03:28

Zdravím, mám dotaz k vytvoření třídy na one page webu.

Mám část v obalu, která má: width:100%;, ale chtěl bych před to na začátek udělat 176px pruh (dejme tomu lištu na výšku, která je na levém okraji), pokud použiji float - sesype se celý web. Dokázal by někdo poradit s drobností? Popř. bych poslal screeny na Skypu, děkuji za pomoc všem koderům.

30. 11. 2015 15:03:28

https://webtrh.cz/diskuse/html-css-pruh-v-one-page/#reply1156237

i-PRESS

(2 hodnocení)

30. 11. 2015 15:26:51

Kodér nejsem, ale stejně zkusím střelit... Bez živé ukázky těžko říct, ale pokud má ten obal position: relative, mohlo by jít uvnitř něj něco jako #strip {position: absolute; top: 0; left: 0; width: 176px;} a obal samozřejmě odpovídající levý padding..

EDIT: https://jsfiddle.net/hopnpchd/

30. 11. 2015 15:26:51

https://webtrh.cz/diskuse/html-css-pruh-v-one-page/#reply1156236

MichalG

30. 11. 2015 15:50:31

v html mám:

V CSS:

#strip {position: absolute; top: 0; left: 0; width: 176px; background-image: url("obrazky/vesmir.jpg");}

#cast2 {

width: 100%;

height: 990px;

background-image: url("obrazky/bunka.jpg");

background-size:cover;

background-repeat: no-repeat;

color: black;

font-size: 16px;

line-height: 45px;

padding-top: 30px;

text-align: center;

}

30. 11. 2015 15:50:31

https://webtrh.cz/diskuse/html-css-pruh-v-one-page/#reply1156235

i-PRESS

(2 hodnocení)

30. 11. 2015 16:02:16

Tak jestliže nastavíte něčemu 100% šířku, těžko mu můžete něco postavit do cesty.. Buď přesuňte strip dovnitř dle ukázky výše, nebo to floatujte dle procent, případně obalte cast2 jiným divem ve kterém bude ten absolutně pozicovaný pruh + left padding.

30. 11. 2015 16:02:16

https://webtrh.cz/diskuse/html-css-pruh-v-one-page/#reply1156234

Malcánek Jan

(4 hodnocení)

30. 11. 2015 16:33:51

Co zkusit použít funkci calc() v css? Vypadalo by to pak asi nějak takto:

30. 11. 2015 16:33:51

https://webtrh.cz/diskuse/html-css-pruh-v-one-page/#reply1156233

i-PRESS

(2 hodnocení)

30. 11. 2015 16:43:56

Jojo, na calc jsem nevzpomněl, to by mělo zafungovat ;) Jen pozor, že na mobilu funguje pořádně tuším až od verze 5 a kolem mě je stále spousta lidí s nějakými android 2.1/2.3 :D

30. 11. 2015 16:43:56

https://webtrh.cz/diskuse/html-css-pruh-v-one-page/#reply1156232

Branislav Kacer

(2 hodnocení)

30. 11. 2015 19:39:13

Nie je treba pouzivat calc v pripade kedy sa to da jednoducho vyriesit sposobom aky popisal vyssie i-PRESS. Urcite je to najlepsi a najkompatibilnejsi sposob

30. 11. 2015 19:39:13

https://webtrh.cz/diskuse/html-css-pruh-v-one-page/#reply1156231

Matúš Markusek

(10 hodnocení)

1. 12. 2015 08:57:20

Absolútne pozíciovanie a z-index stačí, pokiaľ chcete ten panel "nad obsahom". Netreba žiadne calc ani podobné vychytávky. Len si treba samozrejme takto dať pozor na prekrývanie obsahu hlavného contentu. Avšak aj to sa dá potom obísť napríklad použitím ľavého paddingu v cast2.

https://jsfiddle.net/04ho5o0o/

Pokiaľ chcete aby ten bočný panel bol zobrazý stále, i keď scrollujete, tak stačí použiť position: fixed;

1. 12. 2015 08:57:20

https://webtrh.cz/diskuse/html-css-pruh-v-one-page/#reply1156230

Pro odpověď se přihlašte.

Přihlásit