|
|||
Zitat:
Davon abgesehen sehe ich nicht viele Schwierigkeiten. |
Sponsored Links |
|
|||
So ich habe mal am Code gebastelt:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Startseite - Moba-Technik.de</title> <style type="text/css"> body { margin:0px auto; width: 1000px; font: normal 14pt Arial, Verdana, Tahoma; color: black; background-color: #585858; } div#header { margin: 0; } div#menu { background-color: #B8B8B8; height: 43px; margin: 0; } div#inhalt { background-color: #E8E8E8; margin: 0; } div#footer { background-color: #B8B8B8; margin: 0; } ul#Navigation { margin: 0; padding: 0; text-align: center; } ul#Navigation li { list-style: none; float: left; position: relative; margin: 0.4em; padding: 0; } ul#Navigation li ul { margin: 0; padding: 0; position: absolute; top: 1.6em; left: -0.4em; display: none; } ul#Navigation li:hover ul { display: block; background-color: #B8B8B8; } ul#Navigation li ul li { float: none; display: block; } ul#Navigation a, ul#Navigation span { display: block; width: 120px; padding: 2px; text-decoration: none; color: black; background-color: #B8B8B8; border: 1px solid black; border-color: #B8B8B8; } ul#Navigation a:hover, ul#Navigation span, li a#aktuell { border: 1px solid black; border-color: white; border-left-color: black; border-top-color: black; color: black; background-color: #B8B8B8; } a#aktuell { color: black; background-color: #B8B8B8; } </style> <body> <div id="header"><img src="logo.png" alt="Logo"></div> <div id="menu"><ul id="Navigation"> <li><a id="aktuell" href="index.html">Startseite</a></li> <li><a href="aktuelles.html">Aktuelles</a></li> <li><a href="#Artikel">Artikel</a> <ul> <li><a style="font-size: 10pt" href="hausbeleuchtung_richtig.html">Hausbeleuchtung, aber richtig</a></li> <li><a style="font-size: 10pt" href="beste_roco_zentrale.html">Das Beste aus Ihrer Roco-Zentrale herausholen</a></li> <li><a style="font-size: 10pt" href="anlagenverdrahtung_hilfreiche_kabel.html">Alagenverdrahrung und hilfreiche Kabel</a></li> <li><a style="font-size: 10pt" href="ausgestaltung_gleise.html">Ausgestaltung ihrer Gleise</a></li> <li><a style="font-size: 10pt" href="hilfreiches_zubehoer.html">Hilfreiches Zubehör</a></li> <li><a style="font-size: 10pt" href="individuelle_innenbeleuchtung.html">Individuelle Innenbeleuchtung</a></li> <li><a style="font-size: 10pt" href="sonderposten_einzelstuecke.html">Sonderposten und Einzelstücke</a></li> </ul> </li> <li><a href="bestellen.html">Bestellen</a></li> <li><a href="#Versand">Versand</a> <ul> <li><a style="font-size: 12pt" href="versandkosten.html">Versandkosten</a></li> <li><a style="font-size: 12pt" href="agb.html">AGB</a></li> </ul> </li> <li><a href="ueber_uns.html">Über uns</a></li> <li><a href="impressum.html">Impressum</a></li> </ul></div> <div id="inhalt"> <br> <br> <br> <br> <br> <br> <br> <p style="white-space: pre; color: rgb(7, 93, 167); text-align: center;"> <span style="font-size: 32pt;">Moba-Technik.de - Feine Lösungen </span> <span style="font-size: 32pt;">für den anspruchsvollen Modellbahner</span> <br> <br> <br> <span style="font-size: 20pt;">Digitaltechnik, individuelle Beleuchtung</span> <span style="font-size: 20pt;">von Waggons und Häusern in Kleinserie</span> <br> <br> <br> <br> </p> </div> <div id="footer"> <p style="text-align: center; white-space: pre; padding: 10px"><span style="font-size: 15pt">Copyright © 2011 Oliver Mühlenbein</span> <span style="font-size: 9pt">Website-Layout by Denis Heinen</span> </p> </div> </body> </html> |
Sponsored Links |
|
|||
Zitat:
Das ist normales Verhalten von Blockelementen. Dem kannst du z.B. entgegenwirken wenn du den div-Elementen einen Rahmen oder padding gibst (dann kannst du dir auch das padding in den p-Elementen sparen ).
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
|
|||
Der Link ist nicht aktualisiert.
Abstände: Lies bitte in den [FAQ]FAQ[/FAQ] zum CSS-Prolog. Außerdem: DOCTYPE-Switch: Unerklärliche Lücken zwischen Elementen pt ist eine ungeeignete Einheit für Bildschirmdarstellung. Oder würdest du auf die Idee kommen, etwas in Millimeter anzugeben? Nimm em- oder Prozentwerte. Allgemein: Lies dich doch erstmal grundsätzlich ein, sonst fischst du weiter im Trüben. Empfehlung: LB Teil 1 (von 2009) kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
So habe mal einen kompletten neuen Code geschrieben:
Code:
<!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" lang="de" xml:lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Startseite - Moba-technik.de</title> <style type="text/css"> body { background-color: #585858 } div#wrapper { width: 1000px; margin: auto; font: normal 14pt Arial, Verdana, Tahoma; color: black; } div#menu { background-color: #B8B8B8; height: 43px; margin: 0 } ul#Navigation { margin: 0; padding: 0; text-align: center } ul#Navigation li { list-style: none; float: left; position: relative; margin: 0.4em; padding: 0 } ul#Navigation li ul { margin: 0; padding: 0; position: absolute; top: 1.6em; left: -0.4em; display: none } ul#Navigation li:hover ul { display: block; background-color: #B8B8B8 } ul#Navigation li ul li { float: none; display: block } ul#Navigation a, ul#Navigation span { display: block; width: 120px; padding: 2px; text-decoration: none; color: black; background-color: #B8B8B8; border: 1px solid black; border-color: #B8B8B8 } ul#Navigation a:hover, ul#Navigation span, li a#aktuell { border: 1px solid black; border-color: white; border-left-color: black; border-top-color: black; color: black; background-color: #B8B8B8 } a#aktuell { color: black; background-color: #B8B8B8;} div#inhalt { background-color: #E8E8E8; white-space: pre; color: #075DA7 ; text-align: center; } div#footer { background-color: #B8B8B8; text-align: center; white-space: pre } </style> </head> <body id="startseite"> <div id="wrapper"> <div id="header"> <img src="logo.png" alt="Logo"> </div> <div id="menu"> <ul id="Navigation"> <li><a id="aktuell" href="index.html">Startseite</a></li> <li><a href="aktuelles.html">Aktuelles</a></li> <li><a href="#Artikel">Artikel</a> <ul> <li><a style="font-size: 10pt" href="hausbeleuchtung_richtig.html">Hausbeleuchtung, aber richtig</a></li> <li><a style="font-size: 10pt" href="beste_roco_zentrale.html">Das Beste aus Ihrer Roco-Zentrale herausholen</a></li> <li><a style="font-size: 10pt" href="anlagenverdrahtung_hilfreiche_kabel.html">Alagenverdrahrung und hilfreiche Kabel</a></li> <li><a style="font-size: 10pt" href="ausgestaltung_gleise.html">Ausgestaltung ihrer Gleise</a></li> <li><a style="font-size: 10pt" href="hilfreiches_zubehoer.html">Hilfreiches Zubehör</a></li> <li><a style="font-size: 10pt" href="individuelle_innenbeleuchtung.html">Individuelle Innenbeleuchtung</a></li> <li><a style="font-size: 10pt" href="sonderposten_einzelstuecke.html">Sonderposten und Einzelstücke</a></li> </ul> </li> <li><a href="bestellen.html">Bestellen</a></li> <li><a href="#Versand">Versand</a> <ul> <li><a style="font-size: 12pt" href="versandkosten.html">Versandkosten</a></li> <li><a style="font-size: 12pt" href="agb.html">AGB</a></li> </ul> </li> <li><a href="ueber_uns.html">Über uns</a></li> <li><a href="impressum.html">Impressum</a></li> </ul> </div> <div id="inhalt"> <br> <br> <br> <br> <br> <br> <span style="font-size: 32pt;">Moba-Technik.de - Feine Lösungen für den anspruchsvollen Modellbahner</span> <br> <br> <br> <span style="font-size: 20pt;">Digitaltechnik, individuelle Beleuchtung von Waggons und Häusern in Kleinserie</span> <br> <br> <br> <br> <br> <br> </div> <div id="footer"> <span style="font-size: 15pt">Copyright © 2011 Oliver Mühlenbein</span> <span style="font-size: 9pt">Website-Layout by Denis Heinen</span></p> </div> </div> </body> </html> |
|
|||
Moin,
ein paar Anmerkungen:
gruß, take |
|
|||
Danke für die Tipps:
-Benutze pt nur für die Schriftgröße da ich die von Word, usw kenne, sonst nur px. -Die ö kommen noch von den alten Dateien, hatte keine Lust die wieder in ö umzuändern. - Wie CSS auslagern ? Eine .css Datei erstellen ? - Logo mit Image-Remplacement umsetzen ? Wie geht das denn ? |
|
|||
Zitat:
Jup. Und dann per HTML-Code:
<link rel="stylesheet" type="text/css" href="/pfad/zur/css/datei.css" />
http://meiert.com/de/publications/articles/20050513/ gruß, take |
|
|||
Welche Einheit soll ich denn für die Schriftgröße nehmen ?
Danke hat funktioniert mit der .css Datei. Das Image-Remplacement hat leider nicht funktioniert...Muss das denn so gemacht werden ? |
Sponsored Links |
|
|||
Ich nehme immer Pixel (px), obwohl empfohlen wird (und es ist auch wirklich besser, ich bin nur zu faul und IE ist mir sowieso egal ) em zu nehmen. Denn Pixel kann der IE nicht skalieren (keine Ahnung bis zu welcher Version, die neuen könnens glaub ich).
Was funktioniert denn nicht, beim Image-Replacement? Welche Methode hast du genommen, und wie sieht dein Code aus? gruß, take |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
paar Probleme mit dem CSS Layout | SimonK. | CSS | 6 | 05.10.2008 15:57 |
ein paar css probleme... | Krebskasper | CSS | 1 | 09.07.2006 14:54 |
Anfänger erbittet ein paar Tips. | Dr.Crow | (X)HTML | 5 | 20.06.2006 12:47 |
Ein paar Probleme: (Hintergrundbild <div>Grösse) | arkanis | CSS | 5 | 29.09.2004 15:13 |
CSS anfänger will nen paar Tips / Antworten :> | koDiacc | CSS | 23 | 20.09.2004 13:33 |