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

Neues Design

Status
Für weitere Antworten geschlossen.

Franky55555

Neues Mitglied
Hi!

Ich hab ein neues Design geschrieben (ohne Programm, per Hand). Wie findet ihr es?
Der CSS-Code kommt bei der endgültigen Version noch in ein externes CSS-File. Beim IE < 4.0 wird sie (obwohl Valide) falsch angezeigt!
Der Contentbereich ist im IE unter der navi, hat aber horizontal die richtige Position.
Hier der Link: Test
Und hier der Code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Test</title>
<style type="text/css">

body {
   background-color:#8c8c8c;
   background-image:url(http://danielfrank.bplaced.net/test/test1/bg.png);
   background-repeat:repeat-x;
   font-family:arial;
   background-position:0px -200px;
}

#container {
   width:770px;
   margin:50px auto;
   border:0px solid #ff0000;
}

#logo {
   position:fixed;
   float:left;
   height:100px;
   width:100px;
   border:0px solid #000000;
   background-color:#ffffff;
   background-image: url(http://danielfrank.bplaced.net/test/test1/logo.png);
}

#navi {
   position:fixed;
   float:left;
   clear:both;
   margin-top:50px;
   height:150px;
   width:95px;
   border:0px solid #000000;
}





#content {
   position:relative;
   margin-left:150px;
   width:600px;
   min-height:500px;;
   border:0px solid #000000;
   font-size:10pt;
   padding:10px;
   background-color:#ffffff;
}


.button {
   background-image: url(http://danielfrank.bplaced.net/test/test1/button.png);
   background-repeat:no-repeat;
   padding:3px;
   padding-top:6px;
   padding-left:7px;
   color:#000000;
   text-decoration:none;
   width:100%;
   display:block;
   font-size:10pt;
}

.button:hover {
   background-image: url(http://danielfrank.bplaced.net/test/test1/button_hover.png);
}

</style>
</head>
<body>

<div id="clearer">
</div>

<div id="container">



<div id="logo">
</div>



<div id="navi">

<a href="index.html" class="button"><b>Home</b></a>
<a href="uebermich.html" class="button"><b>&Uuml;ber Mich</b></a>
<a href="projekte.html" class="button"><b>Projekte</b></a>
<a href="bilder.html" class="button"><b>Bilder</b></a>
<a href="links.html" class="button"><b>Links</b></a>
<a href="impressum.html" class="button"><b>Impressum</b></a>

</div>





<div id="content">


Auf dieser Seite geht es um Elektronik, Hochspannung, Modellbau und Technik.
<br>
Die Seite Befindet sich noch im Aufbau.
<br>
<br>
<b>News:</b><br>
20.8.2008: Das Projekt "Roboter" ist online.<br>
28.7.2008: Die Seite ist online.
<br>
<br>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fdanielfrank.bplaced.net%2Ftest%2Ftest1%2F">Diese Seite ist valide.</a><br>
Achtung: Im Internet Explorer wird die Seite trotzdem nicht richtig dargestellt!

</div>


</div>

</body>
</html>
MfG

Edit: noch eine Frage: wie mache ich es, dass der Hintergrund immer auf der selben Stelle ist? mit position:fixed;? wo müsste ich das dann einfügen?
 
Zuletzt bearbeitet:
Werbung:
hi.

design:
ist nicht schön aber auch nicht hässlich.
vll etwas farblos und eher langweilig.
es fehlen die eyecacher. z.b ein gift grünes irgendwas wo den user interessieren könnte.

code:
sieht ok aus.
vll des css noch in eine extra datei.

fazit:
der anfang passt, jetzt noch en bissle rumprobieren und vll mal bei anderen webseiten schauen was die so haben.
und noch einiges mehr an inhalt.

Gruß KY
 
Sieht bisschen langweilig aus, für den Inhalt einfach ein weißes Feld da... und das "Logo" mit weißem Hintergrund... nääää, finde das geht garnicht.

Ach den Code hab ich noch vergessen :D

Der Doctype kommt mir irgendwie kurz vor... :?

Wie wäre es noch mit einrücken, dass er übersichtlicher ist?

Und wieso sind da so viele Leerzeilen?

Und .button:hover kann doch der IE nicht, der kann :hover doch nur auf a?

Und Du hast da...
Code:
<div id="clearer">
</div>
... was aber nirgends definiert ist!?

Das Menü könnte man vielleicht auch mit einer Liste machen (<ul> und <li>)...

Und anstatt <br> lieber <p> benutzen.

Und wenn schon, dann auch gleich XHTML ;)

Nachtrag: Den Hintegrund kannst Du wenn dann mit background-postion: positionieren. Siehe background-position: Hintergrund positionieren: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
das logo wird natürlich noch geändert, is nur ein platzhalter.
das <div id="clearer"></div> kommt weg.
scc-datei wird noch extern gemacht.
also bei mir geht der hover efekt.
 
Du meinst CSS-Datei, nicht SCC, gell? :mrgreen::mrgreen::mrgreen::mrgreen:

:hover geht nur auf a bei Opera und bis Internet Explorer 6 ;)
 
Werbung:
Werbung:
Werbung:
Lass die <b> und <br> weg und verwende stattdessen Überschriften (<h1></h1>, <h2></h2>,...) und Absätze (<p></p>). Gegebenfalls kannst du sie noch per CSS formatieren. Der Doctype ist mir unbekannt :D und du könntest das Logo auch direkt formatieren, anstatt es in ein extra div zu packen.

Das Design ist... ziemlich lahm, aber jeder fängt mal klein an. ;)

EDIT:
Mach das CSS in eine seperate CSS-Datei.
 
meine meinung: Langweilig.
Du hast einfach ein paar objekte irgendwo hingeklatscht
Versuch das ganze mal etwas mehr zu strukturieren
 
Werbung:
wieso soll ich <b> und <br> weglassen? laut validator ist es ja erlaubt, oder?
Den Docktype hab ich aus selfhtml.
CSS-datei wird noch gemacht
Es ist valide, aber semantisch inkorrekt. Überschriften zeichnet man mit <h1></h1> aus, Absätze mit <p></p>, Listen mit <ul><li></li></ul>, usw. Dafür ist HTML da. Zum Strukturieren. Gegebenfalls kannst du die Elemente noch mit CSS formatieren.
 
Werbung:
Verstehst Du es nicht oder willst Du nich?

Hier ganz einfach:
Mit <br> machst Du Zeilenumbrüche. Statdessen verwendest Du lieber <p> und </p>:

HTML:
Dies ist ein Text<br>

Das ist das selbe wie:
HTML:
<p>Dies ist ein Text</p>

Nur das das letzte richtig ist ;) Außerdem fällt das <span> weg, weil du class in <p> einsetzen kannst. Also <p class="deineklasse">Text</p>. Genau dasselbe bei der Überschrift. Setz die in <h1>, <h2>, <h3>, <h4> oder <h5>, die kannst Du dann auch mit CSS formatieren (größe, dick oder dünn, kursiv usw.)

Setz die Überschrift am besten auch in ein <p> mit class="ueberschrift" ;)
 
ok, überredet, ich werds ändern.

Edit: ich hab eine zweite Testseite hinzugefügt (Impressum)
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.
Zurück
Oben