ugrás a tartalomhoz

CSS probléma

gabesz666 · 2007. Május. 24. (Cs), 09.40
Sziasztok!

Már régebb óta foglalkozom html szerkesztéssel, és mostanában elég sokat olvastam a táblázat nélküli weblapszerkesztésről. Nagyon megtetszett az ötlet és rájöttem, hogy tulajdonképpen semmi nehéz nincs benne. El is kezdtem átírni a személyes honlapomat táblázat kihagyásával. Azonban... Van 3 div-em, mindegyik height-je 100%. Egy bal oldali ami a szegélyét tartalmazza a középső divnek, egy jobb oldali ami szintén a szegélyét tartalmazza a középső divnek, valamint a tartalom. Na most ezeket szeretném középre igazítani de gyszerűen nem lehet sehogy. Beleraktam a három divet egybe és azt próbáltam középre de semmi. Próbáltam egyenként középre igazítani, semmi. Próbáltam együtt őket, semmi. Mit javasolnátok?
‹ IE WebDeveloper -- használod? Table align? ›
 ■
1

Középre igazítás ...

Max Logan · 2007. Május. 24. (Cs), 10.04
Ha jól értettem, hogy mit szeretnél, akkor:

HTML
<div id="page">
  <div id="left">
    <!-- ide jön a hasznos infó -->
  </div>
  <div id="middle">
    <!-- ide jön a hasznos infó -->
  </div>
  <div id="right">
    <!-- ide jön a hasznos infó -->
  </div>
</div>
CSS

div#page
{
  width: 602px;
  margin: 0 auto;
  background: #AAA;
}

div#left
{
  width: 200px;
  height: 100px;
  float: left;
}

div#middle
{
  width: 200px;
  height: 100px;
  float: left;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

div#right
{
  width: 200px;
  height: 100px;
  float: left;
}
2

Re:

gabesz666 · 2007. Május. 24. (Cs), 10.24
Igen, a megoldás nekem is valahogy így nézett ki, de azt hiszem meg van bolondulva a böngészőm... :D Ezt a kódot bemásoltam két fájlba(style.css és index.html) és semmit nem jelenít meg. Nemhogy a bordereket, de adtam a divekhez háttérszínt, de értelme az nem volt, mert nem jelenít meg semmit! Amúgy ez volt amikor szerkeszteni akartam a honlapot is. Explorer 6-os miatt kellett volna a png-re nyomni egy filtert, és amint átírtam a css-t és feltöltöttem, egyszerűen mintha ott sem lennének a szegélyek!

Ja, és persze a divek tartalommal való feltöltése után sem jelenik meg semmi!
3

Élő példa?

Nagy Gusztáv · 2007. Május. 24. (Cs), 10.40
Tudsz általunk is elérhető online példát mutatni?

Guszti
5

Re:

gabesz666 · 2007. Május. 24. (Cs), 10.50
Ok, mostmár elértem, hogy megjelenítse a böngésző, csak egy újraindításra volt szükség. :D Azonban középre igazítani még véletlenül sem akarja! Képek: Kép_1, Kép_2. Tehát Mozilla és Internet Explorer 7 alatt az eredmény, a fent említett kód használatával. Plusz még annyi van benne hogy van tartalom és a két "szegélynek" is van borderje!
6

Középre igazítás ...

Max Logan · 2007. Május. 24. (Cs), 10.59
Kifelejtettem, hogy kell adni szélességet a PAGE ID-vel rendelkező DIV-nek. Ha nem adsz meg szélességet, akkor kitölti az egész képernyőt.

CSS
div#page
{
  margin: 0 auto;
  width: 602px;
  background: #AAA;
}
Így már jó lesz a középre igazítás.
4

Üres DIV

Max Logan · 2007. Május. 24. (Cs), 10.49
Nem teszteltem a kódot amit írtam. A probléma sztem az, hogy ha csak simán bemásoltad amit írtam, akkor a DIV-ekben nincsen tartalom, tehát nincsen magasságuk. Vagy állítsál be mind a három DIV-nek magasságot (tesztelés miatt érdemes különböző háttérszínt is), vagy tegyél mindegyikbe egy szót, ekkor már lesz magasságuk és meg fognak jelenni a keretek is.
7

Kérdések tömkelege :D

gabesz666 · 2007. Május. 24. (Cs), 13.04
Köszi szépen! A megoldás tökéletes. Most már csak azt szeretném megtudni, hogy miért kell megadni a szélességet a középre igazításhoz. És mi van, ha pl most nem fixen adnám meg az értékeket hanem százalékosan? Akor nem is lehet középre igazítani? Ja, még egy kérdés: vertikálisan hogy lehet középre igazítani, mert azzal is próbálkozom egy ideje de nem akar valamiért összejönni.
8

Válaszok

Max Logan · 2007. Május. 24. (Cs), 13.27
1. Most már csak azt szeretném megtudni, hogy miért kell megadni a szélességet a középre igazításhoz.

Ezt már írtam, hogy ha nem adsz meg szélességet, akkor a DIV "szétfolyik" a böngésző teljes szélességében. Belátható, hogy egy ilyen dobozt nem lehet középre igazítani. Más oldalról nézve középen van, csak kitölti a teret :-)

2. És mi van, ha pl most nem fixen adnám meg az értékeket hanem százalékosan?

Akkor is működik a középre igazítás (még IE alatt is, csak adj meg doctype-ot, ha nincs doctype, akkor IE-ben nem műxik)

3. Vertikálisan hogy lehet középre igazítani, mert azzal is próbálkozom egy ideje, de nem akar valamiért összejönni.

Jelenleg erre natív CSS megoldás nincsen.

Egy lehetséges működő megoldás:

HTML
<div id="box"><!-- ide jön a tartalom --></div>
CSS
div#box
{ 
  position    : absolute;
  width       : 400px;
  height      : 200px;
  background  : yellow;
  border      : 1px solid red;
  top         : 50%;
  left        : 50%;
  margin-top  : -100px;
  margin-left : -200px;
}
9

középre igazítás irásom

Jano · 2007. Május. 24. (Cs), 14.10
Olvasd végig ezt: Középre igazítás CSS-sel
10

Thx

gabesz666 · 2007. Május. 24. (Cs), 15.02
Köszi a válaszokat. Még nagyon sokat kell tanulnom... :D
11

Új probléma

gabesz666 · 2007. Május. 29. (K), 13.38
Hi ismét!

Igazából csak tegnap fogtam neki az itt elhangzottak megvalósításának, azonban ismét egy problémába ütköztem. Van ugye a három div(bal, közép, jobb oldali) és egy fő div amiben ez a három van. Most az a probléma merült fel, hogy ugyan a fő divnek megvan adva a height:100% érték, de viszont néhány lapon a tartalom(ami a középső divben van) több mint 100%. Ekkor a tartalom kirajzolódik de viszont nincs háttér. Itt egy kód is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<META content=all name=robots>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-2">
<META content="Gábor Szabó" name=Author>
<META content="Szabó Gábor személyes honlapja" name=Classification>
<META content="Szabó Gábor személyes honlapja" name=Description>
<META content="szabó, szabo, gábor, gabor, webfejlesztés, design, honlapkészítés, php, javascript, mysql, ajax" name=KeyWords>
<LINK href="style.css" type="text/css" rel="stylesheet">
<title>Szabó Gábor Személyes Honlapja / Personal Homepage Of Gábor Szabó</title>

</head>

<body>

<div id="all">
<div id="left">&nbsp;</div>
<div id="content">
<!--Tartalom-->
<img src="logotome.jpg" style="border: solid 1px #000000; width: 590px; margin-top:5px" alt="Logó">
<div style="background-color:#cde4e2; width:590px; border: solid 1px #aaaaaa; text-align:center; margin-top:10px; margin-left:auto;margin-right:auto">
<span style="margin-right:25px; color:#6c8e8c">Főoldal</span>
<a href="magamrol.htm" style="margin-right:25px">Magamról</a>
<a href="webfejlesztes.htm" style="margin-right:25px">Webfejlesztés</a>
<a href="kapcsolat.htm" style="margin-right:25px">Kapcsolat</a>
<a href="suli.htm">Suli</a>
</div>

<div style="background:url(develop.jpg) no-repeat left 0%;float:left; width:590px; margin-left: 0px; margin-top: 100px">
<div style="font: 15px; line-height: 20px; border-left: dotted 1px #000000; margin-left:150px; padding-left: 5px; text-align:center; line-height: 25px">
<img src="szivarvanytex.jpg" style="border: solid 1px #666666" alt="Szivárvány-Tex Kft. honlapja">
<br><br>
Szivárvány-tex Kft. honlapja - <a href="http://www.szivarvanytex.hu" target="_blank">http://www.szivarvanytex.hu</a>
<hr width="100">
Az első komolyabb megbízásom, sőt igazából eddig az egyetlen, hacsak a céges munkákat tekintjük. Az oldal tulajdonképpen egy
webshop, ahol munkaruhákat lehet rendelni.
<br><br><br>
<img src="duhkitores.jpg" style="border: solid 1px #666666" alt="Dühkitörés zenekar honlapja">
<br><br>
Dühkitörés zenekar honlapja - <a href="http://www.duhkitores.hu" target="_blank">http://www.duhkitores.hu</a>
<hr width="100">
Volt osztálytársam zenekara, ők kértek meg, hogy hozzam létre az oldalt a "rajongók" tájékoztatására. Egész jó ötlet volt
ugyanis amióta meg van a weblap, azóta nem hívogatják őket rendszeresen koncert ügyében... :)
</div>
</div>
</div>
<div id="right">&nbsp;</div>

</div>

</body>
</html>

---Style.css---

html,body { cursor: url(http://www.myspacecursor.net/cursor/LEDRed.cur);margin:0px 0px 0px 0px; padding:0; height:100%; border:none }
body { background-image:url(dgrey073.jpg); text-align:center; margin: 0px 0px 0px 0px }

#all { margin-left:auto; margin-right:auto; width:650px; height:100% }
#left { background-image:url(left.png); background-repeat: repeat-y; width: 25px; height:100%;float: left }
#content { background-color:#ffffff; height: 100%; width: 600px; vertical-align:top; float: left }
#right { background-image:url(right.png); background-repeat: repeat-y; width: 25px; height:100%;float: left }

a:hover { color: #3f6662; border-bottom: dotted 1px #3f6662; text-decoration:none; padding-bottom:0px }
a:active { color: #152e2b; text-decoration:none }
a:link { color: #152e2b; text-decoration:none }
a:visited { color: #152e2b; text-decoration:none }