Community

9dots.de Webdesign Board

 

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 

 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 


Depp braucht hilfe :-) - Bild einfach per CSS zentrieren

 
Neues Thema eröffnen   Neue Antwort erstellen    9dots.de Webdesign Community Foren-Übersicht -> Coding-Support
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
Suicider1984
Mitglied
Mitglied


Angemeldet: 30.04.2004
Beiträge: 928


BeitragVerfasst am: 08.05.2007, 17:12    Titel: Depp braucht hilfe :-) - Bild einfach per CSS zentrieren Antworten mit Zitat
Hallo,

ich versuche nun doch mal was ohne Flash zu machen und bin dabei eine simple Microsite mit CSS zu realisieren.

Ich habe die Hintergrundfarbe festgelegt und möchte nun meine Headergrafik oben zentrieren. Doch wie geht das ?

Meine HTML File:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jan Gehring - Protoss Eleven \______Microsite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body BGCOLOR="#eeead8">

<div id="container">
   <div id="header"></div>
   <div id="einleitungsbox"></div>
   <div id="web"></div>
   <div id="artworks"></div>
   <div id="fotogalerie"></div>
   <div id="misc"></div>
</div> <!-- /container -->

</body>
</html>


Und die passende CSS Datei:
Code:

#header
{
height: 100%;
width: 100%;
background-image: url('header.png');
position: absolute;
background-repeat: no-repeat;
margin-top: -20px;
}


Wer kann helfen ? Gibts im netz eine umfangreiche Liste mit CSS Befehlen ?

Gruß
Sui
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Impi
Mitglied
Mitglied


Angemeldet: 06.05.2006
Beiträge: 530


BeitragVerfasst am: 08.05.2007, 17:33    Titel: Antworten mit Zitat
Entweder du machst folgendes in den CS-Sheets:
Code:

#container {
text-align: center;
}


Oder im (X)HTML-Dokument:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jan Gehring - Protoss Eleven \______Microsite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body BGCOLOR="#eeead8">
<center>
<div id="container">
   <div id="header"></div>
   <div id="einleitungsbox"></div>
   <div id="web"></div>
   <div id="artworks"></div>
   <div id="fotogalerie"></div>
   <div id="misc"></div>
</div> <!-- /container -->
</center>

</body>
</html>
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden E-Mail senden
Suicider1984
Mitglied
Mitglied


Angemeldet: 30.04.2004
Beiträge: 928


BeitragVerfasst am: 08.05.2007, 17:40    Titel: Antworten mit Zitat
also irgendwie tut sich bei beiden Vorschlägen nichts. Grübeln
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
deLiTe.
Mitglied
Mitglied


Angemeldet: 16.09.2006
Beiträge: 504
Wohnort: Freiburg
Interessen: Eye-Candy

BeitragVerfasst am: 08.05.2007, 17:53    Titel: Antworten mit Zitat
Code:
<div align="center" id="header"></div>

Frage
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden MSN Messenger
Helmchen
Mitglied
Mitglied


Angemeldet: 01.04.2006
Beiträge: 65


BeitragVerfasst am: 08.05.2007, 17:57    Titel: Antworten mit Zitat
Impis antworten würden bei einem Bild, das per <img /> eingefügt wurde funktionieren.
Für deinen Fall sollte dies gelten:
Code:
#header
{
height: 100%;
width: 100%;
background: url('header.png') center no-repeat;
position: absolute;
margin-top: -20px;
}
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
elite
Mitglied
Mitglied


Angemeldet: 20.07.2004
Beiträge: 1005

Interessen: Coding, DLRG, Radsport

BeitragVerfasst am: 08.05.2007, 18:02    Titel: Antworten mit Zitat
Ach guck mal an, Sui lebt auch noch Smilie *sry4offT*
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
Suicider1984
Mitglied
Mitglied


Angemeldet: 30.04.2004
Beiträge: 928


BeitragVerfasst am: 08.05.2007, 18:06    Titel: Antworten mit Zitat
Zitat:
Ach guck mal an, Sui lebt auch noch Smilie *sry4offT*
ja , son bissel Winken

Code:
#header
{
height: 100%;
width: 100%;
background: url('header.png') center no-repeat;
position: absolute;
margin-top: -20px;
}


Das ist es nicht ganz. Dadurch wird das Bild vertikal UND Horizontal zentriert. Da es aber ein Headerbild ist, soll es nur oben mittig sein.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Helmchen
Mitglied
Mitglied


Angemeldet: 01.04.2006
Beiträge: 65


BeitragVerfasst am: 08.05.2007, 18:21    Titel: Antworten mit Zitat
http://www.css4you.de
Einfach mal selber suchen, wenn du den Ansatz hast.

Code:
#header
{
height: 100%;
width: 100%;
background: url('header.png') top center no-repeat;
position: absolute;
margin-top: -20px;
}


Warum bringst du die Höhe des Headers denn nicht auf Höhe des Bildes?
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Suicider1984
Mitglied
Mitglied


Angemeldet: 30.04.2004
Beiträge: 928


BeitragVerfasst am: 09.05.2007, 16:53    Titel: Antworten mit Zitat
ok, läuft jetzt.

Hab grad gemerkt , dass der IE die PNGs nicht richtig bzw nicht tranzparent anzeigt. Wie kann man das Problem lösen ?

Und hat noch wer nen Link, wo ein CSS MouseOver erklärt wird ?
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Impi
Mitglied
Mitglied


Angemeldet: 06.05.2006
Beiträge: 530


BeitragVerfasst am: 09.05.2007, 17:40    Titel: Antworten mit Zitat
Suicider1984 hat folgendes geschrieben:
ok, läuft jetzt.

Hab grad gemerkt , dass der IE die PNGs nicht richtig bzw nicht tranzparent anzeigt. Wie kann man das Problem lösen ?

Und hat noch wer nen Link, wo ein CSS MouseOver erklärt wird ?


Code:

img {
background-color: transparent;
}


Steinigt mich, wenn ich falsch liege.

Impi
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden E-Mail senden
deLiTe.
Mitglied
Mitglied


Angemeldet: 16.09.2006
Beiträge: 504
Wohnort: Freiburg
Interessen: Eye-Candy

BeitragVerfasst am: 09.05.2007, 18:43    Titel: Antworten mit Zitat
*Wackersteine ausm Garten hol*

http://homepage.ntlworld.com/bobosola/pngtestfixed.htm
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden MSN Messenger
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    9dots.de Webdesign Community Foren-Übersicht -> Coding-Support Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Board Software by phpBB © 2001, 2005 phpBB Group. Impressum
Dominik Wuttke - Moritz Münchmeyer - Joachim Nagel GbR.
AGB