ugrás a tartalomhoz

XHTML, CSS, DIV kérdéscsokor

Anonymous · 2006. Feb. 17. (P), 00.28
Csak mostanában kezdtem el CSS-t tanulgatni, és mint az ilyenkor lenni szokott, nem megy minden elsőre... Kis segítséget jöttem. Az alábbi kóddal összesen 4 problémám van, amit mindeddig nem sikerült megoldanom. Elnézést teljes forrás miatt, de úgy gondoltam muszáj bemásolnom az egészet, hogy tiszta legyen a kép.
1.: IE alatt miért nincs az egész, keretestől, mindenestől középen? A miértnél egy fokkal fontosabb kérdés, hogy hogyan lehetne ezt megoldani? FF szépen középre igazítja.
2.: Ha jól megnézed a középső szöveg széleit, a két oldalsó kis doboz aljáig 3 pixellel beljebb van a szöveg, mint onnantól lefelé. Mitől van ez, és mi a megoldás erre? IE alatt nézd ezt is, mert FF-ben nincs ilyen gond. Ha a forrásból kiveszem valamelyik dobozt, ez a jelenség megszűnik (az adott oldalon), de akár hogy bűvészkedtem a CSS-el, nem jöttem rá a hibára...
3.: Alul-középen vannak azok a számok (egy galéria lapozója eredetileg). Miért folyik ki az azt körülvelő DIV keretből? Ez IE és FF alatt is így jelenik meg. Erre mi lenne a megoldás?
4.: A 3. pontban lévő számokat hogyan lehetne az azt körülvelő DIV közepére igazítani?
Összevágtam egy képet, ahol úgy és oda van vágva minden, ahol és ahogy lenniük kellene.
Bármilyen segítségnek nagyon örülnék...

És akkor a forrás:

<!-- Fejléc [ -->

  <?xml version="1.0" encoding="iso-8859-2"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>
      Grrrrrrrrrrrrrr
    </title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

    <style type="text/css" media="all">

		body {

			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 10px;
			color: #666666;
			margin-top: 10px;
			margin-bottom: 10px;
			margin-left: 10px;
			margin-right: 10px;
			background-color: #FFFFFF;

		}

		a {

			font-size: 10px;
			color: #000000;
			font-weight: bold;

		}

		a:link {

			text-decoration: underline;
			color: #000000;

		}

		a:visited {

			text-decoration: none;
			color: #666666;

		}

		a:hover {

			text-decoration: none;
			color: #666666;

		}

		a:active {

			text-decoration: none;
			color: #666666;

		}

		.blokk_fejlec {

			text-align: center;	
			font-weight: bold;
			font-size: 11px;
			color: #FFFFFF;
			height: 16px;
			background-color: #999999;
			border-right-width: 1px;
			border-left-width: 1px;
			border-top-width: 1px;
			border-bottom-width: 0px;
			border-color: #000000;
			border-style: solid;

		}

		.navigacio a {

			display: block;
			border-width: 1px;
			border-color: #FFFFFF;
			border-style: solid;
			padding: 1px 1px;

		}

		.navigacio a:hover, .navigacio a:focus, .navigacio a:active {

			border-width: 1px;
			border-color: #000000;
			border-style: solid;
			background-color: #D2D2D2;
			padding: 1px 10px;
			-moz-border-radius: 0.5em;

		}

		.kontener {

			width: 704px;
			margin-left: auto;
			margin-right: auto;

		}

		.bal_blokksor {

			float: left;
			width: 150px;
		
		}

		.jobb_blokksor {

			float: right;
			width: 100px;
		
		}

		.table {

			border-width: 1px;
			border-color: #000000;
			border-style: solid;
			padding-top: 5px;
			padding-left: 5px;
			padding-right: 5px;
			padding-bottom: 5px;
			margin-bottom: 5px;

		}

		.blokk {

			border-color: #000000;
			border-style: solid;
			border-width: 1px;
			padding-left: 5px;
			padding-right: 5px;
			padding-top: 5px;
			padding-bottom: 5px;
			margin-bottom: 5px;

		}

		.kep_lista {

			float: left;
			width: 30px;

		}

		.kep_lista a {

			float: left;
			width: 30px;

		}

		.kep_lista a:hover, .kep_lista a:focus, .kep_lista a:active {

			border-width: 1px;
			border-color: #000000;
			border-style: solid;
			background-color: #D2D2D2;
			-moz-border-radius: 0.3em;

		}

		.center {

			text-align: center;

		}

    </style>

  </head>

  <body>

<!-- ] Fejléc -->


<!-- Tartalom [ -->

  <div class="kontener">

    <!-- Bal oldali blokk(ok) [ -->

      <div class="bal_blokksor">

        <!-- 1. Left Blokk: navigacio.php [ -->

          <div class="blokk_fejlec">
            Navigáció
          </div>

          <div class="blokk">
            <div class="navigacio">
              <a href="index.php">
                &bull; Főoldal
              </a>
            </div>
            <div class="navigacio">
              <a href="index.php?nav=Admin">
                &bull; Admin
              </a>
            </div>
          </div>

        <!-- ] 1. Left Blokk: navigacio.php -->

      </div>

    <!-- ] Bal oldali blokk(ok) -->


    <!-- Jobb oldali blokk(ok) [ -->

      <div class="jobb_blokksor">

        <!-- 1. Right Blokk: online.php [ -->

          <div class="blokk_fejlec">
            Most online
          </div>

          <div class="blokk">
            Jelenlévők: <strong>2</strong>
            <br />
          </div>

        <!-- ] 1. Right Blokk: online.php -->

      </div>

    <!-- ] Jobb oldali blokk(ok) -->


    <!-- Középső szektor [ -->

      <div style="margin-left: 155px; margin-right: 105px;">

        <!-- Elsődleges táblázat eleje [ -->

          <div class="table">
            <div style="text-align: justify;">
              Szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg
            </div>
          </div>

        <!-- ] Elsődleges táblázat vége -->


        <!-- Elsődleges táblázat eleje [ -->

          <div class="table">
            <div class="center">
              <div class="kep_lista">
                <a href="index.php?nav=Galeria&amp;sub=Dariya&amp;oldal=2">&laquo;</a>
              </div>
              <div class="kep_lista">
                <a href="index.php?nav=Galeria&amp;sub=Dariya&amp;oldal=1">1</a>
              </div>
              <div class="kep_lista">
                <a href="index.php?nav=Galeria&amp;sub=Dariya&amp;oldal=2">2</a>
              </div>
              <div class="kep_lista">
                &nbsp;<big>3</big>
              </div>
              <div class="kep_lista">
                <a href="index.php?nav=Galeria&amp;sub=Dariya&amp;oldal=4">4</a>
              </div>
              <div class="kep_lista">
                <a href="index.php?nav=Galeria&amp;sub=Dariya&amp;oldal=5">5</a>
              </div>
              <div class="kep_lista">
                <a href="index.php?nav=Galeria&amp;sub=Dariya&amp;oldal=4">&raquo;</a>
              </div>
            </div>
          </div>

        <!-- ] Elsődleges táblázat vége -->

      </div>

    <!-- ] Középső szektor -->


    <!-- Lábléc [ -->

      <div style="width: 150px; clear: both; float: left;">
        <a href="http://validator.w3.org/check?uri=referer" rel="newindow">
          Kis valid logo...
        </a>
      </div>
      <div style="width: 150px; float: right; text-align: right;">
        Oldal generálás: <strong>0.18</strong>
      </div>

    <!-- ] Lábléc -->

  </div>

<!-- ] Tartalom -->

</body>
</html>
‹ td:hover div hogyan? 1px hiba IE-ben az képeknél az oldal alján ›
 ■
1

Menjünk sorjában!

nAgYu · 2006. Feb. 17. (P), 08.53
1. Ahhoz, hogy az IE is középre igazítsa a teljes tartalmat, adj meg a body-nak egy text-align: center;-t. Középre kerül, de cserébe mindenhol, ahol nem középre akarod igazítani a szöveget, ott külön ezt le kell szabályoznod.

2. Ez egy ismert IE bug. Megoldása lehet, hogy a szöveget tartalmazó elemnek adsz egy height: 1%;-ot, de ezt Conditional Comments-be foglalod, hogy tényleg csak az IE lássa.

3. A float-olt elemek "külön életet élnek" az őket befoglaló elemtől. Megoldásként felmerülhet egy plusz <div> elem használata a .center div-en belül a .kep_lista div-ek után. Ennek a plusz div-nek add meg a clear: both; tulajdonságot.

4. Ha mindazt megcsináltad, amit eddig leírtam, akkor már csak annyi a dolgod, hogy a .center div-nek adsz width: 210px; margin: 0 auto; tulajdonságokat. Készen is vagyunk!

Egy kis gonoszkodás: ha keresgettél volna egy kicsit a Weblabor fórumai között, mindezt megtalálhattad volna, és akkor nem kellett volna ennyit gépelnem... (Mit csináljak, lusta ember vagyok!) :-)

Üdv.:
nAgYu
2

50%

Anonymous · 2006. Feb. 17. (P), 14.27
1.: Ez jó. Azzal tisztában voltam, hogy IE nem ismeri az auto-t, mint tulajdonságot, ezért nem lesz középen minden. A fura csak az, hogy ennek a tutorialnak a mintájára csináltam az oldalszerkezetet, és itt meg szépen középre rakja IE is... No mindegy. Elkezdtem visszahúzgálni mindenhol balra a szöveget, amikor beugrott, hogy elég a konténerbe beállítani.

2.: Ez is működött. Dinamikusan generálom le a HTML kimenetet, ezért nem fix mindennek a helye és a mérete, így kicsit még trükközni kellett vele, de így már sikerült megoldani.

3.: Itt elakadtam. Bárhova raktam a plusz DIV-et a clear: both; tulajdonsággal, sehogy nem volt jó. Próbáltam a center elé és után is. Próbáltam a kep_lista elé és után is, de vagy nem volt hatása, vagy megszűntette a floatolást, ami ugye nekem nem jó, mert akkor egymás alá kerülnek a DIV-ek. Érdekességként, a 2. pontban ami IE hátránya, az itt előnye lett, mert azzal a height: 1%; tulajdonsággal már IE alatt ez a gond megszűnt, szépen beleteszi a keretébe a számokat.

4.: Sajnos ez sem jött össze. Egyrészt mivel dinamikusan van generálva a lapozó, előre az össz szélességét nem tudom. Mert lehet itt csak 2-3, de akár 15-20 elem is számokkal. Illetve hát nyílván le lehet programozni, de ez talán már a "többe kerül a leves, mint a hús" kategória. Másrészt ez a megoldás IE alatt egyébként sem működik (az 1. pontban említettek miatt, azaz, hogy IE nem ismeri az auto tulajdonságot). Ezen még agyalok egy kicsit, talán kitalálok valamit. Persze ha van más ötlet, nem fogom visszautasítani :)

Köszönöm az eddigi segítséget, és remélem az első kettőhöz hasonlóan a maradékra is születik valamiféle megoldás :)
4

redsky

Jano · 2006. Feb. 17. (P), 16.31
off: Ez a redsky egy "kicsit" hasonlit weblaborra...
3

75%

Anonymous · 2006. Feb. 17. (P), 15.29
Elnézést, félreértettem a 3. pontot. Ki lehet pipálni, ez is bevált. Köszönöm.
Így már csak a 4. maradt :)
5

Lapozas

Jano · 2006. Feb. 17. (P), 16.35
Ha a kerdes a lapozasra vonatkozik akkot eloszor is a HTML-bol purgald ki az osszes oda kapcsolodo DIV-et es csak az egymasutan kovetkezo a elemeket hagyjad meg egyetlen befoglalo DIV-vel. Ennek a befoglalo elemnek adj mondjuk "lapozo" nevet (id-t). CSS-ben a #lapozo {text-align:center;} #lapozo a {padding:0 5px;} hogy legyen egy kis hely kozottuk. De probalkozhatsz meg itt a word-spacing-gel is.
6

<Nincs cím>

Anonymous · 2006. Feb. 17. (P), 17.12
Ha csak emiatt a lapozó miatt lenne fontos, akkor hagynám a fenébe, legfeljebb nem lesz középen... De a helyzet az, hogy számos egyéb helyen kellene, hogy floatolt DIV-ek a befoglaló kereten belül középre igazítva jelenjenek meg. Hogy maradjunk a galériánál, például a legenerált thumbnaileket is középre akarom igazítani (minden thumbnak egy DIV keret, tehát egy DIV-ben egy kép, és mondjuk soronként 4 darab ilyen floatolt DIV keret, ami a befoglalón belül középre igazodnak). Vagy van egy form, aminek az elemeit is szintén középre igazított floatolt DIV-ekbe raknám. És így tovább, ezer helyre kellhet ez a dolog, ezért lenne jó valami általános megoldás erre.
7

inline

Jano · 2006. Feb. 17. (P), 17.32
Nem biztos, hogy jol ertem, de ha kepekt akarsz egymas melle rakni akkor azok maguktol egymas melle fognak kerulni. Ha DIV-be tetted oket akkor allitsad a div-eket display:inline-ra. De megjegyzem altalaban nem nez ki jol ha minden kozepre van igazitva: egyik oldalon sem alkotnak a kepek oldalai egyseges vonalat akkor rendezetlennek tunik az egesz oldal.
8

<Nincs cím>

Anonymous · 2006. Feb. 18. (Szo), 01.45
Nos, ezt vissza kell vonjam, mégsem jó megoldás... Ráment mégegy napom, ezer tutorialt végigolvastam, de nem jutok egyről a kettőre...
Próbáld ki, amit leírtál. Tegyél egy DIV-et úgy és oda, ahova gondoltad. De ez még nem minden, mert ha ennyi lenne, akkor gond egy szál se. Most fogd a bal oldali blokkot, és írj bele valami jó hosszú szöveget, hogy legalább megtriplázódjona blokk magassága. Látni fogod, hogy a középső rész, ahol a lapozó van, az is le fog vele együtt tolódni a blokk aljáig, mivel az a blokk is floatolva van, és az az üres div meg ugye megszűnteti körül a float hatását...

Ez az egész dives dolog egy átkozott nagy szívás. Vagy csak én vagyok átlagon aluli hülye, nem tudom, de amióta belefogtam, csak szívok vele...
Ha valaki megszánna egy MSN címmel, és tudna kicsit segíteni kvázi "élőben", az lenne a legjobb...
9

Bentmaradó elem

Jano · 2006. Feb. 18. (Szo), 13.17
Pontosan nem értem a problémádat de ha az a baj, hogy egy float-olt elem kimászik a befoglaló dobozából akkor erre már ezerszer leírtuk itt a fórumban a megoldás(oka)t. Vagy beleteszel a befoglalo elem legvegere egy clear:both-os elemet, vagy float-olod a befoglalo elemet is, vagy overflow:auto-t adsz a befoglalo elemnek is. Es van meg egy clear:both-szal operáló megoldás aminél plusz elem nélkül csinálja meg a positioneverything oldalon.
10

<Nincs cím>

Anonymous · 2006. Feb. 18. (Szo), 17.47
Komolyan nem értem, hogy mit nem értel. Megcsináltam mindent, amit itt mondtatok és amit máshol olvastam, de nekem valahogy nem jött össze. Betettem a plusz divet clear: both tulajdonsággal, és ez lett az eredmény. A képen jól látszik, hogy igaz mostmár benne van a befoglaló elemben, de ugyanakkor a befoglaló elem alját lehúzza a bal oldali blokk aljáig.
Olyan nagy kérés lenne, hogy egyszer végre valaki a rávezetés mellett konkrétan segítsen is? Én komolyan értékelem ezt a dolgot, amit itt sokan képviselnek, hogy konkrét legyek: ne halat adj az éhezőnek, hanem inkább tanítsd meg halászni. De ahogy már mondtam, ezer dolgot kipróbáltam és nem igazán jött ki belőle semmi. Tényleg akkora kérés lenne, hogy valaki meg is mutassa, mit csinálok rosszul, és ne csak elmondja a lehetőségeket...?
11

Konkrét segítség 2

Jano · 2006. Feb. 18. (Szo), 20.44
Szerintem az 5-ös hozzászólásom elég konkrét segítség volt de tessék itt van helyetted összeraktam:

Ha a lapozo dobozkarol van szó akkor ennyi a megoldás:

#lapozo {
  border:1px solid black;
  padding:5px;
  text-align:center;
  word-spacing:10px;
}


<div id="lapozo">
 <a href="index.php?nav=Galeria&amp;sub=Dariya&amp;oldal=2">&laquo;</a>
 <a href="index.php?nav=Galeria&amp;sub=Dariya&amp;oldal=1">1</a>
 <a href="index.php?nav=Galeria&amp;sub=Dariya&amp;oldal=2">2</a>
 <big>3</big>
 <a href="index.php?nav=Galeria&amp;sub=Dariya&amp;oldal=4">4</a>
 <a href="index.php?nav=Galeria&amp;sub=Dariya&amp;oldal=5">5</a>
 <a href="index.php?nav=Galeria&amp;sub=Dariya&amp;oldal=4">&raquo;</a>
</div>
13

A lényeg

Anonymous · 2006. Feb. 19. (V), 05.23
Úgy néz ki, nem, vagy csak nagyon nehezen tudom megértetni magam az emberekkel. Igazán nagyon-nagyon hálás vagyok az erőfeszítéseidért. Pont. Nincs de. Illetve én komolyan azt szeretném, ha nem lenne "de", de sajnos van... Mint azt a 6. postban emlondtam, ha csak ehhez a lapozóhoz kellene, hagynám a fenébe (és ez nem csak a középre igazításra volt érvényes). Ez a lapozó csak egy példa volt, amin keresztül szemléltetni tudom a problémát. Ahogy már mondtam, ezer és ezer okból kellhetnek floatolt divek bárhova. Kétlem, hogy ilyen és ehhez hasonló alternatív megoldások mindig szóba jöhetnének. Egyszer szembe kell nézni a ténnyel, hogy nincs alternatív lehetőség.
Igaz, hogy az elején még csak 4 konkrét kérdéssel indul, de mostanra már nyílvánvaló, hogy alapvető gondok vannak ezzel az egésszel. Ennek fényében a nyitó kérdéseket összevonnám egybe, egy kérésbe: Segítenél (vagy bárki más, akinek van egy kis türelme) nekem egy használható három hasábos oldalszerkezet kialakításában? Mert amit én készítettem egy fentebb linkelt tutorial alapján, az nyílvánvalóan nem működik, ha sima szöveg beszúrásánál komolyabb és bonyolultabb dolgokat kell kivitelezni benne.
Én igazán szeretném megérteni és megtanulni ezt a dives dolgot, de egyedül nem megy. Ami fura, ha azt vesszük, hogy a HTML nyelvet úgy ahogy van saját magamtól tanultam meg (nyílván nem mindent, pldául ezt a divezést). Sőt, a PHP is egész jól megy, és szintén segítség nélkül tanultam meg. Ezzel csak azt akarom mondani, hogy az értelmi képességeimmel nem lehetnek túl nagy gondok, képes vagyok a tanulásra. Gugli nekem is a barátom, ismerem, tudom használni, de ez a CSS meg DIV dolog valahogy nekem nem akar összejönni...
12

Nem ugyanaz a szerkezet

Jano · 2006. Feb. 18. (Szo), 20.52
A válasz a kérdésedre pedig az, hogy hiába gondolod, hogy ugyanazzal a módszerrel kell mindent középre igazítani ez nem igy megy.

Elöszőr is az inline típusú elemeket mint láttad a text-align rendezi középre, a blokk típusúakat pedig az automatikus oldal margók (kivéve IE). Float-olt elem nem lehet egyszerre középre igazított is, hiszen annak pont az a lényege, hogy vagy balra, vagy jobbra mászik ki.