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

Horizontal Scroll

J

Johannes11

Neues Mitglied
Hallo zusammen, ich habe ein kleines Problem und hoffe mir kann da jemand bei weiterhelfen. Ich habe eine Seite mit mehreren Bildern die nebeneinander stehen und per Menünavigation jeweils angescrollt werden können. Das Menü ist fixed und die Bilder scrollen dahinter durch. Das klappt alles auch soweit, aber ich möchte, dass die Bilder an einer bestimmten Stelle (kurz vor dem Menü) stehenbleiben. Im Moment fahren sie immer an den Browserfensterrand. Ich hoffe das ich es halbwegs deutlich erklärt habe. Eigentlich wollte ich gerade noch Screenshots anhänge aber es wird immer nur eine Fehlermeldung angezeigt und es lassen sich keine Bilder anhängen. Die Scrollfunktion hab ich mit jquery gemacht. Falls ich noch Code posten soll, bitte einfach Bescheid sagen ..

Schöne Grüße

Johannes
 
Natürlich braucht man dafür den aktuellen Quellcode von dir :) Ideal wäre sogar ein Link zur Seite.
 
Hallo, hier der Code. Soll ich den CSS auch posten?
Vielen Dank schonmal und Grüße

HTML: 
<head>                    
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/overlib.js" type="text/javascript"></script>    
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>        
<script src="js/jquery.localscroll-min.js" type="text/javascript"></script>        
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>                
<script type="text/javascript">        
$(document).ready(function () {            
$.localScroll.defaults.axis = 'x';            
$.localScroll();        
});        
</script>
</head>
<body>
       <div id="content">                          
<span class="works">        
<div style="visibility: visible; opacity: 1;" >            
<a name="bild1" rel="click = display project"><img src="img/bild1.jpg"></a>            
</div>    
</span>    
         
<span class="works">        
<div style="visibility: visible; opacity: 1;" >            
<a name="bild2" rel="click = display project"><img src="img/bild2.jpg"></a>            
</div>    
</span>                

<span class="works">        
<div style="visibility: visible; opacity: 1;" >            
<a name="bild3" rel="click = display project"><img src="img/bild3.jpg"></a>            
</div>    
</span>                
<span class="works">        
<div style="visibility: visible; opacity: 1;" >            
<a name="bild4" rel="click = display project"><img src="img/bild4.jpg"></a>            
</div>        
</span>             
</div>        
<div id="main_nav">        
<ul>        
<li><a href="#bild1">bild1</a></li>        
<li><a href="#bild2">bild2</a></li>        
<li><a href="#bild3">bild3</a></li>        
<li><a href="#bild4">bild4</a></li>        
</ul>    
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Dein HTML-Code ist schonmal fehlerhaft. Innerhalb von <span> dürfen keine Blockelemente wie <div> vorkommen. Außerdem fehlt der Doctype, der wichtig ist für eine korrekte Darstellung.

Der CSS-Code wäre auch noch interessant. Aber wie gesagt wäre es besser einen Link zur Seite zu haben damit man es sich direkt anschauen kann. So wird das hier zu einer Trockenübung die niemandem wirklich hilft.
 
Danke erstmal für die Anmerkung. Sollte ich dann am besten div class daraus machen? Die Seite ist noch nicht online bzw ich teste hier immer nur lokal

Hier ist nochmal der Html Code mit Doctype und darunter dann der CSS

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/overlib.js" type="text/javascript"></script>    
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>        
<script src="js/jquery.localscroll-min.js" type="text/javascript"></script>        
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>                
<script type="text/javascript">        
$(document).ready(function () {            
$.localScroll.defaults.axis = 'x';            
$.localScroll();        
});        
</script>
</head>
<body><div id="content">                          
<div class="works">        
<div style="visibility: visible; opacity: 1;" >            
<a name="bild1" rel="click = display project"><img src="img/bild1.jpg"></a>            
</div>    
</div>    
<div class="works">        
<div style="visibility: visible; opacity: 1;" >            
<a name="bild2" rel="click = display project"><img src="img/bild2.jpg"></a>            
</div>    
</div>                
<div class="works">        
<div style="visibility: visible; opacity: 1;" >            
<a name="bild3" rel="click = display project"><img src="img/bild3.jpg"></a>            
</div>    
</div>                
<div class="works">        
<div style="visibility: visible; opacity: 1;" >            
<a name="bild4" rel="click = display project"><img src="img/bild4.jpg"></a>            
</div>        
</div>             
</div>        

<div id="main_nav">        
<ul>        
<li><a href="#bild1">bild1</a></li>        
<li><a href="#bild2">bild2</a></li>        
<li><a href="#bild3">bild3</a></li>        
<li><a href="#bild4">bild4</a></li>        
</ul>    
</div>
</body> 

</html>

Die Breite vom Body und dem Content Div ist noch nicht final und ich habe sie erstmal hochgemacht, damit alle Bilder reinpassen

Code: 
@charset "UTF-8";

body {
margin:0;
padding:0;
line-height: 18px;
width:8000px;
}

#contact a {
    font-size:11px;
    text-decoration:none;
    color:#3e3d40;
}

#content{
width:7500px;
float:right;
padding-top:100px;
}

#content h1, #content h2, #content p {  
padding-right:20px;    
}

#content img {
float:left;
margin: 0 20px 15px 0;
}


.works img {
float:left;
margin: 0 20px 15px 0;
}


.works {
float:left;
margin: 0 20px 15px 100px;
}

#main_nav{
font-family: 'Lora', serif;
float:left;
width:220px;
height:150px;
padding: 0 0 80px 40px;
margin-top:250px;
position:fixed;
}

#main_nav li {                
padding: 0 20px 0 20px;
}

ul{
list-style-type: none;
padding: 0;
margin: 0;    
}

li a {
font-family: 'Lora', serif;
color:#000;
font-size: 11px;
line-height:16px;
text-decoration:none;
}

li a:hover {
text-decoration:none;    
}

VG
 
Ich würde sonst auch gerne Screenshots hochladen um die Frage zu verdeutlichen. Aber jedes mal wenn ich versuche eine Grafik anzuhängen und hochzuladen, wird nur ein rotes Ausrufezeichen gezeigt. Weiss vielleicht jemand woran das liegt bzw. hat selber das gleiche Problem?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben