• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Textfeld

A

apfelkirsch

Neues Mitglied
http://hurtful.de/KDA/index.html


Weiß jemand warum es das tut und was ich falsch gemacht hab? :( Textfeld soll logischerweise mittig sein ...

Code: 
<html>
<head>
<title>lay-psd-fertig</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (lay-psd-fertig.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		test_02_over = newImage("images/test_02-over.jpg");
		test_04_over = newImage("images/test_04-over.jpg");
		test_09_over = newImage("images/test_09-over.jpg");
		test_13_over = newImage("images/test_13-over.jpg");
		preloadFlag = true;
	}
}

// -->
</script>
<!-- End Preload Script -->
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	width:376px;
	height:335px;
	z-index:1;
	left: 400px;
	top: 253px;
}
#apDiv2 {
	position:absolute;
	width:380px;
	height:349px;
	z-index:1;
	left: 397px;
	top: 251px;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">
<!-- ImageReady Slices (lay-psd-fertig.psd) -->
<div id="apDiv2" align="center"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
  <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
  <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p></div>
<center>
  <table id="Table_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0">
<tr>
		<td rowspan="7">
			<img src="images/test_01.jpg" width="363" height="600" alt=""></td>
		<td>
			<a href="#"
				onmouseover="changeImages('test_02', 'images/test_02-over.jpg'); return true;"
				onmouseout="changeImages('test_02', 'images/test_02.jpg'); return true;"
				onmousedown="changeImages('test_02', 'images/test_02-over.jpg'); return true;"
				onmouseup="changeImages('test_02', 'images/test_02-over.jpg'); return true;">
				<img name="test_02" src="images/test_02.jpg" width="156" height="78" border="0" alt=""></a></td>
		<td rowspan="7">
			<img src="images/test_03.jpg" width="21" height="600" alt=""></td>
		<td colspan="3" rowspan="2">
			<a href="#"
				onmouseover="changeImages('test_04', 'images/test_04-over.jpg'); return true;"
				onmouseout="changeImages('test_04', 'images/test_04.jpg'); return true;"
				onmousedown="changeImages('test_04', 'images/test_04-over.jpg'); return true;"
				onmouseup="changeImages('test_04', 'images/test_04-over.jpg'); return true;">
				<img name="test_04" src="images/test_04.jpg" width="164" height="117" border="0" alt=""></a></td>
		<td colspan="2" rowspan="3">
			<img src="images/test_05.jpg" width="96" height="140" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="78" alt=""></td>
	</tr>
	<tr>
		<td rowspan="6">
			<img src="images/test_06.jpg" width="156" height="522" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="39" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/test_07.jpg" width="164" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="images/test_08.jpg" width="89" height="460" alt=""></td>
		<td colspan="3">
			<a href="#"
				onmouseover="changeImages('test_09', 'images/test_09-over.jpg'); return true;"
				onmouseout="changeImages('test_09', 'images/test_09.jpg'); return true;"
				onmousedown="changeImages('test_09', 'images/test_09-over.jpg'); return true;"
				onmouseup="changeImages('test_09', 'images/test_09-over.jpg'); return true;">
				<img name="test_09" src="images/test_09.jpg" width="150" height="80" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="images/test_10.jpg" width="21" height="123" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="80" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/test_11.jpg" width="150" height="43" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="43" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/test_12.jpg" width="55" height="337" alt=""></td>
		<td colspan="3">
			<a href="#"
				onmouseover="changeImages('test_13', 'images/test_13-over.jpg'); return true;"
				onmouseout="changeImages('test_13', 'images/test_13.jpg'); return true;"
				onmousedown="changeImages('test_13', 'images/test_13-over.jpg'); return true;"
				onmouseup="changeImages('test_13', 'images/test_13-over.jpg'); return true;">
				<img name="test_13" src="images/test_13.jpg" width="116" height="111" border="0" alt=""></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="111" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/test_14.jpg" width="116" height="226" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="226" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="363" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="156" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="89" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="55" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="20" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="75" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
		<td></td>
	</tr>
</table></center>
<!-- End ImageReady Slices -->
</body>
</html>
 
ich rate dir schon mal in deckung zu gehen, denn die anderen kollegen hier an board werden dir als erstes dein tabellenlayout um die ohren hauen ;)
als nächstes frage ich mich was du bei einer absoluten positionierung mit klar definierten abstand nach oben und links erwartest....doch sicher keine zentrierung oder?
da liegt der hase im pfeffer...
text-align:center und/oder margin:auto sollten zu einer zufriedenstellenden lösung führen
 
Space Vampire schrieb:
ich rate dir schon mal in deckung zu gehen, denn die anderen kollegen hier an board werden dir als erstes dein tabellenlayout um die ohren hauen ;)
Zum Vergrößern anklicken....

Jaa... hat mein Dozent auch schon gemacht :D Egal, so lang es geht xD


als nächstes frage ich mich was du bei einer absoluten positionierung mit klar definierten abstand nach oben und links erwartest....doch sicher keine zentrierung oder?
da liegt der hase im pfeffer...
text-align:center und/oder margin:auto sollten zu einer zufriedenstellenden lösung führen
Zum Vergrößern anklicken....

ohhhh... das hab ich natürlich nicht gesehen. ^^
Naja Abstand von oben muss ich ja logischerweise definieren. Abstand von links hab ich dann auf 50% gestellt, dann isses zu weit rechts. text-align funktioniert auch nicht (dann bleibts ganz links). margin auch nicht... was mach ich jetzt schon wieder falsch? oO
 
ich seh garnicht dass du irgendwas verändert hast *grübel*

probier mal so:

Code: 
<style type="text/css">
<!--
body{
 text-align:center;
 margin:0;
 background-color:#FFFFFF;
 }
 
#apDiv2 {
 position:absolute;
 width:380px;
 height:349px;
 z-index:1;
 top: 251px;
 margin:auto;
}
-->
</style>
</head>
<body onLoad="preloadImages();">
<div id="apDiv2">

auf dem weg kannst du auch gleich die formatierungen aus dem bodytag in die css packen ;)
 
Ich würde es so machen:
Code: 
body{
 text-align:left !important;
 margin:0;
 background-color:#FFFFFF;
 }
 
#apDiv2 {
 position:absolute;
 width:380px;
 height:349px;
 z-index:1;
 top: 251px;
 left:50%;
 margin:0 0 0 -85px;
 text-align:left !important;
}

Das größte Problem ist, dass die Schrift so klein ist, dass sie nicht mehr richtig dargestellt wird:Zwischenablage01.png
außerdem ragt sie ins Zierbild rein.
 
stachelbeer schrieb:
Ich würde es so machen:
Code: 
body{
 text-align:left !important;
 margin:0;
 background-color:#FFFFFF;
 }
 
#apDiv2 {
 position:absolute;
 width:380px;
 height:349px;
 z-index:1;
 top: 251px;
 left:50%;
 margin:0 0 0 -85px;
 text-align:left !important;
}
Zum Vergrößern anklicken....

klick

Es geht immer noch nicht... ich verstehs nicht -.-

Habs jetzt alles in die css gepackt und die sieht jetzt so aus:

Code: 
body {color : #000;
font-size:10px;
background-image: url(bg.jpg);
background-position: 50% 133px; 
background-repeat: repeat-y;
background-color : #d2d2d2;
font-family:"Courier New", Courier, monospace;
text-align:left !important;
 margin:0;}


a:link {text-decoration : none;
          color                 : #184D63;}

a:hover {color : #000;
font-size : 15pt;
letter-spacing : 0.25em;}

a:visited {color : #D8C43F;}

 
#apDiv2 {
 position:absolute;
 width:380px;
 height:349px;
 z-index:1;
 top: 251px;
 left:50%;
 margin:0 0 0 -85px;
 text-align:left !important;
}

Das größte Problem ist, dass die Schrift so klein ist, dass sie nicht mehr richtig dargestellt wird:Anhang anzeigen 1414
außerdem ragt sie ins Zierbild rein.
Zum Vergrößern anklicken....

Ja das ist ja alles noch nicht fest... ich hab nur die Schriftgröße geändert um was auszuprobieren ^^ soll eigentlich größer werden. :)
 
versuchs mal mit

Code: 
margin:0px auto;
position:relative;

Der Abstand von Oben kann bei der ersten Angabe bei margin oder seperat bestimmt werden

Ich hab mal den CSS Code geändert. Jetzt tritt ein anderer Fehler auf. Das liegt daran, dass du deine Elemente semantisch nicht Korrekt machst. Ich werds mal freundlicherweise versuchen zu ändern. Hier der CSS Code:

Code: 
body {color : #000;
font-size:0.8em;
background-image: url(bg.jpg);
background-position: 50% 133px; 
background-repeat: repeat-y;
background-color : #d2d2d2;
font-family:"Courier New", Courier, monospace;
 margin:0;}


a:link {text-decoration : none;
          color                 : #184D63;}

a:hover {color : #000;
font-size : 15pt;
letter-spacing : 0.25em;}

a:visited {color : #D8C43F;}

 
#apDiv2 {
 position:relative;
 width:380px;
 height:349px;
 z-index:1;
 margin:251px auto;
 text-align:left !important;
}
 
Zuletzt bearbeitet:
Gimli schrieb:
versuchs mal mit

Code: 
margin:0px auto;
position:relative;

Der Abstand von Oben kann bei der ersten Angabe bei margin oder seperat bestimmt werden

Ich hab mal den CSS Code geändert. Jetzt tritt ein anderer Fehler auf. Das liegt daran, dass du deine Elemente semantisch nicht Korrekt machst. Ich werds mal freundlicherweise versuchen zu ändern. Hier der CSS Code:
Zum Vergrößern anklicken....

Vielen Dank schonmal :) Mittig ist es jetzt durchaus... klick nur der Hintergrund stimmt jetzt nicht mehr :(
Ich hab leider keinen Plan, wie ich meine Elemente semantisch korrekt mache (: Was bedeutet das?

Tut mir Leid, dass ich so absolut keine Ahnung habe, bin noch ziemlicher Anfänger was das angeht...
 
apfelkirsch schrieb:
Jaa... hat mein Dozent auch schon gemacht :D Egal, so lang es geht xD
Zum Vergrößern anklicken....
Und wer sagt, dass es geht? Es wird bei Dir vielleicht so dargestellt, wie Du das willst, aber es "geht" sicher nicht, denn da wird ja dem Inhalt eine Bedeutung vorgetäuscht, die so nicht gemeint ist. Das kann in manchen Clients fatale Folgen haben.
 
Zuletzt bearbeitet von einem Moderator:
Hm okay, ich habe das Gefühl, dass das so nichts wird. :/ Liegt das daran, dass ich das mit imageready gemacht habe? Wenn ich versuche das rollover ohne imageready zu machen (weil das würd ich eigentlich ganz gerne behalten), wie mache ich das denn dann? Brauche ich im Endeffekt nicht trotzdem die Slices?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben