Autor Zpráva
lopik007
Profil
Zdravím Vás, dnes jsem při tvorbě narazil na jeden problém, a to, že jsem udělal následující zápis, ale rámečky nejsou vedle sebe, nýbrž pod sebou, až ten třetí rightbook je vedle, ale jak udělám aby byl vedle levého rámečku, na pravé straně další rámeček? Chybu si můžete prohlédnout zde: http://test-lopik.ic.cz/

CSS
#leftbook{
background-color: #1c1c1c;
border-right: solid 1px #FFFFFF;
width: 170px;
height: 150px;
color: #FFFFFF;
text-align: center;
}

#rightbook{
background-color: #1c1c1c;
border-left: solid 1px #FFFFFF;
width: 170px;
haight: 150px;
color: #FFFFFF;
text-align: center;
float: left;
margin-left: 780px; 
}


HTML

<div id="leftbook"><b>Otevírací Doba</b><?php include("inc/zmeny/doba.php")?></div>
  <div id="leftbook"><b>Kontakt</b><?php include("inc/zmeny/kontakt.php")?></div>
  <div id="rightbook"><b>Bannery</b><?php include("inc/zmeny/banner.php")?></div>
P_T_
Profil
Zkus se podívat SEM, jsou tam příklady různých layoutů.
panther
Profil
lopik007:
1. id="leftbook" máš na stránce dvakrát. ID coby unikátní identifikátor se smí na stránce vyskytovat jen jednou. Nahraď tedy toto id za class.
2. div je blokový, a proto se řadí pod sebe (jako všechno ostatní blokové). V tvém popisu, co kde má a nemá být, jsem se trochu ztratil, takže jen obecně: float.
lopik007
Profil
panther:
<div class=""> nebo <div id=""> To je úplně jedno, každopádně nefunguje ani jedno řešení, i po nahrazení # za . v css dokumentu
mattyZEM
Profil
Kdyby si nebyl tak líný, podíval by ses na příklady, které zaslal P_T_, nebo odkaz který tu poslal panther, a zjistil by jsi, že máš dát float do divu .leftbook
div.leftbook {float:left;}

lopik007:
To je úplně jedno
Jedno je kolečko u trakaře.
lopik007
Profil
mattyZEM:
Jenže když dám do div leftbook float: left tak se stane tohle.

mattyZEM
Profil
Oba .leftbook dej do nějakého divu, například <div id="levy">, tomu hoď float:left, pravou stranu hoď do <div id="pravy">, tomu hoď float:right; a hotovo.

// leftbook, ani rightbook nefloatuj.
lopik007
Profil
mattyZEM:
Vždyť jsou oba v nějakém divu <div class="leftbook"> a <div class="rightbook">
mattyZEM
Profil
lopik007:
Vždyť jsou oba v nějakém divu
Nechceš radu, tak tu nezakládej téma. Já ti říkal co máš udělat, aby to šlo, tak to udělej, nebo pak nežádej o radu.
lopik007
Profil
mattyZEM:
ale stejně když s HTML odstranit div leftbook, a použiju jen jednou leftbook

<div id="leftbook"><b>Otevírací Doba</b><?php include("inc/zmeny/doba.php")?>
  <b>Kontakt</b><?php include("inc/zmeny/kontakt.php")?></div>


V css pak napíšu do leftbook

.leftbook{
background-color: #1c1c1c;
border-right: solid 1px #FFFFFF;
float: left;
width: 170px;
min-height: 150px;
color: #FFFFFF;
text-align: center;
}


Tak je stejně rightbook posunut až pod div leftbook
panther
Profil
lopik007:
v HTML máš ID, v CSS class (.).

Nahraj to, co máš teď, na web. Na odkaze uvedeném v [#1] je teď něco jiného, než o co se pravděpodobně snažíš tady. Když jsem koukal na ten odkaz, máš tam několikrát #menu a #text. Identifikátor má být jedinečný a na stránce tedy jen jednou. Jen tak na okraj.
Davex
Profil
[#1], [#10]: Když má být #rightbook napravo, tak proč ho floatuješ doleva místo doprava (viz [#7]) a nastavuješ mu levý margin? Na živé ukázce navíc žádný rightbook nevidím.
mattyZEM
Profil
lopik007:
ale stejně když s HTML odstranit div leftbook, a použiju jen jednou leftbook
Když být robot mluvit divně já nepochopila.

To co jsem radil, musí fungovat. Netuším, jestli ten .leftbook nebo .rightbook tam potřebuješ, proto jsem ti řekl aby jsi to obalil celé do jednoho divu který budeš floatovat, stejně jako se to řeší na většině webů.
lopik007
Profil
panther:
Nikdy jsem s tím nesetkal, aby bylo se id vyskytovalo pouze jednou, příklad, třeba já mám na svém Blogu hned několikrát id a vše funguje jak má.

Davex:
Viděl jsi co se stane když ho floatuješ do prava? Asi ne, protože jinak by si to nepsal. Takže ti to vysvětlím, celý design se rozhodí.

mattyZEM:
Podle tebe musí, ale nefunguje, jo leftbook i rightbook tam potřebuji.
mattyZEM
Profil
lopik007:
vše funguje jak má.
Validátor bude řvát, nebudeš moci používat JavaScript (getElementById).

celý design se rozhodí.
Nemusí se rozhodit, je jen na tobě jak budeš dále pokračovat. Navíc, nemusíš ani floatovat do prava, stačí dodat <div id="content"> kterému dáš pevnou šířku, dáš také float:left a .rightbook stačí hodit float:left.

ale nefunguje
Chyba není u mne, ale u tebe. Tento postup musí fungovat, někde děláš chybu. Postni sem kód který používáš nyní.
lopik007
Profil
mattyZEM:
.leftbook{
background-color: #1c1c1c;
border-right: solid 1px #FFFFFF;
float: left;
width: 170px;
min-height: 150px;
color: #FFFFFF;
text-align: center;
}

.rightbook{
background-color: #1c1c1c;
float: right;
margin-right: 600px;
width: 510px;
color: #FFFFFF;
text-align: center;
}


V HTML je pouze
<div id="leftbook"><b>Otevírací Doba</b><?php include("inc/zmeny/doba.php")?>
  <b>Kontakt</b><?php include("inc/zmeny/kontakt.php")?></div>


a

<div id="rightbook">Bannery</div>


Takže chyba je kde?
panther
Profil
lopik007:
Nikdy jsem s tím nesetkal, aby bylo se id vyskytovalo pouze jednou
to je podstata identifikátoru, že je na stránce (správně) jen jednou. Pro stylování více stejných věcí se používají třídy. To, že to používáš špatně ty neznamená, že to tak dělají všichni. Vlastně jsi výjimka.

Ve tvém případě bude křičet nejen validátor (to není podstatné), ale nebudeš moci ten element zaměřit třeba JavaSriptem nebo kotvou (odkaz.html#id) (všechno bude platit pro první z nich, ostatní budou ignorované).

Takže chyba je kde?
minimálně v tom, že neumíš rozeznat třídu a identifikátor. Psal jsem ti to už v [#11], takže znovu: „v HTML máš ID, v CSS styluješ třídu (tečka)“.
mattyZEM
Profil
V HTML máš id, ale v CSS styluješ pro class, což znamená, že styluješ pro něco, co neexistuje. Místo .leftbook a .rightbook dej #leftbook a #rightbook.
Davex
Profil
lopik007:
Viděl jsi co se stane když ho floatuješ do prava? Asi ne, protože jinak by si to nepsal. Takže ti to vysvětlím, celý design se rozhodí.
Jak jsem to mohl vidět, když v živé ukázce žádný #rightbook ani .rightbook není? To ale nic nemění na tom, že si stále nenecháš poradit a vytrvale tam cpeš i ten margin, takže se blok pravděpodobně nevejde do vyhrazeného místa daného šířkou obalového bloku.

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: