Verspring probleem (jQuery)

Status
Niet open voor verdere reacties.
M

MitchellBouwman

Gebruiker
Lid geworden
20 jan 2012
Berichten
42
Hallo,

Ik heb een probleempje, ik heb een script die filtert catagorieén alleen de eerste 3 verspringen automatische.
Waar kan dit aan liggen?
Alles staat nu onder ''Alles'' en ''Overige''.

http://www.mitchellbouwman.com/portfolio/clean.htm
http://www.mitchellbouwman.com/portfolio/

HTML: 
<body>

<ul id="filter">
	<li class="current"><a id="all">Alles</a></li>
	<li><a id="design">Design</a></li>
	<li><a id="websites">Websites</a></li>
	<li><a id="flyers-posters">Flyers Posters</a></li>
	<li><a id="overige">Overige</a></li>
</ul>
<pre>
      
<body>
  <div id="container">    
  <!-- Als ik een product in 2 catagorieén wil dan moet het zijn 'design flyers-posters' met een spatie ertussen -->
    <ul id="portfolio">
      <li class="alles"><a href="#"><img src="images/a-list-apart.png" alt="" height="115" width="200" />A List Apart</a></li>
      <li class="alles"><a href="#"><img src="images/apple.png" alt="" height="115" width="200" />Apple</a></li>
      <li class="alles"><a href="#"><img src="images/cnn.png" alt="" height="115" width="200" />CNN</a></li>
      <li class="alles"><a href="#"><img src="images/facebook.png" alt="" height="115" width="200" />Facebook</a></li>
      <li class="alles"><a href="#"><img src="images/google.png" alt="" height="115" width="200" />Google</a></li>
      <li class="alles overige"><a href="#"><img src="images/facebook.png" alt="" height="115" width="200" />Facebook</a></li>
      <li class="alles overige"><a href="#"><img src="images/google.png" alt="" height="115" width="200" />Google</a></li>
      <li class="alles overige"><a href="#"><img src="images/netflix.png" alt="" height="115" width="200" />Netflix</a></li>
      <li class="alles overige"><a href="#"><img src="images/nettuts.png" alt="" height="115" width="200" />NETTUTS</a></li>
      <li class="alles overige"><a href="#"><img src="images/twitter.png" alt="" height="115" width="200" />Twitter</a></li>
      <li class="overige"><a href="#"><img src="images/white-house.png" alt="" height="115" width="200" />White House</a></li>
      <li class="overige"><a href="#"><img src="images/youtube.png" alt="" height="115" width="200" />YouTube</a></li>
      </ul>
  </div>
</body>
</html>
 
Laatst bewerkt:
Nee is me niet duidelijk want volgens mij kan je dit ook gewoon met HTML,

Gewoon plaatjes met link in een div'je zetten. Toch?
 
Maar dit is een goed systeem om te filteren van categorie.

Maar goed daar gaat dit topic niet over dacht ik?
 
Zo kan het toch ook?

CSS:
Code: 
#wrapper{
	width: 640px;
}

#border{
	width: 200px;
	border: solid 1px #666;
	padding: 5px;
	float: left;
}

HTML:
HTML: 
<div id="wrapper">
	<div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div>
    <div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div>
    <div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div>
	<div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div>
    <div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div>
    <div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div>
    <div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div>
    <div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div>
    <div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div>
	<div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div>
    <div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div>
    <div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div>
</div>
 
sorry voor net..

was stom net... Moet een class voor die aangegeven is in de jquery.
nu moet het lukken. je moet hem alleen nog restylen!
maar het werkt!/* Portfolio Filter Stylesheet */

HTML: 
html, body, { margin: 0; padding: 0; }

/*****Basic Definitions*****/
body { color: #333; font: 12px/18px Verdana, Helvetica, Arial, sans-serif; }
h1 { font-size: 1.667em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.333em; }
h4 { font-size: 1.167em; }
h5, h6 { font-size: 1em; }

a { color: #333; }
a:visited { }
a:hover { text-decoration: none; }

/*****Custom Classes*****/
.clearing { clear: both; }
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }

/*****Basic Layout*****/
#filter {
	width:400px;
	height:60px;
}

ul#filter { float: left; font-size: 16px; list-style: none; margin-left: 0; width: 100%; }
ul#filter li { 
	border-right: 2px solid #f40a0a;
	float: left;
	line-height: 16px;
	margin-right: 10px;
	padding-right: 10px;
}
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #999; text-decoration: none; }
ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }
ul#filter li.current a { color: #333; font-weight: bold; }

ul#portfolio {list-style: none;}
ul#portfolio li {margin: 20px; float: left; width: 202px;}

#wrapper{
	width: 800px;
}

#border{
	width: 200px;
	border: solid 1px #666;
	padding: 10px;
}

HTML: 
<ul id="filter">
	<li class="current"><a id="all">Alles</a></li>
	<li><a id="design">Design</a></li>
	<li><a id="websites">Websites</a></li>
	<li><a id="flyers-posters">Flyers Posters</a></li>
	<li><a id="overige">Overige</a></li>
</ul>

 <div id="wrapper">
 	<ul id="portfolio">
    <li class="alles"><div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div></li>
    <li class="alles"><div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div></li>
    <li class="alles"><div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div></li>
    <li class="alles"><div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div></li>
    <li class="alles"><div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div></li>
    <li class="alles overige"><div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div></li>
    <li class="alles overige"><div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div></li>
    <li class="alles overige"><div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div></li>
    <li class="alles overige"><div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div></li>
    <li class="alles overige"><div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div></li>
    <li class="alles overige"><div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div></li>
    <li class="alles overige"><div id="border"><a href="#"><img src="images/afbeelding.png" height="115" width="200" /><br />Titel</a></div></li>
   </ul>
</div>
 
Ik snap niet dat je helemaal met een ander <div> systeem aan komt zetten, dit werkt prima alleen de eerste 3 verspringen.

Ik wil graag daar een oplossing voor en niet een heel nieuw script.
 
miss een paar kleine aanpassingen maar je kunt altijd in de broncode kijken!
 
Oke dat werkt wel aardig!
Alleen wil ik hem nog wat naar benede doe maar als ik dit doe:

Code: 
#wrapper{
[B]	top: 200px;[/B]
	width: 800px;
}

.. dan wil dat niet werken? De #wrapper is toch juist?

EDIT: Werkt wel met position absolute.
 
Laatst bewerkt:
je kan ook het "ul filter"(menu) tussen de wrapper tags zetten om het geheel te verplaatsen.
vervolgens maak je een margin-top op de wrapper
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan