• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] HTML und CSS - 1. Schwierigkeit

Status
Für weitere Antworten geschlossen.
L

LetsDOIT

Neues Mitglied
Hallo Zusammen

Ich arbeite im Moment mit vielen Online Tutorials und mache gute Fotschriftte mit HTML und CSS. Nun bin ich bei einem meiner Übungsprojekte auf etwas gestossen, was ich mir auch nach 10maligem Code-durchschauen nicht erklären kann.

Das Übungsprojekt:
Online Bewerbungsunterlagen wo man Motischreiben, Lebenslauf und weiteres sehen kann (einfache statische Site).

Das Problem:
Im Link Lebenslauf.html habe ich für den Lebenslauf eine Tabelle mit zwei Zeilen angelegt:

Name: Muster
Vorname: AuchMuster

Anschliessend habe ich ein h3 gemacht mit Berufererfahrung und dann wieder die Tabelle:

Seit 2012: Mitarbeiter bei Muster

Jedoch kriege ich es einfach nicht hin, das Seit 2012: und Mitarbeiter schön in der gleichen Linie wie Name und Vorname. Es ist irgendwie immer ein bisschen verschoben, egal was ich mache.

Ich poste hier noch meine Dateien (betroffene HTML und CCS Datei.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title>Bewerbungsunterlagen</title>
<meta name="author" content="Daniele">
<meta name="editor" content="html-editor phase 5">
<link rel="stylesheet" type="text/css" href="Style.css">
</head>

<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="Website">
</div>
<div id="Header">
<h1>Unterlagen von Daniele V. Ugas</h1>
</div>
<div id="Main">
<div id="Menu">
<ul>
<li><a href="Erste komplette Website.html">Startseite</a></li>
<li><a href="Lebenslauf.html">Lebenslauf</a></li>
<li><a href="Weiterbildungen.html">Weiterbildung</a></li>
<li><a href="Schulbildung.html">Schulbildung</a></li>
<li><a href="IT-Kenntnisse.html">IT-Kenntnisse</a></li>
<li><a href="Hobbies.html">Hobbies</a></li>
</ul>
</div>
<div id="Content">
<img src="Portrait.png" alt="Portrait Bild">
<h3>Lebenslauf</h3>
<h5>Personenangaben</h5>

<table>
<tr>
<td>Name:</td>
<td>Muster</td>
</tr>
<tr>
<td>Vorname:</td>
<td>Muster</td>
</tr>
<tr>
<td>Strasse:</td>
<td>Bugugustrasse 14</td>
</tr>
<tr>
<td>PLZ und Ort:</td>
<td>0000 Dudugen</td>
</tr>
<tr>
<td>Geburtsdatum:</td>
<td>21.12.1985</td>
</tr>
<tr>
<td>Zivilstand:</td>
<td>ledig</td>
</tr>
</table>

<h5>Berufserfahrung</h5>

<table>
<tr>
<td>Seit 2012:</td>
<td>Mitarbeiter</td>
</tr>
</table>

</div>
</div>
<div id="Footer">
</div>
</body>

</html>

CSS:
body{
background-color:lightgreen;
text-align:center;
}
#Website{
width:980px;
margin:0 auto;
}
#Header{
width:980px;
height:150px;
background:green;
}
#Header h1{
padding-top:50px;
font-size:60px;
font-weight:bold;
color:white;
}
#Main{
width:980px;
}
#Menu{
float:left;
width:200px;
height:365px;
background:green;
margin-top:10px;
margin-bottom:10px;
}
#Menu ul li{
list-style:none;
}
#Menu ul li a{
text-decoration:none;
font-size:20px;
font-weight:bold;
color:white;
display:block;
padding:15px;
text-align:right;
}
#Content{
float:right;
width:770px;
height:800px;
background:green;
margin-top:10px;
margin-bottom:10px;
}
#Content h3{
color:white;
text-align:left;
padding-top:15px;
padding-left:35px;
}
#Content h5{
color:white;
text-align:left;
padding-top:15px;
padding-left:35px;
}
#Content p{
font-size:15px;
color:white;
text-align:left;
padding-left:35px;
padding-right:25px;
}
#Content img{
float:right;
padding-top:0px;
}
#Content td{
padding-right:160px;
font-size:15px;
color:white;
text-align:left;
}
#Footer{
width:980px;
height:30px;
background:green;
margin-top:20px;
clear:both;
}

Kann mir da bitte jemand auf die Sprünge helfen? Ich beisse mir daran schon seit 2 Tagen die Zähne aus.

Greets
Dani
 
Werbung:
Bevor du daran weiter verzweifelst: Dein HTML-Code ist jetzt schon veraltet. Nutze HTML5 und jage den HTML-Code durch einen Validator, um eventuelle Fehler zu finden.
 
Hallo bdt600

Erstmal danke für deinen Tip, das werde ich garantiert machen. Jedoch würde ich dieses Problem trotzdem gerne in diesem Projekt lösen.

Habe gerade gemerkt, wenn ich die h5 Berufserfarhung rausnehme dann passt es. Jedoch möchte ich dieses h5 auch drinn haben. Wie kann kann ich dort eine h5 Überschrift haben und dann mit table weiterfahren, in der gleichen Zellenformatierung wie oben?

Ich benutze auch divs für Header, Content etc. Mit HTML5 werde ich mich anschliessend beschäftigen, wenn ich diese erste Website fertig habe.

Nochmals danke und Grüsse
Dani
 
Werbung:
Hallo

mit vielen Online Tutorials
Zum Vergrößern anklicken....

Ganz schnell vergessen. Die Tutorials haben mit aktuellem HTML und CSS nichts zu tun.

XHTML wurde bereits vor über 8 Jahren offiziell begraben.

HTML-Attribute wie

Code: 
text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"

sind bereits seit dem Jahr 2000 mit der Einführung von HTML4 und CSS2 veraltet und sollen seitdem nicht mehr verwendet werden.

Zudem mißbrauchst du Tabellen zum Layouten. Du hast keine Tabellendaten. Seit dem Jahr 2000 sollen Tabellen nur noch Tabellendaten enthalten.

Entsprechend verhalten sie sich anders als andere Elemente / Container.

Für dein Vorhaben benötigst du eine Liste, genauer eine Liste mit dem dl-Element. Die kannst du dann auch per CSS einheitlich gestalten.

Gruss

MrMurphy
 
Ok, vielen Dank. Ihr habt mit bereits schon enorm weitergehofen. Ich werde das hier jetzt trotzdem noch fertig machen und dann direkt mit HTML5 starten.

Ich habe gerstern noch lange studiert ob ich die Tabelle so zum Layouten misshandle ;) na ja jetzt weiss ichs. Habe gedacht das sei auch eine Tabelle einfach mit zwei Zeilen.

Greets
Dani
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben