hilfe bei programmierung
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bild
boxen
code
display
eintrag
feld
header
http
image
index
inhalt
layout
navigation
position
problem
span
tabelle
text
url
webseite
-
ich habe eine seite gestaltet und auch versucht sie zu programmieren, allerdings habe ich da nicht so viel ahnung von.
deswegen wäre ich voll dankbar, wenn mir jemand auf die sprünge helfen würde.
problem 1: zwischen bildern und rahmen ist ein kleiner zwischenraum (border-collapse und margin:0 hilft nicht)
problem 2: die bilder für die navigation im css bestehen aus schrägen feldern, worauf die navigation aus html passen soll.
aber irgendwie musste ich mir mit leerzeichen behelfen um das ganze richtig zu rücken. wie kann ich das anders machen?
problem 3: wenn ich auf den navigationspunkt "eintrag" klicke, erscheint ein kleiner weißer punkt, aber auch nur, wenn ich draufklicke
(von eintrag.html auf eintrag.html) so auch beibei den anderen, außer bei linux.html.... was ich sehr merkwürdig finde
wenn jemand noch sonstige verbesserungsvorschläge hat, bin ich sehr dankbar, weil ich gerade dabei bin html und css zu lernen.
vielen dank schonmal!
hier der code
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Rick's Homepage</title> <link href="../style.css" rel="stylesheet" type="text/css" /> <meta name="author" content="" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="copyright" content="" /> <meta name="robots" content="index,follow" /> </head> <body> <center> <table class="tabelle" width="840px"> <tr> <td colspan="2" width="840px" height="175px"> <div class="header" /> </td> </tr> <tr> <td class="navibg" > <div class="layer30" /> <div class="layer31" /> <div class="layer32" /> <div class="layer33" /> <div class="layer34" /> <div class="layer35" /> <div class="layer36" /> <div class="navicolor"> <table class="navitable" width="623px" height="23px" align="center" cellpadding="0px"> <tr> <td width="85px" height="19px"><center></center></td> <td width="85px" height="19px"><center></center></td> <td width="85px" height="19px"><center><a href="../index.html">Index</a></center></td> <td width="85px" height="19px"><center><a href="./linux.html">Linux </ a></center></td> <td width="85px" height="19px"><a href="./eintrag.html"><div class="hov"> Eintrag</div></a></td> <td width="85px" height="19px"><a href="./galerie.html"> Galerie</a></td> <td width="85px" height="19px"><a href="./archiv.html"> Archiv</a></td> </tr> </table> </div> </td> <td class="linkbg" rowspan="2" width="217" height="75px"> <div class="links"> <ul> <li>link1</li> <li>link2</li> <li>link3</li> </ul> </div> </td> </tr> <tr> <td> <div class="feld"> <div class="news"> <center>++ news ++</center></div> <div class="inhalt"> Inhalt </div> </div> </td> </tr> </table> </center> </body> </html>
css:
a:link {text-decoration: none; color: #FFFFFF;} a:visited {text-decoration: none; color: #FFFFFF;} a:active {text-decoration: none; color: #FFFFFF;} a:hover {text-decoration: none; color: #ffff00;} a:focus {text-decoration: none; color: #FFFFFF;} .header { background:#000000 url(images/header.jpg); border: 0px; left:0px; margin:0px; padding: 0px; height:175px;; width:840px; position:relative; z-index:10; } body { background:#666666; color:#000000; margin-top: 2px; font-family: myriad pro, arial; font-style: italic; font-size: 15px; } .tabelle { border-collapse: collapse; border-width: 3px; border-style: solid; border-color: #ffff00; top: 0px; } td { border-collapse: collapse; border-width: 3px; border-style: solid; border-color: #ffff00; } .navitable td { border: none; } .navibg { background: #000000; z-index:28; } .linkbg { background: #999999; z-index:28; } .links { margin-top: -250px; } .feld { background:#000000 url(images/feld.jpg); border: 0px; left:0px; top:0px; margin: 0px; height:522px;; width:623px; position:relative; z-index:20; } .news {color: #ffffff; top: 18px; position:relative;} .inhalt {margin-left: 30px; margin-top: 40px; position: relative;} .navicolor {color: #ffffff; border: 0px; font-size:13px; font-weight:bold; left:-514px; top:0px; position:absolute;} .hov {color: #ffff00;} .layer32 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:relative; z-index:30; } .layer33 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:relative; z-index:30; } .layer34 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:relative; z-index:30; } .layer35 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:relative; z-index:30; } .layer36 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:relative; z-index:30; } .layer37 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:relative; z-index:30; }
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
ich habe es mal hochgeladen (die homepage ist nicht für mich, aber ich kanns ja wieder löschen)
http://sessin.lima-city.de/Rickspage/index.html -
problem 1: zwischen bildern und rahmen ist ein kleiner zwischenraum (border-collapse und margin:0 hilft nicht)
Ich weiß nicht welche Bilder gemeint sind, ich finde zumindest keine. Versuche mal ein Reset-Stylesheet zu benutzen oder einfach:
* {margin:0;padding:0;border:0;}
problem 2: die bilder für die navigation im css bestehen aus schrägen feldern, worauf die navigation aus html passen soll.
Da passt aber rein gar nichts
aber irgendwie musste ich mir mit leerzeichen behelfen um das ganze richtig zu rücken. wie kann ich das anders machen?
Die Navigation sollte im HTML so ausehen:
Keine Tabelle, keine nicht-logische falsche divs! Der Rest wird über CSS gestaltet. Schau dir bitte mal auf selfhtml den Beitrag zur Navigationsgestaltung (horziontal) an.<div id="nav"> <ul> <li><a href="#" title=#">Linktext</a></li> <li><a href="#" title=#">Linktext</a></li> <li><a href="#" title=#">Linktext</a></li> <li><a href="#" title=#">Linktext</a></li> </ul> </div>
problem 3: wenn ich auf den navigationspunkt "eintrag" klicke, erscheint ein kleiner weißer punkt, aber auch nur, wenn ich draufklicke
Hyperlinks lassen sich mit ":active" formatieren, wenn man gerade darauf klickt. Versuch da mal etwas zu machen. Vllt. "border:0;outline:none;". Wüsste gerade nicht woher der kommt.
(von eintrag.html auf eintrag.html) so auch beibei den anderen, außer bei linux.html.... was ich sehr merkwürdig finde
wenn jemand noch sonstige verbesserungsvorschläge hat, bin ich sehr dankbar, weil ich gerade dabei bin html und css zu lernen.
Du benutzt(missbrauchst) Tabellen für die Gestaltung einer Webseite- in der Regel sollte man die mit div-Boxen machen. Dazu solltest du dir das Boxmodell anschauen. Das hilft erst mal grundlegend zu verstehen, wie man margin, padding, etc. richtig benutzt. Dann nach ein paar simplen Tutorials Ausschau halten, die mit div-Elementen eine Webseite zusammensetzen -
mit bildern meinte ich zB den header. aber das problem ist gelöst mit cellspycing="0px" und cellpadding="0px".
vielen dank für den tipp, ich habe die anleitung von selfhtml befolgt. aber ganz ohne leerzeichen bin ich trotzdem nicht ausgekommen
ja und die komischen weißen punkte sind jetzt auch verschwunden... aber ich habe sie mir nicht eingebildet, du hast
sie doch auch gesehen, oder?
findest du wirklich ich missbrauche tabellen fürs design? aber die sind doch auch ein gestaltungsmittel. ich finde das praktisch.
habe auch keine ahnung wie das mit div boxen funktionieren soll, das wäre ja voll kompliziert...
ist es allgemein die regel, das man für sowas keine tabellen nimmt?
http://sessin.lima-city.de/Rickspage/index.html
a:link {text-decoration: none; color: #FFFFFF;} a:visited {text-decoration: none; color: #FFFFFF;} a:active {text-decoration: none; color: #FFFFFF;} a:hover {text-decoration: none; color: #ffff00;} a:focus {text-decoration: none; color: #FFFFFF;} .header { background:#000000 url(images/header.jpg); border: 0px; left:0px; margin:0px; padding: 0px; height:175px;; width:840px; position:relative; z-index:10; } body { background:#666666; color:#000000; margin-top: 2px; font-family: myriad pro, arial; font-style: italic; font-size: 15px; } .tabelle { border-collapse: collapse; border-width: 3px; border-style: solid; border-color: #ffff00; top: 0px; } td { border-collapse: collapse; border-width: 3px; border-style: solid; border-color: #ffff00; } ul#Navigation { padding: 4px; text-align: center; color: #ffffff; font-size:13px; font-weight:bold; margin-left:-340px; margin-top: 0px; } ul#Navigation li { list-style: none; display: inline; margin: 0px; padding: 18px; } ul#Navigation a, ul#Navigation span { padding: 0px; text-decoration: none; border: 0px; } * html ul#Navigation a, * html ul#Navigation span { width: 1em; /* nur fuer IE 5.0x erforderlich */ w/idth: auto; /* sicherheitshalber fuer IE 6 zurueckgesetzt */ } ul#Navigation a:hover, ul#Navigation span { color: #ffff00; } .navibg { background: #000000; z-index:28; } .linkbg { background: #999999; z-index:28; } .links { margin-top: -250px; } .feld { background:#000000 url(images/feld.jpg); border: 0px; padding: 0px; left:0px; top:0px; margin: 0px; height:522px;; width:623px; position:relative; z-index:20; } .news {color: #ffffff; top: 18px; position:relative;} .inhalt {margin-left: 30px; margin-top: 40px; position: relative;} .hov {color: #ffff00;} .layer32 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:relative; z-index:30; } .layer33 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:relative; z-index:30; } .layer34 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:relative; z-index:30; } .layer35 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:relative; z-index:30; } .layer36 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:relative; z-index:30; } .layer37 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:relative; z-index:30; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Rick's Homepage</title> <link href="./style.css" rel="stylesheet" type="text/css" /> <meta name="author" content="" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="copyright" content="" /> <meta name="robots" content="index,follow" /> </head> <body> <center> <table class="tabelle" width="840px" cellpadding="0px" cellspacing="0px"> <tr> <td colspan="2" width="840px" height="175px"> <div class="header" /> </td> </tr> <tr> <td class="navibg" > <div class="layer30" /> <div class="layer31" /> <div class="layer32" /> <div class="layer33" /> <div class="layer34" /> <div class="layer35" /> <div class="layer36" /> <nobr> <ul id="Navigation"> <li><span><a href="./index.html">Index</a></span></li> <li><a href="content/linux.html"> Linux</a></li> <li><a href="content/eintrag.html"> Eintrag</a></li> <li><a href="content/galerie.html">Galerie</a></li> <li><a href="content/archiv.html">Archiv</a></li> </ul> </nobr> </td> <td class="linkbg" rowspan="2" width="217" height="75px"> <div class="links"> <ul> <li>link1</li> <li>link2</li> <li>link3</li> </ul> </div> </td> </tr> <tr> <td> <div class="feld"> <div class="news"> <center>++ news ++</center></div> <div class="inhalt"> Inhalt </div> </div> </td> </tr> </table> </center> </body> </html>
Beitrag zuletzt geändert: 25.8.2009 12:27:40 von sessin -
sessin schrieb: findest du wirklich ich missbrauche tabellen fürs design? aber die sind doch auch ein gestaltungsmittel. ich finde das praktisch.
habe auch keine ahnung wie das mit div boxen funktionieren soll, das wäre ja voll kompliziert...
ist es allgemein die regel, das man für sowas keine tabellen nimmt?
Tabelle dienen dazu Daten übersichtlich aufzubereiten. Das liegt hier aber nicht vor! Als solche Daten könnte man beispielsweise einen Abfahrtsplan mit Ankunft etc. verstehen. Du nutzt ja dabei diese Tabellen um ein Layout passend hinzubekommen. Das ist wenn man es genau nimmt falsch. Es gibt viele solcher Tabellenlayouts im Web, da sie als einfach empfunden werden.
Daher komme ich nochmal auf die Wesentlichen Bestandteile zurück. (Ich mach mir nur die Mühe, weil ich das Gefühl hab, dass du lernwillig bist )
Wenn du wirklich gutes Webdesign machen willst, solltest du zwischen Inhalt und Layout strikt trennen!
Inhalt = HTML
HTML dient zur Auszeichnung. Du kennzeichnest somit den Inhalt und gibst eine semantische Bedeutung. Dazu ist es einfach wichtig, dass du die verschiedenen HTML Elemente richtig einsetzt.
Layout = CSS
CSS formatiert den Inhalt. Dazu gehört eigentlich alles was das Layout betrifft hinzu. CSS ist daher auch schwer, da es ziemlich viele Kniffe gibt und man bei größeren Projekten auch viel falsch machen kann. Um deiner Webseite Layout einzuhauchen solltest du ein externes Stylesheet nutzen. In HTML wird lediglich entsprechende IDs und Klassen verteil.
Übringes: Das center-Element sollte man nicht mehr verwenden, es ist veraltet
Diese Webseite lässt sich mit wenigen Boxen aufbauen, etwa so:
<div id="wrap"> <div id="header"></div> <div id="aside"></div> <div id="section"> <div id="nav"></div> <div id="content"></div> </div> </div>
In HTML5 wäre es noch semantischer mit section, header, aside, nav, footer als Elemente!
Wenn du dich mit CSS beschäftigt hast, wird es ein leichtes sein das HTML-Gerüst zu formatieren. -
wenn ich das ganze nicht mit center in die mitte rücke wie denn sonst?
und wegen den boxen.. wie meinst du das? würde ich jetzt für den wrap im css background: yellow definieren?
und dann für den border der tabelle display: none?? die boxen sollte ich mit header, aside etc benennen?
hab grad echt keinen peil wie du das meinst.
zurzeit beutze ich ja ein externes stylesheet, das ist doch richtig, oder?
wann benutzt man class und wann id?
so viele fragen
bist du programmierer, wenn ich fragen darf?
auf jedenfall danke für deine mühe
-
sessin schrieb:
wenn ich das ganze nicht mit center in die mitte rücke wie denn sonst?
So macht man das z.B.:
#gesamteseite { left: 50%; margin-left: -400px; width: 800px; }
sessin schrieb:
und wegen den boxen.. wie meinst du das?
Mmmh, den Platz zwischen <div> und </div> nennt man Box - .einfach erklärt: wenn du den Befehl border 1px einsetzen würdest, würde sich eine schöne 4eckige Box ergeben: http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap08.html#heading-8
zurzeit beutze ich ja ein externes stylesheet, das ist doch richtig, oder?
Das ist schon richtig, doch du musst eben zwischen Gestaltungsbefehlen (css) und reinem Text (html) unterscheiden. Das Design bestimmst du im css und in dein html kommt nur der Text hinein. Dadurch kannst du deine Seite umgestalten, indem du nur allein die css änderst, wärend die html immer gleich bleibt. Schönes Beispiel dazu ist: http://www.csszengarden.com/. Klick mal auf die Links und die Seite ändert sich total, dabei ist das html-Dokument immer das selbe!
wann benutzt man class und wann id?
http://www.html-seminar.de/class_und_id.htm
-
kaetzle7 schrieb:
Ja, beinahe. Lediglich das Attribut "position:absolute" vergessen, das Elternelement hat dagegen "position:relative"sessin schrieb:
wenn ich das ganze nicht mit center in die mitte rücke wie denn sonst?
So macht man das z.B.:
#gesamteseite { left: 50%; margin-left: -400px; width: 800px; }
Einfacher:
#gesamtseite {margin: 0 auto;}
Ich glaube soweit hat das die Katze gut erklärt. Wenn du dich einliest wird es klarer, bei spezifischen Fragen helfen wir ja gerne weiter. -
voll hammer das mit dem zen garden, ich habe fast alle durchgeklickt *gg*
http://sessin.lima-city.de/Rickspage/index2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Rick's Homepage</title> <link href="./css2.css" rel="stylesheet" type="text/css" /> <meta name="author" content="" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="copyright" content="" /> <meta name="robots" content="index,follow" /> </head> <body> <div id="wrap"> <div id="header" /> <div id="nav" > <div id="layer30" /> <div id="layer31" /> <div id="layer32" /> <div id="layer33" /> <div id="layer34" /> <div id="layer35" /> <div id="layer36" /> <nobr> <ul id="navi"> <li><span><a href="./index.html">Index</a></span></li> <li><a href="content/linux.html"> Linux</a></li> <li><a href="content/eintrag.html"> Eintrag</a></li> <li><a href="content/galerie.html">Galerie</a></li> <li><a href="content/archiv.html">Archiv</a></li> </ul> </nobr> </div> <div id="aside" /> <ul> <li>link1</li> <li>link2</li> <li>link3</li> </ul> </div> <div id="section"> <div class="news"> ++ news ++ </div> </div> <div id="content"> Inhalt </div> </div> </div> </body> </html>
a:link {text-decoration: none; color: #FFFFFF;} a:visited {text-decoration: none; color: #FFFFFF;} a:active {text-decoration: none; color: #FFFFFF;} a:hover {text-decoration: none; color: #ffff00;} a:focus {text-decoration: none; color: #FFFFFF;} #header { background:#000000 url(images/header.jpg); left:0px; top: 0px; margin:3px; height:175px;; width:840px; position: absolute; z-index:10; } body { background:#666666; color:#000000; left: 50%; margin-top: 0px; margin-left:-423px; width: 846px; font-family: myriad pro, arial; font-style: italic; font-size: 15px; position: relative; } #wrap { background: #ffff00; margin: 0 auto; position: absolute; width: 846px; height: 732px; } #nav { background: #000000; z-index:28; position: absolute; top: 178px; width: 623px; height: 23px; margin: 0px; } #aside { background: #999999; z-index:28; margin: 3px; top:-3px; left: 283px; width: 214px; height: 548px; position: absolute;} #section { background:#000000 url(images/feld.jpg); left:-343px; top:23px; margin: 3px; height:522px;; width:623px; position: absolute; z-index:20; } .news {color: #ffffff; top: 18px; left: 45%; position:absolute; } ul#navi { padding: 4px; text-align: center; color: #ffffff; font-size:13px; font-weight:bold; margin-left:-340px; position: absolute; top: -13px; left: 7px; } ul#navi li { list-style: none; display: inline; padding: 18px; } ul#navi a, ul#navi span { padding: 0px; text-decoration: none; border: 0px; } * html ul#navi a, * html ul#navi span { width: 1em; /* nur fuer IE 5.0x erforderlich */ w/idth: auto; /* sicherheitshalber fuer IE 6 zurueckgesetzt */ } ul#navi a:hover, ul#navi span { color: #ffff00; } #content {position: absolute; top: 80px; left: -300px; z-index: 40;} #layer32 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:absolute; z-index:30; } #layer33 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:absolute; z-index:30; } #layer34 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:absolute; z-index:30; } #layer35 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:absolute; z-index:30; } #layer36 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:absolute; z-index:30; } #layer37 { background: url(images/navi.gif); left:85px; top:0px; height:23px;; width:93px; position:absolute; z-index:30; }
jetzt ist alles in boxen. ist es recht so?
puh aber das css ist jetzt ellenlang!
war es eigentlich richtig, die tabelle zu löschen? ohne css ist der inhalt ein einziges chaos.
was mir noch voll schleierhaft ist das mit relative und absolte. ich rate immer meistens klappt entweder nur relative oder nur absolute... eine mischung klappt iwi nicht!?
-
Hallo,
jetzt ist alles in boxen. ist es recht so?
Ja, du bist auf dem richtigen Weg, allerdings sind noch einige Mängel enthalten, werde gleich darauf eingehen.
puh aber das css ist jetzt ellenlang!
war es eigentlich richtig, die tabelle zu löschen? ohne css ist der inhalt ein einziges chaos.
Ja, die Tabelle zu entfernen war richtig, allerdings hast du recht, ohne CSS ist es nahezu unmöglich da was herauszulesen. Demnach ist der HTML-Teil nicht ausgereift. Eine Webseite sollte zwar nicht schön ohne CSS sein, allerdings trotzdem funktionsfähig und aufschlussreich.
was mir noch voll schleierhaft ist das mit relative und absolte. ich rate immer
Bei diesem Layout sollte die Positionierung eigentlich nur relativ sein. Zum Lesen! meistens klappt entweder nur relative oder nur absolute... eine mischung klappt iwi nicht!?
Also fangen wir mit dem Code an.
1. Lesson: Leere Divs zu verwenden ist nicht wirklich Semantik (das betrifft nicht verschachtelte divs)
Falsch:<div id="header" />
Richtig:<div id="header"><h1><a href="/" title="Home">Das ist Ricks Webseite</a></h1></div>
Du möchtest höchst wahrscheinlich nicht, dass man den Text 'Das ist Ricks Webseite' liest. Das kannst natürlich mit CSS machen. Hier wieder wichtig der Unterschied. Damit das semantischen Wert hat, ist es grundlegend wichtig zu sagen, was das für eine Webseite ist. Da es ja der User erkennt ohne diesen Test zu lesen, kannste den Text sozusagen aus dem Blickfeld rücken via CSS natürlich:
#header h1 a {text-indent: -9999px;}
Im Übrigen sollte der Hyperlink a hier als Blockelement versehen werden (display:block;)
2. Lesson: Die schöne Navigation oder wie style ich meine ungeordnete Liste
Hier fliegen zunächst wieder die unnötigen divs heraus, die braucht man nicht, <nobr> ist nicht valide. Das ganze sollte so aussehen:
Mehr sollte da nicht stehen.<ul id="navi"> <li><a href="/">Index</a></li> <li><a href="#">Linux</a></li> <li><a href="#">Eintrag</a></li> <li><a href="#">Galerie</a></li> <li><a href="#">Archiv</a></li> </ul> </div>
CSS sollte in etwa so aussehen:
Allerdings muss man daran wahrscheinlich noch etwas arbeiten. Ich habe das ganze lediglich mit Firebug etwas zurecht gebogen! Hier taucht auf jeden Fall das Problem auf, dass du zu sehr absolut positioniert hast.ul#navi li { background:transparent url(images/navi.gif) no-repeat scroll 0 0; display:inline; float:left; height:23px; list-style:none; text-align:center; width:93px; } ul#navi a, ul#navi span { border:0 none; display:block; height:20px; padding:3px 0 0; text-decoration:none; width:93px;}
3. Lesson: Positionierung der Boxen ohne absolute Positionierung
Ich hatte ja schon mal den Aufbau notiert:
<div id="wrap"> <div id="header"></div> <div id="aside"></div> <div id="section"> <div id="nav"></div> <div id="content"></div> </div> </div>
Bei keinem dieser Elemente wird eine absolute Positionierung gebraucht. Da mir das jetzt zu viel ist verweise ich mal auf eine Seite. Hab es überfolgen und sieht gut und verständlich aus. Bitte! Hier musste jetzt einfach mal durchlesen und dein Stylesheet nochmal neu aufsetzen.
Im Übrigen ist "float" von großer Bedeutung. Einen Rahmen erzeugt man im übrigen mit "border"
4. Lesson: Abschließende Worte
Du bist auf dem richtigen Weg, durch die divs hat sich schon einiges gebessert. Kontrolliere am besten deine Seite selbst mit dem Validator hinsichtlich HTML und CSS. Wenn du irgenwann mal an den Inhalt gehst, bleibe semantisch (p, img, h1-h6, em, strong, ...) und baue auch eine ordentliche Verzeichnisstruktur auf. Schlecht wäre
Besser wäre/content/bilder.html /content/impressum.html/bilder/index.html /impressum.html
Dann wünsch ich dir mal wieder viel Spaß und vernachlässige bitte meine Rechtschreibfehler
!
-
bevor ich jetzt mein ganzes css über den haufen werfe muss ich dich aber noch einiges fragen...
Ja, die Tabelle zu entfernen war richtig, allerdings hast du recht, ohne CSS ist es nahezu unmöglich da was herauszulesen. Demnach ist der HTML-Teil nicht ausgereift. Eine Webseite sollte zwar nicht schön ohne CSS sein, allerdings trotzdem funktionsfähig und aufschlussreich.
bei diesem Layout sollte die Positionierung eigentlich nur relativ sein. Zum Lesen!
Ich hab mir das durchgelesen, echt, aber geklingelt hats nicht ....
wenn jeder browser so unterschiedlich auf css reagiert, dann wäre eine tabelle doch sicherer, oder? welche vorteile habe ich vom design nur durch css, ausser das ich es echt kompliziert finde?
1. Lesson: Leere Divs zu verwenden ist nicht wirklich Semantik (das betrifft nicht verschachtelte divs)
Falsch:<div id="header" />
Richtig:<div id="header"><h1><a href="/" title="Home">Das ist Ricks Webseite</a></h1></div>
Du möchtest höchst wahrscheinlich nicht, dass man den Text 'Das ist Ricks Webseite' liest. Das kannst natürlich mit CSS machen. Hier wieder wichtig der Unterschied. Damit das semantischen Wert hat, ist es grundlegend wichtig zu sagen, was das für eine Webseite ist. Da es ja der User erkennt ohne diesen Test zu lesen, kannste den Text sozusagen aus dem Blickfeld rücken via CSS natürlich:
#header h1 a {text-indent: -9999px;}
Im Übrigen sollte der Hyperlink a hier als Blockelement versehen werden (display:block;)
hä? wieso sollte ich etwas hinmachen wo nichts sein soll und dann auch noch ausgerechnet eine überschrift und einen link??
in meinen augen ist das irgendwie überflüssig. wenn leere divs überall funktionieren ist das schwachsinnige semantik.
tut mir leid, aber im moment versteh ich den sinn der sache echt nicht.
lesson: Die schöne Navigation oder wie style ich meine ungeordnete Liste[/u]
Hier fliegen zunächst wieder die unnötigen divs heraus, die braucht man nicht, <nobr> ist nicht valide. Das ganze sollte so aussehen:
Mehr sollte da nicht stehen.<ul id="navi"> <li><a href="/">Index</a></li> <li><a href="#">Linux</a></li> <li><a href="#">Eintrag</a></li> <li><a href="#">Galerie</a></li> <li><a href="#">Archiv</a></li> </ul> </div>
CSS sollte in etwa so aussehen:
Allerdings muss man daran wahrscheinlich noch etwas arbeiten. Ich habe das ganze lediglich mit Firebug etwas zurecht gebogen! Hier taucht auf jeden Fall das Problem auf, dass du zu sehr absolut positioniert hast.ul#navi li { background:transparent url(images/navi.gif) no-repeat scroll 0 0; display:inline; float:left; height:23px; list-style:none; text-align:center; width:93px; } ul#navi a, ul#navi span { border:0 none; display:block; height:20px; padding:3px 0 0; text-decoration:none; width:93px;}
voll cool, das habe ich schon ausprobiert. ist auf jedenfall übersichtlicher und viel weniger code!
3. Lesson: Positionierung der Boxen ohne absolute Positionierung
Ich hatte ja schon mal den Aufbau notiert:
<div id="wrap"> <div id="header"></div> <div id="aside"></div> <div id="section"> <div id="nav"></div> <div id="content"></div> </div> </div>
Bei keinem dieser Elemente wird eine absolute Positionierung gebraucht. Da mir das jetzt zu viel ist verweise ich mal auf eine Seite. Hab es überfolgen und sieht gut und verständlich aus. Bitte! Hier musste jetzt einfach mal durchlesen und dein Stylesheet nochmal neu aufsetzen.
Im Übrigen ist "float" von großer Bedeutung. Einen Rahmen erzeugt man im übrigen mit "border"
aber da würde doch eindiv fehlen, denn ich brauche ja nicht nur ein feld für den bildlichen content, sondern auch für schriftlichen, dh news und inhalt und so. was würde passieren wenn ich alles ineinander verschachtele und alle divs am ende schließe? dann ist auch keiner leer.
welche bedeutung hat float? kann man nicht alles mit top und left positionieren?
4. Lesson: Abschließende Worte
Du bist auf dem richtigen Weg, durch die divs hat sich schon einiges gebessert. Kontrolliere am besten deine Seite selbst mit dem Validator hinsichtlich HTML und CSS. Wenn du irgenwann mal an den Inhalt gehst, bleibe semantisch (p, img, h1-h6, em, strong, ...) und baue auch eine ordentliche Verzeichnisstruktur auf. Schlecht wäre
Besser wäre/content/bilder.html /content/impressum.html/bilder/index.html /impressum.html
ja ich hatte die seite bereits validiert (wo die tabelle noch war) und alle fehler beseitigt. wenn ich jetzt alles mit css mache, dann
müsste ich das natürlich nochmal machen.
auch wenn ich nicht so viel verstehe danke ich dir auf jeden fall für deine mühe!
Beitrag zuletzt geändert: 27.8.2009 23:17:48 von sessin -
sessin schrieb: wenn jeder browser so unterschiedlich auf css reagiert, dann wäre eine tabelle doch sicherer, oder? welche vorteile habe ich vom design nur durch css, ausser das ich es echt kompliziert finde?
Eine Tabelle ist nicht sicherer, sie scheint für die bequemer zu sein. Es gibt noch genügend Agenturen, die ihren Kunden ein Tabellenlayout bezahlen lassen. Aber ich glaube ich wiederhole mich, wenn ich sage, dass eine Tabelle nicht gedacht ist um daraus ein Layout zu machen. Wir alles wissen doch, dass pure Bequemlichkeit nicht zum Erfolg führt.
Das CSS nicht einfach ist, ist mir auch klar, aber es gehört nunmal zu gutem Webdesign dazu.
Im Übrigen ist es auch nicht leicht HTML richtig anzuwenden.
sessin schrieb: hä? wieso sollte ich etwas hinmachen wo nichts sein soll und dann auch noch ausgerechnet eine überschrift und einen link??
Ich hatte glaube ich nicht hingeschrieben, dass lima das genau so macht. Was ich dir da gezeigt habe ist Semantik. Nimm ein leeres Blatt Papier (Webseite) und klatsch ne Text darauf. Dass das nicht logisch ist, sollte klar sein. Webseiten haben in der Regel auch eine Überschrift und zwar ganz oben mit höchster Priorität (h1). In der Regel liefert aber dein Header-Bild für die Besucher auch diese Information, für Suchmaschinen ist diese Überschrift allerdings wichtig! Jetzt zu dem Hyperlink. Das gehört zu Usability. Du klickst auf das Logo/Header und gelangst auf die Startseite. Das sind solche Sachen, die die Bedienung einfach verbessern. Sollte dir auffallen, wenn du dir mal ein paar Webseiten genauer anschaust.
in meinen augen ist das irgendwie überflüssig. wenn leere divs überall funktionieren ist das schwachsinnige semantik.
tut mir leid, aber im moment versteh ich den sinn der sache echt nicht.
Nicht alles was funktioniert ist doch logisch! Ich kann dir hier keine predigen halten über Semantik, will ich auch nicht. Da ich der Auffassung bin, dass man mit der Zeit selbst sieht, was logisch ist und was nicht. Nimm mal an du kriegst einen Text zum Lesen und markierst dir bestimmte Stellen. Wenn du intelligent genug bist, wirst du die Textstellen so markieren, dass du ohne Weiteres den Text nocheinmal überfliegen kannst, und weißt um was es geht. Das ist Semantik. Im Webdesign zeichnest du aus, du musst wissen ob etwas logisch ist. Wenn du der Meinung bist, dass ein leeres div logisch ist, kannste es gerne machen. Wenn du der Meinung bist, dass eine Tabelle logisch ist für eine Layout, dann tue das. Ich halte dich nicht davon ab, ich empfehle dir Sachen. Aber du hast immer die Möglichkeit dir ein Bild darüber zu machen. Wenn du denkst, was ich sage ist falsch, begründe es und dann ist gut. Ansonsten überdenke und ziehe womöglich andere Quellen hinzu. Aber vergiss bitte nicht, dass Bequemlichkeit nichts mit Logik zu tun hat.
sessin schrieb: aber da würde doch eindiv fehlen, denn ich brauche ja nicht nur ein feld für den bildlichen content, sondern auch für schriftlichen, dh news und inhalt und so. was würde passieren wenn ich alles ineinander verschachtele und alle divs am ende schließe? dann ist auch keiner leer.
welche bedeutung hat float? kann man nicht alles mit top und left positionieren?
Ehrlich gesagt weiß ich nicht, was du meinst. Es ist doch alles da, ein header, eine navi, eine sidebar und eins für content. Schau mal auf deine Seite, da sind vier Boxe gelb umrahmt. Mehr sind es nicht.
float gehört zu relativer Positionierung. Das solltest du auch probieren, denn absolute schränkt dich ein. Bei absolute benutzt du top/left. -
sorry!
ich glaube dir auf jeden fall das du ahnung hast und das es richtig ist was du sagst! wenn ich etwas unlogisch finde, dann weil ich keine ahnung habe. zum thema agenturen und tabellenlayouts: in so einer war ich, aber nur für zwei monate. da habe ich praktikum gemacht, und die haben mir immer eingeschärft das sie mit tabellen arbeiten. deswegen musst du mir verzeihen, für mich ist das alles noch etwas neu, und habe auch kaum erfahrung.
die positionierung finde ich etwas schwierig.
und das mit dem border kriege ich nicht hin {border: 3px; bordercolor: #ffff00;} klappt nicht
http://sessin.lima-city.de/Rickspage/index2.html
wie mache ich, das der abstand zum fensterrand 0 ist?
a:link {text-decoration: none; color: #FFFFFF;} a:visited {text-decoration: none; color: #FFFFFF;} a:active {text-decoration: none; color: #FFFFFF;} a:hover {text-decoration: none; color: #ffff00;} a:focus {text-decoration: none; color: #FFFFFF;} #header { background:#000000 url(images/header.jpg); left:3px; top: 3px; margin:0px; height:175px;; width:840px; position: relative; z-index:10; } a #header {text-indent: -9999px; display: block;} body { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#666666; color:#000000; left: 50%; top: 0px; padding: 0px; margin-top: 0px; margin-left:-423px; width: 846px; font-family: myriad pro, arial; font-style: italic; font-size: 15px; position: relative; } #wrap { background: #ffff00; margin-top: 0px; top: 0px; position: relative; width: 846px; height: 732px; } #nav { background: #000000; z-index:30; position: relative; margin-top: -26px; margin-left: 0px; float: left; width: 623px; height: 23px; } #aside { background: #999999; z-index:28; margin-top: 6px; margin-right: 3px; top:0px; left: 0px; float: right; width: 214px; height: 548px; position: relative;} #section { background:#000000 url(images/feld.jpg); margin-top: 32px; margin-left: 3px; float: left; height:522px;; width:623px; position: relative; z-index:20; } .news {color: #ffffff; top: -30px; left: 37%; position:relative; } ul#navi { padding: 0px; text-align: center; color: #ffffff; font-size:13px; font-weight:bold; margin-left: 10%; position: relative; margin-top: 0px; left: 0px; } ul#navi li { background:transparent url(images/navi.gif) no-repeat scroll 0 0; display:inline; float:left; height:23px; list-style:none; text-align:center; width:93px; } ul#navi a, ul#navi span { border:0 none; display:block; height:20px; padding:3px 0 0; text-decoration:none; width:93px; } * html ul#navi a, * html ul#navi span { width: 1em; /* nur fuer IE 5.0x erforderlich */ w/idth: auto; /* sicherheitshalber fuer IE 6 zurueckgesetzt */ } ul#navi a:hover, ul#navi span { color: #ffff00; } #content {position: relative; top: 50px; left: 50px; z-index: 40;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Rick's Homepage</title> <link href="./css2.css" rel="stylesheet" type="text/css" /> <meta name="author" content="" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="copyright" content="" /> <meta name="robots" content="index,follow" /> </head> <body> <div id="wrap"> <a href="index.html" title="Home"><div id="header"><h1>Ricks Website</h1></div></a> <div id="aside"> <ul> <li>link1</li> <li>link2</li> <li>link3</li> </ul> </div> <div id="section"> <div id="nav"> <ul id="navi"> <li><span><a href="./index.html">Index</a></span></li> <li><a href="content/linux.html">Linux</a></li> <li><a href="content/eintrag.html">Eintrag</a></li> <li><a href="content/galerie.html">Galerie</a></li> <li><a href="content/archiv.html">Archiv</a></li> </ul> </div> <div id="content"> <div class="news"> ++ news ++ </div> Inhalt </div> </div> </div> </div> </body> </html>
Beitrag zuletzt geändert: 30.8.2009 22:29:45 von sessin -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
