* {quote:Op woensdag 5 september 2012 15:39 schreef Catch22- het volgende:
[..]
hohoho!
tegenwoordig heb je normalize.css
http://necolas.github.com/normalize.css/
En over JS; er zijn helaas maar weinig mensen die dat goed beheersen. Gelukkig heb ik mezelf daar wel aardig in gespecialiseerd.
Heel simpel gezegd, ik wil eerst weten of ik wat hiermee kan, voordat ik er zelf heel veel tijd in ga steken.quote:Op donderdag 6 september 2012 22:23 schreef KomtTijd... het volgende:
je wilt wát preciesAl die linkjes gaan naar tutorials. Waar is je eigen werk?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="main"> <ul class="tabContainer"> <!-- The jQuery generated tabs go here --> </ul> <div class="clear"></div> <div id="tabContent"> <div id="contentHolder"> <!-- The AJAX fetched content goes here --> </div> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | $(document).ready(function(){ /* This code is executed after the DOM has been completely loaded */ /* Defining an array with the tab text and AJAX pages: */ var Tabs = { 'Tab one' : 'pages/page1.html', 'Tab two' : 'pages/page2.html', 'Tab three' : 'pages/page3.html', 'Tab four' : 'pages/page4.html' } /* The available colors for the tabs: */ var colors = ['blue','green','red','orange']; /* The colors of the line above the tab when it is active: */ var topLineColor = { blue:'lightblue', green:'lightgreen', red:'red', orange:'orange' } /* Looping through the Tabs object: */ var z=0; $.each(Tabs,function(i,j){ /* Sequentially creating the tabs and assigning a color from the array: */ var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>'); /* Setting the page data for each hyperlink: */ tmp.find('a').data('page',j); /* Adding the tab to the UL container: */ $('ul.tabContainer').append(tmp); }) /* Caching the tabs into a variable for better performance: */ var the_tabs = $('.tab'); the_tabs.click(function(e){ /* "this" points to the clicked tab hyperlink: */ var element = $(this); /* If it is currently active, return false and exit: */ if(element.find('#overLine').length) return false; /* Detecting the color of the tab (it was added to the class attribute in the loop above): */ var bg = element.attr('class').replace('tab ',''); /* Removing the line: */ $('#overLine').remove(); /* Creating a new line with jQuery 1.4 by passing a second parameter: */ $('<div>',{ id:'overLine', css:{ display:'none', width:element.outerWidth()-2, background:topLineColor[bg] || 'white' }}).appendTo(element).fadeIn('slow'); /* Checking whether the AJAX fetched page has been cached: */ if(!element.data('cache')) { /* If no cache is present, show the gif preloader and run an AJAX request: */ $('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />'); $.get(element.data('page'),function(msg){ $('#contentHolder').html(msg); /* After page was received, add it to the cache for the current hyperlink: */ element.data('cache',msg); }); } else $('#contentHolder').html(element.data('cache')); e.preventDefault(); }) /* Emulating a click on the first tab so that the content area is not empty: */ the_tabs.eq(0).click(); }); |
1 | $("a.linkToFirstTab").click(function() { $("#tab-3").click(); }); |
Daar geef je het antwoord al..quote:
http://fixingthesejquery.com/quote:Op dinsdag 11 september 2012 09:39 schreef Catch22- het volgende:
http://jqfundamentals.com/
Must-read als je wat met jQuery wil gaan doen, of doet, maar er niets van snapt
Jezus wat een misselijkmakende usability-failurequote:Op dinsdag 11 september 2012 14:28 schreef Catch22- het volgende:
[..]
http://fixingthesejquery.com/
die ok trouwens
ligt eraan hoe je het wilt gebruiken. Als beide titels het zelfde niveau hebben moet je dezelfde tag gebruiken. Als de een een subkopje is van de ander, moet je een niveau lager (dus hogere index) gebruiken.quote:Op woensdag 12 september 2012 21:15 schreef Meteoric het volgende:
Ik weet nog heel weinig van scripten, ben echt net begonnen. Nu focus ik me op de semantiek van HTML dus wil graag alles netjes neerzetten zoals het hoort. Nou heb ik een hele suffe vraag, en ik heb al in een boek gekeken op op w3schools en nog wat sites maar ik kan het antwoord niet zo letterlijk vinden.
Mag je een h2 heading boven meerdere paragrafen gebruiken, of moet je dan perse een h3 gebruiken na een h2? Met andere woorden: is het toegestaan/netjes om dat te doen?
Tuurlijk niet, dat werkt alleen met muis. Met andere vormen van navigatie (toetsenbord, touch) heb je dan geen hover-state meer. Gewoon op de a:href dus.quote:
Sowieso line-height gebruiken, anders krijg je glitches met verschillende fontrenderings of ontbrekende fonts.quote:Op woensdag 19 september 2012 12:35 schreef Catch22- het volgende:
li:hover![]()
en dan de Li de volledige hoogte geven, de A centreren met een padding of een line-height(hack)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | .top-menu ul { height: inherit; margin-left: 8px; } .top-menu li { display: inline; list-style-type:none; padding: 10px 0 95px; -webkit-border-bottom-right-radius:.6em; -moz-border-bottom-right-radius:.6em; border-bottom-right-radius:.6em; } .top-menu li:hover { background-color: #fff; color: #223053; } .top-menu li a { font-weight: bold; font-size:15px; color: #fff; padding: 0 8px 95px; } .top-menu > li:first-child > a { border-left:none; } .top-menu li a:hover { color: #223053; } |
SPOILEROm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.Ik weet dat hij te breed is, maar dat is voor latere zorg.
Hmm ik zie eigenlijk niks vreemds in de scriptcode, heeft iemand enig idee waar het aan kan liggen dat hij het niet consequent doet.
1
2
3
4
5
6
7<object id="MediaPlayer" width="550" height="309" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"><param name="filename" value="http://livestreams.omroep.nl/npo/3fm_vsr-bb" />
<param name="Showcontrols" value="True" /><param name="autoStart" value="True" /><param name="url" value="http://livestreams.omroep.nl/npo/3fm_vsr-bb" />
<param name="showcontrols" value="True" /><param name="autostart" value="True" /><param name="url" value="http://livestreams.omroep.nl/npo/3fm_vsr-bb" />
<embed id="MediaPlayer" width="550" height="309" type="application/x-mplayer2" src="http://livestreams.omroep.nl/npo/3fm_vsr-bb" filename="http://livestreams.omroep.nl/npo/3fm_vsr-bb" Showcontrols="True" autoStart="True" url="http://livestreams.omroep.nl/npo/3fm_vsr-bb" showcontrols="True" autostart="True" /></object>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>Of saté?
1 2 3 | <div id="wrapper2" class="user1"><jdoc:include type="modules" name="user1" style="xhtml" /></div> <div id="wrapper2" class="user2"><jdoc:include type="modules" name="user2" style="xhtml" /></div> <div id="wrapper2" class="user3"><jdoc:include type="modules" name="user3" style="xhtml" /></div> |
1 | #wrapper2 {margin:0 auto; width:300px ; height:160px; margin-top: 3px; text-shadow: none; position: relative; background-image: url('http://www.heartofstone.co.uk/HOS/UL/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);padding: 4px;text-shadow: 0 1px 0 #FDFDFF;} |
1 2 3 | .user1 { text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 30px; float: left; width: 250px; margin: 10px;} .user2,{ text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 30px; float: center; width: 250px; margin: 10px;} .user3 { text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 30px; float: right; width: 250px; margin: 10px;} |
1 | <div id="wrapper2" class="user1"> |
Je kunt er <div class="wrapper2 user2"> van maken. Dan kun je user 2 nog apart opmaken voor stijlen die je bij de andere divs met wrapper2 niet wil. Bijvoorbeeld je middelste blok, met een margin left en right, om zo ruimte te creëren.quote:Op maandag 24 september 2012 10:56 schreef -J-D- het volgende:
Volgens mij begin ik het te snappen.
Heb van #wrapper2 nu .wrapper2 gemaakt en
[ code verwijderd ]
veranderd in [code]<div class="wrapper2">.
Heb ik dat zo goed begrepen?
De breedte klopt nog niet, maar misschien kan ik daar met wat gesleutel aan wat waarden verandering in brengen.
1 2 3 | <div class="wrapperuser1"><jdoc:include type="modules" name="user1" style="xhtml" /></div> <div class="wrapperuser2"><jdoc:include type="modules" name="user2" style="xhtml" /></div> <div class="wrapperuser3"><jdoc:include type="modules" name="user3" style="xhtml" /></div> |
1 2 3 | .wrapperuser1 {width:287px ; height:160px; margin-top: 3px; position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 10px; float: left;} .wrapperuser2 {margin:3px; width:287px ; height:160px; margin-top: 3px; position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 10px; float: left;} .wrapperuser3 {width:287px ; height:160px; margin-top: 3px; position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 10px; float: left;} |
1 2 3 | <div class="wrapper2 user1"></div> <div class="wrapper2 user2"></div> <div class="wrapper2 user3"></div> |
1 | .wrapper2 { width: 200px; height: 100px; } |
1 | .user2 { margin: 0px 20px 0px 20px; } |
Dat snap ik, maar na een paar uur puzzelen zie je soms de oorzaak niet.quote:Op maandag 24 september 2012 12:55 schreef Catch22- het volgende:
dat is nooit goed. Je moet altijd beredeneren waarom het mis gaat, anders schiet je er niets mee op.
1 2 3 | <div class="wrapperuser1"><jdoc:include type="modules" name="user1" style="xhtml" /></div> <div class="wrapperuser2"><jdoc:include type="modules" name="user2" style="xhtml" /></div> <div class="wrapperuser3"><jdoc:include type="modules" name="user3" style="xhtml" /></div> |
1 2 3 | .wrapperuser1 {width:315px; height:160px; margin-top: 3px; position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 3px; float: left;} .wrapperuser2 {margin:3px; width:314px ; height:160px; margin-top: 3px; position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 3px; float: left;} .wrapperuser3 {width:315px; height:160px; margin-top: 3px; position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 3px; float: left;} |
SPOILEROm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.Kan je hier wat mee? Ik hoop dat dit genoeg informatie is.I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.
Margin top hebben ze alledrie, om een buffer te vormen met het stuk erboven.quote:Op maandag 24 september 2012 13:49 schreef Catch22- het volgende:
Ja, maar hier kan ik niets mee. Wat staat er om heen, wat voor stijlen hebben die elementen, hoe groot is de parent?
- waarom heeft die middelste een margin:3px en margin-top:3px
- waarom hebben ze position:relative?
- waarom maak je classes aan als je daar ID's invult? Ik zou gewoon deze classnames door ID vervangen en een wrapper class aanmaken met de gedeelde stijlen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="header-wrapper"> <div id="header"> <ul> <li>link #1</a></li> <li>link #2</a></li> <li>link #3</a></li> <li>link #4</a></li> <li>link #5</a></li> </ul> <div id="logo"> <img blabla> </div><!-- end of #logo --> </div><!-- end of #header --> </div> |
1 2 3 4 5 6 7 8 9 10 11 | #header-wrapper { /* Fallback for web browsers that doesn't support RGBa */ background: rgb(34, 48, 83); /* RGBa with 0.9 opacity */ background: rgba(34, 48, 83, 0.9); } #header { margin: 0 auto; width: 960px; } |
Hm, dat klinkt wel logisch. Daar moet ik maar eens even induiken danquote:Op maandag 24 september 2012 14:35 schreef boem-dikkie het volgende:
Waarschijnlijk is het responsive met CSS en staat er ergens nog een statement voor die responsiveness. Daar moet je dan de breedte van het blok meegeven die hij moet worden als het scherm bijvoorbeeld minder breed is als 768px.
Hoe zou men dat bijvoorbeeld doen?quote:Op maandag 24 september 2012 14:35 schreef boem-dikkie het volgende:
Waarschijnlijk is het responsive met CSS en staat er ergens nog een statement voor die responsiveness. Daar moet je dan de breedte van het blok meegeven die hij moet worden als het scherm bijvoorbeeld minder breed is als 768px.
quote:Op maandag 24 september 2012 15:19 schreef InTrePidIvity het volgende:
[..]
Hoe zou men dat bijvoorbeeld doen?
1 2 3 4 5 | @media (max-width:768px) { body { background-color:#f0f; } } |
Oops, dat heb ik nog niet gedaan.quote:Op maandag 24 september 2012 14:19 schreef KomtTijd... het volgende:
Als je nou gewoon eens precies doet wat boem-dikkie zegt heh. Wat gaat er dan nog verkeerd?
Beste boem-dikkie,quote:Op maandag 24 september 2012 11:31 schreef boem-dikkie het volgende:
Okay als alle blokken dezelfde stijl hebben maar hier en daar een extra padding of margin kun je het zo doen.
[ code verwijderd ]
Je kunt dan de wrapper2 opmaken zoals voor elk blok gelijk:
[ code verwijderd ]
En voor specifieke stijlen zoals bijvoorbeeld het middenste blok doormiddel van de user* class.
[ code verwijderd ]
Dat is het idee van meerdere classes gebruiken.
Je kunt dus in jouw geval een opmaak maken voor het blok met wrapper2, want die is voor elk blok hetzelfde. En voor het middenste blok, waar dus een margin moet, user2 opmaken.
1 2 3 | <div class="wrapper2 user1"><jdoc:include type="modules" name="user1" style="xhtml" /></div> <div class="wrapper2 user2"><jdoc:include type="modules" name="user2" style="xhtml" /></div> <div class="wrapper2 user3"><jdoc:include type="modules" name="user3" style="xhtml" /></div> |
1 2 3 4 | .user1 { } .user2 { margin: 0px 20px 0px 20px; } .user3 { } .wrapper2 {background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;margin-top: 3px;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; width: 287px; height: 200px; } |
Uhh, nooitquote:Op dinsdag 25 september 2012 19:03 schreef KomtTijd... het volgende:
Wanneer besloot je dat je nu geen float:left meer nodig zou hebben?
Nee hoor. Je sluit je div #header pas af ná die blokken, wat dus betekent dat hij wrapped om die blokken, en je header is net zo breed als dat je blokken nu zijn. Verander de width van je div#header maar eens naar 20px groter (als voorbeeld). Als je dan je blokken breder maakt, of meer margin, blijven ze wel netjes naast elkaar staan op de gewenste breedte.quote:Op dinsdag 25 september 2012 19:04 schreef -J-D- het volgende:
[..]
Uhh, nooit
Is dat de domme fout? Let me check it!
-edit-
Ja dus, dat was dom van me. Had ik zelf kunnen bedenken. Nu eens zien of het probleem met het doorlopen naar rechts is opgelost als ik de getallen aanpas.
-edit-op-edit-
Ik heb nu ook de tips van KomtTijd en boem-dikkie gebruikt. Alleen zie ik dat ik nog steeds niet de gehele breedte van het middenstuk kan gebruiken.
Als ik de blokken 1px breder maak, gaat het laatste blok naar de volgende regel. Exact hetzelfde probleem dus als gisteren toen ik deze laatste verbeteringen van boem-dikkie nog niet gebruikt had.
Het blijft een onopgelost raadsel
[ afbeelding ]
Het gaat dus om dit rare gat (rechts, niet erboven) dat ik niet kan opvullen door de blokken iets breder te maken.
1 2 3 4 | .textarea#gbtext{ background:none; line-height:100px; } |
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |