nicht angemeldet
problem mit div posit. bei auflösungsänderung
Hallo!
Ich hab mich schon wahnsinnig gegooglt und auch auf HTML/CSS Seiten nach der Lösung gesucht. Wer weiss vielleicht geh ich ja die Sache falsch an. Auf alle Fälle komm ich ohne Hilfe nicht mehr zurecht und hoffe das mir hier wer weiterhelfen kann!
Ich hab mir einen Header designt aus dem ich 5 einzelle Teile 50x50 ausgeschnitten hab, um diese im Headerbackground, als Buttons zu verwenden.
Ich habe jetzt nun nur keine Ahnung wie ich die Buttons so positionieren kann das sie nicht bei der Änderung der Auflösung verschoben werden sondern immer an der selben Position bleiben.
(ich positioniere mit 1024x768)
Deswegen arbeite ich leider generell noch immer mit Tabellen. Doch hier gibts keine Möglichkeit mit die Tabellen so auszurichten um die Buttons
korrekt übers header-img zu setzten das es was gleich schaut. Also hab ich mich bis jetzt dusslig probiert auch wenns schwachsinn war/ist.
also hier ist mal mein code hoffe irgendwer kann helfen!
mfg Robert
<style type="text/css">
#box1 { position:relative; top:-130px; left:134px;}
#box2 { position:relative; top:-130px; left:45px;}
#box3 { position:relative; top:-175px; left:50px;}
#box4 { position:relative; top:-158px; left:-20px;}
#box5 { position:relative; top:-165px; left:-18px;}
#box6 { position:relative; top:-130px; left:-35px;}
</style>
</head>
<table align="center">
<table>
<tr>
<td>
<img src="Header/head/hauptleiste.gif" border="0">
</td>
</tr>
</table>
<div id="box1"> <img src="Button/Hauptleiste/button1.gif" width="50" height="50" border="0"> </div>
<div id="box2"><a href="Infos.html"> <img src="Button/Hauptleiste/button2.gif" width="50" height="50" border="0"></a></div>
<div id="box3"><a href="stadt.html"> <img src="Button/Hauptleiste/button3.gif" width="50" height="50" border="0"></a></div>
<div id="box4"><a href="Sehenswertes.html"> <img src="Button/Hauptleiste/button7.gif" width="50" height="50" border="0"></a></div>
<div id="box5"><a href="Quiz.html"> <img src="Button/Hauptleiste/button5.gif" width="50" height="50" border="0"></a></div>
<div id="box6"><a href="Wir.html"> <img src="Button/Hauptleiste/button6.gif" width="50" height="50" border="0"></a></div>
oder
<style type="text/css">
body {
margin: 0;
padding: 0;
background-image: url(Header/Hauptleiste.gif);
background-repeat: no-repeat;
background-position: 50% 10px;
}
#box1 { position:absolute; left:290px; top:60px; width:150px; height:150px;}
#box2 { position:absolute; left:45px; top:-130px; width:100px; height:100px;}
</style>
</head>
<body bgcolor="4A8FD4">
<div id="box1"><a href="Neu.html"><img src="Button/button1.gif" width="50" height="50" border="0"></a></div>
<div id="box2"><a href="Infos.html"><img src="Button/button2.gif" width="50" height="50" border="0"></a></div>
-
Hi,
(ich positioniere mit 1024x768)
Nö. Du positionierst relative, was hier unpassend ist.
Deswegen arbeite ich leider generell noch immer mit Tabellen. Doch hier gibts keine Möglichkeit mit die Tabellen so auszurichten um die Buttons
korrekt übers header-img zu setzten das es was gleich schaut.Natürlich doch geht das ohne Tabellen.
<table align="center">
<table>
<tr>
<td>
<img src="Header/head/hauptleiste.gif" border="0">
</td>
</tr>
</table>
<div id="box1"><img src="Button/Hauptleiste/button1.gif" width="50" height="50" border="0"></div>...
Was soll das sein?
table als Kind von table? Und dann auch noch völlig überflüssig, da nur eine einzige Zelle enthalten ist. Danach dann divs, die ebenfalls überflüsig sind.Du möchtest vermutlich etwas in dieser Art erzeugen:
<div id="header">
<a id="Link1"><img /></a>
...
</div>wobei du #header eine passende Breite und ggfls. Höhe sowie das Hintergrundbild zuweist, mit margin:auto zentrierst und relative (ohne Koordinatenangaben) positionierst.
Deine Links positionierst Du dann einfach nur absolute.freundliche Grüße
Ingo