zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Header mit img, h1 und form

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.09.2008, 12:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.11.2006
Beiträge: 36
Uwe_B befindet sich auf einem aufstrebenden Ast
Standard 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">&nbsp;&raquo;&nbsp;Preisvergleich</h1>
<h1>&nbsp;&raquo;&nbsp;sinnvolle Spartipps</h1>
<h1>&nbsp;&raquo;&nbsp;kostenloses Haushaltsbuch</h1>
</div>
CSS:

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; }
Das klappt soweit auch ganz gut, doch wie kann ich jetzt am einfachsten (und valide) das Eingabefeld und den Button an die gewünschte Stelle bringen?

Gruß, Uwe
Angehängte Grafiken
Dateityp: gif schema.gif (1,4 KB, 17x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.09.2008, 12:38
Benutzerbild von SSY
SSY SSY ist offline
Benutzer
neuer user
 
Registriert seit: 27.03.2008
Beiträge: 69
SSY befindet sich auf einem aufstrebenden Ast
Standard

ein div mit ner festen ID um das formular packen und dann entweder absolut positionieren:
Code:
#FormDivID {
position: absolute;
top: 20px;
right: 10px;
}
oder mit margins:
Code:
#FormDivID {
float: right;
margin: 20px 10px 0 0;
}
__________________
Durch unbedachte Reden
entsteh'n viel Sünd und Schäden
Der ist bedacht und voller List,
der seiner Red ein Meister ist.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.09.2008, 12:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.11.2006
Beiträge: 36
Uwe_B befindet sich auf einem aufstrebenden Ast
Standard

Klappt, danke !
Mit Zitat antworten
  #4 (permalink)  
Alt 23.09.2008, 13:30
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.864
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
  #5 (permalink)  
Alt 23.09.2008, 22:37
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.11.2006
Beiträge: 36
Uwe_B befindet sich auf einem aufstrebenden Ast
Standard

Danke für den Tipp, aber ich bleibe lieber bei meiner knappen Lösung und formatiere nur dort wo es wirklich nötig ist.
Mit Zitat antworten
  #6 (permalink)  
Alt 24.09.2008, 02:08
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.864
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
  #7 (permalink)  
Alt 24.09.2008, 02:17
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.11.2006
Beiträge: 36
Uwe_B befindet sich auf einem aufstrebenden Ast
Standard

Ich werde Google über mich richten lassen...
Mit Zitat antworten
  #8 (permalink)  
Alt 24.09.2008, 08:54
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.026
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Google ist da der falsche Richter, oder baust du deine Seite nur für diese Suchmaschine?
Mit Zitat antworten
  #9 (permalink)  
Alt 24.09.2008, 10:37
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.11.2006
Beiträge: 36
Uwe_B befindet sich auf einem aufstrebenden Ast
Standard

Natürlich nicht, aber bei der Text-Formatierung berücksichtige ich die Vorlieben der Krake schon.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 24.09.2008, 13:12
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.026
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Sie hat aber keine Vorliebe für mehrere Überschriften erster Ordnung.
(Ich bin kein SEO-Experte, aber irgendjemand hatte hier im Forum vor kurzem genau zu diesem Thema einen Link gepostet.)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:44 Uhr.