Mit HTML lösbar (Design)

[Technician]

Hallo,

ich bin auf dem Gebiet "Webseiten-Erstellen" noch totaler Neuling.

deshalb eine Frage:

Kann ich ein derartiges Seitenlayout

           Thema1_________________             Thema3

                                  |                 |                                                     

                                  |   ______________|

                                  |  |                       

                               -----X__________________Thema2

                               |

                               |

               Thema4  ________|

ohne die Verwendung von Flash erzeugen?

Die Texte "Thema1" etc. sind Bilder (genauer gesagt, Bilder als Buttons), die Linien sind auch Bilder.

Ich bräuchte also eine Möglichkeit, Bilder wie in einem Bildbearbeitungsprogramm an genau einen Punkt setzen zu können, ohne dabei an ein starres Raster wie eine Tabelle gebunden zu sein.

Für jede Hilfe dankbar

Technician

[Honkytonk]

Hab zwar dein Design nicht ganz verstanden (btw. Lustiges ASCII-Gemälde ), aber es gibt mit CSS die Möglichkeit Elemente genau zu Postionieren.

siehe SelfHTML

Anmerkung:

Wird nicht von allen Browsern vernünftig dargestellt. Netscape 6.2 hat damit kleine Probleme.

[Technician]

Original geschrieben von Honkytonk

Hab zwar dein Design nicht ganz verstanden (btw. Lustiges ASCII-Gemälde ), aber es gibt mit CSS die Möglichkeit Elemente genau zu Postionieren.

Ich will praktisch in der Mitte (wo das X steht) eine Grafik, an den Enden der Linien (die wirklich so eckig vom Mittelpunkt weggehen sollen) befinden sich dann die Buttons.

siehe SelfHTML

Anmerkung:

Wird nicht von allen Browsern vernünftig dargestellt. Netscape 6.2 hat damit kleine Probleme.

[Technician]

... ich hab bis jetzt nur gesehen, dass man damit Elemente zeichnen kann.

Wie sieht's mit dem Einbinden von Grafiken (bei mir: der Mittelpunkt und die Textbuttons) aus - diese sollen ja auch frei positioniert werden

[sPoOL]

wie wäre es wenn du layers verwendest... die sind frei positionierbar und werden fast von jedem browser darstellbar!

[Technician]

Original geschrieben von sPoOL

wie wäre es wenn du layers verwendest...

Layer :confused:

Ich kenne zwar Layer aus der Bildbearbeitung, aber was bedeutet das beim Grafikdesign?!

*erklärung-erbitt*

Technician

[ABRAXAS]

hihi - ich habe mal dein dingsda mit einer tabelle nachgebaut...

es könnte so gehen...

aber da ist noch viel feinarbeit nötig...

          <table width="400" border="0" cellspacing="0" cellpadding="0" height="300">

            <tr> 

              <td width="135" height="20">Thema1<img src="gfx/1pix_999999.jpg" width="100%" height="1"></td>

              <td width="1"> </td>

              <td width="90"> </td>

              <td width="1"> </td>

              <td width="139" align="right">Thema3<img src="gfx/1pix_999999.jpg" width="100%" height="1"></td>

            </tr>

            <tr> 

              <td width="135"> </td>

              <td><img src="gfx/1pix_999999.jpg" width="1" height="100%"></td>

              <td width="90"> </td>

              <td><img src="gfx/1pix_999999.jpg" width="1" height="100%"></td>

              <td width="139"> </td>

            </tr>

            <tr> 

              <td width="135"> </td>

              <td><img src="gfx/1pix_999999.jpg" width="1" height="100%"></td>

              <td width="90"> </td>

              <td><img src="gfx/1pix_999999.jpg" width="1" height="100%"></td>

              <td width="139"> </td>

            </tr>

            <tr> 

              <td width="135" height="20"> </td>

              <td> </td>

              <td width="90">--------------X</td>

              <td valign="bottom"><img src="gfx/1pix_999999.jpg" width="100%" height="1"></td>

              <td width="139" align="right">Thema2<img src="gfx/1pix_999999.jpg" width="100%" height="1"></td>

            </tr>

            <tr> 

              <td width="135"> </td>

              <td><img src="gfx/1pix_999999.jpg" width="1" height="100%"></td>

              <td width="90"> </td>

              <td> </td>

              <td width="139"> </td>

            </tr>

            <tr> 

              <td width="135" height="20">Thema4<img src="gfx/1pix_999999.jpg" width="100%" height="1"></td>

              <td><img src="gfx/1pix_999999.jpg" width="1" height="100%"></td>

              <td width="90"> </td>

              <td> </td>

              <td width="139"> </td>

            </tr>

          </table>

        [/PHP]

@Layer hier ein beisiel:

[PHP]<div id="Layer1" style="position:absolute; left:398px; top:196px; width:247px; height:217px; z-index:1">bilder,

nunja - oder du machst ein bild und legst "hotspots" drüber...

 <div align="center"> <img src="gfx/logo_bearb_kl.jpg" width="128" height="228" usemap="#Map" border="0"><map name="Map"><area shape="rect" coords="8,85,49,114" href="deranderelink.htm"><area shape="rect" coords="15,165,115,209" href="derlink.htm"></map></div>

[ristic]

Servus...

also... Layer find ich ehrlich gesagt nicht so lecker...

schau dir mal von der Site den Quellcode an...!!! Hilft dir vielleicht weiter...

http://www.mhm.at/deutsch/produkte/sp3000a/sp3000a.html

Is ne Tabelle... und mit dem gibts am wenigsten Probleme...

greetz dan

[Ranger81]

ich würde an deiner Stelle die Möglichkeit mit Hotpots bevorzugen, da es scneller und einfach zu lösen ist.

[Technician]

Original geschrieben von Ranger81

ich würde an deiner Stelle die Möglichkeit mit Hotpots bevorzugen, da es scneller und einfach zu lösen ist.

wär eigentlich ne gute Idee!

Wie mach ich das dann aber in Kombination mit MouseOver-Effekten?

Schlecht, oder?!

Ich möchte nämlich, dass sich die Textgrafik verändert, wenn man auf diese zeigt...

Grüße,

Technician

[MiH]

Original geschrieben von ristic

also... Layer find ich ehrlich gesagt nicht so lecker...

hm xHTML und css gehen aber genau in diese richtung.

mit layern kann man auf einfache weise genau die gleichen effekte erzielen wie mit tabellen, man muss eben nur wissen wie aber wenn man sich in css auskennt ist das dann kein problem mehr. vorzugsweise nehme ich lieber div als table. da ich so keine komplexe verschachtelung habe.

hab mir eben mal die beispielseite angesehen.

also wenn div verwendet wurden wäre, hätte man das gleiche bild in mit rund 10 div erledigen können.

der source wäre besser lesbar und das aussehen wär getrennt vom content in einer css datei gelandet.