CSS pozicování

16. 6. 2014 18:35:11

Zdravím, jsem grafik a dělám si své portfolio. Programátor nejsem, ale něco umím na to, abych si udělal jednoduchý web. Ale s něčím mám problém.

Web mám rozdělený pouze na levé menu a vpravo obsah.

Chtěl bych, ale levé menu mělo vždy 200px a obsah vpravo, aby se přizpůsobil vždy max. šířce.

Tak jsem jednoduše vlevo nastavil width:200px a vpravo 100%. Problém je ale, že tyto dvě části už nerespektují hranice té druhé a obsah se mi rozáhne přes celou šířku webu, i pod levým menem.

Tak se ptám, jestly se dají nějak skloubit pixely a procenta, nebo jakým jiným způsobem to mám udělat?

Když jsem tam měl jen pixely, nebo jen procenta, tak bylo vše ok.

Dále bych rád aby se např. při šířce 1000 a více pixelů vytvořil vpravo třetí oddíl pravé menu.

Dělám to pomocí Media Queries a vůbec mi to nefunguje. Nenapadá vás jaké parametry jsou potřeba nastavit v tomto případě?

Díky

16. 6. 2014 18:35:11

https://webtrh.cz/diskuse/css-pozicovani-2/#reply1032354

pikolik

(3 hodnocení)

16. 6. 2014 18:54:55

ak som ta dobre pochopil, tak takto :

16. 6. 2014 18:54:55

https://webtrh.cz/diskuse/css-pozicovani-2/#reply1032353

Mkmiki

16. 6. 2014 19:18:17

Děkuji, ale nefunguje to pořád. Obrázek, který jsem tam dal na zkoušku je přes celý web, ne jen přes celý obsah.

(Jinak jsem svůj ůvodní příspěvek aktualizoval o nový problém..)

16. 6. 2014 19:18:17

https://webtrh.cz/diskuse/css-pozicovani-2/#reply1032352

Fido123

(13 hodnocení)

16. 6. 2014 19:45:06

1. Máš neuzavřený img tag.

2. Tak, jak to máš teď, tak ti ten obrázek vyleze vždycky. Musíš mu nastavit

16. 6. 2014 19:45:06

https://webtrh.cz/diskuse/css-pozicovani-2/#reply1032351

Pavel Čermák

16. 6. 2014 19:54:45

Být tebou, tak se rozhodnu jestli ta šablona bude responzivní, pak používej procenta a nebo pevně daná, pixely.

Kombinácí si akorát způsobuješ problémy, nehledě na to, že pokud bude mít někdo hodně velké rozlišení bude menu oproti obsahu velmi malé a naopak, když bude mít někdo malé rozlišení, tak bude menu oproti obsahu velké.

16. 6. 2014 19:54:45

https://webtrh.cz/diskuse/css-pozicovani-2/#reply1032350

Mkmiki

16. 6. 2014 20:09:31

Fido123: oboje jsem spravil a pořád nic.

Pavel Čermák: Já si nemyslím, že je to problém. Právě i u velkého rozlišení se mi nelíbilo, když bylo menu vetší. Stejně tak u malého se mi zdá 200px v poho.

Rád bych vyřešil jak jsem psal, ten pravý oddíl aby se zobrazil když si web někdo prohlídne při rozlišením větším 1000px.

16. 6. 2014 20:09:31

https://webtrh.cz/diskuse/css-pozicovani-2/#reply1032349

Pavel Čermák

16. 6. 2014 20:24:40

http://stackoverflow.com/questions/4296012/hide-div-if-screen-is-smaller-than-a-certain-width

Tady je řešený něco podobného, přesněji má při určitém rozměru zmizet, tak to zkus použít akorát s tím, že to prohodíš ;)

16. 6. 2014 20:24:40

https://webtrh.cz/diskuse/css-pozicovani-2/#reply1032348

Fido123

(13 hodnocení)

16. 6. 2014 20:24:55

Napsal Mkmiki;1098590
Fido123: oboje jsem spravil a pořád nic.
Pavel Čermák: Já si nemyslím, že je to problém. Právě i u velkého rozlišení se mi nelíbilo, když bylo menu vetší. Stejně tak u malého se mi zdá 200px v poho.
Rád bych vyřešil jak jsem psal, ten pravý oddíl aby se zobrazil když si web někdo prohlídne při rozlišením větším 1000px.

No a teď si nastav pro ten #page margin-left: 200px;

16. 6. 2014 20:24:55

https://webtrh.cz/diskuse/css-pozicovani-2/#reply1032347

Mkmiki

16. 6. 2014 20:36:38

Napsal Fido123;1098598
No a teď si nastav pro ten #page margin-left: 200px;

To mě mělo napadnout, díky moc.

Vyskytl se ale další problém, sice už to neleze do toho levého menu, ale těch 100% bere jako celý web. Takže to pozadí je vždy o 200pixelů širší než má být.

16. 6. 2014 20:36:38

https://webtrh.cz/diskuse/css-pozicovani-2/#reply1032346

Fido123

(13 hodnocení)

16. 6. 2014 20:40:03

Napsal Mkmiki;1098602
To mě mělo napadnout, díky moc.
Vyskytl se ale další problém, sice už to neleze do toho levého menu, ale těch 100% bere jako celý web. Takže to pozadí je vždy o 200pixelů širší než má být.

Tak u toho #page zruš width: 100%;

16. 6. 2014 20:40:03

https://webtrh.cz/diskuse/css-pozicovani-2/#reply1032345

Mkmiki

16. 6. 2014 21:06:15

Díky moc. Hloupé chyby jsem tam měl.

Pavel Čermák: zkusím to pochopit, ale bojím se, že je to pro mě už složité.

Já zkoušel pomocí Media Queries.

Příklad:

Dal jsem do toho akorát další oddíl aby se objevil. Ale nefunguje to...

Je mi jasné že to bude chtít nastavit víc věcí..

16. 6. 2014 21:06:15

https://webtrh.cz/diskuse/css-pozicovani-2/#reply1032344

Pavel Čermák

16. 6. 2014 22:10:01

Napsal Mkmiki;1098618
Díky moc. Hloupé chyby jsem tam měl.
Pavel Čermák: zkusím to pochopit, ale bojím se, že je to pro mě už složité.
Já zkoušel pomocí Media Queries.
Příklad: (@media (max-width: 780px) and (min-width: 660px){ body{ background-color: red; }}
Dal jsem do toho akorát další oddíl aby se objevil. Ale nefunguje to...
Je mi jasné že to bude chtít nastavit víc věcí..

Toto by mělo být řešení, které hledáš :)

To předchozí využívalo jquery.

16. 6. 2014 22:10:01

https://webtrh.cz/diskuse/css-pozicovani-2/#reply1032343

Mkmiki

17. 6. 2014 17:03:54

Super, moc díky ! ;)

Akorát mě přestalo fungovat zafixování toho oddílu, aby se nescroloval, když dám position:fixed, tak se to rozhodí.

(Teď se mi ještě stala jedna věc, na kterou řešení asi existovat ani nebude... Mám retina rozlišení na svém macbooku, takže web mi to přepočítává 2x. Například když jsem dal levé menu 200px, tak ve skutečnosti na mém monitoru má 400px, aby byl cca stejně široký jako 200px na non-retina monitorech. Teď se ale stala věc, že to minimální rozlišení 1000px odkdy se má objevit pravý oddíl, mi bere skutečných 1000px. Takže na mém monitoru se objeví pravý oddíl v momemntu, kdy je obsah ještě docela dost úzký.)

Pokud by někdo měl ještě trpělivost, tak jsem si na web nahrál externí fonty, které ale nefungují.

Takhle to mám udělané:

@font-face {
font-family: Raleway-Medium;
src: url url(Fonts/Raleway-Medium.ttf);
}

A podle toho jak se to má dělat, bych to měl mít dobře..

17. 6. 2014 17:03:54

https://webtrh.cz/diskuse/css-pozicovani-2/#reply1032342

Fido123

(13 hodnocení)

17. 6. 2014 17:30:51

K tomu fontu, máš tam všude dvakrát url a jeden máš špatně pojmenovaný

K tomu dalšímu, Pavel Čermák ti už psal, že si s těma pixelama u responzívního webu zaděláváš na problémy, ale odepsal jsi mu, že si nemyslíš, že je to problém, tak si poraď :) Anebo používej všude procenta a je to.

17. 6. 2014 17:30:51

https://webtrh.cz/diskuse/css-pozicovani-2/#reply1032341

Mkmiki

17. 6. 2014 17:39:38

Je vidět že bych nemohl být programátor, to sou trapné chyby..:D

Jinak to co sem psal s retinou není až takovej problém.

Myslím že v jaké podobě to mám, se to pěkně zobrazí jak na malé, tak velké obrazovce.

Moc vám děkuji za pomoc.

17. 6. 2014 17:39:38

https://webtrh.cz/diskuse/css-pozicovani-2/#reply1032340