[CSS] % vs pixel responsive

Situacija:

Srednji image naj bo vedno pozicijoniran v sredini 980px containerja. Meni1+2 in Menu3+4 se ožata glede na širino viewport.

Trenutno:

#left #nav,
#right #nav {
width: 47%;}

#center {
width:6%;}

Kako bi lahko #center divu določil fiksno širino?
Če ga določim s procentom se zgodi tole. Če pa mu določim fiksno širino pa skoči #right #nav v naslednjo vrstico.

Ima kdo kakšno idejo?

Hvala...

15 odgovorov

Kaj pa če daš levemu in desnemu max-width namesto width? Sredinskemu pa pustiš width.

Nič kej dost ne rešim s tem :/
Mogoče pa obstaja kakšna mal bolj out of the box rešitev?

Morda se hecno sliši, ampak tole bi lahko probal rešiti kar s tabelami, oz če si alergičen na njih, display:table; Potem bi verjetno šlo.

14

Čisto enostavno (brez tabel):
- levega floataš levo (brez širine)
- desnega floataš desno (brez širine)
- center centriraš z margin:o auto

Poglej si tukaj: http://jsfiddle.net/xM2J7/1/

2

napaka je v seštevku zgornjih #nav elementov.. verjetno si skopiral responsive grid css (seštevek znotraj 980px) zato potisne v naslednjo vrstico.

@torek
kul ideja, ampak nevem zakaj v mojem primeru ne štima:

poglej:

jsfiddle

@Draganache
seštevki so okej ampak center element ima samo 6% širine, v primeru 980px je to dovolj, kar je pa ožje pa zmanjka prostora in se element premika v desno.

center div daj za nav right pa bo ...

http://jsfiddle.net/BRbAX/1/

1

To bo to :)

Hvala vam mučas!

Mojstri, jaz imam eno morda smesno vprasanje. Zadnje case se vse bolj posvecam izdelavi lastnih templatov za kaksne plugine, module... Sedaj pa delam tudi en preprost html landing page. Css mi kar lezi, vendar pa se vedno ne razumem razlike med class in id? Za oblikovanje divov sem do sedaj vedno uporabil id in nato v cssju #imeidja... Ampak drugi uporabljajo oboje. Mi lahko kdo po domace razlozi razliko in zakaj se uporabljata oba atributa skupaj?

Hvala vam, pa ne se smejat :)

1

Razlika je v tem, da so IDji unikatni, classi pa ne. To pomeni, da ima lahko samo en element en ID, medtem ko lahko en class uporabiš na večih elementih.

Dolga razlaga: http://css-tricks.com/the-difference-between-id-and-class/

2