nicht angemeldet
Positionierung von divs
Hallo
Bin gerade an einem neuen Design. Hab dabei folgendes Problem. Aussehen soll das ganze nachher so:
<img src="http://www.tsv-warthausen.de/_aktive/_intern/vorschau.jpg" border="0" alt="">
Also das ganze ist mit relativ positionierten div's erstellt worden. Dadurch konnte ich die Grafik relativ groß zum Browserfenster machen. Das Problem ist, wenn ich nun die Links oben einfüge, dann zerreist es mir den rechten Teil der Grafik. Habe float:left bei den Grafiken benutzt.
Kann mir jemand sagen, wie ich den Zwischenraum relativ halten kann und die Links (übrigens in einer Tabelle eingebettet und als div positioniert) dort platzieren kann, wo sie hinsollen?? Gibt es eine Anweisung, mit der ich ein div praktisch nicht beachten lassen kann. Also dass mein div1 dasteht, mein div2 die Links beinhalten und sich direkt an div1 anschließt, und dann div3 von div2 was den Zeilenumbruch, Textumfluss... angeht, sozusagen nichts weiß und sich an div1 relativ positioniert? (Ich hoffe, das war irgendwie verständlich)...
Danke für eure Hilfe
Gruss OLLI
--
Zwei Dinge sind unendlich, das Universum und die menschliche Dummheit, aber bei dem Universum bin ich mir noch nicht ganz sicher.
Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
[Albert Einstein]
Zwei Dinge sind unendlich, das Universum und die menschliche Dummheit, aber bei dem Universum bin ich mir noch nicht ganz sicher.
Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
[Albert Einstein]
-
Hallo Olli,
wenn Du schon so eine _komplexe_ Grafik erstellst, warum schreibst Du die Links nicht gleich mit in die Grafik rein und benutzt dann eine Imagemap, siehe
http://selfhtml.teamone.de/html/grafiken/verweis_sensitive.htm
dann hast Du auch keine Probleme mit verschiedenen Browsern...
CU Christoph
-
Hi Christoph
wenn Du schon so eine _komplexe_ Grafik erstellst, warum schreibst Du die Links nicht gleich mit in die Grafik rein und benutzt dann eine Imagemap, siehe
Weil dann meine Grafik fest wäre. Sie soll sich aber an die Browserbreite anpassen. Im Moment "dehnt" sie sich mit Änderung der Fensterbreite mit. Ausserdem sind Image-Links nicht so mein Stil. Ich steh mehr auf Text-Links. Sind auch m.W. besser bei Suchmaschinen.
Gruss OLLI
--
Zwei Dinge sind unendlich, das Universum und die menschliche Dummheit, aber bei dem Universum bin ich mir noch nicht ganz sicher.
Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
[Albert Einstein]-
Hallo Olli,
also gut, keine Imagemaps. Bin davon ausgegangen, daß Du 2 Bilder hast, "links.jpg" und "rechts.jpg". Ggf. die Größen in den img-Tgas an Deine Bildgrößen anpassen.
Im IE6 wird alles richtig dargestellt, ein _dehnen_ ist möglich und es zereißt auch die Grafik nicht.
CU Christoph
Hier der Code:
<html>
<head>
<title>Title</title>
<style type="text/css">
body{background-color:#ffffff;color:#000000;font-family:arial;}
div{font-size:14px;}
span{font-size:14px;}
a:link{color:black;text-decoration:none;}
a:visited{color:black;text-decoration:none;}
a:active{color:black;text-decoration:none;}
</style>
</head>
<body><table border=0 width=100%>
<tr>
<td align="left" valign="top" width="50%">
<img src="links.jpg" width="290" height="118" style="position:relative;left:0;top:0;">
<div style="position:relative;left:195;top:-90;"><a href="#station">Stadionblatt</a></div>
<div style="position:relative;left:175;top:-84;"><a href="#fan">Fanseite</a></div>
<div style="position:relative;left:155;top:-78;"><a href="#chronik">Chronik</a></div>
</td>
<td align="right" valign="top" width="50%">
<span><a href="#verein">Verein</a></span>
<span><a href="#saison">Saison</a></span>
<span><a href="#sonstiges">Sonstiges</a></span><br>
<img src="rechts.jpg" width="176" height="105">
</td>
</tr>
<table></body>
</html>
-
-
-
Inzwischen habe ich das ganze neu angefangen und ein paar Änderungen vorgenommen im Code. Die Seite hab ich auch online gestellt...
http://www.tsv-warthausen.de/_aktive/_intern/nav.html
Also folgendes: Meiner bescheidenen Meinung nach sind die div's alle korrekt und auch richtig verschachtelt. Nur versteht das anscheinend kein Browser (Mozilla 1.3(?), Opera 5.12 und 7, Netscape 7). Wobei es der Opera 5.12 am Besten wiedergibt.
Liegt es an meinem schlechten Code oder gehört das in die Kategorie "Was die Browser unterscheidet"? Wie es aussehen soll, sieht man im ersten Posting dieses Threads...Der Code hier nochmal:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#navigation {position:relative;border:1px solid #000000;}#nav1 {position:relative;top:90px;float:left;}
#nav2 {position:relative;top:90px;width:12%;float:left;}
#nav3 {position:relative;top:26px;float:left;}
#nav4 {position:relative;top:26px;width:7%;float:left;}
#nav5 {position:relative;top:26px;float:left;}.nav1 {width:15px;height:13px;}
.nav2 {width:100%;height:13px;}
.nav3 {width:50px;height:116px;}
.nav4_1 {width:17px;height:82px;}
.nav4_2 {width:17px;height:13px;}
.nav5_1 {width:17px;height:57px;}a {text-decoration:none;text-size:14px;color:#666666;font-family:Verdana;}
</style>
</head><body>
<div id="navigation">
<div id="nav1"><img class="nav1" src="images/nav_xx_01.jpg"></div>
<div id="nav2"><img class="nav2" src="images/nav_xx_02.jpg"></div>
<div id="nav3"><img class="nav3" src="images/nav_or_01.jpg"></div><div id="nav4">
<div style="position:absolute;top:0px;left:0px;"><img class="nav4_1" src="images/nav_or_02.jpg"></div>
<div style="position:absolute;top:84px;left:0px;"><a href="#">Blindtext</a></div>
<div style="position:absolute;top:103px;left:0px;"><img class="nav4_2" src="images/nav_or_le.jpg"></div>
</div><div id="nav5">
<div style="position:absolute;top:0px;"><img class="nav5_1" src="images/nav_or_03.jpg"></div>
<div style="position:absolute;top:60px;"><a href="#">Blindtext</a></div>
<div style="position:absolute;top:103px;"><img class="nav4_2" src="images/nav_or_le.jpg"></div>
</div></div>
</body>
</html>Gruss OLLI
--
Zwei Dinge sind unendlich, das Universum und die menschliche Dummheit, aber bei dem Universum bin ich mir noch nicht ganz sicher.
Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
[Albert Einstein]