position:relative oder float

H

hermanhass

Grünschnabel
hallo
ich habe mal eine generelle Frage:
ich möchte 3 Elemente (z. text,table,grafic, class=elemente) nebeneinander positionieren
und diesen Block als ganzes (class=container, hg-farbe1) zentriert im Elternelement (class=parent, hg-farbe2) (horizontal&vertical).

Dabei habe ich dies wie das u.a. Beispiel auf 2 Wegen gemacht:
1) relative Positionierung (klassen container und elemente)
2) Mit floating (klassen container1 und elemente1)

In beiden Fällen habe ich die Elemente als "inline-block" definiert(ich nehme an, das ist richtig?).
Ergebnisse/Probleme:
Mozilla:
1) elemente sind nebeneinander, OK
keine Postionierung des Containers mittig
Hintergrundfarbe komplett vom container und nicht parent
2) elemente sind nebeneinander, OK
keine Postionierung des Containers mittig
keinerlei Hintergrundfarben
Internet Explorer 6:
1) elemente sind untereinander !
keine Postionierung des Containers mittig
Hintergrundfarbe komplett vom container und nicht parent
2) elemente sind nebeneinander, OK
keine Postionierung des Containers mittig
Hintergrundfarbe nur parent

Welcher Ansatz(relativePos oder foating) richtiger/besser und wie bekomme ich mein gewünschtes Ergebnis (zentrierung) in beiden browsern konform hin?

Vielen Dank und einen sonnigen Gruss aus GC
Hermann

Mein Beipiel:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
	<title>Postest</title>
<style type="text/css">
/* Styles for Formulare */

.parent {
	width:100%;
	background-color: #FFFFCC;
}

.container {
	width:auto;
	margin-left:auto;
	margin-right:auto;
	vertical-align: middle;
	background-color: #66FF99;
}
.elemente {
	display: Inline-Block;
	position: relative;
}

.container1 {
	width:auto;
	margin-left:auto;
	margin-right:auto;
	vertical-align: middle;
	background-color: #66FF99;
	float: none;
}
.elemente1 {
	display: Inline-Block;
	float: left;
}
</style>
</head>
<body>
<div class='parent'>
<div class='container'>
<div class='elemente'>
<table  border="1">
  <tr>
    <td>cell1</td>
    <td>cell2</td>
  </tr>
</table></div>
<div class='elemente'>
<p>ein Text</p></div>
<div class='elemente'>
<p><img src="bg.gif" width="20" height="25"> </p>
</div>
</div>
</div>

<div class='parent'>
<div class='container1'>
<div class='elemente1'>
<table  border="1">
  <tr>
    <td>cell1</td>
    <td>cell2</td>
  </tr>
</table></div>
<div class='elemente1'>
<p>ein Text</p></div>
<div class='elemente1'>
<p><img src="bg.gif" width="20" height="25"> </p>
</div>
</div>
</div>

</body>
</html>
 
Hi,

der display-Eigenschaftswert "inline-block" wir z.Zt. noch nicht browserübergreifend korrekt interpretiert, von daher ist von dieser Formatierung abzuraten, um Elemente mit "Block-Level-Charakteristika" nebeneinander auszurichten, und stattdessen die float-Eigenschaft vorzuziehen.

Und da für .parent width:100% deklariert ist, werden die Blöcke auch browsewrübergreifend untereinander ausgerichtet.

Desweiteren funktioniert eine vertikale Zentrierung mittels vertical-align:middle bei Blockelementen nur in Verbindung mit einem Tabellenwert (table, table-cell) für die display-Eigenschaft.

mfg Maik
 
Hallo Maik, erstmal danke!
ich habe Variante 2 nun genommen.
Mein Problem weiterhin:
das Div mit Klasse parent soll über die ganze Bildschirmbreite mit HG-Farbe1 dargestellt werden. Deshalb width:100%.
In diesem Div soll das div mit Klasse container (mit den elementen) und der HG-Farbe 2 ZENTRIERT werden:

<--parent--------------<container <element1><element2><element2> > --------------->

Gruss Hermann
 
Basierend auf meinem Vorschlag in deinem vergangenen CSS-Thema (Container mit float-Div's zentrieren), ergibt sich dieses Modell:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<title> Stu Nicholls | CSSplay | Centering Floats</title>

<style type="text/css">
* {
        margin:0;
        padding:0;
}

.parent {
        width:100%;
        background-color: #FFFFCC;
}

.container {
        width:auto;
        margin-left:auto;
        margin-right:auto;
        vertical-align: middle;
        background-color: #66FF99;
}

.container ul {
        padding:0;
        margin:0 auto;
        list-style-type:none;
        float:left;
        position:relative;
        left:50%;
  }
.container li {
        float:left;
        position:relative;
        right:50%;
}

.clearfix:after {
        content:".";
        display:block;
        height:0;
        font-size:0;
        clear:both;
        visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
</style>

</head>

<body>

<div class="parent">
     <div class="container clearfix">
          <ul>
              <li>
                  <table  border="1">
                   <tr>
                       <td>cell1</td>
                       <td>cell2</td>
                   </tr>
               </table>
              </li>
              <li>
                  <p>ein Text</p>
              </li>
              <li>
                  <p><img src="bg.gif" width="20" height="25"> </p>
              </li>
          </ul>
     </div>
</div>

</body>
</html>


Vielleicht hilft dir das weiter.

mfg Maik
 
Super, einen ganz herzlichen Dank.

Vielleicht noch einen gannz kleine Änderung als "Nachschlag"
kann ich auch die Elemente vertikal zentriert innerhalb von "Container" setzen?

Nochmals DANKE
Hermann

EDIT

Und noch etwas.
Der Container, der die 3 Elemente "aufnimmt" soll nicht breiter sein, als die 3 Elemente selber und eine anderer Hintergundfarbe haben. Die ganze Zeile ist als class parent definiert, in dem der container mit eigener hintergrundfarbe mittig sitzt. Wie in der kleinen Skizze aus meinem vorletzten beitrag.
 
Moin,

wie von mir gestern eingangs des Themas erwähnt, wird für das vertikale Zentrieren mittels vertical-align:middle zusätzlich die display-Eigenschaft mit einem Tabelleneigenschaftswert benötigt, sofern es sich hierbei nicht um ein Tabellenelement (wie z.B. <td>) handelt.

Hierfür wird das Elternelement mit display:table, und das Nachfolgeelement, dessen Inhalt vertikal ausgerichtet werden soll, mit display:table-cell formatiert.

Du kannst diese Technik anhand dieser Beispiele studieren, die zusätzlich einen Workaround für den IE beinhalten, der die display-Tabellenwerte in der aktuellen Version (IE7) noch immer nicht unterstützt:
In meinem gestrigen Lösungsansatz betrifft es das ul- und li-Element.

Der "Container", der nicht breiter wie sein Inhalt sein soll, wird in meinem HTML-Code nun durch das ul-Element repräsentiert.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück