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

Hilfe bei CSS

Status
Für weitere Antworten geschlossen.
T

tommylik

Neues Mitglied
Hallo an alle,

Ich habe da eine Html-Seite erstellt mit folgendem Code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Personal</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link href="css/grundlayout_test.css" type="text/css" rel="stylesheet" media="all">
<link href="css/inhalt_test.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>
<!--Wrapper Kopf Beginn -->
<div class="colcont_kopf">
<!--Logo lnks Beginn -->
<div class="colboxleft_kopf">
<a title="Startseite" href="http://www.inhaustec.de" target="_top">
<img id="logolinks" src="images/logo001.gif" alt="Firmenlogo" height="100" width="189" border="0"></a>
</div>
<!--Logo lnks Ende -->
<!--Logo rechts -->
<div class="colboxright_kopf">
<img id="logorechts" src="images/logo001.gif" alt="Firmenlogo" height="100" width="189" border="0">
</div>
<!--Logo rechts Ende-->
<!--Kopf mitte Beginn-->
<div class="colboxmiddle_kopf">
<!--Kontaktdaten Beginn -->
<div class="kontakt">
<span class="name">xxxxx GmbH</span><br>
<span class="strasse">xxxxxxxxxxstra&szlig;e 00, 33333 Musterstadt</span><br>
<span class="tel">Tel.: +49 (0)531 232 20 78 Fax: +49 (0)531 232 20 78</span><br>
</div>
<!--Kontaktdaten Ende -->
</div>
<!--Kopf mitte Ende-->
</div>
<!--Wrapper Kopf Ende -->
<!--Wrapper Streifen -->
<div class="padbcont_streifenoben">
<!--Box Streifen-->
<div class="padbox_streifenoben">
</div>
<!--Box Streifen Ende -->
</div>
<!--Wrapper Streifen Ende -->
<!--Wrapper Beginn -->
<div id="wrapper">
<!--Navigation Beginn -->
<div id="navi">
<!--Navigation Menue Beginn -->        
<div class="headnavthemen">
<ul class="liersteebene">
<li class="lierste"><a class="nuranker" href="index.htm">Irgendwas</a>
<li class="lierste"><a class="nuranker" href="inhaustec/solar/index.htm">Irgendwas</a>
<li class="lierste"><a class="nuranker" href="inhaustec/industrie/index.htm">Irgendwas</a>
<li class="lierste"><a class="nuranker" href="news.htm">Irgendwas</a>
<li class="lierste"><a class="nurankeraktiv" href="personal.htm">Irgendwas</a>
<li class="lierste"><a class="nuranker" href="agb.htm">Irgendwas</a>
<li class="lierste"><a class="nuranker" href="impressum.htm">Irgendwas</a>
</ul>
</div>
<!--Navigation Menue Ende -->    
</div>
<!--Navigation Ende -->
<!--Content Beginn -->
<div id="content">
<h2>Unsere Mitarbeiter</h2>
<!--Bild Beginn -->            
<div class="floatleft">
<img id="Bild1" src="images/personal.jpg" alt="Mitarbeiter_1"><br/>
Herr<br/>
Mustermann
</div>
<!--Bild Ende -->
<!--Text Beginn -->    
<p class="personaltext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
<!--Text Ende -->
<!--Clear Div Beginn -->
<div class="cleardiv"></div>
<!--Clear Div Ende -->
<!--Bild Beginn -->
<div class="floatleft">
<img id="Bild2" src="images/person2.jpg" alt="Mitarbeiter2"><br/>
Herr<br/>
Mustermann
</div>
<!--Bild Ende -->
<!--Text Begin -->
<p class="personaltext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<!--Text Ende -->
</div>
<!--Content Ende -->
</div>
<!--Wrapper Ende -->
</body>
</html>
Und zwei CSS Dateien mit folgendem Code:


grundlayout_test.css

Code: 
a.nuranker { color: #000; font-weight: normal; text-decoration:none; }
a.nurankeraktiv { color: #000; font-weight: bold; text-decoration: none; }
body { background-color: #69f; background-repeat: repeat-y; height: 100%; margin: 0; padding: 0; }
html { height: 100%; }
.colboxleft_kopf { width:189px; height:110px; float:left ; padding-top: 10px; }
.colboxmiddle_kopf { width:auto; height:100px; margin-left:189px; margin-right:189px  ; padding-top: 20px; }
.colboxright_kopf { width:189px; height:110px; float:right ; padding-top: 10px; }
.colcont_kopf { width: 100%; height:120px ; }
.headnavthemen { padding-top: 10px; }
.kontakt { text-align: center; }
.lidritte { margin-top: 15px; list-style-type: none; }
.lidritteebene { }
.lierste { font-size: 1.2em; margin-top: 20px; list-style-type: none; }
.liersteebene {  }
.lizweite { margin-top: 15px; list-style-type: none; }
.lizweiteebene {  }
.name { font-size: 2em; font-weight: bold; }
.ort { font-size: 1.2em; }
.padbcont_streifenoben { background-color: #009; background-repeat: no-repeat; width:100%; height:20px ; }
.padbox_streifenoben { width:auto; height:auto; }
.strasse { font-size: 0.8em; }
.tel { font-size: 0.8em; }
#wrapper { position: absolute; width: 100%; height: 100%; }
#navi { position: absolute; top: 0; left: 0; width: 280px; float: left; }
#content { position: absolute; top: 0; left: 280px; right: 0; bottom: 0; padding-top: 10px; padding-left: 50px; }
inhalt_test.css

Code: 
h2.personal { font-size: 1.8em; margin-top: 5px; margin-bottom: 30px; }
p.personaltext { text-align: justify; margin-top: 0; margin-right: 40px; display: block; }
.floatleft { color: #000; font-size: smaller; font-style: italic; background-color: #fff; text-align: center; width: 150px; float: left; clear: both; margin-right: 15px; padding: 15px; }
.floatleft2 { color: #000; font-size: 1.8em; font-weight: bold; background-color: #fff; text-align: center; width: 360px; float: left; margin-top: 0; margin-right: 15px; padding: 15px; border: solid 1px; }
.floatleft2 img { border-color: #000; border-style: solid; border-width: 2px 2px 1px 1px; }
Ich die Codes mit dem W3C Validitor überprüft und auch bestanden.

Ich würde aber gerne mal eure Meinung hören ob ich das so lassen kann.

Oder würdet ihr Profis das vielleicht anders machen.

Über ein paar Tipps würde mich sehr freuen.

Vielen Dank schon mal im vorraus.

Mfg Tommylik
 
Sowas:
Code: 
a.nuranker { color: #000; font-weight: normal; text-decoration:none; }
a.nurankeraktiv { color: #000; font-weight: bold; text-decoration: none; }
ist einfacher zu lesen und kürzer wenn du es folgendermaßen schreibst:
Code: 
A{
color: #000;
text-decoration:none;
}

A.nuranker{
font-weight: normal;
}

A.nurankeraktiv{
font-weight: bold;
}
Aber sonst ok. Denk immer an Übersichtlichkeit beim Code schreiben. Wenn Du in CSS Tags direkt ansprichst, also ohne id oder klasse, dann schreib die Tags groß (so wie oben). Das liest sich einfacher.

Weiter so. Endlich mal wieder jemand, der validen Code abliefert:D
 
Hallo gruenspan,

Sorry das ich mich jetzt erst melde aber ich mußte letzte Woche auswärts arbeiten.

Also vielen Dank für deine Begutachtung und Mühe, dein Tipp war sehr hilfreich und ich hab was dazu gelernt.

Besten Dank

Mfg Tommylik
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben