Vorheriges Thema anzeigen :: Nächstes Thema anzeigen |
Autor |
Nachricht |
Suicider1984 Mitglied
Angemeldet: 30.04.2004 Beiträge: 928
|
Verfasst am: 08.05.2007, 18:12 Titel:
Depp braucht hilfe :-) - Bild einfach per CSS zentrieren |
|
|
|
|
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 |
|
|
Impi Mitglied
Angemeldet: 06.05.2006 Beiträge: 530
|
Verfasst am: 08.05.2007, 18:33 Titel:
|
|
|
|
|
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 |
|
|
Suicider1984 Mitglied
Angemeldet: 30.04.2004 Beiträge: 928
|
Verfasst am: 08.05.2007, 18:40 Titel:
|
|
|
|
|
also irgendwie tut sich bei beiden Vorschlägen nichts. |
|
Nach oben |
|
|
deLiTe. Mitglied
Angemeldet: 16.09.2006 Beiträge: 504 Wohnort: Freiburg Interessen: Eye-Candy
|
Verfasst am: 08.05.2007, 18:53 Titel:
|
|
|
|
|
Code: | <div align="center" id="header"></div> |
|
|
Nach oben |
|
|
Helmchen Mitglied
Angemeldet: 01.04.2006 Beiträge: 65
|
Verfasst am: 08.05.2007, 18:57 Titel:
|
|
|
|
|
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 |
|
|
elite Mitglied
Angemeldet: 20.07.2004 Beiträge: 1005
Interessen: Coding, DLRG, Radsport
|
Verfasst am: 08.05.2007, 19:02 Titel:
|
|
|
|
|
Ach guck mal an, Sui lebt auch noch *sry4offT* |
|
Nach oben |
|
|
Suicider1984 Mitglied
Angemeldet: 30.04.2004 Beiträge: 928
|
Verfasst am: 08.05.2007, 19:06 Titel:
|
|
|
|
|
Zitat: | Ach guck mal an, Sui lebt auch noch Smilie *sry4offT* | ja , son bissel
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 |
|
|
Helmchen Mitglied
Angemeldet: 01.04.2006 Beiträge: 65
|
Verfasst am: 08.05.2007, 19:21 Titel:
|
|
|
|
|
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 |
|
|
Suicider1984 Mitglied
Angemeldet: 30.04.2004 Beiträge: 928
|
Verfasst am: 09.05.2007, 17:53 Titel:
|
|
|
|
|
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 |
|
|
Impi Mitglied
Angemeldet: 06.05.2006 Beiträge: 530
|
Verfasst am: 09.05.2007, 18:40 Titel:
|
|
|
|
|
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 |
|
|
deLiTe. Mitglied
Angemeldet: 16.09.2006 Beiträge: 504 Wohnort: Freiburg Interessen: Eye-Candy
|
|
Nach oben |
|
|
vercci Mitglied
Angemeldet: 10.04.2019 Beiträge: 436162
|
|
Nach oben |
|
|
vercci Mitglied
Angemeldet: 10.04.2019 Beiträge: 436162
|
|
Nach oben |
|
|
vercci Mitglied
Angemeldet: 10.04.2019 Beiträge: 436162
|
|
Nach oben |
|
|
vercci Mitglied
Angemeldet: 10.04.2019 Beiträge: 436162
|
|
Nach oben |
|
|
|