XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Wie stellt man ich ein Feld unter und nebeneinander dar. (http://xhtmlforum.de/showthread.php?t=50152)

Piet 30.01.2008 16:55

Wie stellt man ich ein Feld unter und nebeneinander dar.
 
Wie kann ich in CSS den unten stehenden code so formatieren, dass es wie folgt ausgegeben wird - ohne aber das ich auf den HTML zugriff habe:

Vorname: Latisha

Nachname: lla




<code>
dl>
<dt class="profile-profile_vorname">Vorname</dt>
<dd class="profile-profile_vorname">Latisha</dd>
<dt class="profile-profile_nachname">Nachname</dt>
<dd class="profile-profile_nachname">lla</dd>
</dl>
</code>

inta 30.01.2008 17:07

Mit float und clear.

dt und dd lässt du nach links floaten und dt zusätzlich links clearen.

Piet 30.01.2008 17:19

funktioniert das auch wenn ich mehrere Zeilen habe?
So:

<code>
<dl>
<dt class="profile-profile_username">Username</dt>
<dd class="profile-profile_username">laura</dd>
<dt class="profile-profile_strasse">Strasse, Hausnr.</dt>
<dd class="profile-profile_strasse">www,5</dd>
<dt class="profile-profile_plz">Postleitzahl</dt>
<dd class="profile-profile_plz">
<a href="/web/profile/profile_plz/554485">554485</a>
</dd>
<dt class="profile-profile_ert">Ort</dt>
<dd class="profile-profile_ert">Adelsheim (Baden-Württemberg)</dd>
<dt class="profile-profile_bundesland">Bundesland</dt>
<dd class="profile-profile_bundesland">
</dd>
<dt class="profile-profile_festnetz">Festnetznummer</dt>
<dd class="profile-profile_festnetz">555</dd>
</dl>
</code>

heiko_rs 30.01.2008 17:53

Ja, dann stehen dt und dd immer paarweise untereinander, genauso wie Du's auch haben willst. Und solange dd immer mindestens genauso hoch ist wie dt, gibt's auch nirgendwo Probleme.

Übrigens solltest Du evtl. width von dt und margin-left von dd in em angeben, oder - wenn Du gar keine tabulator-artige Einrückung haben willst, beides weglassen und dt ohne width floaten (seit CSS 2.1 erlaubt) und ihm nur ein kleines padding-right in em geben, um ein "Leerzeichen "zu erzeugen, und sicherheitshalber auch noch white-space: nowrap;.

Piet 30.01.2008 18:02

danke heiko,

habe es folgendes gemacht, im Moz passts, im IE7 fehlt allerdings "nachname", mhm verstehe das nicht.

<code>
dl dt.profile-profile_vorname, dd.profile-profile_vorname {
display:inline;
float:left;
margin:20px 0px 0px;
min-height:2px;
padding-left:2em;
}
dl dt.profile-profile_vorname {
clear:left;
margin-top:20px;
min-height:0px;
}
dl dt.profile-profile_nachname, dd.profile-profile_nachname {
display:inline;
float:left;
margin:20px 0px 0px;
min-height:2px;
padding-left:25px;
}
dl dt.profile-profile_nachname {
clear:left;
margin-top:20px;
min-height:0px;
}
dl dt.profile-profile_username, dd.profile-profile_username {
display:inline;
float:left;
margin:20px 0px 0px;
min-height:0px;
padding-left:25px;
}
dl dt.profile-profile_username {
clear:left;
margin-top:20px;
min-height:0px;
}
dl dt.profile-profile_strasse, dd.profile-profile_strasse {
display:inline;
float:left;
margin:20px 0px 0px;
min-height:0px;
padding-left:25px;
}
dl dt.profile-profile_strasse {
clear:left;
margin-top:20px;
min-height:0px;
}
dl dt.profile-profile_plz, dd.profile-profile_plz {
display:inline;
float:left;
margin:20px 0px 0px;
min-height:0px;
padding-left:25px;
}
dl dt.profile-profile_plz {
clear:left;
margin-top:20px;
min-height:0px;
}
dl dt.profile-profile_ort, dd.profile-profile_ort {
display:inline;
float:left;
margin:20px 0px 0px;
min-height:0px;
padding-left:25px;
}
dl dt.profile-profile_ort {
clear:left;
margin-top:20px;
min-height:0px;
}
</code>

Zudem noch ein Punkt: ich kenne den Hack html * für den IE 7, jedoch reagiert auch mozilla auf diesen hack, was ist hier zu raten?


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:08 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023