zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS -> Text einrücken nach variabler Breite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.08.2007, 00:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2007
Beiträge: 8
tc-burgi befindet sich auf einem aufstrebenden Ast
Standard CSS -> Text einrücken nach variabler Breite

Hallo zusammen,

ich bastel zur Zeit ein wenig an meinem Webblog. Seit 2 Tagen beschäftigt mich folgendes Problem zu dem ich noch keine Lösung "ergooglen" konnte

Ich erstelle gerade einen Lebenslauf von mir zu dem ich folgende Werte wie folgt angeben möchte:

Name: (Variable Breite) Irgendwer
Vorname: (Variable Breite) Irgendwer_2
Strasse: (Variable Breite) Irgendwo

Irgendwer, Irgendwer_2 und Irgendwo sollen natürlich bündig untereinander stehen.

Meine Frage ist nun lässt sich dies nur mit einem zweiten DIV realisieren oder habe ich mit "text-indent" bzw "margin-left" oder einer anderen Möglichkeit eine Chance dies zu realisieren?

Oder ist dies sogar was für eine Tabelle? Meiner Meinung nach aber nicht.

Das Problem ist, dass sich <span margin-left:4.5em>Irgendwer</span> (als Beispiel) natürlich in diesem Fall auf Name bezieht. In der nächsten Zeile stimmt der Abstand dann natürlich nicht mehr.

Für alle Interessierten anbei der Quellcode zu dem ich auch gerne noch mehr Verbesserungsvorschläge entgegennehme.

Vielen Dank schonmal vorab für eure Hilfe!!!

Lg
Manuel

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">
<head>
  <style type="text/css">
    body { margin:0px; padding:0px; }
    .ueberschrift1 { font-size:1.5em; font-weight:bold; }
    .ueberschrift2 { font-size:1.0em; font-weight:bold; text-decoration:underline; }
    .text { font-size:0.7em; line-height:1.4em; }
    .leblauf_wert { margin-left:3.5em; }
    div#kopf_leblauf { width:450px; height:150px; background-color:red; }
    img#leblauf_mbu { width:160px; height:120px; float:right; }
  </style>
  <title>Lebenslauf Manuel ***</title>
  </head>
  <body>
    <p class="ueberschrift1">Lebenslauf</p>
    <p class="ueberschrift2">Persönliche Daten</p>
      <div id="kopf_leblauf">
        <img id="leblauf_mbu" src="CIMG1222_Klein.JPG" alt="Manuel Burkhardt" />
    <p class="text">Name: <span class="leblauf_wert">***</span><br />
             Vorname: <span class="leblauf_wert">Manuel</span><br />
             Strasse: ***<br />
             Postleitzahl: ***<br />
             Ort: ***<br />
             Land: Deutschland<br />
    </p>
    </div>
</body>
</html>

Geändert von tc-burgi (22.08.2007 um 00:34 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.08.2007, 00:38
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
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

Zitat:
Zitat von tc-burgi Beitrag anzeigen
Name: (Variable Breite) Irgendwer
Vorname: (Variable Breite) Irgendwer_2
Strasse: (Variable Breite) Irgendwo
Das würde ich als dl darstellen. "Name" in dt und "Irgendwer" in dd eröffnet auch viele Möglichkeiten zur Darstellung per CSS (z.B. dt floatet mit passender Breite und dd bekommt entsprechenden margin-left).

Zitat:
Zitat von tc-burgi Beitrag anzeigen
Code:
<p class="ueberschrift1">Lebenslauf</p>
Daraus wird eine echte Überschrift:

Code:
<h1>Lebenslauf</h1>
Analog bei den übrigen Überschriften ("Persönliche Daten" wird eine h2).
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.08.2007, 00:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2007
Beiträge: 8
tc-burgi befindet sich auf einem aufstrebenden Ast
Standard

Hallo heiko_rs,

vielen Dank erstmal für die schnelle Antwort.

Die Überschrift werde ich natürlich sofort anpassen..Anfängerfehler

Zu dem Rest. Wie ich in selfhtml sehe definiert dd wohl einen Definitionslisteneintrag mit festem Abstand der sich nicht auf dt bezieht. Falls sich das optisch so anpassen lässt, dass ich es wie oben beschrieben hinbekomme ist das perfekt.

Vergewaltige ich die Definitionlist dann als anderes Objekt oder würdest Du das als "ok" durchgehen lassen?

Grüsse
Manuel
Mit Zitat antworten
  #4 (permalink)  
Alt 22.08.2007, 00:52
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
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

Zitat:
Zitat von tc-burgi Beitrag anzeigen
Falls sich das optisch so anpassen lässt, dass ich es wie oben beschrieben hinbekomme ist das perfekt.
Kein Problem, mache es so wie in meinem Vorposting beschrieben.

Zitat:
Zitat von tc-burgi Beitrag anzeigen
Vergewaltige ich die Definitionlist dann als anderes Objekt
Nein, der Einsatzbereich von dl wurde längst offiziell erweitert, siehe auch hier: Vorsprung durch Webstandards | Retro-Coding: Semantischer Code ist der Anfang von gutem Design
Mit Zitat antworten
  #5 (permalink)  
Alt 22.08.2007, 00:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2007
Beiträge: 8
tc-burgi befindet sich auf einem aufstrebenden Ast
Standard

Die Anpassung passt perfekt..vielen Dank für die schnelle Hilfe!!!

Sollte jemand ein ähnliches Problem haben kann er sich gerne an mich wenden per Mail.

-> Mission complete!!!

Viele Grüsse
Manuel
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
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 17:30
Wachsende Container Andy CD CSS 13 10.02.2010 13:08
Float und Clear Earl of Green CSS 3 22.02.2009 18:48
Float-Bilder im Fließtext an Absatz binden netAction CSS 17 19.02.2008 15:18
Grafik in einer Tabellenzelle rechts unten ausrichten ? Worance CSS 1 19.11.2006 15:09


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:03 Uhr.