kostenloser Webspace werbefrei: lima-city

Objekt vertikal zentrieren

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. «
2. 1
3. 2

1. cyclobox

   

   cyclobox hat kostenlosen Webspace.

   17:01, 5.6.2012

   Dann liefer mal ein aktuelles Beispiel, an dem wir selbst ein bisschen per Firebug testen können.

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. Autor dieses Themas

   yorecords

   

   yorecords hat kostenlosen Webspace.

   0:52, 7.6.2012

   cyclobox schrieb:
   Dann liefer mal ein aktuelles Beispiel, an dem wir selbst ein bisschen per Firebug testen können.

   
   
   Es geht z.B. um (das Haupt-Bild auf) http://www.theyorecords.de/pics.html.
   
   Damit du nicht ewig suchen musst hier der beinhaltende Div:
   

   #picsmain {
   		width: 900px;
   		height: auto;
   		position: absolute;
   		margin: 0px;
   		padding: 0px;
   		top: 0px;
   		bottom: 135px;
   		text-align: center;
   		background-color: #000000;
   		z-index: 2;
   	}

   
   
   Und das die Tabelle (wie du siehst derweil einfach mit einem 8% Abstand zum oberen Rand, da ja die Lösung mit Minus-Margin nur begrenzt funktioniert..)
   

   .maintab {
   	border: 0px;
   	position: relative;
   	width: 100%;
   	height: auto;		
   	margin-top: 8%;
   	text-align: center;
   	}

   
   
   Danke für deine Hilfe!

4. cyclobox

   

   cyclobox hat kostenlosen Webspace.

   8:38, 7.6.2012

   Okey, ich verstehe, dass ist nicht so einfach. Mir fällt da direkt keine Lösung ein.
   
   Ich stand neulich auch vor der Aufgabe etwas sowohl horizontal, als auch vertikal zu zentrieren. Dabei war die Struktur wie unten gezeigt, allerdings hatte ich den Vorteil, dass es eine statische Landingpage war und ich somit von allen drei Bildern sowohl Breite, als auch Höhe kannte. Folglich konnte ich die Container entsprechend mit der Gesamtbreite bestücken.
   
   

   <div id="container">
   	<div id="box">
   		<div class="left">
   			<a href="#"><img src="" /></a>
   		</div>
   		<div class="middle">
   			<a href="#"><img src="" /></a>
   		</div>
   		<div class="right">
   			<a href="#"><img src="" /></a>
   		</div>
   	</div><!--end box-->
   </div><!--end container-->

   
   
   Was aber vielleicht auch eine Idee wäre, dass du die Auswahl von Fotos über die Fotos selbst bringst und dann die Fotos unmittelbar darunter anzeigst. Ich denke vertikale Zentrierung ist da unnötig.
   
   Weiterhin halte ich die Dopplung der Menüpunkte (also Navigation mit Grafik links und Textnavigation als Footer) für zu sehr redundant. Die untere Variante würde ich rausnehmen und die Buttons links nicht so hoch machen, weil jeder Laptop-Benutzer dann innerhalb der Navigation scrollen muss.
   
   Beitrag zuletzt geändert: 7.6.2012 8:38:54 von cyclobox

5. raphael811

   raphael811 hat kostenlosen Webspace.

   10:02, 7.6.2012

   Probier's mal so, sollte funktionieren:

   <div style="line-height:250%;width:auto;border:1px solid #cacaca;margin:1em 20%;text-align: center;">
   <img id="image535" style="vertical-align:middle;" src="/bild.png" alt="Bild 128-128" height="96" width="96" /></div>

   MfG raphael811

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

1. «
2. 1
3. 2

Dir gefällt dieses Thema?