|
|||
Header mit img, h1 und form
Hallo,
ich würde gerne folgenden Header erstellen (siehe angehängte Datei) und dabei möglichst effektiv CSS einsetzen. Die ersten Elemente habe ich wie folgt angeordnet: HTML-Code:
<div id="header"> <a href="home" title="title"><img src="grafiken/logo.gif" alt="alt"></a> <h1 class="top"> » Preisvergleich</h1> <h1> » sinnvolle Spartipps</h1> <h1> » kostenloses Haushaltsbuch</h1> </div> Code:
/* HEADER */ #header { font-size: 0.7em; height: 75px; color: #000; background-color: #fff; } #header a { text-decoration: none; } /* Logo, Headlines und Suchfeld */ #header img { width: 200px; height: 75px; margin: 0; padding: 0; float: left; } #header h1 { margin: 0; padding: 0; line-height: 15px; font-size: 1em; } #header h1.top { padding-top: 15px; } Gruß, Uwe
__________________
Vegweiser.de - vegane & vegetarische Anbieter finden |
Sponsored Links |
Sponsored Links |
|
|||
Klappt, danke !
__________________
Vegweiser.de - vegane & vegetarische Anbieter finden |
|
||||
Wenn Du's richtig elegant machen willst, nimmst Du nur eine h1 und wirfst die Anführungszeichen und geschützten Leerzeichen raus. Letztere ersetzt Du durch padding und erstere durch eine Grafik (z.B. können die Zeilen 2 & 3 jeweils ein span mit display: block; bekommen).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Danke für den Tipp, aber ich bleibe lieber bei meiner knappen Lösung und formatiere nur dort wo es wirklich nötig ist.
__________________
Vegweiser.de - vegane & vegetarische Anbieter finden |
|
||||
h1-Spam, über den Haufen geworfene Zeichensemantik (d.h. als Pfeil missbrauchte Anführungszeichen) und geschützte Leerzeichen als padding-Ersatz haben nichts mit knapper Formatierung zu tun, aber das musst Du selber wissen
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Ich werde Google über mich richten lassen...
__________________
Vegweiser.de - vegane & vegetarische Anbieter finden |
|
|||
Natürlich nicht, aber bei der Text-Formatierung berücksichtige ich die Vorlieben der Krake schon.
__________________
Vegweiser.de - vegane & vegetarische Anbieter finden |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit einem 3D-Effekt | moep0710 | CSS | 12 | 12.06.2010 15:30 |
Untermenü im IE | nici | CSS | 10 | 22.06.2009 22:19 |
header verrutscht... | weblearner | CSS | 6 | 03.12.2008 20:34 |
Linkverhalten im IE6 | ChOpSueY! | CSS | 19 | 19.05.2008 23:48 |
CSS-Problem mit Joomla-Template und Firefox | gismojs | CSS | 5 | 21.04.2008 13:45 |