zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Gesamte Website zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.06.2009, 17:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.03.2008
Beiträge: 11
ThomasSchmidt befindet sich auf einem aufstrebenden Ast
Standard Gesamte Website zentrieren

Wieder einmal stehe ich an und wende mich an euch! Ich moechte gerne die gesamte Website zentrieren, leider funktioniert das nicht so wie ich moechte.
Code:
* {
      margin: 0;
      padding: 0;
}

html {
       background: #fff;
       color: #000;
}

body {
         text-align: center;
		 
}
div#main {
        margin: auto;
		width: 936px;
        text-align: center;
} 
  

  
.rollover_bild1 a { display:block; float:left; width:468px; height:80px; background-image:url(images/bild1.gif);}
.rollover_bild a:hover { width:468px; height:80px; background-image:url(images/bild1_active.gif);}

.rollover_bild2 a { display:block; width:468px; float:right; height:80px; background-image:url(images/bild2.gif);}
.rollover_bild2 a:hover { width:468px; height:80px; background-image:url(images/bild2_active.gif);}

Und so sieht die html Datei aus:
HTML-Code:
</head>


<body>
 <div id="container"> 
 

<img src="banner.gif" width="936" height="100" alt="">
<img src="howto.gif" width="936" height="103" alt="">



<div class="rollover_bild1">
<a href="http://www.google.at" target="_blank"></a>
</div>

<div class="rollover_bild2">
<a href="http://www.google.at" target="_blank"></a>
</div>

</body>

</html>
Im Browser sieht das Problem dann so aus.


Also die beiden grauen Bilder moechte ich auch zentriert haben und zwischen den beiden blauen Bildern ist ein Abstand den ich wegmachen moechte. Leider habe ich das auch nach Recherche nicht hinbekommen.

Wuerde mich ueber eine Rueckmeldung/Lösungsansaetze freuen!

Dank im Voraus,
Thomas
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.06.2009, 17:45
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Da stimmt noch nichts

Der div #container ist im CSS nicht vorhanden. Im HTML ist er nicht geschlossen. Bitte schließen ( vor /body).

Der container #main ist im HTML nicht vorhanden.
Die Angabe margin: auto würde so nicht funktionieren.
Es müsste heißen:
Code:
margin: 0 auto;
#main sollte wohl besser in #container umbenannt werden.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.06.2009, 18:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.03.2008
Beiträge: 11
ThomasSchmidt befindet sich auf einem aufstrebenden Ast
Standard

Super! Funktioniert einwandfrei mit dem Zentrieren. Bekomme ich die Abstaende zwischen dem blauen Bildern bzw. unter dem 2. blauen Bild auch noch weg?
Mit Zitat antworten
  #4 (permalink)  
Alt 22.06.2009, 20:48
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

<img> sind Inline-Elemente und verhalten sich deshalb wie Text. Was du da siehst ist einfach der Zeilen Abstand bzw. die Abhängigkeit des Schriftgrads, den du dort wohl nicht gebrauchen kannst. Also setze ihn auf 0.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #5 (permalink)  
Alt 22.06.2009, 20:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Unabhängig von der Verwendung der Bilder, welche ich aus dem Screenshot und der Beschreibung mit dem Abstand nicht entnehmen kann, würde sich auch
Code:
img {
  display: block;
}
eignen, um den Abstand zu elemenieren. Allerdings erzeugt das Bild dann einen Umbruch. Also hier muss der oben bereits angesprochene Verwendungszweck berücksichtigt werden.
Mit Zitat antworten
  #6 (permalink)  
Alt 22.06.2009, 20:54
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Ich hab das jetzt nicht gestest und die Sache nur dem total unscharfen Bild entnommen, ich hoffe mal, dass war gemeint.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #7 (permalink)  
Alt 22.06.2009, 23:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.03.2008
Beiträge: 11
ThomasSchmidt befindet sich auf einem aufstrebenden Ast
Standard

...und auch das funktioniert einwandfrei! Danke euch dafuer!

Gleich noch eine weitere Frage: Ich seht ja, dass ich per CSS einen Rollover eingebaut habe. Wie kann ich das laestige Nachladen der Bilder vermeiden? Gibt es da eine Aenderung, die ich hier einfach vornehmen kann?
Mit Zitat antworten
  #8 (permalink)  
Alt 23.06.2009, 10:38
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Du kannst das HG-Bild in beiden Zuständen(aktiv/nichtaktiv) als ein einziges HG-Bild "zusammenkleben" und dann einfach per background-position verschieben.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #9 (permalink)  
Alt 23.06.2009, 10:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Als Stichwort könntest du nach "CSS-Sprites" googlen.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.06.2009, 17:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.03.2008
Beiträge: 11
ThomasSchmidt befindet sich auf einem aufstrebenden Ast
Standard

Danke habe es geschafft!
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
Website zentrieren ElJohnny (X)HTML 37 06.11.2010 11:55
analysetool für websites opa-rudi Site- und Layoutcheck 23 05.08.2008 15:33
Bitte um Feedback zu meiner überarbeiteten Website Sen-nefer Site- und Layoutcheck 9 08.02.2008 16:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:54 Uhr.