Seite 1 von 1
mal ganz ein anderes problem ...
Verfasst: Do 17. Nov 2005, 14:41
von 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
Re: mal ganz ein anderes problem ...
Verfasst: Do 17. Nov 2005, 14:50
von mvf
helpmeplease hat geschrieben: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
Verfasst: Do 17. Nov 2005, 14:51
von 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
hoch dann müsste es gehen
Verfasst: Do 17. Nov 2005, 15:27
von 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 ...
Verfasst: Do 17. Nov 2005, 15:30
von 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...
Verfasst: Do 17. Nov 2005, 15:35
von 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 ...
Verfasst: Do 17. Nov 2005, 15:43
von rezeptionist
ok versuche das
dein bild stylesheet
und die anweisung in deine erste zelle sollte dann so aussehen
also in die zelle in der du das große bild darstellst
greets
Verfasst: Do 17. Nov 2005, 15:50
von timo
okay sorry, ich sollte Themen nicht querlesen - entschuldigung
Verfasst: Do 17. Nov 2005, 16:01
von 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 ...
Verfasst: Do 17. Nov 2005, 16:03
von 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
Verfasst: Do 17. Nov 2005, 16:05
von 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