html frage

K

kimi

blub
he leute,

ich weiß nich, ob das unterforum richtig is, sonst auch gerne verschieben...

zu meiner frage:
ich will ein bild auf einer homepage genau mittig ausrichten, und zwar in der mitte des vorher definierten div#inhalt.

das ganze sieht so aus:
Code:
div#inhalt {
		margin-top:50px;
		margin-right:1em;
		margin-left:250px;
		}
und
Code:
<DIV id="inhalt">
<br>
<br>

<div align="center"><IMG src="images/orchester.png" alt="Altes Foto des Kammerorchesters" width="400" height="246" align="left" border="0"></div>


	</DIV>

nur das
Code:
<div align="center">
tut nicht das, was ich will... wahrscheinlich liegts an mir?

was muss ich also anstellen, um das foto in die mitte zu prügeln?
wäre nett,

grüße,
kimi
 
kanns dir zwar auch nicht so ausm stegreif sagen, aber ich hab zum testen bei jedem div noch ein "border: 1px solid black;"
dann sieht man genau wie die divs liegen
vlt hilfts ja
 
wie meine divs liegen, weiß ich. trotzdem danke.
gruß,
kimi
 
Hallo,

hier ist ein volles Beispiel:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css" media="screen">
body {
background-color: #ffa500;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
#content {
position: absolute;
height: 200px;
width: 400px;
margin: -100px 0px 0px -200px;
top: 50%;
left: 50%;
padding: 0px;
background-color: #f5f5f5;
border: 1px solid black;
}
#image {
position: absolute;
height: 40px;
width: 80px;
margin: -20px 0px 0px -40px;
top: 50%;
left: 50%;
padding: 0px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="content">
<img id="image" src="http://www.google.de/intl/de_de/images/logo.gif" />
</div>
</body>
</html>
cu
 
Zuletzt bearbeitet:
danke, hat sich soweit erledigt.
die kombination von
Code:
<div align="center">
und
Code:
align="top"
hat genau das erwünschte gebracht.
trotzdem danke,
grüße,
kimi
 
Das geht natürlich auch, ist aber ungefähr so stylish wie Omas Wärmflasche ;)
 
Hey, die Wärmflasche von meiner Oma ist absolut stylisch. Und simple Lösungen sind oft besser als komplizierte.
 
Ich schieb es mal in die einzig zutreffende Kategorie.

BTW Absolute Positionierung ist immer so eine Sache - wo oft der Blick auf andere Bildschirmgrößen aus der Strecke bleibt.
Aber zum Glück hat der User ja die möglichkeit von diversen Webangeboten ganz flink Abschied für immer zu nehmen. ;)
 
Darum steckt es ja im CSS :)
Das kann man abschalten oder anpassen, und alles läuft so wie gewünscht. Ich sag nur Model, View, Controller...
 
hm also bei mir funktioniert das ganz gut, und vor allem es wird auch bei verschiedenen auflösungen bzw fenstergrößen in die Mitte plaziert... das ist auch ein effekt, gegen den ich absólut nichts habe...
allerdings würde mich schon interessieren, was hat html mit hardware zu tun (unterforum)?
vielleicht stehe ich nur auf dem schlauch und jemand kanns mir erklären...^
grüße
kimi
 
Weil es in keine Kategorie passt (Programmieren != html) und es sonst nirgends ein sonstiges gibt, habe ich das hier hin geschoben und dabei auf die Oberkategorie gesch*.

Mit Netzwerkproblemen hat es jedenfalls nix gemein.
 
@wolfgang:
leuchtet ein...

ich würde mich gleich noch mit einer weiteren frage an:
ich habe folgende Unterseite:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>
	Tuttlinger Kammerorchester - Bildergalerie
	</title>

<link rel="icon" 
      type="image/x-icon" 
      href="/images/icon.ico" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="generator" content="Jalbum 8.0 with the ImageFlow 2 skin"/>
<meta name="keywords" content=""/>
<meta name="copyright" content="2008"/>
<style type="text/css">
body{
	width:100%;
	height:100%;
	margin:0;
	padding:0
}
body{
	background:#111;
	color:#fff;
	font:80%/120% "Lucida Grande",Geneva,Arial,Verdana,sans-serif;
}
a{color:#fff;padding:1em;}
a:hover{color:#888;}
#demo {
	width:800px;
	margin:1em auto;
	text-align:left;
}
</style>
<link href="../res/css/MooFlowDemo.css" rel="stylesheet" type="text/css" />
<link href="../res/css/MooFlow.css" rel="stylesheet" type="text/css" />
<link href="../res/ReMooz/ReMooz.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../res/css/style2.css" />
<script type="text/javascript" src="../res/js/script.js"></script>
<script type="text/javascript" src="../res/js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="../res/js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="../res/js/MooFlow.js"></script>
<script type="text/javascript" src="../res/ReMooz/ReMooz.js"></script>
<script type="text/javascript" src="../res/js/demo.js"></script>
<script type="text/javascript">
var myMooFlowPage = {

	start: function(){
	
		var mf = new MooFlow($('MooFlow'), {
			startIndex: 0,
			reflection: 0.40,
			heightRatio: 0.6,
			interval: 3000,
			bgColor: '#000',
			useSlider: true,
			useAutoPlay: true,
			useCaption: true,
			useResize: true,
			useWindowResize: false,
			useMouseWheel: true,
			useKeyInput: true,
			useViewer: true,
			onClickView: function(obj){
				var img = new Element('img',{src:obj.src, title:obj.title, alt:obj.alt, styles:obj.coords}).setStyles({'position':'absolute','border':'none'});
				var link = new Element('a',{'class':'remooz-element','href':obj.href,'title':obj.title + ' - '+ obj.alt, styles:{'border':'none'}});
				document.body.adopt(link.adopt(img));
				var remooz = new ReMooz(link, {
		            centered: true,
					resizeFactor: 0.8,
		            origin: link.getElement('img'),
					onCloseEnd: function(){link.destroy()}
		        });
				remooz.open();
			}
		});
		$$('.loadremote').addEvent('click', function(){
			mf.loadHTML(this.get('href'), this.get('rel'));
			return false;
		});
	}
	
};

window.addEvent('domready', myMooFlowPage.start);
</script>




<link rel="alternate" href="album.rss" type="application/rss+xml"/>
</head>
<body onload="menuSlider.init('menu','slide')">
<div id="header"><h3>Bilder</h3> </div>
<div id="content">

<div class="menu">
 <ul id="menu">
				
				<li>
                    <!-- up --> <a href="../../multimedia.html">Zur&uuml;ck zu "Multimedia"</a>
					</li>
                    
<!-- Create navigation buttons if more than one index page -->

 </ul>
   <div id="slide"><!-- --></div>
</div>

<noscript>
    <div style="color:#000;text-align:center;width:100%;position:absolute;top:200px">
    You really, really need to enable JavaScript to view this page.<br/>
    You know, it's about JavaScript.<br/>
    <br/>
    And it will make your life much easier, but it's up to you.
    </div>
  </noscript>
<div  id="MooFlow">
    
	<a href="slides/1970.jpg"  rel="image"><img src="slides/1970.jpg"  title="1970:  Konzert in der Aula der Gymnasien - 1970" alt="1970:  Konzert in der Aula der Gymnasien - 1970"/></a>
	<a href="slides/Abschied von H.jpg"  rel="image"><img src="slides/Abschied von H.jpg"  title="Abschied von H:  Abschied von H" alt="Abschied von H:  Abschied von H"/></a>
	<a href="slides/Dezember 1990.jpg"  rel="image"><img src="slides/Dezember 1990.jpg"  title="Dezember 1990:  Erstes Konzert unter Bärbel Gall - Dezember 1990" alt="Dezember 1990:  Erstes Konzert unter Bärbel Gall - Dezember 1990"/></a>
	<a href="slides/1993.jpg"  rel="image"><img src="slides/1993.jpg"  title="1993:  Ausflug nach Bex 1993" alt="1993:  Ausflug nach Bex 1993"/></a>
	<a href="slides/1994.jpg"  rel="image"><img src="slides/1994.jpg"  title="1994:  Probenwochenende auf dem Wildenstein - September 1994" alt="1994:  Probenwochenende auf dem Wildenstein - September 1994"/></a>
	<a href="slides/Oktober 1998.jpg"  rel="image"><img src="slides/Oktober 1998.jpg"  title="Oktober 1998:  Oktober 1998" alt="Oktober 1998:  Oktober 1998"/></a>
	<a href="slides/2. 12.jpg"  rel="image"><img src="slides/2. 12.jpg"  title="2. 12:  Probe mit Jordi Altimira - 2. 12" alt="2. 12:  Probe mit Jordi Altimira - 2. 12"/></a>
	<a href="slides/2003.jpg"  rel="image"><img src="slides/2003.jpg"  title="2003:  Jubiläumskonzert 50 Jahre 19. 10" alt="2003:  Jubiläumskonzert 50 Jahre 19. 10"/></a>
	<a href="slides/21. 7.jpg"  rel="image"><img src="slides/21. 7.jpg"  title="21. 7:  Das Orchester in der Wilhelmschule, wo es auch probt" alt="21. 7:  Das Orchester in der Wilhelmschule, wo es auch probt"/></a>
    </div>
	<h3 class="info"><a><img src="res/help.png" alt="Hilfe zur Galerie" width="16" height="16" align="middle" /></a></h3>
    <p id="info"><em><div id="info2">
    <p>Um ein Bild in voller Größe zu sehen, doppelklicken Sie darauf. Um von einem Bild zum anderen zu wechseln, bewegen Sie den Balken unter den Bildern, klicken Sie auf die Pfeiltasten rechts und links des Balkens oder klicken Sie auf das Bild, welches Sie sehen wollen. Zurück zur Seite "Multimedia" geht es über den Link "Zurück zu "Multimedia"".</p>
    <p align="center" class="style1"><br />ImageFlow Album created with<a href="http://jalbum.net" title="Album generated by JAlbum 7.4" target="_blank">JAlbum</a> by <a href="http://jalbum.macosxsupport.com" target="_blank">DrMikey<br />
  </a>MooFlow Javascript by <a href="http://www.outcut.de/MooFlow/">www.outcut.de</a><br />
  ReMooz lightbox by <a href="http://digitarald.de/project/remooz/" target="_blank">Harald Kirschner</a></p>
  <input type="hidden" name="cmd" value="_s-xclick"/>
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but11.gif" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"/>
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
</form>
  </div>
	
	</em></p>
	
</div> 
<script type="text/javascript"><!--//--><![CDATA[//><!--
_jaSkin = "ImageFlow 2";
_jaStyle = "style.css";
_jaVersion = "8.0";
_jaPageType = "index";
if (location.href.indexOf("http://") == 0 || location.href.indexOf("https://") == 0) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://jalbum.net/widgets/load.js";
document.getElementsByTagName("body")[0].appendChild(script);
}
//--><!]]></script>

</body>
</html>

Nun zeigt diese Liebenswerte Seite aber nicht den Favicon an... habe schon überlegt ob das mit damit was zu tun hat, dass ganz oben bei <!Doctype was von XHTML steht... habe daraufhin nach xhtml favicon gesucht und dann das gefundene ergebnis auf meine favicon datei angepasst.
dabei ist die folgende zeile herausgekommen:
Code:
<link rel="icon" 
      type="image/x-icon" 
      href="/images/icon.ico" />

ich weiß nicht ob der "/" vor dem Verzeichnis "images" richtig ist, es war auch im Beispiel so, ohne tut sich allerdings auch nichts.
hat mir hier jemand einen tipp?
viele grüße,
grüße,
kimi
 
Hallo,

sollte es nicht reichen, wenn das Favicon im selben Verzeichnis wie die Datei liegt? Die Kombination
Code:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link rel="icon" type="image/ico" href="favicon.ico"/>
müsste eigentlich funktionieren.
Mann kann auch ein PNG verwenden, wenn man am Alpha-Kanal Interesse hat. Ob mng's für ein animiertes Favicon funktionieren, wäre glatt mal interessant in Erfahrung zu bringen ;-)

Außerdem habe ich noch eine klitzekleine Anmerkung, in der Hoffnung, dass sich die Welt ein bisschen verbessert :-): Laut CSS-Recommendation muss nach dem Doppelpunkt ein Leerzeichen folgen! Ich finde es immer wieder zum Brüllen, wenn Leute auf Webstandards pochen, aber bei so etwas Banalem versagen. (Ist nicht auf dich bezogen!)

cu
 

Ähnliche Themen

CMS Problem [php]

Onlineumfrage programmieren (mehrseitige HTML Formular an PHP übergeben)

Conky Problem

Skriptausgabe in HTML-Datein umwandeln. Komische Endung!

Zurück
Oben