zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild horizontal und vertikal zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.06.2003, 10:44
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard Bild horizontal und vertikal zentrieren

Hallo,

Ich möchte auch meine Homepage ohne Tabellen realisieren, nur hab ich noch ein Problem mit meiner vorgeschalteten Startseite:
Dort habe ich ein Logo (alles mit Tabellen) horizontal und vertikal zentiert, welches ein Link zur eigentlichen Seite ist. Über dem Logo, also am oberen Bildschirmrand steht ein DAtum mit der letzten Aktualisierung und ganz unten ein Counter. Wie kann ich das ohne Tabellen schaffen? Ich hoffe, man kann sich das irgendwie vorstellen..

Hier nochmal kurz:

oben: Aktualisierung, horizontal zentriert



mitte: Logo, horizontal zentriert



unten: Counter, horízontal zentriert
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.06.2003, 11:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<style type="text/css"> 
	html,body	{ 
		background-color: #FF9933; 
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
		font-size: 0.9em; 
		overflow: auto; 
		margin: 0px; 
		padding: 0px; 
		height: 100%;
	} 
	#oben{
		height: 10%;
		text-align: center;
		background-color: #FF0000;
	}
	#unten {
		height: 9.9%; /*IE BUG deshalb nicht auf 100% addiert, sonnst gibt es Scroll-leisten*/
		text-align: center;
		background-color: #FF9999;
	}
	#mitte { 
		height: 80%;
		/*width: 100%;*/
		
		background-image: url(file:///C|/WINDOWS/Help/Tours/htmlTour/best_road.jpg);
		background-position: center center;
		background-repeat: no-repeat; 
	}
	
</style> 
</head> 

<body>

<div id="oben">Aktualisierung</div>
<div id="mitte">&</div>
<div id="unten">Counter</div>

</body></html>
So evtl.

Die Prozentwerte mußt Du Dir natürlich anpassen. Der Trick ist das Du das Logo als Hintergrundbild nimmst.
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.06.2003, 12:05
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

DANKE DANKE DANKE!

Es geht wunderbar! Da wär ich nie drauf gekommen!

Wusste doch, dass ich hier Hilfe finde.

Gruß qwertz182
Mit Zitat antworten
  #4 (permalink)  
Alt 17.06.2003, 12:16
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

Mist! Zu früh gefreut!

Wie kann ich das denn jetzt realisieren, dass ich bei einem Klick auf das Logo, was ja jetzt ein Hintergrundbild ist, auf die eigentliche Seite komme

Gibts da auch wieder einen Trick oder geht das nicht?
Mit Zitat antworten
  #5 (permalink)  
Alt 17.06.2003, 14:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Code:
<div id="mitte" style="cursor: hand;" onclick="parent.location.href='http://www.w3c.org'">&</div>
Dieses kaufmännische UND (& + nbsp ist eine Leerzeichen, nur funktioniert die darstellung in diesem Forum nicht wirklich !! Aber es muß in den Code.

Ein wenig JavaScript
__________________
</ulle>
Mit Zitat antworten
  #6 (permalink)  
Alt 17.06.2003, 14:52
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

Bin beeindruckt!

Aber was ist, wenn jemand java etc in seinem Browser deaktiviert hat? Dann müsste ich noch nen richtigen link anbieten, um damit auf die nächste Seite zu kommen, oder?

Also z.B. in den noscript-tags oder so?
Mit Zitat antworten
  #7 (permalink)  
Alt 17.06.2003, 15:30
Benutzer
neuer user
 
Registriert seit: 28.05.2003
Beiträge: 30
Jürgen befindet sich auf einem aufstrebenden Ast
Standard Das funktioniert zumindest im IE6.0

Den Code von Ulle leicht abgeändert (div-Mitte) in Anker-Tags gesetzt:
Das von Ulle beschriebene Leerzeichen brauche ich nicht.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<style type="text/css"> 
   html,body   { 
      background-color: #FF9933; 
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
      font-size: 0.9em; 
      overflow: auto; 
      margin: 0px; 
      padding: 0px; 
      height: 100%; 
   } 
   #oben{ 
      height: 10%; 
      text-align: center; 
      background-color: #FF0000; 
   } 
   #unten { 
      height: 9.9%; /*IE BUG deshalb nicht auf 100% addiert, sonnst gibt es Scroll-leisten*/ 
      text-align: center; 
      background-color: #FF9999; 
   } 
   #mitte { 
      height: 80%; 
      /*width: 100%;*/ 
       
      background-image: url(file:///C|/WINDOWS/Help/Tours/htmlTour/best_road.jpg); 
      background-position: center center; 
      background-repeat: no-repeat; 
      cursor: hand;
   } 
    
</style> 
</head> 

<body> 

<div id="oben">Aktualisierung</div>
<div id="mitte"></div>
<div id="unten">Counter</div> 

</body></html>
__________________
Kaum macht man\'s mal richtig, schon läuft\'s.
Mit Zitat antworten
  #8 (permalink)  
Alt 17.06.2003, 16:06
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

Danke, jetzt ist es endgültig so, wie ich es haben wollte.

War das ne schwierige Geburt!
Mit Zitat antworten
  #9 (permalink)  
Alt 17.06.2003, 16:17
Benutzer
neuer user
 
Registriert seit: 28.05.2003
Beiträge: 30
Jürgen befindet sich auf einem aufstrebenden Ast
Standard Ist das wirklich alles OK ?

Ich wollte meinen Beitrag gerade löschen, weil's bei mir mit einer sehr kleinen Hintergrundgrafik doch nicht läuft.

Das muß wohl an der Grafik gelegen haben, mit einer anderen kleinen Grafik läuft's.
__________________
Kaum macht man\'s mal richtig, schon läuft\'s.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 18.06.2003, 09:39
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

Was bringt es mir eigentlich für Vorteile, wenn ich zusätzlich zu den drei Div-Containern auch im Body-Bereich height:100% einstelle? Sehe da keine Vorteile!

Ach übrigens: bei mir erscheinen auch Scroll-Leisten, wenn ich nicht die Div-Container auf 100% addiere, habe das aber mit overflow:hidden gelöst.

Gruß und Danke qwertz182
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
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren Alien CSS 17 20.03.2011 11:23
CSS-Seite horizontal und vertikal zentrieren! Boof CSS 20 05.02.2010 13:23
Hintergrundbild vertikal UND horizontal zentrieren? yggdrasil CSS 3 06.07.2008 11:19
Bild vertikal zentrieren in Blockelement in IE nur m. TABLE AndreasB CSS 11 13.03.2006 18:05
Bild horizontal und vertikal zentrieren krassonkel (X)HTML 1 13.06.2004 22:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:36 Uhr.