• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ankerpunkte eine position zuweisen.

V

vanelle

Neues Mitglied
hallo liebe leute,
ich muss gleich sagen ich bin blutige anfängerin, also wenn ich mich etwas unverständlich ausdrücke möge man es mir verzeihen und bitte noch mal nachfragen.

ich habe folgendes problem:
ich habe eine seite gebaut die horizontal scrollbar ist. links habe ich eine fixierte navigation.
über ankerpunkte soll man nun bei klick auf das thema zu der entsprechenden position springen.
das funktioniert auch soweit, aber leider nur so, das der ankerpunkt gerade im rechten rand sichtbar wird, er müsste jedoch ca. 300px von linken browserseite entfernt sein.
die ankerpunkte anders zu positionieren bringt natürlich nicht, da ich dann je nach browserfenstergröße ganz woanders lande.

ist es also möglich den ankerpunkt mit was auch immer zu sagen, das er im browser eine bestimmte position einnimmt und nicht immer rechts an der seite klebt.

ich wusste leider nicht in welchen bereich ich die frage posten soll, da ich nicht weis ob es sich mit css, java … lösen lässt


also freue mich über hilfe
 
Werbung:
Ich nehme stark an, dass Du bereits CSS verwendest um deine Webseite zu gestalten. Um deine Frage zu beantworten wäre es gut, wenn Du noch den Quellcode oder besser einen Link zu der betroffenen Seite liefern kannst.
 
oh das wird warscheinlich peinlich…
hochgeladen ist die seite nicht, ich werd mal den quellcode einfach hier reinkopieren, denke das die fehlenden bilder nicht wirklich eine rolle spielen. css ist auch noch direkt mit drin:

<html>
<head>
<title>2011_08_entwurf3</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

<style type="text/css">
img {
margin-right:20px;
margin-top:-5px;
z-index:1;
}
body
{
font-family: 'Open Sans', sans-serif;
font-size:12px;
text-align: left;
}

h1{ font-family: 'Open Sans', sans-serif;
font-size:14px
}

li {
list-style: none;
margin-left:-20px;
}



#menue {
position:fixed;
left:0px;
top:-30px;
width:252px;
height:600px;
border:none;
z-index:99;
}

#breite {
position:absolute;
left:254px;
top:0px;
width:6500px;
height:600px;
border:none;
margin:auto;

}


#typo {
position:absolute;
left:255px;
top:45px;
width:158px;
height:15px;
z-index:2;
}
#popup {
position:absolute;
left:2534px;
top:48px;
width:296px;
height:24px;
z-index:2;
}
#textil {
position:absolute;
left:1241px;
top:46px;
width:108px;
height:18px;
z-index:12;
}
#clara {
position:absolute;
left:4326px;
top:45px;
width:182px;
height:38px;
z-index:2;
}
#palais {
position:absolute;
left:4925px;
top:49px;
width:222px;
height:30px;
z-index:2;
}

#apDiv11 {
position:absolute;
left:67px;
top:116px;
width:153px;
height:165px;
z-index:111;
}


</style>
</head>
<body style="">

<div id="typo">analoge typografie</div>
<div id="popup">pop-up</div>
<div id="textil">gegenfeuer textil </div>
<div id="clara">clara von simson gesellschaft</div>
<div id="menue">
<div id="apDiv11">


<h1>lea</h1>
<h1>grafikdesign</h1>
<ul>
<li><a href="#analogetypo">analoge typografie</a></li>
<li><a href="#pop-up">pop up</a></li>
<li><a href="#gegenfeuer">gegenfeuer textil</a></li>
<li><a href="#simson">clara von simson</a></li>
<li><a href="#theater">theater im palais</a></li>
</ul>
<h1>photografie</h1>


</div>
<img src="grafik/Pics/menue.png" width="300" height="650">
</div>



<div id="breite">

<a name="analogetypo"></a><img src="grafik/images/time.jpg" width="537" height="379" alt="time"><img src="grafik/images/type.jpg" width="378" height="499" alt="typo analog"><a name="gegenfeuer"></a>
<img src="grafik/images/textil.jpg" width="810" height="561" alt="textil">
<img src="grafik/images/textil2.jpg" width="456" height="460" alt="textil2"><a name="pop-up"></a> <img src="grafik/images/up1.jpg" width="374" height="238" alt="popup1">
<img src="grafik/images/up2.jpg" width="533" height="621" alt="popup2">
<img src="grafik/images/up3.jpg" width="377" height="535" alt="popup3">
<img src="grafik/images/up4.jpg" width="375" height="616" alt="popup4"><a name="simson"></a>
<img src="grafik/images/clara1.jpg" width="297" height="419">
<img src="grafik/images/clara2.jpg" width="297" height="418" alt="clara von simson"><a name="theater"></a>
<img src="grafik/images/palais1.jpg" width="455" height="328" alt="palais1">
<img src="grafik/images/palais2.jpg" width="449" height="329" alt="palais2">
<img src="grafik/images/palais3.jpg" width="379" height="528" alt="palais3">
<img src="grafik/images/palais4.jpg" width="375" height="527" alt="palais4">
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Das sieht schon besser aus als manches was man sonst so zu sehen bekommt :)

Aber (sorry, muss sein) es gibt auch noch ein paar Schwachstellen:
Wie sieht denn der Doctype aus den Du verwendest?
Wieso ist alles absolut positioniert? Sowas sollte man vermeiden, weil es gerade bei ungeübten zu Fehldarstellungen führen kann.
 
hehe, da hast du mich ja auf dem richtigen fuß erwischt, bin natürlich dankbar für konstruktive kritik.
wie mein doctype aussieht kann ich dir leider nicht sagen, da ich vergessen habe einen anzulegen. darum werde ich mich dann wohl mal kümmer müssen.
und die absolute positionierung erschien mir am einfachsten, bzw weis ich auch nicht wie ich es besser machen könnte.

und hast du noch eine idee zu meiner eigentlichen frage? das wäre wirklich super?

aber vielen dank schon mal für die hinweise.
 
Nein, deine Frage ließe sich nur mit dem kompletten Quellcode inkl. Doctype evtl. erklären. Idealer wäre ein Link zur Seite selbst.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben