| Autor |
Nachricht |
rexen
Threadersteller
Dabei seit: 18.04.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 07.05.2012 16:07
Titel jquery plugin und ankerpunkte |
  |
|
Ich bin gerade dabei eine seite zu erstellen
die mit jquery plugin localscroll-min.js und scrollTo-min.js funktioniert.
Horizontal läuft die Seite mit ankerpunkten.
Die Divs sind nebeneinander gefloatet.
Mein Problem ist, ich hätte es gern wie auf dieser homepage
http://studio8169.com/?page_id=11
das meine div mittig in der Seite positionert werden.
mein Ankerpunkt liegt im Div links oben und dadurch fängt mein div links aussen am browser rand an, sobald ich verlinkt werde.
Löse ich das im css oder mit einem javascript Befehl??Oder wie muss ich den ankerpunkt setzten?
|
|
| |
  |
 |
snuwie
Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Mo 07.05.2012 17:34
Titel
|
|
|
Code? Link zum Problem?
Ohne wird das lustiges Rätselraten ... :-/ 
|
|
| |
|
|
|
Anzeige
|
|
|
rexen
Threadersteller
Dabei seit: 18.04.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 08.05.2012 08:42
Titel
|
|
|
Diesen code habe ich verwendet von dieser Seite.
------------------------------------------------------------------------------------------------------------
http://www.thewebsqueeze.com/web-design-tutorials/create-a-horizontal-scrolling-website.html
--------------------------------------------------------
<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>
<style type="text/css">
<!--
body {
background-image:url(pics/beige093.gif);
text-align:left;
color:#666;
font-size:14px;
font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;
}
a {
color: black;
padding: 0 5px;
text-decoration: none;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 16px;
letter-spacing: -1px;
}
a:visited {
color: #aaaaaa;
padding: 0 5px;
text-decoration: none;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 16px;
letter-spacing: -1px;
}
a:hover {
color: #000;
padding: 0 5px;
text-decoration: none;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 16px;
letter-spacing: -1px;
}
h1 {
width: 600px;
border: none;
padding: 35px 0 0 0;
}
h2 {
font-size: 24px;
font-family: verdana, helvetica, arial, sans-serif;
color:black;
font-weight: 400;
padding: 0 0 10px;
}
h3 {
font-size:14px;
font-family:verdana, helvetica, arial, sans-serif;
letter-spacing:-1px;
color:black;
font-weight: 700;
text-transform:uppercase;
margin:0;
padding:8px 0 8px 0;
}
p {
color:black;
font-size: 20px;
line-height: 38px;
font-family: 'Trebuchet MS', verdana, helvetica, sans-serif;
padding: 0 0 10px;
margin: 20px 0 10px 0;
}
img {
border:none;
}
#header {
width: 360px;
float: left;
margin: 0 15px 0 0;
padding: 0;
}
#menu {
background: #C90;
position: fixed;
width:700px;
top: 40px;
left:200px;
clear: both;
float: left;
font-family: helvetica, sans-serif;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
padding: 18px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}
#menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#menu ul li{
list-style-type: none;
color: #777;
display: inline;
margin: 0;
padding: 0 10px 0 10px;
}
#menu ul li a{
text-decoration: none;
list-style-type: none;
color: #777;
display: inline;
margin: 0;
padding: 0;
}
#menu ul li a:hover{
text-decoration: none;
list-style-type: none;
color: #fff;
display: inline;
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 120px; left: 0px;
width: 9000px;
margin: 0;
padding: 0;
background-color:white;
overflow:hidden;
margin: 0 auto;
color: black;
height:500px;
filter: alpha(opacity=75);
opacity: .75;}
.box {
background: white;
border: 3px #222222;
width:700px;
float: left;
line-height: 22px;
margin: 30px;
padding: 5px 30px 30px 30px;
}
.box3 {
background: white;
border: 3px #222222;
width:700px;
float: left;
line-height: 22px;
margin: 30px;
}
.box p {
color:#aaaaaa;
font-size: 16px;
line-height:24px;
padding: 0 0 10px;
margin: 20px 0 10px 0;
}
-->
</style>
</head>
<body>
<a name="home"></a>
<div id="menu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#box1">Box 1</a></li>
<li><a href="#box2">Box 2</a></li>
<li><a href="#box3">Box 3</a></li>
<li><a href="#box4">Box 4</a></li>
</ul>
</div>
<div id="container">
<div id="box1" class="box">
<h2><a name="box1">First Box</a></h2>
<p>test.</p>
<p><a href="#box2">NEXT</a></p>
</div>
<div id="box2" class="box">
<h2><a name="box2">Second Box</a></h2>
<p>test.</p>
<p><a href="#box1">BACK</a>
<a href="#box3">NEXT</a></p>
</div>
<div id="box3" class="box3" >
<a name="box3"></a>
<img src="pics/_DSC9291.jpg" hspace="0" vspace="0"></div>
<div id="box4" class="box">
<p>test.</p>
</div>
<div class="box"></div>
</div>
</body>
</html>
|
|
| |
|
|
Account gelöscht
Ort: -
Alter: -
|
Verfasst Di 08.05.2012 10:02
Titel
|
|
|
|
guck dir dafür mal carouFredsel an (vorallem die Demos), da solltest du alles finden!
|
|
| |
|
|
rexen
Threadersteller
Dabei seit: 18.04.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 08.05.2012 10:48
Titel
|
|
|
ich hätte gerne den ankerpunkt mittig im div.
Sodass das Div sobald ich den button drücke in der mitte des browser erscheint.
und nicht wie jetzt links am browserrand.
Jetzt wird der ankerpunkt auf die linke seite des divs angewendet.
weiß jemand ob ich sowas im css ändern muss oder mit jquery ???
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
jQuery Plugin - Slider als Input wie in jQuery UI
jQuery - Plugin Flip
jquery page switch plugin
[JQuery] Checken ob ein Plugin aktiv ist?
Content-Scoller als jQuery-Plugin gesucht
"Shadowbox" jquery plugin
|
|
Willkommen auf dem Portal für Mediengestalter
