Antworten auf deine Fragen:
Neues Thema erstellen

Abstand html

imac123

Nicht mehr ganz neu hier

Hallo

Wie kann ich im HTML so etwas machen? mit so einem schönem/grossem abstand? und in eine gerade Linie?

Ich habe probiert mit ul, ol aber geht nicht wirklich super, mit Tabellen auch nicht.
 

patrick_l

Hat es drauf

AW: Abstand html

Freunde dich mit CSS und dem Boxmodell an. Cythux hat ja bereits ein paar Links dazu gepostet. Auch von mir zum Lernen ein paar Verweise, um dich schneller zurecht zu finden. Einmal allgemein HTML und CSS sowie speziell das Boxmodell.

- HTML5-Handbuch - Webkompetenz
- Einführung in XHTML, CSS & Webdesign (Michael Jendryschik)
- Michael Jendryschik » Das CSS-Boxmodell
- Little Boxes | Webseiten gestalten - HTML & CSS (Peter Müller)
- CSS 4 You - The Finest in Stylesheets

Liebe Grüße, Patrick
 

FlashZange

Nicht mehr ganz neu hier

AW: Abstand html

Nix gegen Boxmodell, aber ist das nicht das Musterbeispiel für eine stinknormale Tabelle?
Wäre meiner Meinung nach semantisch doch sinnvoller?

Liebe Grüße
 

cebito

undefined

AW: Abstand html

Nix gegen Boxmodell, aber ist das nicht das Musterbeispiel für eine stinknormale Tabelle?
Wäre meiner Meinung nach semantisch doch sinnvoller?

Liebe Grüße
Lies mal hier , semantisch richtig also eher als Definitionsliste.
Ansonsten haben Tabellen natürlich auch ihre Berechtigung, ich zitiere mal aus dem von mir verlinkten Text
Eine dargestellte Tabelle macht dann Sinn, wenn die Spalten der Reihen zueinander in Bezug stehen oder zu vergleichen wären.
 

FlashZange

Nicht mehr ganz neu hier

AW: Abstand html

In dem Fall benutze ich die Tabelle doch nicht, um das Layout zu gestalten, sondern um Eigenschaften Werte zuzuordnen oder? Ich zweifel grad ein wenig an mir :p

Liebe Grüße

EDIT: @cebito danke für den Link, daran hab ich bisher noch gar nicht gedacht. Wenn ich nur einen Wert habe, scheint das eine gute Lösung zu sein.
 
Zuletzt bearbeitet:

imac123

Nicht mehr ganz neu hier

AW: Abstand html

Ich habe es so gemacht, funktioniert auch.

HTML:
<div id="personalien">
<p><strong class="ich">Geboren:</strong> <span id="ich1">02.0x.1xxx in xxxx</span></p>
<p><strong class="ich">Sprachen:</strong> <span id="ich2">xxxxxxxx</span></p>
<p><strong class="ich">Nationalit&auml;t:</strong> <span id="ich3">xxxxxxxx</span></p>
<p><strong class="ich">Zivilstand:</strong> <span id="ich4">xxxxxx</span></p>
<p><strong class="ich">Hobby's:</strong> <span id="ich5">xxxxxxxxxxxxx</span></p>
<p><strong class="ich">AHV Nr:</strong> <span id="ich6">1xxxxxxx</span></p>

</div>

Code:
/*---anfang geboren,zivilstandd,hobby usw---*/
.ich{
	color:brown;
	background-color:#F5FAD7;
	}
#ich1{margin-left:2.500em;}
	
#ich2{margin-left:2.063em;}

#ich3{margin-left:1.125em;}
	
#ich4{margin-left:1.875em;}
	
#ich5{margin-left:2.625em;}

#ich6{margin-left:3em;}

/*---ende ueber mich: geboren,zivilstand,hobby usw---*/







Dann habe ich gleich noch was gemacht, und habe die ID #ich1 dazu gebraucht.
(Achtung die Schuljahre stimmen nicht, es geht nur um die Übung. :D

HTML:
<!--Anfang Box-r-schuljahre-->
<div id="box-r">
<h2>Schuljahre</h2>
<p><strong class="schuljahre">08/2003 - 08/2187:</strong> <span class="ich1">Berufsschule, xxx</span></p>
<p><strong class="schuljahre">08/1950 - 08/2001:</strong> <span class="ich1">Berufsschule, xxx</span></p>
<p><strong class="schuljahre">08/1900 - 08/1950:</strong> <span class="ich1">Sekundarschule, xxx</span></p>
<p><strong class="schuljahre">08/1800 - 08/1900:</strong> <span class="ich1">Primarsachule, xxx</span></p>
<p><strong class="schuljahre">08/1800 - 08/1900:</strong> <span class="ich1">Primarschule, xxx</span></p>
</div>
<!--Ende Box-r-schuljahre-->

Code:
.schuljahre{
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	}



Sieht so aus:
 

patrick_l

Hat es drauf

AW: Abstand html

Benutze für deinen (tabellarischen) Daten eine Tabelle:
HTML:
<table id="werdegang">
  <tr>
    <td class="jahr">1995 - 1999</td>
    <td class="schule">Grundschule, xxx</td>
  </tr>
  <tr>
    <td class="jahr">1999 - 2005</td>
    <td class="schule">Realschule, xxx</td>
  </tr>
  <tr>
    <td class="jahr">2005 - 2009</td>
    <td class="schule">Berufsschule, xxx</td>
  </tr>
</table>

Für die Schriftvergabe auch nur ein »Fallback«, eine Ersatzschrift sowie die Angabe ob Schrift mit oder ohne Serifen. Cebito hat es ja schon erwähnt. Tabellen haben ihre Berechtigung. In diesem Fall ein klares ja. Also nutze sie.

Liebe Grüße, Patrick
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben