Autor Zpráva
radim24
Profil *
Ahoj,
mohl by mi někdo poradit proč se mi pravý sloupec nezarovnává doprava vedle levého sloupce?
Dík

<div id="content">
   <div id="main" class="column_MR_M">
   <div id="right" class="column_MR_R">


http://web-design.rozhled.cz/test/index.php?id=fotoalbum_preview&dir=maternity&sub=19th
panther
Profil
radim24
Nějak se v těch tvým <div>ech ztrácím..

Máš u toho levého sloupce levý float, nepřebývá ti tam cleaner?
radim24
Profil *
float:left; tam není úmyslně.

Viděl jsem na netu příklad pomocí DIV, kde jsou tři sloupce:
1. float:left; 2. float:none; 3. float:right;
když jsem tu jejich stránku upravil, tak jsem měl sloupce:

1. float:none; 2. float:right; a fungovalo to.

Tak jsem se to pokusil napodobit. Teoreticky je to velmi snadné. To samé vlastně funguje i na Benčíkovu weblogu:

http://bencik.ic.cz/bw2.html

kde sloupec hlavičky:
Nejčtěnější

* Lorem ipsum dolor sit amet - 22.9.2008
* Phasellus sapien nibh ultricies - 22.9.2008
* Consectetuer adipiscing elit - 22.9.2008
* Duis ut lorem eu sem venenatis - 22.9.2008
* Lorem ipsum dolor sit amet - 22.9.2008


je posunut doprava pomocí float:right;


takže proto tam float left nenajdeš. Nemohu tam float left použít protože to chci centrovat.
tiso
Profil
radim24 - centrovanie sa robí inak...
SwimX
Profil
radim24
Nevím jak je řešen Benčíkův weblog, ale proč to neudělat nějak takle:
<style>  h1{float:left; width: 500px;}
  p{float:right: width: 200px;}
  .cl{clear: both;}
</style>
<h1>Nadpis</h1><p>Ten text co chces mit vpravo<p>
<br class='cl'>
radim24
Profil *
tiso
Vím jak se dělá centrování, mám to na web-design.rozhled.cz.

Tělo stránky je centrované a pak se vloží DIV se zarovnáním doleva.


SwimX
Te´d jsem to psal, že nemohu použít float left; Levý sloupec musí být centrovaný.
SwimX
Profil
radim24
    <style>
      body{text-align: center;}
      #main{margin: 0 auto; width: 760px; text-align: left; background: grey;}
      h1{float:left; width: 500px; background: red;}
      p{float:right; width: 200px; background: green;} /* edit: chyběl mi středník */
      .cl{clear: both;}      
    </style>
    <div id="main">
      <h1>Nadpis</h1><p>Ten text co chces mit vpravo<p>
      <br class='cl'>
    </div>
panther
Profil
radim24
Vím jak se dělá centrování, mám to na web-design.rozhled.cz...
...Levý sloupec musí být centrovaný.

teď ani nevím, co je tvým cílem. Víš, ale nevíš, jak se centruje, víš, ale nevíš, co chceš. Zkus se vyjádřit nějak pořádně ;-)
radim24
Profil *
Tak to zkusím znovu.

Jediné co na těch stránkách má floutovat (floatovat) je ten pravý sloupec doprava.

V levém sloupci mají být ikony. V závislosti na nastavení stránek tam budou buď dvě ikony nebo tři ikony v jednom řádku. Vlastně jde o sloupce ikon, podobně jako tady na těchto stránkách:

http://www.encyklopediepsu.cz/
kde v levém sloupci "Řazeno dle abecedy" jsou ikony s popiskama po sloupcích. Jediný rozdíl mezi touto stránkou a tomu mou je, že v mém případě levý sloupec s obrázkama má být šiřší a nepoužívá se tam padding. Díky tomu, že je levý sloupec široký se budou sloupce centrovat na střed a nepotřebují padding. A abych to mohl vycentrovat, tak ten levý sloupec nesmí plavat. Plavat bude pravý sloupec a te´d bych rád našel na internetu nějaký příklad....
tiso
Profil
radim24 - obrázok je niekedy viac ako tisíc slov, tak to skús nakresliť ako to vlastne chceš.
radim24
Profil *
nakreslit bych to mohl, ale teď je obsazený scaner
SwimX
Profil
radim24
takle nějak? http://plaveckyoddil-st.czechian.net/info/ondra/Novy3sss.php

nebo možná's to myslel ještě takle: http://plaveckyoddil-st.czechian.net/info/ondra/Novy3sss2.php
Radim24
Profil *
http://web-design.rozhled.cz/test/pic.jpg

A aby jste viděli, že to jde:

http://web-design.rozhled.cz/test/right.htm (levý nepluje)


SwimX
ad http://plaveckyoddil-st.czechian.net/info/ondra/Novy3sss.php
NE.

http://plaveckyoddil-st.czechian.net/info/ondra/Novy3sss2.php
SKORO TREFA.

JEŠTĚ MI PROSÍMTĚ VYCENTRUJ TY TŘI SLOUPCE, ABY BYLY UPROSTŘED A NEPOUŽÍVEJ K TOMU MARGIN.

Mě se to jednou povedlo pomocí width:číslo%; teda v mém případě to bylo mezi 2- 10% v závislosti na šířce rodiče. No, ale nevěděl jsem zda je to spolehlivé a pak chtěl jsem to zkusit centrovat stejně jako tady:
http://web-design.rozhled.cz/test/right.htm (příjde mi to jako nejelegantnější řešení)


Oprava:

NEPOUŽÍVEJ K TOMU PADDING
tiso
Profil
Radim24 - v tom tvojom príklade „že to jde“ ti chýba to vycentrovanie...
Radim24
Profil *
tiso
Ten příklad zachycuje pouze ten float:right; to byl příklad, abych vystihl tu podstatu uspořádání. Tam je nejpodstatnější to, že ty DVA DIVY JSOU VEDLE SEBE ANIŽ BY TEN LEVÝ PLUL. TO NA MÉM TESTU

http://web-design.rozhled.cz/test/index.php?id=fotoalbum_preview&dir=maternity&sub=19th

NEJDE.


tak bych byl rád, kdyby jste přišli na to, kde je ta chyba. To vycentrování budu řešit pak.
Chamurappi
Profil
Reaguji na Radima24:
NEPIŠ se zapnutým CAPS LOCKem a nedávkuj své reakce do několika po sobě odeslaných příspěvků.
Pokud potřebuješ dodatečně doplňovat své příspěvky, zaregistruj se a získáš možnost je měnit i po odeslání.

Dej <div id="right"> před <div id="left"> a budou vedle sebe.
Chceš-li sloupce skládat zleva vedle sebe, dej jim všem „float: left“.
tiso
Profil
Aha, takže celé toto tu je len o tom, že v tom pokusnom fotoalbume bolo prehodené poradie divov? Pekné nedorozumenie :-)
Radim24
Profil *
Chamurappi
Tak dík. Vyzkouším tvou radu.

tiso
Jak to bude hotové zašlu odkaz :-)
Radim24
Profil
Obsah jsem aktualizoval, a na první pohled to funguje, až na to, že ten pravý sloupec nedrží v tom DIV id=main. Posouvá se nahoru k okraji stránky. Nějaký nápad čím to může být?

http://web-design.rozhled.cz/test/index.php?id=fotoalbum_preview&dir=maternity&sub=19th

Už jsem našel tu stránku, ze které jsem se insproval tím floatem right:

http://knihy.cpress.cz/Pocitac/Book.asp?ID=1394

a tam je vidět, že jim to v tom hlavním DIVu drží.

EDIT:
Možná pomůže nastavit sjednocujícímu DIVU margin-top:15px; jdu to vyzkoušet.
panther
Profil
Radim24
až na to, že ten pravý sloupec nedrží v tom DIV id=main
jak se může „držet“ divu#main, když je mimo něj? Tohle nějak nechápu.

Posouvá se nahoru k okraji stránky. Nějaký nápad čím to může být?
divy s třídou „ico“ máš díky „cleaneru“ pod položkami „div#admin-menu“, kdežto pravý sloupec je „mezi“ nimi.
tiso
Profil
Radim24 - pridaj prvok s clear za odkazy v hornom menu, alebo nechaj plávať aj ten div.
A máš tam 2x prvok s id="main", id musí byť na stránke jedinečné!
radim24
Profil *
panther
ad 1 - myslel jsem to opticky - jako že se chová jako by byl vyňat
ad 2 - podívám se na to, díky

tiso
taky díky, zkusím co s tím zmůžu...
radim24
Profil *
trochu jsem změnil strukturu. DIV id=admin_menu jsem posunul pod DIV id=content. Na ten clear jsem nakonec přišel taky sám, když jsem měnil šířku admin menu tak to dělalo neuvěřitlené věci. Myslel jsem, že ty floutující prvky admin_menu a ico jsou na sobě nezávislé, protože jsou každý v jiném DIVU, úplně jinde a neměli by se ovlivňovat. Jenže jsou vyrtaženy z obsahu, takže obyčejný clear to řeší. Teda alespoň pro Firefox. Ale IE a Opera zase dělá něco jiného. Už jsem chtěl říct, že to vypadá pěkně...
Radim24
Profil
A to centrování id="middle" (levý sloupec) taky nefunguje... Čím to?

EDIT:

V Opeře je zvoraný levý sloupec id="middle". Ten pravý sloupec se chová jako by floatoval doleva a nachází se vedle slova maternity (ale o řádek níž) (tj. první položka zleva DIV id=admin_menu). Zřejmě by to chtělo dát nějaký clear, ale to mi nefungovalo, protože když jsem tam dal clear tak pravý sloupec odjete pryč.
Radim24
Profil
Nejde mi to podruhé zeditovat, tak dodatek:

Teď jsem si vzpomněl, že aby fungovalo centrování tam by měl být myslím v nadřazeném prvku nebo v tom aktuálním marfin:auto; takže to zkusím vycentrovat (i celou stránku). Ale s tím levým sloupcem nevím.
Chamurappi
Profil
Reaguji na Radima24:
Nejde mi to podruhé zeditovat
Musíš trochu počkat.
Dobrá finta také je: rozmyslet si, co všechno chceš napsat, pak to napsat (stručně a výstižně) a pak teprve odesílat. Většina lidí tu zvládá normálně přispívat, aniž by mačkala odesílací tlačítko po každém odstavci.

Neorientuji se v tom, na co se ptáš a co ti vlastně nejde.
Radim24
Profil
SHRNUTÍ PROBLÉMU:

1) Stále nejde vycentrovat levý sloupec (DIV id=middle). A to ani když použiju margin:auto; To by způsobilo že se ty sloupce rozhodí úplně.
2) V Opeře to posouvá levý sloupec (DIV id=middle) o kus doprava, na úroveň toho odkazu "Maternity" v levém horním rohu.
psdad
Profil *
zkus
<div id="content">
<div id="right" class="column_MR_R">
<div id="main" class="column_MR_M">
Radim24
Profil
psdad
Ty navrhuješ přehození levého sloupce s pravým, ale to jsem už udělal...

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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