zarovnání obsahu divu (css)

Místo pro dotazy, které se netýkají phpBB, ale mají něco společného s webovými technologiemi, skriptovacími jazyky anebo překládáním.
Uživatelský avatar
smiesek
V.I.P.
V.I.P.
Příspěvky: 3059
Registrován: stř 22. úno 2006 1:00:00
Bydliště: Praha
Kontaktovat uživatele:

zarovnání obsahu divu (css)

Příspěvek od smiesek » stř 23. říj 2013 18:43:43

prosím o pomoc při zarovnání obsahu divů, jak levého tak pravého na střed (vodorovně a současně vertikálně), už nemohu přijít na to, kde dělám chybu, ač hledám na internetu různé návody.

Děkuju

Kód: Vybrat vše

<style type="text/css">

#infoboxleft_name {
  background: #fafafa;
  height: 20px;
  float: left;
  border-top: 1px solid #332af7;
  border-bottom: 3px solid #332af7;
  text-align: center;
  font-weight: bold;
  color: #003a6d; 
  width: 370px;
  }

#infoboxright_name {
  background: #fafafa;
  height: 20px;
  float: right;
  border-top: 1px solid #332af7;
  border-bottom: 3px solid #332af7;
  text-align: center;
  font-weight: bold;
  color: #003a6d; 
  width: 370px;
  }

#infoboxleft {
  background: #e5ebf0;
  height: 150px;
  float: left;
  border-right: 1px solid #d0dce6;
  text-align: center;
  width: 369px;
  }

#news {
position: absolute;
left: 50%;
width: 369px;
margin-left: 1/2px;
top: 50%;
height: 150px;
margin-top: 75px;
}

#infoboxright {
  background: #e5ebf0;
  height: 150px;
  float: right;
  border-left: 1px solid #d0dce6;
  padding-left: 10px;
  width: 359px;
  display: table;
  }

#statistic {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

#all {
  width: 740px;
  }

</style>
</head>

<div id="all">
<div id="infoboxleft_name">
Nejnovější
</div>

<div id="infoboxright_name">
Statistika
</div>

<div id="infoboxleft">
  <div class="news">
   <img src="novinka.jpg" alt="novinka">
  </div>
</div>

<div id="infoboxright">
<div id="statistic"><p>Název
<br>Statistika</div>

</div>

</div>

</body>

Uživatelský avatar
kksmirice
Junior tým
Junior tým
Příspěvky: 1639
Registrován: pát 17. úno 2012 21:39:58
Kontaktovat uživatele:

Re: zarovnání obsahu divu (css)

Příspěvek od kksmirice » stř 23. říj 2013 18:52:01

Nějaká ukázka kódu na webu?
Klidně mi Vykejte, mohl bych být Vašim dědou...
1. Murphyho zákon: Na počátku nebylo nic. I to se pokazilo!

stránky: KK Zálabák Smiřice, test stránky pro všechny

[url=mailto://prolamy@email.cz?subject=phpBB%20pomoc]kontakt[/url] v případě pomoci - instalace systémů, založení databáze a tabulek, FTP přístup

Nerdy
Příspěvky: 1295
Registrován: sob 16. úno 2008 12:10:53
Bydliště: index
Kontaktovat uživatele:

Re: zarovnání obsahu divu (css)

Příspěvek od Nerdy » stř 23. říj 2013 19:18:53

Pro text

Kód: Vybrat vše

text-align: center;
a pro divy

Kód: Vybrat vše

margin: 0 auto;
Jak píše kksmirice, více pomůže ukázka kódu.
www.Jump4.cz, www.RockForPeople.cz/forum/

Pomocí soukromých zpráv podporu nepodávám.
Pro Warez fóra podporu nepodávám.
Než se začneš ptát, hledej.
Nenabízíš-li za pomoc peníze, neurguj, podporu podávám ve svém volném čase.

Nabízím od instalací phpBB, přes aktualizace na nejnovější verze, po úpravy phpBB a stylů, a další. - SZ, email.

Uživatelský avatar
smiesek
V.I.P.
V.I.P.
Příspěvky: 3059
Registrován: stř 22. úno 2006 1:00:00
Bydliště: Praha
Kontaktovat uživatele:

Re: zarovnání obsahu divu (css)

Příspěvek od smiesek » čtv 24. říj 2013 2:31:13

tady prosím pěkně možnost shlédnutí.
Někde dělám chybu, všeobecně nepomůže centrování jak levému boxu (infoboxleft), tak ani novince (news).

Hodně jsem vždy narazila na řešení pomocí místo divů použít tabulky, ale jelikož bych to ráda použila jako součást layoutu stránek, který je div, nikoliv tabulkový, to nepřichází v úvahu.

Uživatelský avatar
kksmirice
Junior tým
Junior tým
Příspěvky: 1639
Registrován: pát 17. úno 2012 21:39:58
Kontaktovat uživatele:

Re: zarovnání obsahu divu (css)

Příspěvek od kksmirice » čtv 24. říj 2013 9:33:32

Nějak netuším co se žádá.

Text jak levého sloupce tak i pravého je na střed (vertikálně i horizontálně). Pouze "obrázek" je zarovnán k levému okraji. Je to tím, že nemá žádné stylování.

Pokud chcete mít celou ukázku na středu stránky vycentrovánu vodorovně, musíte obalovací div (#all) centrovat na střed

Kód: Vybrat vše

#all {margin: 0 auto;}
.
Pokud chcete mít i obrázek v levém spodním rámu na střed, musíte jej nastylovat

Kód: Vybrat vše

img {display: block; margin: 0 auto;}
platí pro všechny obrázky, popř:

Kód: Vybrat vše

.news img {display: block; margin: 0 auto;}
platí pro levý spodní sloupec.

Snad jsem Vás pochopil správně.

Doporučil bych stránku rozdělit do "řádků divů" např.:

Kód: Vybrat vše

<div id="all">
  <div id="horni">
    <div class="levy">...</div>
    <div class="pravy>...</div>
  </div>
  <div id="spodni">
    <div class="levy">...</div>
    <div class="pravy>...</div>
  </div>
</div>
bude se Vám s tím líp pracovat, zejména pokud budete potřebovat rozšiřovat řádky. V podstatě jej dělat jako tabulku, jen s tím, že místo <tr> a <td> použijete <div>.
Klidně mi Vykejte, mohl bych být Vašim dědou...
1. Murphyho zákon: Na počátku nebylo nic. I to se pokazilo!

stránky: KK Zálabák Smiřice, test stránky pro všechny

[url=mailto://prolamy@email.cz?subject=phpBB%20pomoc]kontakt[/url] v případě pomoci - instalace systémů, založení databáze a tabulek, FTP přístup

Uživatelský avatar
smiesek
V.I.P.
V.I.P.
Příspěvky: 3059
Registrován: stř 22. úno 2006 1:00:00
Bydliště: Praha
Kontaktovat uživatele:

Re: zarovnání obsahu divu (css)

Příspěvek od smiesek » čtv 24. říj 2013 10:29:33

omlouvám se, jde mi pouze o ten obrázek v infoboxleft.

Přidala jsem tedy následující:

Kód: Vybrat vše

#infoboxleft {
  background: #e5ebf0;
  height: 150px;
  float: left;
  border-right: 1px solid #d0dce6;
  width: 369px;
  margin: 0 auto;
  }

.news img {
  display: block;
  margin: 0 auto;
}
Ale obrázek se mi zarovnal pouze na střed horizontálně, nikoliv již vertikálně :-|

Uživatelský avatar
kksmirice
Junior tým
Junior tým
Příspěvky: 1639
Registrován: pát 17. úno 2012 21:39:58
Kontaktovat uživatele:

Re: zarovnání obsahu divu (css)

Příspěvek od kksmirice » čtv 24. říj 2013 11:13:10

A ten tam má být jen sám? Nic jiného tam nebude?

Zkuste jej nastavit jako pozadí divu a možná bude fungovat:

Kód: Vybrat vše

{background:url('obrazek.gif') no-repeat 0 50%}
Klidně mi Vykejte, mohl bych být Vašim dědou...
1. Murphyho zákon: Na počátku nebylo nic. I to se pokazilo!

stránky: KK Zálabák Smiřice, test stránky pro všechny

[url=mailto://prolamy@email.cz?subject=phpBB%20pomoc]kontakt[/url] v případě pomoci - instalace systémů, založení databáze a tabulek, FTP přístup

Uživatelský avatar
smiesek
V.I.P.
V.I.P.
Příspěvky: 3059
Registrován: stř 22. úno 2006 1:00:00
Bydliště: Praha
Kontaktovat uživatele:

Re: zarovnání obsahu divu (css)

Příspěvek od smiesek » čtv 24. říj 2013 11:59:49

ano bude sám, ale do budoucna právě počítám s tím, aby se automaticky tahal z databáze dle nejnověji umístěného, tak nevím na kolik to bude efektivní v rámci pozadí

Nerdy
Příspěvky: 1295
Registrován: sob 16. úno 2008 12:10:53
Bydliště: index
Kontaktovat uživatele:

Re: zarovnání obsahu divu (css)

Příspěvek od Nerdy » čtv 24. říj 2013 12:37:08

Co třeba:

Kód: Vybrat vše

#infoboxleft .news {
  width: 192px;
  margin: 3px auto;
}
www.Jump4.cz, www.RockForPeople.cz/forum/

Pomocí soukromých zpráv podporu nepodávám.
Pro Warez fóra podporu nepodávám.
Než se začneš ptát, hledej.
Nenabízíš-li za pomoc peníze, neurguj, podporu podávám ve svém volném čase.

Nabízím od instalací phpBB, přes aktualizace na nejnovější verze, po úpravy phpBB a stylů, a další. - SZ, email.

Uživatelský avatar
smiesek
V.I.P.
V.I.P.
Příspěvky: 3059
Registrován: stř 22. úno 2006 1:00:00
Bydliště: Praha
Kontaktovat uživatele:

Re: zarovnání obsahu divu (css)

Příspěvek od smiesek » čtv 24. říj 2013 13:03:28

super, děkuju to funguje, určitě ale pak do budoucna zkusím řešení formou tabulky z divů, jak mi bylo doporučeno dříve, protože mě to při vytváření hned nenapadlo

Uživatelský avatar
kksmirice
Junior tým
Junior tým
Příspěvky: 1639
Registrován: pát 17. úno 2012 21:39:58
Kontaktovat uživatele:

Re: zarovnání obsahu divu (css)

Příspěvek od kksmirice » čtv 24. říj 2013 13:14:32

@Nerdy:
to ale neřeší vertikální zarovnání, ne?
Je to obdoba dříve popisované úpravy <img> v tomto příspěvku.
Klidně mi Vykejte, mohl bych být Vašim dědou...
1. Murphyho zákon: Na počátku nebylo nic. I to se pokazilo!

stránky: KK Zálabák Smiřice, test stránky pro všechny

[url=mailto://prolamy@email.cz?subject=phpBB%20pomoc]kontakt[/url] v případě pomoci - instalace systémů, založení databáze a tabulek, FTP přístup

Nerdy
Příspěvky: 1295
Registrován: sob 16. úno 2008 12:10:53
Bydliště: index
Kontaktovat uživatele:

Re: zarovnání obsahu divu (css)

Příspěvek od Nerdy » čtv 24. říj 2013 15:31:01

Vertikální zarovnání řeší ty 3px (případně jiná hodnota).
www.Jump4.cz, www.RockForPeople.cz/forum/

Pomocí soukromých zpráv podporu nepodávám.
Pro Warez fóra podporu nepodávám.
Než se začneš ptát, hledej.
Nenabízíš-li za pomoc peníze, neurguj, podporu podávám ve svém volném čase.

Nabízím od instalací phpBB, přes aktualizace na nejnovější verze, po úpravy phpBB a stylů, a další. - SZ, email.

Uživatelský avatar
kksmirice
Junior tým
Junior tým
Příspěvky: 1639
Registrován: pát 17. úno 2012 21:39:58
Kontaktovat uživatele:

Re: zarovnání obsahu divu (css)

Příspěvek od kksmirice » čtv 24. říj 2013 17:38:11

To je pravda, ale je to při pevně nastavené výšce okolního divu. Pokud se změní výška, musí se nutně upravit horní a spodní hodnota margin.
Klidně mi Vykejte, mohl bych být Vašim dědou...
1. Murphyho zákon: Na počátku nebylo nic. I to se pokazilo!

stránky: KK Zálabák Smiřice, test stránky pro všechny

[url=mailto://prolamy@email.cz?subject=phpBB%20pomoc]kontakt[/url] v případě pomoci - instalace systémů, založení databáze a tabulek, FTP přístup

Nerdy
Příspěvky: 1295
Registrován: sob 16. úno 2008 12:10:53
Bydliště: index
Kontaktovat uživatele:

Re: zarovnání obsahu divu (css)

Příspěvek od Nerdy » čtv 24. říj 2013 19:04:24

Ano. Já mám to, že snad ani vertikální vycentrování nejde. Nebo jde nějakým složitějším způsobem.
www.Jump4.cz, www.RockForPeople.cz/forum/

Pomocí soukromých zpráv podporu nepodávám.
Pro Warez fóra podporu nepodávám.
Než se začneš ptát, hledej.
Nenabízíš-li za pomoc peníze, neurguj, podporu podávám ve svém volném čase.

Nabízím od instalací phpBB, přes aktualizace na nejnovější verze, po úpravy phpBB a stylů, a další. - SZ, email.

Uživatelský avatar
smiesek
V.I.P.
V.I.P.
Příspěvky: 3059
Registrován: stř 22. úno 2006 1:00:00
Bydliště: Praha
Kontaktovat uživatele:

Re: zarovnání obsahu divu (css)

Příspěvek od smiesek » pát 25. říj 2013 7:56:51

Ještě bych se ráda zeptala, když už jsme u toho stylování CSS

vytvořeno mám víceúrovňové menu, dejme tomu dvou úrovňové, nyní je třeba jej nastylovat.
Základní použití je pomocí ul a li

nemůžu se nikde dočíst, jak se chovají a v čem se vlastně liší jednotlivé zápisy

Kód: Vybrat vše

#menu ul li { ...

#menu ul > li { ...
pokud nepoužiju znak ">" znamená to, že styl se kopíruje na všechnu cestu
a pokud použiju > tak se to bude odkazovat pouze na přímého potomka?

Kód: Vybrat vše

#menu ul ul { ...

#menu ul li ul li { ...
tyto dva poslední zápisy, je to stylování pouze ul ul a ve druhém případě stylování jednotlivých položek ul?

Děkuju za vysvětlení.

Odpovědět