Mit CSS einen Header skalierbar machen

Status
Für weitere Antworten geschlossen.
A

a-hab

Registered +
Registriert
Juni 2009
Beiträge
19
Ich habe hier auf dieser Seite Top-Verdienst.Regger24 meinen Header eingebaut als Hintergrund-Grafik, die eben nur oben ist. Wenn ich aber mit dem Browser zoome, dann skaliert sich der Header ja nicht mit der Seite.

Der Code sieht im Body-Tag so aus:

Code: 
body {
margin: 0px;
padding: 0px;
background: url(http://img16.imageshack.us/img16/8547/header2s.gif) repeat-x left top;
background-color: #000066;
line-height: 22px;
text-align: justify;
font-family: Calibri, Helvetica, sans-serif;
font-size: 12pt;
color: #666666;
}

und beim beim Header siehts so aus:

Code: 
#header {
width: 850px;
margin: 0px auto;
padding: 1em;
height: 90px;
color: #254360;
}

#header h1 {
display:none;
}

Der Header-Tag hat praktisch keine Funktion. Leider sehe ich hier, dass meine CSS-Kenntnisse hier aufhören. Ich hoffe ihr könnt mir helfen.:)

Gruß
a-hab
 
So ganz kann ich leider nicht nachvollziehen was das Problem ist, da ich gar kein Hintergrundbild sehen kann.
Du lädts das doch wohl nicht wirklich von Imageshack... oder? Wieso das denn?
 
Also ich will einen Header da haben, nämlich das Bild von imageshack. Ich kann auf den Server nicht zugreifen, nur die CSS-Datei und den Inhalt kann ich verändern. Und da ich nicht weiß, wie man einen Header einbaut, hab ich einfach den Hintergrund als Header gemacht. Und der geht eben nur bis knapp unter das menü, deswegen sieht er aus wie ein Header. Der blaue Hintergrund ist nur die Farbe. Das Hintergrundbild wird aber nicht mitskaliert wenn man bei der Seite z.B. zoomt oder eine andere Auflösung hat. Da er ja nicht zum Inhalt gehört. Bei einem Header ist das shcon der Fall, aber ich weiß nicht wie ich das Bild als Header einbaue.

Ich hoffe du hast es jetzt verstanden xD
 
a-hab schrieb:
Der Code sieht im Body-Tag so aus:

Code: 
body {
margin: 0px;
padding: 0px;
background: url(http://img16.imageshack.us/img16/8547/header2s.gif) repeat-x left top;
background-color: #000066;
line-height: 22px;
text-align: justify;
font-family: Calibri, Helvetica, sans-serif;
font-size: 12pt;
color: #666666;
}
Zum Vergrößern anklicken....

hi,
alles was du im body als background setzt wird im Hintergrund angezeigt.
aber du willst ja so wie ich das jetzt verstanden habe, im header nen Bild einfügen. dazu musst du den code ändern so das es halt nur für den header ist.
und noch mal ne frage an dich wieso benutzt du eine externe Bild quelle ? Das dauert doch viel zu lange bis das Bild geladen wird es wäre viel besser wenn du das Bild aufm Server speicherst
 
KleinerKobold schrieb:
hi,
alles was du im body als background setzt wird im Hintergrund angezeigt.
aber du willst ja so wie ich das jetzt verstanden habe, im header nen Bild einfügen. dazu musst du den code ändern so das es halt nur für den header ist.
und noch mal ne frage an dich wieso benutzt du eine externe Bild quelle ? Das dauert doch viel zu lange bis das Bild geladen wird es wäre viel besser wenn du das Bild aufm Server speicherst
Zum Vergrößern anklicken....

Ich habe das Problem mittlerweile gelöst. Ich habe den Header-Code einfach gesetzt. Die Frage mit der Bildquelle ist einfach zu beantworten. Ich habe keinen Zugriff auf den Server, ich kann nur die Texte und das Stylesheet (CSS) verändern. Ich habe aber ein neues Problem. Was genau ist die Ursache für den Abstand zwischen buttons und header? Der Header ist über CSS drin, die Buttons über HTML über dem Text.

Über den Quellcode müsste das ein versierter Mensch herausfinden können. Bitte helft mir!

http://top-verdienst.regger24.de
 
Zuletzt bearbeitet von einem Moderator:
ich denke mal da ist ne Größen Angabe nicht in Ordnung und deswegen werden die buttons weiter unten angesetzt..
hab den Quelltext mal schnell überflogen und es ist bei den Buttons so das du die nicht richtig eingegliedert hast soll teste mal noch bei der css Datei beim menu noch nen top hinzufügen damit deren die Buttons nach oben gesetzt

edit: beim Impressum fehlt das menu komplett soll das so sein oder hast du das einfach nur vergessen dort einzufügen
 
ist schon.. die buttons sind nicht über die css eingefügt, sondern auf jeder Seite einzeln per HTML. Kein Kommentar^^
 
ok da mit du verstehst was ich meine kopiere ich mal den code hier rein
du hast in der css das hier stehen
Code: 
#menu {
padding: 0px 0px 0px 0px;
display: none;
}

#menu a {
padding: 0px 0px 0px 0px;
}

und in deinem html code steht das hier
Code: 
[LIST]

[*]
Startseite


[*]
Autoregger


[*]
Partner


[*]
Impressum


[/LIST]

kannte den Zusammenhang sehen
 
nehme mal das mach das mal in der html datei weg denn der code ist mit der css datei verknüpft
 
Code: 
/** BASIC */

body {
margin: 0px;
padding: 0px;
background-color: #000066;
background-image: url(http://www.kollermedia.at/wp-content/themes/kollermedia/images/pattern4u/dotted/44original.gif)
line-height: 22px;
font-family: Calibri, Helvetica, sans-serif;
font-size: 12pt;
color: #666666;
}

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}

a {
color: #990033;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.list1 {
margin: 0;
padding: 0;
list-style: none;
}

.list1 a {
background: url(./regger-images/img01.gif) no-repeat left 60%;
padding-left: 14px;
}

.list2 {
margin: 0;
list-style: none;
}

.list2 a {
background: url(./regger-images/img01.gif) no-repeat left 60%;
padding-left: 20px;
}

img {
border: none;
}

img.left {
float: left;
margin: 0px 0px 0px 0px;
}

/** HEADER */

#header {
width: 960px;
margin: 0px auto;
padding: 0em;
height: 130px;
background: url(http://img2.myimg.de/topverdienstregger24heade1d852.jpg) no-repeat ;

max-width: 100%;
}

#header h1 {
display:none;
}

/** MENU */

#menu {
padding: 0px 0px 0px 0px; 
display: none;
}

#menu a {
padding: 0px 0px 0px 0px;
}

/** CONTENT */

#content {
width: 963px;
margin: 0px auto;
padding: 0x 0px 0px 0px;
}

#columnA {
float: left;
width: 963px;
padding-left: 0px;
border-left: 0px solid #0000CC;
}

#columnA h2 {
height: 18px;
border-bottom: 0px solid #6699CC;
font-size: 0pt;
font-weight: bold;
}

#columnB {
float: left;
width: 160px;

}

#columnB h3 {
height: 0px;
border-bottom: 0px solid #6699CC;
border-spacing: 1px;
text-align: center;
font-size: 0pt;
font-weight: bold;
}

#columnC {
float: right;
width: 160px;
}

#columnC h3 {
height: 0px;
border-bottom: 0px solid #6699CC;
border-spacing: 1px;
text-align: center;
font-size: 9pt;
font-weight: bold;
}
/** FOOTER */

#footer {
clear: both;
margin: 0px auto;
height: 30px;
background: url(./regger-images/img03.gif) repeat-x left top;
text-align: center;
}

#footer p {
margin: 0px;
padding: 10px 0px 0px 0px;
font-size: 9px;
color: #FFFFFF;
}

#footer a {
color: #CCCCCC;
}

/** Regger */
.regger_checkbox {
width:20px;
height:20px;
}


td.legend {
font-size:12pt;
font-weight:none;
}

td.trenner {
width:10px;
}


td.input {
text-align:right;
}

td.input input {
width:130px;
height:15px;
border:1px solid #1E3851;
font-size:10pt; 
font-color: #FFFFF;
}

td.input textarea {
border:1px solid #1E3851;
font-size:10pt; 
font-color: #FFFFF;
}

td.input select {
width:150px;
height:19px;
font-size:10pt;
}

tr.row0 {
background-color:#E0E8EF;
}

tr.row1 {
background-color:#EFF7FF;
}

wo soll ich den weg machen?
 
Code: 
[CENTER][IMG alt="Start"]http://img2.myimg.de/topverdienstregger24butto0cb72.jpg[/IMG][IMG alt="Autoregger"]http://img2.myimg.de/topverdienstregger24butto91627.jpg[/IMG][IMG alt="Partner"]http://img2.myimg.de/topverdienstregger24butto13502.jpg[/IMG][IMG alt="Impressum"]http://img2.myimg.de/topverdienstregger24butto87559.jpg[/IMG]  [/CENTER]


[TABLE]


[TR]

[CENTER][td][CENTER]

 


Werbung


[IMG]http://www.active4u.de/werbemittel/banner6.gif[/IMG]

[/CENTER][/td][/CENTER]

[td]

 


[CENTER]Herzlichen Glückwunsch!
[/CENTER]


[JUSTIFY]











Sie haben den Grundstein dafür gelegt, Ihren Verdienst durch Paidmails massiv zu steigern!

Wenn sie daran interessiert sind, dann lesen Sie weiter. Wir versprechen Ihnen, es wird kein Fehler sein!

 








Wir haben nämlich alle Paidmail-Dienste strengstens überprüft und können Ihnen sagen, dass die 24 Paidmail-Dienste, die sie auf unserer Seite im Bereich Autoregger finden definitiv seriös, kostenlos und auf jeden Fall die höchsten Verdienste auf dem ganzen Markt möglich machen!





Wir haben es ausprobiert und sind innerhalb eines Monats auf einen Verdienst von 50€ gekommen mit nur einer halben Stunde am Tag Mails bestät




igen!
[/JUSTIFY]




 










[JUSTIFY]

Wenn sie mehr Zeit investieren möchten, dann können sie auf den meisten Seiten noch Paidbanner klicken. Diese geben eine kleinere Vergütung, doch es gibt so viele davon, sodass Sie ihren Verdienst locker auf 200€ und mehr steigern können!

Es gibt bei jedem Paidmail-Dienst noch weitere individuelle Verdienstmöglichten. Freuen Sie sich darauf diese zu entdecken und ihren Verdienst noch mehr zu steigern!





 

200€ haben oder nicht haben. Das wird Sie von Ihren Freunden und Bekannten unterscheiden! Doch wissen Sie was? Sie können sich doch genauso diese 200€ dazu verdienen =) Werben Sie einfach ihre Freunde  zu den Paidmail-Diensten die Ihnen gefallen. Jeder Mailer bietet eine Refvergütung an, sodass Sie sogar an ihnen mitverdienen können;-) Die Alternative ist: Sie geben Ihren Freunden und Bekannten einfach einen Link zu unserer Site: http://Top-Verdienst.Regger24.de



Ihrem Glück - und natürlich Ihren 200€ mehr im Monat :-) - steht nichts mehr im Wege! Hier können Sie die besagten 24 Paidmail-Dienste sehen! Um die Anmeldung zu vereinfachen, haben wir ein Dienst erstellt, der Sie bei allen Paidmailern gleichzeitig anmeldet. Sie müssen dafür nur alle Daten eintragen, bei den gewünschten Paidmail-Dienste einen Haken setzen (wir empfehlen alle für den größtmöglichsten Verdienst) und die Bestätigungslinks von jedem Paidmail-Dienst in Ihrem eMail-Postfach bestätigen.



Das Geld verdienen kann für Sie nun beginnen! :-)[/JUSTIFY]





[/td]

[td]

 

[/td]

[CENTER][td][CENTER]

 


Werbung


[IMG]http://www.active4u.de/werbemittel/banner6.gif[/IMG]

[/CENTER][/td][/CENTER]

[/TR]


[/TABLE]

an den restlichen HTML-Code komm ich net ran.
 
also falls ich ja dazwischen quacken darf

1.background-kann man noch nicht skalieren !!
2.Html= inhalt
2.CSS= das aussehen

nur ma grob

ansonsten , wo ist dein problem nochma ??

cya RaveL
 
Mein Problem ist, dass ich den Abstand zwischen Header und Buttons habe. Der header ist über CSS drin, die Buttons über HTML drin, weil ich sie net im CSS hinbekommen habe. Ich habe aber keine Ahnung was ich im CSS oder im HTML verändern muss, damit der Abstand weggeht. Hoffe das war jz verständlich.
 
wie wärs hier mit
margin-top: 50px;

verändere es mal

apropos du veränderst was im CSS , weil du in Hmtl es nicht verändern darfst ?
sehe ich das richtig ?
 
RaVeL schrieb:
wie wärs hier mit
margin-top: 50px;

verändere es mal

apropos du veränderst was im CSS , weil du in Hmtl es nicht verändern darfst ?
sehe ich das richtig ?
Zum Vergrößern anklicken....

Das mit margin-top hab ich auch schon versucht, nur es bewegt sich keinen Millimeter nach oben. Ich kann die CSS komplett verändern. Und HTMl kann ich nur bei den ersten 3 Punkten unten anwenden, also ab da wo die Menübuttons beginnen.
 
schau da hin

ausserdem den hier
Code: 
#columnB {
float: left;
width: 160px;

}
auskommentieren mit /**/

jetzt hab ichs

also
Code: 
#columnA {
float: left;
width: 963px;
margin-top: -50px; padding-left: 0px;
border-left: 0px solid #0000CC;
}

das hier auskommentieren
Code: 
#columnB {
float: left;
width: 160px;

}

geht oder ?
 
Zuletzt bearbeitet von einem Moderator:
das hier auskommentieren
Code: 
#columnB {
float: left;
width: 160px;

}
mit /*alles was zwischen ist wird zum kommentar */

also
Code: 
/*
#columnB {
float: left;
width: 160px;

} 
*/

grins
 
Zuletzt bearbeitet von einem Moderator:
Kann das sein, dass die Buttonleiste ein bißchen breiter ist als der Header? Bei Opera zeigt er den letzten Punkt (Impressum) in einer extra Zeile an, im FF steht alles in einer Zeile, aber der Rand vom ersten Button ist weiter links als der vom Header.
 
Ich habe jetzt alle Größen auf 960px eingestellt, aber im Opera ist es trotzdem auf der anderen Zeile. Kannst du mir da vielleicht weiterhelfen?
 
Status
Für weitere Antworten geschlossen.

Ähnliche Themen

trimalchio
  • Gesperrt
CSS Navigation
  • geschlossen 
Antworten
0
Aufrufe
2K
trimalchio
trimalchio
L
  • Gesperrt
Gallerie anpassen (CSS)
Antworten
4
Aufrufe
2K
LittleSunshin
L
C
  • Gesperrt
[CSS] Div height 100%
  • geschlossen 
Antworten
2
Aufrufe
2K
Chrissy00
C
M
  • Gesperrt
Unterschiedl. Ansicht IE/FF bei Verwendung CSS
Antworten
4
Aufrufe
1K
snuggles
S
V
  • Gesperrt
Div Box Ausrichtungsproblem mit CSS
Antworten
4
Aufrufe
1K
MeX
M
Zurück
Oben Unten