zurück zur Startseite
  


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

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.08.2003, 21:31
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2003
Beiträge: 46
rusty befindet sich auf einem aufstrebenden Ast
Standard Bild zentrieren

Hallo allerseits

Ich habe eine Klasse, welche ich dem img-Tag zuweise:

Code:
[img]../../images/gallery/fz_ch001.jpg[/img]
Das CSS (bisher nur border definiert):
Code:
.img_gall {border:10px double #666666;}
Ich möchte nun, dass das Bild immer in der Mitte des Broserfensters erscheint und dies mit CSS realisieren. Mit "Mitte" meine ich horizontal, wie auch vertikal zentriert. Gibt es da eine Möglichkeit, dies einfach in der Klasse anzugeben?

Ich habe auch dran gedacht, einen zentrierten div-Container zu definieren und das Bild da rein zu tun . Aber das klappt irgendwie auch nicht, oder meine CSS-Kentnisse reichen noch nicht aus.

Ach ja: Ich möchte - wenn möglich - keine Tabelle benützen. Mann soll ja sowieso langsam nur noch CSS für Positionierungen verwenden. Richtig?

Vielen Dank!

Roland Portmann
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.08.2003, 09:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Ach ja: Ich möchte - wenn möglich - keine Tabelle benützen. Mann soll ja sowieso langsam nur noch CSS für Positionierungen verwenden. Richtig?
Richtig - Frau auch ..........

Tabellen nur da wo Tabellen sind. Sonst würde die Teile ja auch Rasterschiebespalten und nicht Tabellen heißen.

Leider gibt es im CSS noch Probleme mit vertical-align, da geht nicht so viel wie gedacht.

Aber das Thema wurde ja schon ausgiebig diskutiert [such-funktion].

Um innerhalb eines Elementes ein Cild-Element horizental zu zentrieren bietet sich
[text-align: center;] an.
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.08.2003, 08:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2003
Beiträge: 46
rusty befindet sich auf einem aufstrebenden Ast
Standard

Hallo

Zitat:
Leider gibt es im CSS noch Probleme mit vertical-align, da geht nicht so viel wie gedacht.
Sch*****, werde mich beschweren...

Zitat:
Aber das Thema wurde ja schon ausgiebig diskutiert [such-funktion].
Ich habe ansatzweise Postings zum Thema gefunden. Aber kein befriedigendes! Nie hat jemand gesagt es geht mit CSS einfach nicht. Immer noch diese Möglichkeit und die andere Alternative und nochmals eine Lösung...und und und. Dabei ist es kurz und klar gesagt: Nach dem aktuellen Stand der Dinge ist es mit reinem CSS nicht möglich.

Werde es weiterhin so lösen (andere Vorschläge jederzeit willkommen!):

Code:
<body>
<center>
<table border="0" height="100%">
<tr>
<td valign="middle" align="center">
[img]image.jpg[/img]
</td>
</tr>
</table>
</center>
</body>
Trotzdem vielen Dank!

Roland
Mit Zitat antworten
  #4 (permalink)  
Alt 26.08.2003, 11:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Halt...stop....warte

Es gibt noch eine sehr gute Möglichkeit.

Wenn man ein Bild innerhalb eines Containers (auch ein BODY ist ja ein Container) ein Bild zentriert setzen möchte:

Einfach das Image in den Hintergrund, und mit background-position arbeiten.

Ich habe mal einen Workaround dazu gemacht.

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 {
		/*background-color: #AAAAAA;*/
		font-size: 0.8em;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		color: #FFFFFF;
	}

	body {
		background-color: #6600EE;
		background-attachment: fixed;
		background-image: url(file:///C|/WINDOWS/Help/Tours/htmlTour/best_road.jpg);
		background-position: right;
		background-repeat: no-repeat;
		margin: 0px;	
		padding: 5px 5px 5px 5px;	
	}
	b	{
		color: #FFFF00;
		background-color: #666666;
		font-weight: bold;
		padding-left: 3px;
		padding-right: 3px;		
	}


	div {
		float: left;
		width: 250px;
		height: 200px;
		margin: 5px;
		padding: 5px;
		background-color: #0099EE;
		background-image: url(file:///C|/WINDOWS/Help/Tours/htmlTour/best_road.jpg);
	}

	.top {
		background-position: top;
		background-repeat: no-repeat;
	}
	.bottom {
		background-position: bottom;
		background-repeat: no-repeat;
	}
	.left {
		background-position: left;
		background-repeat: no-repeat;
	}
	.right {
		background-position: right;
		background-repeat: no-repeat;
	}
	.center {
		background-position: center;
		background-repeat: no-repeat;
	}
	.righttop{
		background-position: right top;
		background-repeat: no-repeat;
	}
	.lefttopy{
		background-position: left top;
		background-repeat: repeat-y;
	}
	.lefttopx{
		background-position: left top;
		background-repeat: repeat-x;
	}
	.centerx{
		background-position: center;
		background-repeat: repeat-x;
	}
	.centery{
		background-position: center;
		background-repeat: repeat-y;
	}
	.position{
		background-position: 90% 95%;
		background-repeat: no-repeat;
	}
	.positiony{
		background-position: 9% 0%;
		background-repeat: repeat-y;
	}
	.positionx{
		background-position: 0px 12px;
		background-repeat: repeat-x;
	}
	-->
</style>
</head>

<body>


background-attachment: fixed; nur m&glich wenn HTML keine background-DEFINITIONEN</p>

<div>background-image: url();</div>
<div class="top">background-position: top;
background-repeat: no-repeat;</div>
<div class="bottom">background-position: bottom;
background-repeat: no-repeat;</div>
<div class="left">background-position: left;
background-repeat: no-repeat;</div>
<div class="right">background-position: right;
background-repeat: no-repeat;</div>
<div class="center">background-position: center;
background-repeat: no-repeat;</div>
<div class="righttop">background-position: right top;
background-repeat: no-repeat;</div>
<div class="lefttopy">background-position: left top;
background-repeat: repeat-y;</div>
<div class="lefttopx">background-position: left top;
background-repeat: repeat-x;</div>
<div class="centerx">background-position: center;
background-repeat: repeat-x;</div>
<div class="centery">background-position: center;
background-repeat: repeat-y;</div>
<div class="position">background-position: 90% 95%;
background-repeat: no-repeat;</div>
<div class="positiony">background-position: 9% 0%;
background-repeat: repeat-y;</div>
<div class="positionx">background-position: 0px 12px;
background-repeat: repeat-x;</div>

</body>
</html>
Die Url ist hier auf ein XP-File gesetzt. Kannst Du einfach ersetzen mit

url(images/xy.gif)

oder was auch immer.........
__________________
</ulle>
Mit Zitat antworten
  #5 (permalink)  
Alt 26.08.2003, 14:05
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2003
Beiträge: 46
rusty befindet sich auf einem aufstrebenden Ast
Standard

Hi Ulle

Hmmm... werde Dein Vorschlag einmal versuchen umzusetzen. Habe den Code nur schnell überflogen und habe da nicht alles auf Anhieb verstanden.

Melde mich wieder bei Dir. Als Hintergrundbild tönt aber schon mal recht interessant.

Danke,

Roland
Mit Zitat antworten
  #6 (permalink)  
Alt 26.08.2003, 14:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Nimm einfach den gesamten CODE und kopiere ihn mal in eine eigene Datei, falls Du XP hast siehst Du auch gleich wie es funktioniert.

XP -> nur wegen dem URL für das Bild [da diese URL absolute angegeben ist]
__________________
</ulle>
Mit Zitat antworten
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
css - Bild im <div> zentrieren ... gerabel CSS 7 19.09.2018 10:29
zu breites Bild zentrieren ohne Scrollbalken deelite CSS 1 25.04.2013 21:41
Bild in div vertikal zentrieren. serum CSS 2 01.02.2013 12:11
Bild in der Navigationsleiste zentrieren sumica CSS 8 19.06.2009 12:53
Bild vertikal zentrieren in Blockelement in IE nur m. TABLE AndreasB CSS 11 13.03.2006 18:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:21 Uhr.