mal ganz ein anderes problem ...

[helpmeplease]

hallo,

ich wende mich mal mit was ganz anderem an euch. ich hab gerade ein modul für contenido gemacht das bilder mit dhtml darstellt. problem ist das ich die rechte spalte mit den vorschaubildern nicht exakt (pixelgenau) ausrichten kann. mit styles bin ich noch nicht am ziel ...

erreichen möchte ich eigentlich das das oberste bild oberkante des grossen dargestellt wird. wie man sieht ist das eben diese 4px weiter unten ...

vielleicht weiss hier jemand eine lösung.

http://www.tiroldesign.at/test_dhtml.html

[mvf]

hallo,

ich wende mich mal mit was ganz anderem an euch. ich hab gerade ein modul für contenido gemacht das bilder mit dhtml darstellt. problem ist das ich die rechte spalte mit den vorschaubildern nicht exakt (pixelgenau) ausrichten kann. mit styles bin ich noch nicht am ziel ...

erreichen möchte ich eigentlich das das oberste bild oberkante des grossen dargestellt wird. wie man sieht ist das eben diese 4px weiter unten ...

vielleicht weiss hier jemand eine lösung.

http://www.tiroldesign.at/test_dhtml.html

pixelgenaues ausrichten kannst du realtiv gut mit css und divs hinbekommen, dazu musst du allerdings das box-model für die unterschiedliche browser beachten, da diese padding border und margins unterschiedlich setzen, sprich die einen inclusive der width die anderen exclusive.

http://www.quirksmode.org/css/ ist ganz gut oder natürlich die selfhtml

[rezeptionist]

hy

Code: Alles auswählen

style="display:block;margin-top:3px;margin-bottom:3px"

ist klar das er nicht ganz nach oben geht werfe diese styles raus und setze stattdem in deine tabelle das

Code: Alles auswählen

cellspacing="0" oder cellpadding="0"

hoch dann müsste es gehen

[helpmeplease]

die styles kann ich nicht rauswerfen, den zwischen den bildern soll der abstand bleiben; die drei angezeigten bilder sollen sich also die gesamte höhe, in dem fall 330px aufteilen.

wirft man die styles raus sind alle bilder ganz beisammen ...

---------------

zum ersten beitrag; es ist richtig das ich mit css pixelgenau ausrichten kann, wie ich das allerdings auf mein beispiel umlegen soll ist mir ein rätsel, da ich ja keine absolute positionierung verwenden kann, durch den bildwechsel stehen die bilder ja immer an einer anderen position.

wenn ihr ein wenig mit dem beispiel herumspielt werdet ihr merken, das es nicht so einfach ist wie es scheint ... - ich hab bis jetzt noch keine brauchbare lösung gefunden ...

[timo]

naja wie der Name schon sagt: es ist eine Beispielseite. Sie wurde im klassischen Websiten-Designprozess entwickelt:

- Anforderungen sammeln
- Design erstellen
- Design in entsprechendes HTML umsetzen
- CSS dazu

Ich empfehle dir, einfach das genauso zu machen - du brauchst ja keine Komponenten der Beispielseite zu übernehmen (klar, Module schon, aber kein Layout und kein CSS). In deinem Falle ist es wohl wirklich einfacher, wenn du dir das ganze so aufbaust, wie du es verstehst, und nicht wie andere es gemacht haben...

[helpmeplease]

hi timo,

ich denke du hast da was flasch verstanden. ich habe nix aus einer beispielseite übernommen. ich habe einfach das problem mit der ausrichtung der bilder und dachte mir das hier im forum vielleicht jemand eine lösung hat die bilder wirklich exakt auszurichten bzw. wie es das beispiel eben verdeutlicht den oberen abstand wegzubringen und die 3 rechten bilder auf die ganze höhe gleichmäßig aufzuteilen.

ich weiss, das dieser fall mit contenido an sich nix zu tun hat, dennoch wendet man sich bei solchen fällen eben gern an ein forum um meinungen bzw. lösungsvorschläge einzuholen.

nicht das hier jemand meint, es geht um die contenido-beispielseite ...

[rezeptionist]

ok versuche das

Code: Alles auswählen

style="display:none;margin-top:3px;margin-bottom:4px"

dein bild stylesheet

Code: Alles auswählen

padding-top:3px;

und die anweisung in deine erste zelle sollte dann so aussehen

Code: Alles auswählen

<td valign="top" style="padding-top:3px;">

also in die zelle in der du das große bild darstellst

greets

[timo]

okay sorry, ich sollte Themen nicht querlesen - entschuldigung

[helpmeplease]

he blackmeetswhite,

merci, so gehts - du kannst dir nicht vorstellen wielange ich daran schon bastle. an die idee das problem nicht immer bei den rechten bildern zu suchen - bin ich nicht drauf gekommen

nochmals besten dank ... - hab das thema schon fast aufgegeben ...

ps: timo nix für ungut ...

[rezeptionist]

gern geschehen dafür ist ein forum da

aber warum löst du das nicht mit divs wäre doch eleganter und einfach (hoffentlich nicht zu weit aus dem fenster gewagt)

solong

greets

[mvf]

das läuft zunächst im FF

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Unbenanntes Dokument</title>
</head>

<body style="padding:0; margin:0">
<script type="text/javascript">
<!--
 function openImage(id) {
  for (var i=1; i<=4; i++) {
   if (i==id) {
    document.getElementById('image'+i+'_b').style.display = "block";
    document.getElementById('image'+i+'_s').style.display = "none";
   }
   else {
    document.getElementById('image'+i+'_b').style.display = "none";
    document.getElementById('image'+i+'_s').style.display = "block";
   }
  }   
 }
//-->
</script>

<div align="center">
<div style="width:588px">
	<div style="float:left; text-align:left; padding-right:2px; width=440;">
	<img src="http://tiroldesign.at/bildgruppe/79_94_1_20051116144033_b.jpg" id="image1_b" style="display:block"/><img src="http://tiroldesign.at/bildgruppe/79_94_2_20051116144033_b.jpg" id="image2_b" style="display:none"/><img src="http://tiroldesign.at/bildgruppe/79_94_3_20051116144033_b.jpg" id="image3_b" style="display:none"/><img src="http://tiroldesign.at/bildgruppe/79_94_4_20051116144033_b.jpg" id="image4_b" style="display:none"/>
	</div>

   <img src="http://tiroldesign.at/bildgruppe/79_94_1_20051116144033_s.jpg" id="image1_s" onClick="openImage('1')" style="display:none;margin-top:0px;margin-bottom:4px"/>
   <img src="http://tiroldesign.at/bildgruppe/79_94_2_20051116144033_s.jpg" id="image2_s" onClick="openImage('2')" style="display:block;margin-top:3px;margin-bottom:4px"/>
   <img src="http://tiroldesign.at/bildgruppe/79_94_3_20051116144033_s.jpg" id="image3_s" onClick="openImage('3')" style="display:block;margin-top:3px;margin-bottom:4px"/>
   <img src="http://tiroldesign.at/bildgruppe/79_94_4_20051116144033_s.jpg" id="image4_s" onClick="openImage('4')" style="display:block;margin-top:3px;margin-bottom:4px"/>

</div>
</div>
</div>
<br>
</body>
</html>

jetzt musst du nur noch mit den css klassen spielen, stichworte

padding-top padding-left padding-bottom padding-right

damit auch der IE das padding ordentlich interpretiert muss du wie gesagt das box-model beachten, siehe faq suche nach quirksmode oder der link in meinem 1.post hier