• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS + Banner formatieren

Status
Für weitere Antworten geschlossen.
F

firstConTaCt

Neues Mitglied
huhu

Die Seite ist noch net offizielle online:
Ministry of Defenders

Da fehlt vorne noch das Intro und hinten die Seiten!
Die liegen hier schon am PC ;) xD, nur zu faul zum hochladen!

eine kleine Frage!
Wie bringe ich den Banner den ihr da oben seht, in die Mitte!

das wäre der Abschnitt in der css datei bezüglich header:
Code: 
#header{
	height:304px;
	width:777px;
	background-image:url(images/header.jpg);
	background-repeat: no-repeat;

Hier der Pfad zur gesamten Datei:
Style.css

Kann mir dabei jemand helfen? danke!
PS: Der Banner sollte in der Mitte sein und etwas weiter unten! :) danke!
 
Versuch es mal mit
Code: 
#header{
    height:304px;
    width:777px;
    [COLOR=Red]margin-left: auto; margin-right: auto;[/COLOR]
    background-image:url(images/header.jpg);
    background-repeat: no-repeat;
Gruß thuemmy
 
Doch, ich denke schon, dass Dein #header nun zentriert ist. (Das ließe sich gut mit Firebug überprüfen, den hab ich hier aber nicht)
Aber #header ist halt breiter als das background-image.
Denn Du hast ja das umschließende Element zentriert und nicht das Bild, das ist Dir bewusst?
 
Wenn der #header nicht zentriert ist, fehlt für den IE möglicherweise ein qualifizierter Doctype.
Es kommt aber auch darauf an, wie der #header und die Grafik insgesamt eingebunden sind.
Ein Link zur Seite wäre deshalb sinnvoll.
 
Den Link hat er doch im ersten Post schon geschrieben. Aber Efchen hat die Lösung ja schon geschrieben, der #header ist breiter als das background-image. Hab es eben mit Firebug getestet.

Gruß thuemmy
 
Sorry, hab ich übersehen.
Es handelt sich um eine Hintergrundgrafik.
Da sollte helfen, wenn dem #header noch ein
Code: 
background-posititon: center;
hinzugefügt wird.
 
Wusst' ich gar nicht, dass es sowas gibt. Ich hab testweise den #header verkleinert.

Was passiert, wenn das background-image größer als der Container ist? Wird es dann links und rechts abgeschnitten, oder nur rechts abgeschnitten?

Gruß thuemmy
 
also heißt das jetzt das nicht das Bild, sondern der Hintergrund passend eingerichtet wurde?
Wenn ja, wie mache ich das Bild dann etwas mittiger und setze es runter?
Ebenfalls in der CSS Datei?
Eventuell hier?
Code: 
/********************* header ****************************/
#header{
	position:relative;
}
#header ul{
	position:absolute;
	top:250px;
	display:block;
	left:190px;
}
#header ul li{
	display:inline;
	text-align:center;
	margin:auto;
	width:auto;
	border-right: 1px solid #6b7272;	
}
.last{
	border-right: 0px none #6b7272 !important;
}
#header ul li a{
	display:inline;
	text-align:center;
	text-decoration:none;
	padding: 0px 10px;
	text-transform: uppercase;
}
#header ul li a:hover{
	text-decoration:underline;
}

Wenn ja, wie und wo? hm...komplizierte Sache!

Und ja, der Banner, sollte eigentlich so geregelt sein, das man den mittels CSS datei einstellen kann.

Edit:
prm schrieb:
Sorry, hab ich übersehen.
Es handelt sich um eine Hintergrundgrafik.
Da sollte helfen, wenn dem #header noch ein
Code: 
background-posititon: center;
hinzugefügt wird.
Zum Vergrößern anklicken....

Das veändert ja auch nur den Hintergrund, aber nicht die Position des Bildes, zumindestens bei mir nicht xD
Ist noch alles beim alten!
 
firstConTaCt schrieb:
und hat schon jemand etwas herausgefunden?
Ich google und google, kann aber nix finden :(!
Zum Vergrößern anklicken....

Was genau spricht denn jetzt dagegen, die Breite von #header auf die Breite des Bildes zu reduzieren? #header hat eine Breite von 777px, das Bild ist nur 572px breit, also sollte #header besser die Breite 572px haben, oder nicht? :?:
 
So klappt es bei mir, zumindest im FF:
Code: 
#header{
    height:304px;
    width:777px;
    margin-left: auto; margin-right: auto;
    background-image:url(images/header.jpg);
    background-repeat: no-repeat;
    background-position: center;
}
 
thuemmy schrieb:
Was passiert, wenn das background-image größer als der Container ist? Wird es dann links und rechts abgeschnitten, oder nur rechts abgeschnitten?
Zum Vergrößern anklicken....
So wird das überstehende rechts, links, oben und unten abgeschnitten:
Code: 
    background-position: center;
So wird rechts, links und unten abgeschnitten:
Code: 
    background-position: center top;
So wird rechts, links und oben abgeschnitten:
Code: 
     background-position: center bottom;
Es sind auch numerische Werte in px und em zulässig. Die Einheiten können auch gemischt werden.
Prozentangaben sind auch möglich.
Allerdings beziehen sie sich hierbei nicht alleine auf das Element sondern auch auf die Bildgröße.
Hier habe ich mal eine Grafik dazu gefunden:
Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : BACKGROUND-POSITION }

css ist ebend doch nicht so selbsterklärend wie teilweise behauptet wird.
 
Zuletzt bearbeitet:
supi jetzt hat es funktioniert, aber, jetzt ist das Problem das der Header zu weit unten ist lol, der hört schon etwas mehr hinauf!
Kann man das auch noch mit paar Zahlen ändern, sprich etwas höher legen!?
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben