zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie stellt man ich ein Feld unter und nebeneinander dar.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.01.2008, 16:55
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.06.2007
Beiträge: 90
Piet befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.01.2008, 17:07
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.034
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Mit float und clear.

dt und dd lässt du nach links floaten und dt zusätzlich links clearen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.01.2008, 17:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.06.2007
Beiträge: 90
Piet befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #4 (permalink)  
Alt 30.01.2008, 17:53
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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;.
Mit Zitat antworten
  #5 (permalink)  
Alt 30.01.2008, 18:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.06.2007
Beiträge: 90
Piet befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Das CMS Contao - Vor- und Nachteile hubspe Ressourcen 30 18.02.2011 11:18
Google Ad paracelsus Offtopic 95 23.12.2010 12:06
2worx - CMS/Baukasten mit Chancen? AndreasMueller Barrierefreiheit 14 09.11.2010 14:06
xhtml validator error doni (X)HTML 40 17.09.2004 06:20
Float Problem, 4 Inhalts Elemente nebeneinander denny CSS 0 23.08.2004 15:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:26 Uhr.