Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.
HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen. Omdat javascript zeer veelzijdig is, is er voor specifieke JS vragen ook een specaal topic, zie: [Javascript] voor dummies
Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Stel deze in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. is ook een ander topic: Het grote (betaalde) webhosting topic
Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (
), zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.Veel voorkomende problemen
Veel problemen zijn te wijden aan het niet kloppen van HTML of CSS code. Een kleine typfout is snel gemaakt, en de webbrowser kan daar soms erg slecht mee omgaan. Om te controleren of je code technisch in orde is, kun je deze controleren met de W3 validator.
Is je code niet correct? Los dan eerst de fouten op zodat de validator geen foutmeldingen meer geeft. Dit lost niet altijd je probleem op, maar zorgt in ieder geval dat alles werkt zoals het hoort te werken, waardoor overige fouten ook veel makkelijker te achterhalen zijn.
quote:Op donderdag 8 december 2011 10:56 schreef Tijn het volgende:
Stel ik heb een hele lange lijst met korte items. Daar zou ik dan graag twee kolommen in willen aanbrengen. Maar ik wil er niet twee aparte lijsten van maken. Wat doe ik dan?
Je moet je nooit door 'regels' en 'semantiek' laten leiden als je het daardoor jezelf onnodig moeilijk maakt.
Divs?quote:
Op | 1 2 3 4 5 6 7 | p.test { border: 1px solid #000000; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; } |
Super bedankt!quote:Op donderdag 8 december 2011 11:29 schreef Catch22- het volgende:
http://www.quirksmode.org/css/textoverflow.html
[ code verwijderd ]
In veel gevallen geef ik je gelijk, maar het is in dit geval belangrijk dat het echt zo correct mogelijk is.quote:
Je moet je nooit door 'regels' en 'semantiek' laten leiden als je het daardoor jezelf onnodig moeilijk maakt.
Hoe zie je dat dan voor je?quote:
misschien dat je wat kan stoeien met display:inline enzo, maar het blijft gekunstel. Kan je de data niet anders aanleveren?
In plaats van 1.2.3.4.5.6 > 1.4.2.5.3.6
Oh wacht, ik heb dat wel eens gedaan maar dat was in een form. Ik denk niet dat list items scheiden met een div een heel correct resultaat oplevert.quote:
Het is een lijstje met gemeentes.quote:
oke, wat voor data heb je? want je bent vrij summier in je specs.
misschien dat je wat kan stoeien met display:inline enzo, maar het blijft gekunstel. Kan je de data niet anders aanleveren?
In plaats van 1.2.3.4.5.6 > 1.4.2.5.3.6
Gewoon zo:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <ul> <li>Alblasserdam</li> <li>Albrandswaard</li> <li>Alphen aan den Rijn</li> <li>Barendrecht</li> <li>Bergambacht</li> <li>Bernisse</li> <li>Binnenmaas</li> <li>Bodegraven-Reeuwijk</li> <li>Boskoop</li> <li>Brielle</li> <li>Capelle aan den IJssel</li> <li>Cromstrijen</li> <li>'s-Gravenhage</li> <li>Delft</li> <li>Dirksland</li> <li>Dordrecht</li> <li>Giessenlanden</li> <li>Goedereede</li> <li>Gorinchem</li> <li>Gouda</li> </ul> |
Maar dan een heleboel (alle gemeentes van een provincie). Omdat het zo'n lange lijst wordt, wil ik graag dat het visueel in twee kolommen wordt verdeeld. Maar het is belangrijk dat dat zo toegankelijk en w3c-correct mogelijk wordt gedaan. Het is eigenlijk niet acceptabel om er twee lijst-elementen van te maken. En het is dus de bedoeling dat de volgorde min of meer in tact blijft.
A - B - C - ....- Z
als je dan op een letterklikt dat je dan de lijst krijgt met de steden die beginnen met die letter?
| 1 2 3 4 | <ul width=evenbreedals 2 li's met wat padding erbij > <li class="floatLeft">Alblasserdam</li><li class="floatright">Albrandswaard</li> etccetc.. </ul> |
Ja, zoiets heb ik nu dus. Dat kan op zich wel hoor, maar eigenlijk is de volgorde dan verkeerd. Maar ik zou het mooier vinden als het zo werd:quote:
1 4
2 5
3 6
Ik weet niet hoe ik dat voor elkaar zou moeten krijgen.
Dit is al een eeuwenoud probleem, en er is maar een oplossing die werkt en het semantisch houdt:quote:Op donderdag 8 december 2011 11:45 schreef Tijn het volgende:
[..]
Ja, zoiets heb ik nu dus. Dat kan op zich wel hoor, maar eigenlijk is de volgorde dan verkeerd. Maar ik zou het mooier vinden als het zo werd:
1 4
2 5
3 6
Ik weet niet hoe ik dat voor elkaar zou moeten krijgen.
http://www.css3.info/preview/multi-column-layout/
| 1 2 3 4 5 6 7 8 9 10 11 12 | <ul> <div id="Links"> <li>1</li> <li>2</li> <li>3</li> </div> <div id="Rechts"> <li>4</li> <li>5</li> <li>6</li> </div> </ul> |
quote:
[..]
Dit is al een eeuwenoud probleem, en er is maar een oplossing die werkt en het semantisch houdt:
http://www.css3.info/preview/multi-column-layout/
Laat me raden. IE doet niet mee ?quote:Multi-column layout is currently only supported in Mozilla based browsers and Safari 3, who have prefixed the properties with respectively -moz- and -webkit-. The example below is done with column-width, the CSS for it is as follows:
Ja, dat is best tof. Maar gaat natuurlijk nooit werken in IE enzoquote:
[..]
Dit is al een eeuwenoud probleem, en er is maar een oplossing die werkt en het semantisch houdt:
http://www.css3.info/preview/multi-column-layout/
Aan zoiets zat ik ook te denken... maar ik weet niet hoe erg ze het vinden dat er een div in een ul staat zonder li eromheen. Volgens mij valideert dat niet (althans niet met XHTML strict, waarin ik deze pagina maak).quote:Op donderdag 8 december 2011 11:48 schreef GI het volgende:
Wat je dan nog zou kunnen doen is
[ code verwijderd ]
Maar ik weet niet in hoeverre dat semantisch nog helemaal volgens de regels is. In principe zou het eventuele compabiliteit dingen niet in de weg staan denk ik.
Edit: lees net dat het niet werkt op IE7 en lager.
Misschien is dit trouwens uiteindelijk ook niet zo'n slechte oplossing. Dan maar geen kolommen.quote:Op donderdag 8 december 2011 11:40 schreef MrNiles het volgende:
misschien sub-koppen maken
A - B - C - ....- Z
als je dan op een letterklikt dat je dan de lijst krijgt met de steden die beginnen met die letter?
ik denk dat de leesbaarheid veel beter is...quote:
[..]
Misschien is dit trouwens uiteindelijk ook niet zo'n slechte oplossing. Dan maar geen kolommen.
2 kolommen kan toch best verwarrend werken
en om hoeveel regels gaat het wel niet?
Ja, ik denk dat je gelijk hebt. Sommige provincies (zoals Zuid-Holland) hebben tegen de 100 gemeenten, dus dat loopt aardig op.quote:
[..]
ik denk dat de leesbaarheid veel beter is...
2 kolommen kan toch best verwarrend werken
en om hoeveel regels gaat het wel niet?
Is het essentieel dat het in één lijst staat dan ? Je zou ook via jquery of iets in die geest een zoekfilter in kunnen bouwen.quote:
[..]
Ja, ik denk dat je gelijk hebt. Sommige provincies (zoals Zuid-Holland) hebben tegen de 100 gemeenten, dus dat loopt aardig op.
Ja. Het is semantisch één lijst, dus het moet ook in één lijstelement zitten.quote:
[..]
Is het essentieel dat het in één lijst staat dan ?
Het is echt compleet onacceptabel dat het niet zou werken zonder Javascript, dus ik denk niet dat zoiets een oplossing gaat zijnquote:Je zou ook via jquery of iets in die geest een zoekfilter in kunnen bouwen.
Het is een ZZPerquote:
Maar je werkt voor de overheid dus?
Nee, het is voor een belangenorganisatie voor mensen met een handicap, maar het heeft wel met de overheid te maken. Ze willen wel graag het goede voorbeeld geven door zich te houden aan dingen als Drempelvrij en de Webrichtlijnen van de Overheid te houden.quote:
Maar je werkt voor de overheid dus?
Een ul mag alleen li's bevatten, en moet ten minste 1 li bevatten om geldige (x)html te zijn.quote:
Aan zoiets zat ik ook te denken... maar ik weet niet hoe erg ze het vinden dat er een div in een ul staat zonder li eromheen. Volgens mij valideert dat niet (althans niet met XHTML strict, waarin ik deze pagina maak).
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map; var geoXml; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); geoXml = new GGeoXml("http://www.japansesushi.nl/restaurantskml.kml"); map.addControl(new GLargeMapControl()); map.setCenter(new GLatLng(52.18958,5.29524), 7); map.addControl(new GLargeMapControl()); map.addOverlay(geoXml); } } google.maps.event.addDomListener(window, 'load', initialize); </script> <div id="map-canvas" style="width: 500px; height: 400px"></div> |
[ Bericht 31% gewijzigd door _superboer_ op 09-12-2011 02:24:48 ]
[ Bericht 48% gewijzigd door _superboer_ op 09-12-2011 04:30:55 ]
ik heb ergens gelezen dat dit met position fixed te maken heeft
is er iemand die weet hoe ik dit kan verhelpen?
<div class="push"></div>
<div class="footer">
<div class="footer-align">
<p>Copyright Marcel Woudstra all rights reserved 2011</p> </div>
</div>
</div>
</div>
.footer {
position:fixed;
bottom:0;
width:100%;
height:50px;
background-color:#202020;
font-family : Helvetica, Verdana, sans-serif;
font-size : 10px;
color:#9e9e9e;
}
.footer-align {
padding-top:10px;
text-align:center;
}
.push {
height:50px;
}
ik wel?quote:
Op mijn site wil ik graag een map waarop alle sushirestaurants staan. De gegevens van de sushirestaurants staan in dit kml-bestand. Nu gebruik ik de standaard methode van google om de kml aan te roepen, echter krijg ik geen markers te zien (zelfs geen kaart) op http://www.japansesushi.nl/restaurants.
[ code verwijderd ]
Je gebruikt een oude versie van Google Maps (versie 2). Maar er is niks mis mee hier.quote:
Op mijn site wil ik graag een map waarop alle sushirestaurants staan. De gegevens van de sushirestaurants staan in dit kml-bestand. Nu gebruik ik de standaard methode van google om de kml aan te roepen, echter krijg ik geen markers te zien (zelfs geen kaart) op http://www.japansesushi.nl/restaurants.
[ code verwijderd ]
Laat dit gewoon weg op een telefoon, daar heb je sowieso al weinig schermruimte. Om dan een footer constant in beeld te hebben is gewoon schermvervuiling.quote:
Ik heb een sticky footer gemaakt voor op mn website (zie de code hieronder) hij werkt nu overal, behalve op de iphone/ipad
ik heb ergens gelezen dat dit met position fixed te maken heeft
is er iemand die weet hoe ik dit kan verhelpen?
<div class="push"></div>
<div class="footer">
<div class="footer-align">
<p>Copyright Marcel Woudstra all rights reserved 2011</p> </div>
</div>
</div>
</div>
.footer {
position:fixed;
bottom:0;
width:100%;
height:50px;
background-color:#202020;
font-family : Helvetica, Verdana, sans-serif;
font-size : 10px;
color:#9e9e9e;
}
.footer-align {
padding-top:10px;
text-align:center;
}
.push {
height:50px;
}
Ja dit soort punten kun je vastleggen in een contract.quote:
Ben bezig met een ontwerp voor een eindexamenopdracht. Dit ontwerp is voor een applicatie die de klant in de toekomst misschien veelvuldig gaat verspreiden. Het ontwerp is gratis maar kan ik hier auteursrechten etc. contractueel met de klant over vastleggen zodat deze gratis versie slechts unicum is en niet voor publicatie?
Misschien is het een beetje grof, maar het ontwerp is erg sterk. En als die het ontwerp in de toekomst veelvoudig gaat publiceren heb ik er niets aan.quote:
[..]
Ja dit soort punten kun je vastleggen in een contract.
Bedankt in ieder geval
.Contract? Gewoon de goeie licentie kiezen voor je software is voldoende.quote:
[..]
Ja dit soort punten kun je vastleggen in een contract.
Al kan het nooit kwaad om met de opdrachtgever af te spreken wat je precies zult opleveren natuurlijk.
Het gaat om een ontwerp. Tekeningen en onderzoeken voor de website.quote:
[..]
Contract? Gewoon de goeie licentie kiezen voor je software is voldoende.
Al kan het nooit kwaad om met de opdrachtgever af te spreken wat je precies zult opleveren natuurlijk.
Alleen de plaatjes laden zo snel dat soms de plaatjes nog niet helemaal geladen zijn maar dan moeten ze toch al worden weergegevenquote:
[..]
Een simpele jQuery slideshow plugin:
http://jquery.malsup.com/cycle/
Is er een preload functie ofzo?| 1 2 3 4 5 | $(document).ready(function() { $('a#werk').hover(function () { $(this).find('a#werkfooter').css("background-color", "#343434"); }); }); |
| 1 | $('a#werkfooter').css("background-color", "#343434"); |
Als je een class of element hebt dat vaker voorkomt en je wil degene vinden die het dichtst bij is gebruik je 'find'. Als je een ID hebt weet je dat het element uniek is op de pagina, en hoef je dus niet te zoeken. Het is namelijk al bekend welk element je op doelt.
Nou wil ik dat dat eerste linkje niet zichtbaar is. Dus ik heb dit toegevoegd:
| 1 2 3 | a.naarboven:first-child{ display:none; } |
Hij laat nu geen één meer zien, iemand enig idee waarom?
[ Bericht 10% gewijzigd door boem-dikkie op 10-12-2011 19:40:24 ]
Maar nee, heb ik niet.
| 1 | <div class="goup"><a href="#wrapper" class="naarboven">naar boven</a></div> |
Die div staat 5 keer onder elkaar.
En dit is mijn css.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .goup{ margin-top: 20px; width: 250px; height: 285px; float: left; background-color: #FFFFFF; padding-top: 15px; } a.naarboven{ text-transform: uppercase; color: #99cd21; font-family: Arial, Helvetica; font-size: 11px; margin-top: 25px; } a.naarboven:first-child{ display: none; } |
Als je nou
| 1 2 3 | .goup:first-child a { blaat... } |
doet zou het moeten werken. Mits er natuurlijk geen andere elementen in dezelfde wrapper zitten als de 'goup's.
Het werkt. Wat bedoel je met andere elementen?quote:
Je hebt dus wel een wrapper om iedere a heen. Dan is iedere a automatisch :first-child.
Als je nou
[ code verwijderd ]
doet zou het moeten werken. Mits er natuurlijk geen andere elementen in dezelfde wrapper zitten als de 'goup's.
Het linkje is het enige wat in de div .goup komt te staan. Het is een divje die naast elke post komt te staan met een linkje die naar bovenaan de pagina gaat. Dat hoeft niet bij de eerste post vandaar.
Maar als je .goup:first-child a doet pakt hij toch het eerste linkelement binnen de div .goup? Zoals ik al zei er zit niks anders in die div op het linkje na.quote:
:first-child gaat om (zoals de selector al zegt) het eerste child van een element. Als er dus bijvoorbeeld nog een <h1> voor de eerste .goup zit gaat de selector '.goup:first-child' niet af en zal je code dus niet werken.
In dat geval zou een :first-of-type wel moeten werken als im me niet vergis?quote:
:first-child gaat om (zoals de selector al zegt) het eerste child van een element. Als er dus bijvoorbeeld nog een <h1> voor de eerste .goup zit gaat de selector '.goup:first-child' niet af en zal je code dus niet werken.
...quote:
HTML5 bestaat uit zo gigantisch veel onderdelen/modules, er is volgens mij nog geen enkele browser die alles ondersteunt. Het beste kun je feature detection doen, bijvoorbeeld met een library als Modernizr.
Dat zegt me niets. Het punt is dat ik html5 ga gebruiken, maar nog niet weet wat precies (Waarschijnlijk kleine animaties in een site)(En ik mag nog niet uitwerken wat ik precies ga doen want dan wordt mijn plan afgewezen ). Dus moet ik IE detecteren met codes en daar een workaround voor creëren. Door daar gewoon een statische elementen voor te bouwen die zien dat een website IE is en dan die afbeelding laten zien. Maar dat is dus niet mogelijk?Het bestaat officieel nog niet, maar ik moet het in mijn plan verwerken anders wordt hij waarschijnlijk afgewezen. Het hoeft niet al helemaal een uitgebreid uitgewerkte workaround te zijn, als het maar wel mogelijk is IE te detecteren en dan iets als een andere code te laten zien aan IE gebruikers. Of zoiets.quote:Op zondag 11 december 2011 14:01 schreef boem-dikkie het volgende:
Waarom überhaupt zo veel moeite doen voor een workaround om iets te laten werken dat nog niet eens officieel af is?
Ik verwar mezelf ook, ik hoop dat ik een beetje duidelijk uitleg wat het probleem is (en of het mogelijk is)Ik zou het persoonlijk met CSS3 proberen.
Nee, echt totaal nietquote:
[..]
Het bestaat officieel nog niet, maar ik moet het in mijn plan verwerken anders wordt hij waarschijnlijk afgewezen. Het hoeft niet al helemaal een uitgebreid uitgewerkte workaround te zijn, als het maar wel mogelijk is IE te detecteren en dan iets als een andere code te laten zien aan IE gebruikers. Of zoiets.
. Ja, IE is te detecteren. Ja, specifieke onderdelen/functies van HTML5 zijn te detecteren. En dan?
Serieus niet?quote:
Je gaat html5 gebruiken voor animaties? Good luck want dat lukt je niet.
Ik zou het persoonlijk met CSS3 proberen.
Oh. Ik ha namelijk een site gezien waarbij er veel geanimeerd is, wat gebruik maakt van html5 en jquery. Was ik al bang voorquote:
[..]
Nee, echt totaal niet
Ja, IE is te detecteren. Ja, specifieke onderdelen/functies van HTML5 zijn te detecteren. En dan?
Nou ja, dan een workaround maken voor wat ik dan bouw. Ik heb wat op papier gezet, hoop dat het dan wordt goedgekeurd, dan kan ik eindelijk onderzoek gaan doenDat heeft niks met HTML5 te maken, alleen met Javascript die inline CSS manipuleertquote:
Serieus niet?
"DHTML".quote:
[..]
Dat heeft niks met HTML5 te maken, alleen met Javascript die inline CSS manipuleert
Dat waren nog eens tijden.
Dat hele verhaal leg ik aan m'n klanten niet eens meer uit als ze weer eens komen vragen of ik geen HTML5 site voor ze kan bouwenquote:
[..]
Dat heeft niks met HTML5 te maken, alleen met Javascript die inline CSS manipuleert
Als klanten je überhaupt al benaderen met de vraag of je een HTML5 website kunt bouwen voor ze weet je al dat het project sowieso veel gezeur gaat veroorzaken vanwege onkennis.quote:Op zondag 11 december 2011 15:16 schreef Tijn het volgende:
[..]
Dat hele verhaal leg ik aan m'n klanten niet eens meer uit als ze weer eens komen vragen of ik geen HTML5 site voor ze kan bouwen
Ik kom het veel tegen, hoor.quote:
[..]
Als klanten je überhaupt al benaderen met de vraag of je een HTML5 website kunt bouwen voor ze weet je al dat het project sowieso veel gezeur gaat veroorzaken vanwege onkennis.
Klant: "Ja, jij kunt toch van die HTML5 sites bouwen?"
Tijn: "Euh... Ja, ik denk het..."
Klant: "Ok, ja dat het er een beetje hip uitziet, animaties enzo, maar dat 'ie het ook op m'n iPad doet he"
Tijn: "Ja, gewoon zonder Flash bedoel je? Ik kan sowieso geen Flash."
Klant: "Nee precies, Flash is uit man, HTML5 is het helemaal!"
Tijn: "Ja, ok..."
Klant: "Maar hij moet het ook gewoon in IE7 doen he, niet dat gelul dat je Chrome moet hebben ofzo"
Tijn: "Dus je wilt een HTML5 site die het doet op je iPad en in IE7?"
Klant: "Ja precies! En een beetje snel he, volgende week ofzo eerste demo?"
En dan lever je uiteindelijk gewoon XHTML met jQuery aan en dan zijn ze helemaal blij
HTML5 (alhoewel het '5' ondertussen ook al nergens meer op slaat, aangezien de versienummering losgelaten wordt vanaf nu) is niets meer of minder dan een extra set tags en attributen, die toegevoegd zijn aan de HTML-specificatie. Een paar ouderwetste elementen zijn er definitief uitgehaald. Alhoewel de specificatie nog niet volledig af is, is het overgrote deel ervan al gewoon te gebruiken. Zeker de 'semantische tags', zoals nav, article, section, etc. kan je zonder problemen al gebruiken. Voor support in IE8 en lager, kan je een klein javascriptje schrijven, of gewoon htmlshiv.js googlen en downloden (net zo makkelijk), die deze tags on-the-fly aanmaakt, zodat je ze gewoon kan CSS'en.
Er is op dit moment eigenlijk geen enkele reden meer om nog XHTML te gebruiken.
CSS3 is een ander verhaal. Hierbij zijn veel eigenschappen nog maar half geïmplementeerd, of verschilt de implementatie tussen browsers (vandaar de vendor-prefixes). Als je hier veel gebruik van gaat maken (wat best kan overigens), moet je ervoor zorgen dat je pagina zonder alle typische CSS3-shit er nog steeds normaal uit ziet. Met conditional comments kan je bvb aan de HTML-tag in je document een speciale IE-class toevoegen, zodat je bepaalde zaken die niet ondersteund worden in IE8 <, kan overriden obv die class.
het jQuery-framework is zo ontworpen, dat deze in elke browser hetzelfde resultaat geeft. Voor animaties en dergelijke, is dit nog altijd de meest veilige oplossing.
Wel raar, dat je plan bij voorbaat afgewezen gaat worden, als je verteld wát je precies van plan bent.. Komt een beetje raar en dubieus overquote:(En ik mag nog niet uitwerken wat ik precies ga doen want dan wordt mijn plan afgewezen ).
Mijn div opbouw ziet er zo uit:
<div id="container">
<div id="content">
<div id="producten"></div>
</div>
<div>
Bijbehorende CSS:
#container {
margin-left: auto;
margin-right: auto;
height: 750px;
width: 870px;
background-color: #d4d4d4;
}
#content {
width: 858px;
height: 610px;
margin-top: auto;
margin-left: auto;
text-align: center;
background-image: url(images/content_achtergrond.png);
position: relative;
}
#producten {
background-image: url(images/producten.png);
width: 472px;
height: 324px;
margin-left: 280px;
margin-top: 50px;
text-align:center;
}
In <div id="producten"></div> zit de afbeelding die ik vertikaal wil centeren in de div Content.
Op internet is er veel te vinden over dat het lastig is een afbeelding vertikaal te centeren in een div, maar ik begrijp niet wat het beste voor mijn code is gezien ik nogal een beginner ben met css/html.
Heb je de OP gelezen, en dan met name het stukje over code posten?quote:
Ik wil mbv CSS een afbeelding verticaal centreren in een div.
Mijn div opbouw ziet er zo uit:
Het is in principe niet lastig, je moet alleen weten wat je doet. De meest simpele oplossing heeft namelijk als 'bijwerking', dat je precies moet weten hoe alle HTML-elementen zich gedragen, hoe het box-model in elkaar zit en wat wel en niet geoorloofd is in CSS.quote:
Op internet is er veel te vinden over dat het lastig is een afbeelding vertikaal te centeren in een div, maar ik begrijp niet wat het beste voor mijn code is gezien ik nogal een beginner ben met css/html.
De truuk is, om de parent van de container waar het verticaal gecentreerde element in moet komen, weer te geven als tabel en de parent als tabel-cel, met een vertical-align:middle.
Maar als je, zoals je zelf al zegt, nog echt een beginner bent in CSS en HTML, zou ik eerst beginnen met de basis onder de knie te krijgen. Voordeel daarvan is, dat je ook veel gerichter kan gaan zoeken naar oplossingen, mocht je specifieke problemen tegenkomen.
Note: The values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.quote:
[..]
Het is in principe niet lastig, je moet alleen weten wat je doet. De meest simpele oplossing heeft namelijk als 'bijwerking', dat je precies moet weten hoe alle HTML-elementen zich gedragen, hoe het box-model in elkaar zit en wat wel en niet geoorloofd is in CSS.
De truuk is, om de parent van de container waar het verticaal gecentreerde element in moet komen, weer te geven als tabel en de parent als tabel-cel, met een vertical-align:middle.
Maar als je, zoals je zelf al zegt, nog echt een beginner bent in CSS en HTML, zou ik eerst beginnen met de basis onder de knie te krijgen. Voordeel daarvan is, dat je ook veel gerichter kan gaan zoeken naar oplossingen, mocht je specifieke problemen tegenkomen.
Kun je me trouwens de situatie schetsen waarin je verticaal wilt centreren? Over het algemeen is standaard alignen met wat padding mooier.
Dat is horizontaalquote:
als de div gewoon een breedte heeft en de afbeelding als enige in die div staan, kan je hem gewoon een text-align:center geven
verticaal centreren is inderdaad kut, tenzj je de IE7 support laat vallen, of je met JS in de weer gaat
Maar dat lijkt me niet echt een geweldige oplossing.
), of je zet alles zo vast dat je er nog niets mee kan.. Ik vind jouw eerdergestelde vraag eigenlijk het meest relevante:
Verticaal centreren is iets wat je eigenlijk nooit gebruikt, zeker niet voor standaard content. Voor achtergrondplaatjes is het een ander verhaal, dat is ook prima mogelijk.quote:Kun je me trouwens de situatie schetsen waarin je verticaal wilt centreren?
Wellicht is het gewoon een probleem, waarbij de gewenste oplossing juist het probleem veroorzaakt en er een veel betere manier is om hetzelfde te bewerkstelligen.
(de inhoud in het gele vak)
Aangezien het gele vak een bepaalde hoogte heeft is verticaal centreren niet nodig, omdat dit alleen maar problemen geeft, kun je ook gewoon een marge gebruiken.
Variabele hoogte/breedte en centreren is altijd lastig.
maar ik noem dat ook niet echt 'verticaal centreren', daarbij denk ik eerder aan bvb een pagina waarbij de content altijd in het midden van het scherm staat..edit: Zoiets bijvoorbeeld.. overigens ook een mooie oplossing, werkt ook niet in IE7
Padding is als je een "witruimte" wilt die deel uit maakt van de container waar je de padding op doet.quote:
of padding, omdat dat gele de background van de container is.
Variabele hoogte/breedte en centreren is altijd lastig.
Toch...?
Waarom zou je daar dan padding op doenquote:
Als je dus binnen een container, de gele balk in dit geval, een standaard witruimte wilt hebben, is het netter om op de container een padding te zetten, ipv op alle children een margin.
Absoluut niet inderdaad. Als je scherm kleiner is dan de content, verdwijnt die buiten beeld zonder scrollbalk.quote:
Nja kan vast wel iets met absolute en dan margin-top: -[helft-vancontent]px; en top: 50%;
Maar dat lijkt me niet echt een geweldige oplossing.
oh en: http://www.w3.org/TR/CSS2/box.html#box-dimensions
overflow:scroll;?quote:
[..]
Absoluut niet inderdaad. Als je scherm kleiner is dan de content, verdwijnt die buiten beeld zonder scrollbalk.
oh en: http://www.w3.org/TR/CSS2/box.html#box-dimensions
.Schattig, maar dat werkt dan dus niet meerquote:
[..]
overflow:scroll;? [ afbeelding ]
Ach, als je eerst toont dat je weinig verstand hebt van HTML (geen schande, daar is dit topic voor) maar vervolgens met zulke plaatjes gaat gooien om je gelijk te halen kan je net zo goed wegblijvenquote:
Sorry, ik heb een geschikter plaatje gekozen.
.Je snapt niet dat ik een grapje maak? Ik zeg toch zelf al dat het een slechte oplossing is?quote:Op maandag 12 december 2011 11:20 schreef picodealion het volgende:
[..]
Ach, als je eerst toont dat je weinig verstand hebt van HTML (geen schande, daar is dit topic voor) maar vervolgens met zulke plaatjes gaat gooien om je gelijk te halen kan je net zo goed wegblijven
Nee, sorry. Dat ging echt langs me heenquote:
[..]
Je snapt niet dat ik een grapje maak? Ik zeg toch zelf al dat het een slechte oplossing is?
.quote:Voorkeursdomein
Het voorkeursdomein is het domein dat u wilt gebruiken om de pagina's van uw site te indexeren. Als u uw voorkeursdomein opgeeft als http://www.example.com en we een link naar uw site vinden die is opgemaakt als http://example.com, verwerken we die link als http://www.example.com. Daarnaast houden we rekening met uw voorkeur wanneer we URL's weergeven in onze zoekresultaten. Het kan enige tijd duren voordat wijzigingen worden weergegeven in onze index.
Meer informatie over het instellen van een voorkeursdomein
Ik probeer die 301 redirect dus te regelen maar ik weet niet precies of ik het goed doe. Is het zo simpel als in je htaccess het volgende toe te voegen (voor elke pagina?):quote:Website compliance
www resolve Be careful! Your website without www doesn't redirect to www (or the opposite). It's duplicate content! Hide advice
High impactEasy to solve
Be sure that http://blabla.nl and http://www.blabla.nl are not running in parallel.
Redirecting requests from a non-preferred hostname is important because search engines consider URLs with and without "www" as two different websites.
Once your preferred domain is set, use a 301 redirect for all traffic to your non-preferred domain.
Redirect 301 /http://www.blabla.nl http://blabla.nl
Ik heb bij google webmaster tools geprobeerd mijn voorkeursdomein te veranderen in blabla.nl maar ik heb verificatie-problemen (raar want ik heb de website op 3 verschillende manier echt geverificeerd). Iemand die er veel ervaring mee heeft?
| 1 2 3 4 | RewriteEngine On RewriteBase / RewriteCond %{HTTP_HOST} !^www\. RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L] |
Die zorgt dat alles naar www. gaat
andersom(niet getest):
| 1 2 3 4 | RewriteEngine On RewriteBase / RewriteCond %{HTTP_HOST} ^www\. RewriteRule ^(.*)$ http://%{HTTP_HOST}/$1 [R=301,L] |
. Geen idee of hier een topic voor is, maar ik wil wel even kijken of ik dit kan beantwoorden.Sowieso is zelf een redirect doen beter dan het aangeven bij Google WMT. Ten eerste omdat er meer crawlers zijn dan Google, ten tweede omdat de gebruiker dan ook altijd op dezelfde url terechtkomt.
Het is inderdaad zo simple als een regel in je .htaccess, als ik me niet vergis (niet getest dus) is het:
| 1 2 | RewriteCond %{HTTP_HOST} !^www\. RewriteRule (.*) http://www.jouwsite.com/$1 [R,L] |
Dit is inderdaad completer, en iets netter. Toch niet verkeerd voor uit m'n hoofdquote:
Ik heb het volgende in mijn .htaccess:
[ code verwijderd ]
.De R=301 flag geeft aan Google aan dat het een permanente redirect is, dus beter voor SEO. Die is wel belangrijk in dit geval.
Even uitproberen, bedankt mensen
Bedankt voor de tip! Een berg aan informatiequote:
Ik kan je aanraden om op SEOmoz.org en SearchEngineLand.com rond te neuzen.
Iemand hints / tips?
ik ga toch geen lightbox clone bouwen als er al 1 is die het meeste werk voor me doet http://jquery.com/demo/thickbox/quote:
Wat is dat nou weer voor vraag
Daar staan er een hoop op. Ga daar wel mee aan de slag
Doet images, flash, iframes, AJAX, ....
Ik zou zelf denk ik voor een JS oplossing gaan(met animation) om een soort "fixed", maar dan mooier, te kunnen krijgen, en hier dan een fallback naar position: fixed gebruiken
Zoiets:
http://www.jtricks.com/javascript/navigation/floating.html
ALsjeblieft, hou op. Het is geen 2004 meerquote:
Je zou position: fixed kunnen gebruiken. Maar ik raad het niet aan.
Ik zou zelf denk ik voor een JS oplossing gaan(met animation) om een soort "fixed", maar dan mooier, te kunnen krijgen, en hier dan een fallback naar position: fixed gebruiken
Zoiets:
http://www.jtricks.com/javascript/navigation/floating.html
Position:fixed is idd de oplossing. Wat veel gedaan wordt is dmv javascript de scrollpositie uitlezen, zodat je een menu fixed kan zetten zodra het uit beeld dreigt te scrollen. Bijv. een menubalk onder een banner, die fixed wordt zodra je de banner uit beeld gescrolled hebt. Voorbeeld is bijv. te ticker bij facebook, .fixed_scrolling_wrapper wordt fixed gemaakt zodra je de ads erboven weggescrold hebt.
Je moet overigens wel nadenken over de impact van fixed elementen op kleine schermen (netbooks, telefoons). Als je niet oppast zet je 90% van het beeld vol met menu's die niet weg te scrollen zijn.
Maar ik ben wel blij dat ik nu weet hoe het moet, mocht ik het ooit wél willen
Nu wil ik de url kunnen wijzigen aan de hand van een keuze uit een select box. Volgens de documentatie kan dat met setOptions http://docs.jquery.com/Plugins/Autocomplete/setOptions#options
| 1 2 3 4 5 6 7 8 9 10 | $("#id_van_input_veld").autocomplete("url_naar_php_bestand_1",{ //hier een aantal opties }); $("#id_van_select").change(function() { $("#id_van_input_veld").flushCache(); $("#id_van_input_veld").setOptions(function() { url: 'url_naar_php_bestand_2' }); }); |
Echter, hier gebeurt niks mee. De url wordt niet veranderd. Ook krijg ik met Firebug geen foutmeldingen.
Ik heb nu een tijdelijke oplossing door bij het teruggeven van het resultaat in Javascript (in de success: van de autocomplete) te controleren op de waarde in de selectbox, maar hiervoor worden teveel records opgehaald, dus ik wil het resultaat verfijnen in het AJAX php bestand.
Heeft iemand een idee wat er niet klopt?
Idd, ik heb het laatst op mijn werk ook gemaakt (precies hoe KomtTijd.. zegt), maar ik zet er wel altijd een rule bij dat bij < 600px breedte dat gewoon niet gebeurt.quote:
Ja, door dat hele gedachtenproces ben ik net ook gegaan. Nu is het nog een klein menuutje en leek het me cool om 'em altijd op de pagina te houden. Maar de inhoud is variabel en gaat zeker groeien. Dat in combinatie met de kleine schermen van telefoons en tablets zorgt er al gauw voor dat het alleen maar irritant is dat 'ie fixed is.
Maar ik ben wel blij dat ik nu weet hoe het moet, mocht ik het ooit wél willen
Ja dat wil ik ook. Echter de autocomplete zet je op in de Document Ready. En op de één of andere manier wordt dit gecached. Ik wil dus on the fly de url veranderen, wanneer de waarde van de selectbox veranderdquote:
Kan je niet beter de waarde van de select meeposten en het door 1 file laten afhandelen?
| 1 2 3 4 | #test3 li a { vertical-align:middle; line-height: 102px; } |
maar dit werkt enkel wanneer er maar 1 regel tekst is. Nu heb ik in #test3 2 regels tekst welke ik verticaal gecentreerd wil hebben in de div tag. De regels ten opzichte van elkaar moeten een normale line-height krijgen. Is dit mogelijk?
| 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 | <!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> <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script> <script type="text/javascript" src="scripts/jquery.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>FOKTEST</title> <style> body { margin:0; padding:0; font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight: bold; text-align: center; background-color:#999; } #container { width:1024px; height:768px; margin:0 auto; background-color:#0D2B41; } /* Button */ ul { list-style: none; padding:0px; margin:0px; } #button3 li a { vertical-align:middle; line-height: 102px; } #button3 { position:absolute; margin-top:510px; margin-left:306px; height:102px; width:102px; background-color:#FFF; } </style> </head> <body> <div id="container"> <div id="button3"> <ul id="knop3"> <li><a href="#">TESTKNOP DRIE</a></li> </ul> </div> </div> </body> </html> |
Dat zou wel ideaal zijn. Even uitproberen.quote:
[ Bericht 1% gewijzigd door Crimyclown op 15-12-2011 14:04:59 ]
zoiets. ff naar je eigen wens aanpassen
waarom staat die knop in een UL btw?
http://jsbin.com/orucev/9
Om dat ding te centreren van alles geprobeerd. Dacht misschien kan een ul wel gecentreerd worden.quote:
http://jsbin.com/orucev/4/
zoiets. ff naar je eigen wens aanpassen
waarom staat die knop in een UL btw?
http://jsbin.com/orucev/9
Testpagina
| 1 | <div id="button1" style="cursor:hand; cursor:pointer;" onclick="location.href='testpagina"> |
Probeer eerst eens zelf te begrijpen wat je nou wilt, dat zoekt al een stuk makkelijkerquote:
Is iemand hier toevallig bekent met CMS Made Simple? Kan op de website vreemd genoeg niet de informatie vinden die ik zoek. Zou graag een link naar een nieuwe pagina/sjabloon maken. Of moet ik sjablonen niet als html pagina zien?
Testpagina
[ code verwijderd ]
Een nieuwe pagina of een nieuw sjabloon zijn wel 2 behoorlijk verschillende dingen. En wat die code ermee te maken heeft...?
Ik zit al te pielen met text-shadow maar daarbij heb ik 2 opties:
- de shadow direct achter de tekst laten, en de blur op 4px zetten. Lijkt er enigszins op, maar het moet met strakke lijnen ipv geblurred
- 4 shadows instellen voor de 4 richtingen. lijkt er meer op, maar de hoeken zijn dan erg lelijk:
http://jsfiddle.net/38mM6/1/ (1px blur om het iets zachter te maken, anders is het nog blokkeriger..)
Lijkt het allemaal niet te worden.
[ Bericht 29% gewijzigd door picodealion op 17-12-2011 17:16:09 ]
http://jsfiddle.net/38mM6/2/
.Ik zal eens met de opdrachtgever overleggen of het echt niet anders kan. In het aangeleverde design zijn het plaatjes (nu 5 stuks, maar je weet nooit wat er verandert/uitbreidt). Niet ideaal, imo.
A bedankt, ik heb het gevonden. Dacht dat sjablonen voor html pagina's stonden. Het is allemaal ook een stuk logischer ook nu.quote:
[..]
Probeer eerst eens zelf te begrijpen wat je nou wilt, dat zoekt al een stuk makkelijker
Een nieuwe pagina of een nieuw sjabloon zijn wel 2 behoorlijk verschillende dingen. En wat die code ermee te maken heeft...?
Maar de handleiding op CMSMS heb ik ook niet heel veel aangehad. Informatie die er staat is zeer minimaal.
Ben ik met je eens, die handleiding is een beetje crappy. Gelukkig is de werkwijze supermakkelijk en overzichtelijk, en de modulehulp-pagina's e.d. zijn wel duidelijk.quote:
[..]
A bedankt, ik heb het gevonden. Dacht dat sjablonen voor html pagina's stonden. Het is allemaal ook een stuk logischer ook nu.
Maar de handleiding op CMSMS heb ik ook niet heel veel aangehad. Informatie die er staat is zeer minimaal.
Kijk hier wat het probleem is. Ik krijg 2 'containers' in een container, niet naast elkaar.
Een mogelijke oplossing is om er met css inline-blocks van te maken, blokken die dus naast elkaar blijven staan:
| 1 | #logo, #menu { display: inline-block; } |
Of je kan ze allebei naar links floaten:
| 1 | #logo, #menu { float: left; } |
Inline-block wordt niet door oude browsers (IE 6 enzo) ondersteund, maar tegenwoordig kunnen de meeste browsers er wel mee omgaan. Float wordt wel altijd ondersteund, maar is lastiger onder de knie te krijgen.
Div's worden dus altijd onderelkaar gestapeld? Hoe voorkom je dit?
Ik ga nu even float left proberen.
/edit
| 1 | #logo, #menu { display: inline-block; } |
/edit
En wat is het beste om een plaatje/iets verticaal te centreren?
Lees even vanaf hier voor verticaal centreren.
Thanks, ga ik straks gelijk even doen!quote:
Er zijn eigenlijk altijd meerdere manieren om iets te bereiken, maar als je voor compatibiliteit gaat, zou ik toch voor float gaan.
Lees even vanaf hier voor verticaal centreren.
De blokken zijn nu wel naast elkaar, maar de hoogte van de blokken kloppen niet meer? Ze lopen niet gelijk.
/edit
Door float wel, met inline-block niet. Opgelost dus.
| 1 2 3 4 5 6 | #logo{ height:50px; width:200px; background-color:#0e3422; margin-top:25px; } |
Is dit netjes? Of bagger bagger bagger code?
Zie hier hoe het eruit ziet.
Zolang je zeker weet dat het logo altijd 50px is en de container eromheen 100px is dit gewoon prima.quote:
Afbeelding verticaal centreren heb ik opgelost met margin-top:
[ code verwijderd ]
Is dit netjes? Of bagger bagger bagger code?
Zie hier hoe het eruit ziet.
| 1 2 3 | <div id="0003712" style="display:none;"> 0003712 </div> |
| 1 2 3 4 5 6 | @charset "utf-8"; /* CSS Document */ #0003712 { display:none; } |
je ID moet met een letter beginnen.
Vandaarquote:
http://www.w3.org/TR/html401/types.html#type-name
je ID moet met een letter beginnen.
.Snapte al niet waarom het niet werkte, bedankt.Heb een php pagina met daarin verschillende gegevens, opgebouwd met ong 5 blokken als onderstaande:
| 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 | echo " <a name='Aantallen_te_Matchen_Orders'></a> <b>Aantallen te Matchen Orders</b> Status van ".$datumvandaag." tijdstip ".$tijdnu." <a href='#Top'>Top</a> </div> <br> <table style='text-align: left; width: 644px;' border='1' cellspacing='2' cellpadding='2'> <tbody> <tr> <td style='vertical-align: top; background-color: rgb(255, 204, 153); text-align: center;'>Plangroep<br></td> <td style='vertical-align: top; background-color: rgb(255, 204, 153); text-align: center;'>Totaal<br></td> <td style='vertical-align: top; background-color: rgb(255, 204, 153); text-align: center;'>ap1<br></td> <td style='vertical-align: top; background-color: rgb(255, 204, 153); text-align: center;'>ap2<br></td> <td style='vertical-align: top; background-color: rgb(255, 204, 153); text-align: center;'>ap3<br></td> <td style='vertical-align: top; background-color: rgb(255, 204, 153); text-align: center;'>ap4<br></td> <td style='vertical-align: top; background-color: rgb(255, 204, 153); text-align: center;'>ap5<br></td> <td style='vertical-align: top; background-color: rgb(255, 204, 153); text-align: center;'>ap6<br></td> <td style='vertical-align: top; background-color: rgb(255, 204, 153); text-align: center;'>ap7<br></td> <td style='vertical-align: top; background-color: rgb(255, 204, 153); text-align: center;'>ap8<br></td> <td style='vertical-align: top; background-color: rgb(255, 204, 153); text-align: center;'>ap9<br></td> </tr> <tr> <td style='vertical-align: top; text-align: center;'>Aantal<br></td> "; AantalTeMatchen('lijst'); echo " </tr> </tbody> </table> <br> "; |
Nu moet er nieuwe pagina erbij komen die eigenlijk zorgt dat de verschillende blokken omstebeurten getoond worden. Dus eerst de uitkomst van blok 1, daarna blok 2, blok 3 etc.
Zag zoiets wel mbv javascript
| 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 | ar quote=new Array(); quote[0]='This is quote number one'; /* add as many quotes as you like!*/ quote[1]='This is quote number two'; quote[2]='This is quote number three'; quote[3]='This is quote number four'; quote[4]='This is quote number five'; quote[5]='This is quote number six'; quote[6]='This is quote number seven'; quote[7]='This is quote number eight'; quote[8]='This is quote number nine'; quote[9]='This is quote number ten'; var speed=2000; /*this is the time in milliseconds adjust to suit*/ var q=0; function showQuote() { document.getElementById("quotes").innerHTML=quote[q]; q++; if(q==quote.length) { q=0; } } setInterval('showQuote()',speed); //]]> </script> |
Maar hoe ik t van mij erin zal moeten verwerken.. ik heb geen idee
Jullie tips? of andere ideeen?Wat ik precies wil:
Ik wil dat de pagina zonder verversen elke 10 sec een ander van die 5 blokken laat zien.
Dus dat hij 10 sec table 1 laat zien, vervolgens 10 sec table 2 , tot en met table 5 en dan weer begint bij table 1.
Zoek gewoon even op een jQuery slider die naast afbeeldingen ook divjes kan sliden. Dan pleur je daar gewoon elk blok in?quote:
Oke, nieuw probleempje.
Heb een php pagina met daarin verschillende gegevens, opgebouwd met ong 5 blokken als onderstaande:
[ code verwijderd ]
Nu moet er nieuwe pagina erbij komen die eigenlijk zorgt dat de verschillende blokken omstebeurten getoond worden. Dus eerst de uitkomst van blok 1, daarna blok 2, blok 3 etc.
Zag zoiets wel mbv javascript
[ code verwijderd ]
Maar hoe ik t van mij erin zal moeten verwerken.. ik heb geen idee
Wat ik precies wil:
Ik wil dat de pagina zonder verversen elke 10 sec een ander van die 5 blokken laat zien.
Dus dat hij 10 sec table 1 laat zien, vervolgens 10 sec table 2 , tot en met table 5 en dan weer begint bij table 1.
Geeft dat geen problemen met de php functies die ik aanroep in die divjes?quote:
[..]
Zoek gewoon even op een jQuery slider die naast afbeeldingen ook divjes kan sliden. Dan pleur je daar gewoon elk blok in?
Graag je vragen voortaan in één topic stellenquote:
Oke, nieuw probleempje.
Heb een php pagina met daarin verschillende gegevens, opgebouwd met ong 5 blokken als onderstaande:
[ code verwijderd ]
Nu moet er nieuwe pagina erbij komen die eigenlijk zorgt dat de verschillende blokken omstebeurten getoond worden. Dus eerst de uitkomst van blok 1, daarna blok 2, blok 3 etc.
Zag zoiets wel mbv javascript
[ code verwijderd ]
Maar hoe ik t van mij erin zal moeten verwerken.. ik heb geen idee
Wat ik precies wil:
Ik wil dat de pagina zonder verversen elke 10 sec een ander van die 5 blokken laat zien.
Dus dat hij 10 sec table 1 laat zien, vervolgens 10 sec table 2 , tot en met table 5 en dan weer begint bij table 1.
. Nu heb je hem hier en in [Javascript] voor dummies (deel 12) staan, dat is niet de bedoeling .Dat was ik van plan, maar kon het topic eerst niet vinden, kreeg ik dus dat topic door..dus gepost.. kreeg ik daarna deze door ivm nieuwerquote:Op donderdag 22 december 2011 10:39 schreef Bart het volgende:
[..]
Graag je vragen voortaan in één topic stellen
quote:
[..]
Dat was ik van plan, maar kon het topic eerst niet vinden, kreeg ik dus dat topic door..dus gepost.. kreeg ik daarna deze door ivm nieuwer
Wat voor php functies wil je aanroepen? ik snap je niet? meeste sliders, hebben namelijk een heel uitgebreid keuze menu. de content is makkelijk met php in te laden om vervolgens als html toonbaar weer te geven. en dan doet de Jquery slider zijn werk.quote:
Geeft dat geen problemen met de php functies die ik aanroep in die divjes?
Hoe bedoel je dit? Een div is een element in de pagina die je de bezoeker voorschotelt. PHP draait op de server, waar het hele concept van een div niet bestaat.quote:
[..]
Geeft dat geen problemen met de php functies die ik aanroep in die divjes?
Daar heb je geen invloed op. Als Google een juiste indexatie ervan kan maken wil het dit automatisch doen. Heb nog nergens gelezen hoe je dit exact kunt forceren.quote:
Ik vroeg me af hoe je het volgende kunt realiseren en hoe het heet. Ik zou graag willen dat als mijn site gegoogled wordt het er als volgt uit komt te zien: (structuur)
[ link | afbeelding ]
Ik heb het al gevonden. Je kunt zelf 'sitelinks' degraderen (zoals zij het noemen) bij hulpprogamma's voor webmasters van google.quote:
[..]
Daar heb je geen invloed op. Als Google een juiste indexatie ervan kan maken wil het dit automatisch doen. Heb nog nergens gelezen hoe je dit exact kunt forceren.
Thanks voor het meedenken iig.
Klopt, maar dan moeten ze wel gegenereerd zijn. Zijn die sitelinks al zichtbaar als je googled op je website-naam?quote:
[..]
Ik heb het al gevonden. Je kunt zelf 'sitelinks' degraderen (zoals zij het noemen) bij hulpprogamma's voor webmasters van google.
Thanks voor het meedenken iig.
Anders zou je namelijk eerst wat aan linkbuilding moeten doen, zodat je site populairder wordt op die zoekterm.
Ja die zijn zichtbaar.quote:
[..]
Klopt, maar dan moeten ze wel gegenereerd zijn. Zijn die sitelinks al zichtbaar als je googled op je website-naam?
Anders zou je namelijk eerst wat aan linkbuilding moeten doen, zodat je site populairder wordt op die zoekterm.
Het ziet er alleen zo slordig uit allemaal onder elkaar.
Tja,hoe groter jouw website in beeld staat, hoe beter er op geklikt wordt is het idee. Jij kunt het wellicht niet mooi vinden, maar sitelinks bij andere websites zien er net zo uit, dus een bezoeker zal zich er niet aan storen.quote:
[..]
Ja die zijn zichtbaar.
Het ziet er alleen zo slordig uit allemaal onder elkaar.
De reden dat je sitelinks kan degraderen is dat je links die ongewenst verschijnen zo weg kan halen. Bij mijn site heb ik bijvoorbeeld de pagina naar de winkelwagen gedegradeerd omdat bezoekers er niks aan hebben om meteen naar de winkelwagen te gaan.
De enige manier die ik heb gevonden om een pagina te linken is met ?page=.
| 1 | <form action="index.php?page=test1" method="post"> |
hoe bedoel je dat?quote:
Hoe link je in CMSMS een pagina zonder dat de url voor de bezoeker verandert?
De enige manier die ik heb gevonden om een pagina te linken is met ?page=.
[ code verwijderd ]
Een form is geen link. Als je geen ?page= enzo in de url wilt, moet je pretty_urls aanzetten in je config.php file. Zie de PDF in de doc-map voor uitleg.
Dank. De form is een voorbeeld, mag ook gewoon een a href zijn. Heb twee uur gezocht voordat ik eindelijk ergens vandaan kon halen hoe je een pagina kan linkenquote:
[..]
hoe bedoel je dat?
Een form is geen link. Als je geen ?page= enzo in de url wilt, moet je pretty_urls aanzetten in je config.php file. Zie de PDF in de doc-map voor uitleg.
. Je praat echt in raadsels.Als <a href=""> typen je te moeilijk is kun je ook {cms_selflink page=""} gebruiken voor een automatisch gegenereerde URL. Of wat bedoel je nou?
-edit- De wysiwyg editor doet dat automatisch trouwens, als je een interne link maakt.
Ik had de hele website in HTML staan. Dus met <a href"#">. Maar nu ben ik bezig die html pagina's in CMSMS te zetten.quote:
Als <a href=""> typen je te moeilijk is kun je ook {cms_selflink page=""} gebruiken voor een automatisch gegenereerde URL. Of wat bedoel je nou?
Ja maar dat schiet niet op voor dit project, werk met vervolgpagina's. Elke pagina staan de knoppen op andere plekken.quote:
Je weet ook van het bestaan van de {menu} tag?
In IE 9 gaat de hover 1px teveel naar beneden.
In Firefox 8 is dat 2px.
Opera 11.60 en Chrome 16 zijn OK, maar van iemand anders hoor ik dat het bij hem ook fout gaat in Chrome.
Zo'n klein detail is misschien lastig om met www.browsershots.org te bekijken
Hoe kan ik dit fixen? Zijn er specifieke css codes of moet ik een aparte stylesheet maken voor de andere browsers? Of is het een bepaalde fout in de css die de ene browser negeert en de andere niet?
Wat betekent dat? Je vragen zijn soms echt onduidelijk.. plaats anders een plaatje ofzo waarin je precies aangeeft wat er gebeurt dat verkeerd is.quote:
Ik heb een hover probleempje op www.mirelmasic.nl bij het menu bovenaan.
In IE 9 gaat de hover 1px teveel naar beneden.
Ik zie in IE9 niks raars.
Je zat wel gelijk heel diep te kijken Plaatje:
Dat dus. Dat grijze. Dat gaat buiten het balkje. Het is lastig te zien maar let op de lichtgrijze stipjes van het patroon, dan zie je dat hij eroverheen gaat. Uitgezoomd op 100% valt het enigszins op en dat is stom.
Als je een overflow:hidden op de list items zet zou die overbodige hoogte gewoon verborgen moeten blijven.
Sowieso is het (zo goed als) nooit de goede oplossing om voor specifieke browsers nog andere stijlen of aanvullingen te gebruiken. Bijna altijd kan je dan beter de boel op een andere manier aanpakken waardoor het wel overal goed werkt.
En het echte probleem komt volgens mij door de line-height, maar ik snap (nog) niet helemaal waarom, blijkbaar is 36px line-height anders dan 36px height.
Net even gekeken en ik zie dat met javascript de fontgrootte aangepast kan worden, dus dan kan ik het menu mee laten gaan, moet nog even uitvogelen hoe het dan zit met de height van het menu
@media all and (min-width:800px) { …deze haakjes }
+ Zit alles in 1 css-bestand dus dat scheelt weer een load naar de server (geen js nodig).
+ Browsers die geen media-queries ondersteunen krijgen standaard de smalste versie.
+ Kan het ook gebruiken voor een mobiele versie zonder veel extra moeite.
Fontgrootte, hoogtes alles kan je aanpassen naar de resolutie
[ Bericht 24% gewijzigd door n8n op 31-12-2011 13:42:41 ]
edit; dat dus http://www.w3schools.com/css/css_mediatypes.asp
Dus het is zoiets?
| 1 2 3 4 5 6 7 8 9 | @media all and (min-width:800px) { .menu {font-size: xx;} } @media all and (min-width:1200px) { .menu {font-size: xx;} } |
Even samenvatten: In feite wil ik dus dat voor 800x600 de font-size van het menu bijvoorbeeld 10 pixels is dat de 3 menu items passen in de breedte. En bij 1024x768 mag dat groter zijn. Is die code op die manier goed? En het gewone .menu stukje dat niet binnen @media zit moet dus gefocused zijn op een standaard resolutie voor de mensen wiens browser dat niet kan lezen?
[ Bericht 22% gewijzigd door Mirel op 31-12-2011 14:19:35 ]
@media bedoel je?quote:
Omdat @media zo lastig googlet, kan je even linken naar een pagina daarover? Heb nog nooit gehoord over '@media'
W3Schools is niet de beste bron.
Ik heb geprobeerd om een een class te maken en deze te benoemen in de css maar hij pakt de css niet.
Wat ik heb gedaan is in de HTML: <p class="vorigepagina">Vorige pagina</p>
CSS:
.vorigepagina{color: #8f8f8f; font-family: Verdana, Geneva; font-size: 13px; font-weight: normal;text-decoration:none}
en toch pakt de css de opmaak voor deze link niet mee als ik de site test.
Een tweede vraag is die ik heb is dat de link altijd hetzelfde moet blijven als erop geklikt wordt, als er op geklikt is geweest etc. Dit heb ik opgelost door 'text-decoration:none' in de css te zetten, mijn vraag is of dat goed is.
Alvast bedankt!
Voor wat je tweede vraag, dit kun je doen met pseudo-selectors als :active, :hover, :visited en :focus. Bijvoorbeeld a.homepage:visited { blaat:blaat; }.
Hij blijft steken bij het loginscherm
.. dit gaat niet opschieten zo.
"Not Found
The requested URL was not found on this server."
geeft. Maar als ik op f5 druk krijg ik de pagina gewoon te zien.
Bug?
Er zitten verder geen fouten in de codes.
[ Bericht 3% gewijzigd door Crimyclown op 01-01-2012 21:33:19 ]
. Als ik de pagina een andere naam geef doet die het vaag genoeg wel.Dit is niet echt een html/css vraag.quote:
Euhm, heb een pagina in CMSMS wanneer ik deze doorlink de melding
"Not Found
The requested URL was not found on this server."
geeft. Maar als ik op f5 druk krijg ik de pagina gewoon te zien.
Bug?
Er zitten verder geen fouten in de codes.
Dat een andere, specifiekere css regel de jouwe overschrijft.quote:
Zou je misschien uit kunnen leggen wat het probleem kán zijn zodat ik er zelf achteraan kan gaan.
Stel je linkje zit in een div met een id (bijv id="navigatie") en je hebt deze css:
| 1 2 | #navigatie a { color: red; } .vorigepagina { color: blue; } |
Zou de link toch rood zijn, ookal staat .vorigepagina in de css pas na de andere regel. Een id gebruiken is namelijk specifieker dan alleen een class.
Althans, dat is wat PimD bedoelde met specificity. Zie hieronder voor meer mogelijke redenen
.Het probleem kan vanalles zijn, dat kunnen wij moeilijk ruiken. Om maar wat met hagel te schieten:quote:
Zou je misschien uit kunnen leggen wat het probleem kán zijn zodat ik er zelf achteraan kan gaan.
- je CSS wordt niet geladen
- specificity is te laag
- je maakt een typfout in een classname
- je CSS of HTML valideert niet
Het is iig allemaal vrij makkelijk te achterhalen als je even in de paginabron kijkt en/of firebug gebruikt.
Ik probeer een webpagina te maken met een lange verticale banner 3*3 vakjes en dan weer een banner.
Nu lukken die 9 vakjes wel, maar als ik er een banner links van wil, of rechts dan verneukt hij alles. Hoe kan ik dit het makkelijkst op lossen.
Als jullie een plaatje nodig hebben hoor ik het graag.
Dat is het antwoord op de vraag die ik denk dat je probeert te stellen.
[code]
<div id="links"></div>
<div id="midden">9 div classes achter elkaar met float left</div>
</div id="rechts"></div>
[/code]
Zoiets is het globaal, maar de rechter div begint pas bij de laatste div binnen het midden. Maar dat snap ik dus niet.
Ik denk dat ik het bijna heb.
Sorryquote:
[..]
Dit is niet echt een html/css vraag.
Floaten?quote:Op zondag 1 januari 2012 23:53 schreef DutchErrorist het volgende:
Nou ja dat probeer, maar op een of andere manier wil het niet lukken.
[ code verwijderd ]
Zoiets is het globaal, maar de rechter div begint pas bij de laatste div binnen het midden. Maar dat snap ik dus niet.
Ik denk dat ik het bijna heb.
Ik had verdomme ergens 700 px ipv 700px staan. Nou dat heb ik geweten. Nu is het allemaal goed.quote:
| 1 2 3 4 5 6 7 8 | <head> <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script> <script type="text/javascript" src="scripts/vallign.js"></script> <script type="text/javascript" src="scripts/js.js"></script> <script type="text/javascript" src="scripts/imageswap.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>FOK</title> </head> |
Hij heeft moeite om vallign.js te laden, soms gaat het wel goed maar soms ook niet. Dit document zorgt ervoor dat de tekst verticaal gecentreerd staat in de div tags.
vallign.js:
| 1 2 3 4 5 6 | $(document).ready(function() { var myHeight = $("#div1").height(); var parentHeight = $("#iets1").height(); var myMarginTop = (parentHeight - myHeight) / 2; $("#div1").css("margin-top", myMarginTop); }); |
De code werkt gewoon maar hoe zorg ik ervoor dat de html pagina's altijd vallign.js laden/uitvoeren.
En zou het kunnen komen doordat Jquery niet goed geladen is? Ik weet niet hoe betrouwbaar het is om dat uit een externe bron te laden...
Mag geen styling en scripting in het document zelf zetten.quote:
waarom zet je zo'n kort scriptje uberhaupt in een apart bestand?
En zou het kunnen komen doordat Jquery niet goed geladen is? Ik weet niet hoe betrouwbaar het is om dat uit een externe bron te laden...
Kan het wat uitmaken om alle js in 1 document te stoppen?
En ja, dat kan uitmaken: Wordt je website (over het algemeen) sneller van.
Opdracht voor school, zal eens proberen om alles in 1 document te stoppen. Dit is de eerste keer dat ik problemen heb met het laden van een externe js file.quote:
Hoezo niet?
En ja, dat kan uitmaken: Wordt je website (over het algemeen) sneller van.
| 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 | body { font-family: arial, helvetica, sans-serif; font-size: 12px; background: #f1f1f1; } #wrapper { width: 800px; margin: 0 auto; border-radius: 30px 30px 0px 0px; background: #e0e0e0; } #header { height: 20px; padding: 0px 20px; } #header .title { font-size: 30px; float: left; margin-top: 4px; } #header .search { float: right; margin-top: 8px; } #toolbox { float: right; background: #f0f0f0; padding: 5px; margin-left: 195px; position: relative; -webkit-transform: rotate(90deg); } #textbox a { text-decoration: none; } #textbox a:hover { text-decoration: none; } #article { background: #e9e9e9; padding: 3px 20px; margin: 20px 0px; } #footer { text-align: center; } |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <div id="wrapper"> <div id="header"> <div class="title"> Title </div> <div class="search"> <form name="articlesearch" method="post" action="/"> <input type="text" name="article" placeholder="Article..."> <input type="submit" value="Search"> </form> </div> </div> <div id="article"> <div id="text"> text </div> </div> <div id="footer"> © title </div> </div> |
Wat ik probeer te doen is een div aan de rechterkant van de #wrapper te zetten, zorgen dat de wrapper wel in het midden blijft, maar dat daar een soort van tab komt, waar de #toolbox komt te zitten, enig idee hoe ik dat kan doen?
Gelukkig heb ik geen firebug, maar thanks, ik ga m'n best doen.quote:
Ga eens met firebug langs een willekeurige skyscraper ad en je hebt je antwoord.
HTML'en/CSS'en/JS'en zonder Firebug (of andere webdevelopertoolkit) is echt een no-go. Moet je niet eens willen.quote:
[..]
Gelukkig heb ik geen firebug, maar thanks, ik ga m'n best doen.
Weet ik, daarom heb ik Element Inspecteren in Chrome.quote:
Absoluut ten opzichte van die middendiv positioneren dus.
[..]
HTML'en/CSS'en/JS'en zonder Firebug (of andere webdevelopertoolkit) is echt een no-go. Moet je niet eens willen.
Maar ff terug, ik heb nu dit:
| 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 | <div id="wrapper"> <div id="header"> <div class="title"> Title </div> <div class="search"> <form name="articlesearch" method="post" action="/"> <input type="text" name="article" placeholder="Article..."> <input type="submit" value="Search"> </form> </div> </div> <div id="toolbox"> <a href=""> [ edit ] </a> </div> <div id="article"> <div id="text"> text </div> </div> <div id="footer"> © title </div> </div> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | #toolbox { margin-top: 55px; margin-left: 767px; position: absolute; -webkit-transform: rotate(90deg); } #toolbox a { background: #e0e0e0; font-size: 20px; text-decoration: none; color: black; padding: 5px 20px; border-radius: 10px 10px 0px 0px; } #toolbox a:hover { background: #e9e9e9; } |
Als ik dan 1 linkje plaats, staat het perfect. Als ik een 2e linkje plaats daarintegen, shift ie van plek.
Hoe los ik dit op?
http://fok.dalando.nl/dev/quote:
Hoe bedoel je "shift ie van plek"? Maak anders even een testcase ofzo.
Met firebug etc kun je zelf rechts in de toolbox <a href="">[ link ]</a> toevoegen, and see what happens.
Ik kom iets beter in de buurt als ik de transform op de linkjes zelf zet...
Meld maar als je een oplossing hebt, ik weet het niet meer.quote:
hmmpf die transform gooit roet in het eten. Hoogtes en breedtes worden ineens aan alle kanten door elkaar gehaald. Aangenomen dat -moz-transform ongeveer het zelfde werkt.
Ik kom iets beter in de buurt als ik de transform op de linkjes zelf zet...
?quote:
transform de content eens ipv de container
Bottom left in dit geval omdat hoeveel links er ook bijkomen, dat punt altijd vaststaat. Top left kan ook.
De boel werd naar beneden gebumpt. Bij gewone grootte had ik een horizontaal balkje en ik deed doen overflow: hidden; op m'n body, en blijkbaar heeft het het bovenstaande probleem ook opgelost.
Slim of overflow: hidden; op de hele body te doen? Ik vind het wel prima
edit: overflow-x dus
[ Bericht 10% gewijzigd door Mirel op 03-01-2012 19:04:06 ]
ik heb zojuist deze 'tutorial' http://www.dynamicdrive.c(...)hover_image_gallery/ gevolgd om social media icons een leuk hover effect te geven, maar het hover effect werkt niet.
Ik heb het op deze pagina gezet; http://lucsenden.nl/index.html
Kan iemand mij helpen met wat ik fout doe?
Ik heb hiervoor al andere effecten geprobeerd maar ook daar werkte het hover effect niet dus ik doe vast iets fout.
Zelfde verhaal weer, alleen slim als je écht een hekel hebt aan mensen met kleine schermen en die zoveel mogelijk van je site wilt weren.quote:
Slim of overflow: hidden; op de hele body te doen? Ik vind het wel prima
edit: overflow-x dus
Echt, je moet het zelf weten, maar als je serieus publiek wilt bereiken met je website, zou ik me toch een beetje aan de normale toegankelijkheidseisen houden...
Overigens lijkt het op je screenshot dat die knopjes rechts de rest van je site naar beneden drukken... Geef ze horizontaal eens een pixel meer ruimte, dat voorkomt ditsoort problemen door (waarschijnlijk) afrondingsfouten...
Je link doet het niet. En ik zie uberhaupt geen social media icoontjes op je pagina.quote:
Hoi
ik heb zojuist deze 'tutorial' http://www.dynamicdrive.c(...)hover_image_gallery/ gevolgd om social media icons een leuk hover effect te geven, maar het hover effect werkt niet.
Ik heb het op deze pagina gezet; http://lucsenden.nl/index.html
Kan iemand mij helpen met wat ik fout doe?
Ik heb hiervoor al andere effecten geprobeerd maar ook daar werkte het hover effect niet dus ik doe vast iets fout.
http://www.dynamicdrive.c(...)hover_image_gallery/
Dit is de link.
Ja dat is dus gefixed door overflow-x op hidden te zetten (y op visible want opera pakte die niet uitzichzelfquote:
[..]
Zelfde verhaal weer, alleen slim als je écht een hekel hebt aan mensen met kleine schermen en die zoveel mogelijk van je site wilt weren.
Echt, je moet het zelf weten, maar als je serieus publiek wilt bereiken met je website, zou ik me toch een beetje aan de normale toegankelijkheidseisen houden...
Overigens lijkt het op je screenshot dat die knopjes rechts de rest van je site naar beneden drukken... Geef ze horizontaal eens een pixel meer ruimte, dat voorkomt ditsoort problemen door (waarschijnlijk) afrondingsfouten...
.Wat er nu gebeurt met kleine schermen in de breedte is dat de boel naar beneden gedrukt wordt, dus volgens mij heb ik het allemaal wel gefixed hoor. Alleen dat @Media met het menu nog.
Kijk maar
Hij doet het prima maar je kunt er niet over hoveren aangezien er andere elementen voorstaan.quote:
KomtTijd, er staat rechtsbovenaan op dit moment 1 youtube icoontje, omdat ik even aan het uitproberen was met dat effect. (Tegen contact aangeplakt, is ook niet de bedoeling maar ik wil eerst even dat dat effect werkt.)
http://www.dynamicdrive.c(...)hover_image_gallery/
Dit is de link.
Ga in hemelsnaam je HTML eens fatsoenlijk indenten, hier is niet mee te werken.
Dat het niet geindent is komt doordat ik net een CMS van de host heb uitgeprobeerd en die plakt het fijn allemaal achter elkaar.
Welke elementen staan er dan voor? Die van het menu?
Door overflow-x op hidden te zetten van je body, verwijder je de scrollbalk en is de hele rechterkant van je website dus onzichtbaar voor mensen met een kleiner scherm. In jouw geval betreft het dan dus alleen de menubalk aangezien de rest meestrecht. Maar dat lijkt me nou juist ongeveer het belangrijkste element van de pagina.quote:
[..]
Ja dat is dus gefixed door overflow-x op hidden te zetten (y op visible want opera pakte die niet uitzichzelf
Wat er nu gebeurt met kleine schermen in de breedte is dat de boel naar beneden gedrukt wordt, dus volgens mij heb ik het allemaal wel gefixed hoor. Alleen dat @Media met het menu nog.
Kijk maar
[ afbeelding ]
Wat reageer ik niet normaal dan?quote:
KomtTijd, ik stel een normale vraag, is wel zo sociaal als je daar ook normaal op reageert. -.-
Dat het niet geindent is komt doordat ik net een CMS van de host heb uitgeprobeerd en die plakt het fijn allemaal achter elkaar.
Welke elementen staan er dan voor? Die van het menu?
Het zijn inderdaad de elementen van het menu die ervoor staan, wat je direct gezien had als je firebug even gebruikt had.
WBT dat CMS nog een advies: Niet gebruiken
Als er ditsoort bagger uitkomt... Sowieso is het misschien makkelijker om eerst een statische pagina te maken en die later om te bouwen tot template.Niet helemaal waar, je kunt wel hoveren. Maar veel zin heeft het niet, want het is gewoon een plaatje. Bij een linkje heeft het meer effect.quote:
[..]
Hij doet het prima maar je kunt er niet over hoveren aangezien er andere elementen voorstaan.
Ja maar daar ben ik ook nog mee bezig, dat zei ik ook in een van de vorige postsquote:
[..]
Door overflow-x op hidden te zetten van je body, verwijder je de scrollbalk en is de hele rechterkant van je website dus onzichtbaar voor mensen met een kleiner scherm. In jouw geval betreft het dan dus alleen de menubalk aangezien de rest meestrecht. Maar dat lijkt me nou juist ongeveer het belangrijkste element van de pagina.
Hij heeft de hover keurig op de img, dus dat maakt niet uit. je kunt er nog niet op klikken, maar een linkje eromheen zetten is natuurlijk een fluitje van een cent.quote:
[..]
Niet helemaal waar, je kunt wel hoveren. Maar veel zin heeft het niet, want het is gewoon een plaatje. Bij een linkje heeft het meer effect.
Ik ga eens even uitzoeken wat firebug is x')
https://addons.mozilla.org/nl/firefox/addon/firebug/quote:
Nou ik had de CMS van one.com nog nooit gezien dus ik wilde gewoon even kijken of het wat was, maar niet bepaald dus. :s
Ik ga eens even uitzoeken wat firebug is x')
danwel
http://code.google.com/chrome/devtools/
quote:
[..]
Ja maar daar ben ik ook nog mee bezig, dat zei ik ook in een van de vorige posts
Ah, ik had die img:hover gemist. Die werkt idd wel (als ik de main content div weggooi).quote:
[..]
Hij heeft de hover keurig op de img, dus dat maakt niet uit. je kunt er nog niet op klikken, maar een linkje eromheen zetten is natuurlijk een fluitje van een cent.
Ik heb een klein probleempje op deze pagina,
| 1 2 3 4 5 6 | .regel {clear:both; background-color:blue;} .label {text-align: right; padding:0 20 0 0 px; width:25%;float:left; background-color:green; } .content {text-align: left; background-color:yellow; position: relative; } |
En dit is de HTML
| 1 2 3 4 5 | <div class="regel"><div class="label">1997 - 2001</div><div="content">Larenstein (Hogeschool), Velp (Paesi Bassi) <br /> Tecnologia degli alimenti (Management della qualità)<br /> (llivello bachelor, ISCED 5)</div></div> |
En in quirksmode werken is ook nooit een goed idee.
.| 1 2 3 4 5 6 7 8 9 | <style type="text/css"> .regel {clear:both; padding:5px; } .label {text-align: right; width:30% ;float:left; background-color:green; } .content {text-align: left; padding-left:30px; background-color:yellow; margin-left:30%; } </style> |
Je moet ook even de overflow hidden van je P weghalen (staat in je reset) want ik krijg scrollbalken op elke P.
Zou je trouwens niet eens wat scripts en stylesheets samenvoegen? En bijvoorbeeld gewoon één JS library gebruiken in plaats van 3? Je head is letterlijk langer dan je body.
), kwam ik dit regeltje tegen in widget74.css:| 1 2 3 | .addthis_default_style .at300b, .addthis_default_style .at300bo, .addthis_default_style .at300m { padding: 0 2px; } |
Ik heb het idee dat hij gewoon wat zooi bijelkaar raapt en dat samenvoegt.
jQuery en mootools samen gebruiken is al vragen om issues. Ik zie dat je mootools gebruikt voor slimbox, kijk eens naar fancybox/fancyapps (zo heet het nu geloof ik).
) Ik heb dat hele regeltje gekopieerd en padding op 0 geforceerd. Ik kon het niet neerzetten in de gewone .addthis, neeeee het moest in die ellenlange naam
Maar dat van overflow-x op hidden en y op visible hadi k dus in mijn body, want als ik dat weghaal heb ik dit: www.mirelmasic.nl met scrollbalkje. Ik probeerde het te overriden in p{ maar dat werkte niet. Wist niet dat ik dat probleem had
Slimbox testte ik voor nextgen gallery maar vind het lelijk, dus gebruik het niet. Zal het even verwijderen.quote:
Ik heb alleen een normalize.css.
Ik heb het idee dat hij gewoon wat zooi bijelkaar raapt en dat samenvoegt.
jQuery en mootools samen gebruiken is al vragen om issues. Ik zie dat je mootools gebruikt voor slimbox, kijk eens naar fancybox/fancyapps (zo heet het nu geloof ik).
normalize.css van wat? En wat raap ik bij elkaar? Alle crap die erin zit is van het theme zelf. Langzaam maar zeker zit ik steeds meer crap eruit te slopen.quote:
Ik heb alleen een normalize.css.
Ik heb het idee dat hij gewoon wat zooi bijelkaar raapt en dat samenvoegt.
jQuery en mootools samen gebruiken is al vragen om issues. Ik zie dat je mootools gebruikt voor slimbox, kijk eens naar fancybox/fancyapps (zo heet het nu geloof ik).
Doet eigenlijk wat een reset zou moeten doen, maar reset stylesheets zijn vaak wat log. Ik raad je overigens niet aan om de huidige structuur al te veel om te gooien, gaat je problemen opleveren.quote:normalize.css ‘normaliseert’ je css-code. Websitebouwers gebruiken eigenlijk gewoon voor elke website een reset.css-document. normalize.css gaat nog een stapje verder.
Het is een aanpasbaar CSS-document – zijn ze dat niet allemaal… – dat ervoor zorgt dat browsers alle elementen consistent renderen. De css-code voldoet aan de huidige standaarden. Het document houdt rekening met de eigenaardige trekjes van ongewenste browsers.
Hoe werkt normalize.css:
Verwijdert geen nuttige standaardinstellingen
corrigeert bugs en algemene browserinconsequenties
rgemakkelijkt het gebruik van css
geeft ook nog eens uitleg bij wat de gebruikte css-code precies doet
Ik heb een ander verzoekje. Ik wil graag deze website ook op m'n portfolio zetten: http://1586563.huweb.nl Het was van een conceptopdracht waar we hard aan hebben gewerkt en ik vind het jammer dat 'ie ergens tijdens het eraan werken kapot ging. In IE is de hele layout enorm naar de klote.
Misschien een hoog verzoekje, maar kan iemand kijken wat de fout is, of waar de fout kán liggen?
[ Bericht 13% gewijzigd door Mirel op 05-01-2012 01:01:56 ]
so much for:quote:
Oh dat van de p is opgelost. Helemaal bovenaan in de css staat body gegroepeerd met heel veel dingen. En op al die dingen stond die overflow dus ingesteld. Gefixed door p daar uit te halen
quote:rgemakkelijkt het gebruik van css
_!Ik heb daar nooit eerder van gehoord en momenteel heb ik geen zin om daar nu naar te kijkenquote:
(Ik ben een zij trouwens..)
Ik zit nu met het volgende probleem, namelijk de contactpagina.
Ik heb een leuk formulier gebruitkt dat al bij de template zat maar ik heb echt geen idee hoe ik het moet laten functioneren.. Je kan alles invullen etc maar wanneer ik op versturen klik gebeurd er niks.
Ik gok zo dat ik dan iets in een javascript bestand moet veranderen? of de css misschien.. Ik moet ergens het email adres opgeven waar het heen moet..
Dit is de website; http://www.lucsenden.nl/contact.html
dat tweede ging over een normalize css niet over een resetquote:
Het hele zooitje staat in een ul id...
Ga je eerst eens inlezen over forms dan.quote:
Nee.. dat stond ook niet in de template namelijk.
Het hele zooitje staat in een ul id...
Een 'mailform' opent dat een nieuwe mail met tekst erin, of kan dat ook direct vanaf de site mailtjes versturen? Want dat is wat ik wil..
Dan weet ik of ik naar het goede zoek
Je hebt als form action (de actie die wordt uitgevoerd als je op submit klikt) nu "mailto:" dat betekent inderdaad dat hij gewoon het standaard mailprogramma van de gebruiker opent. Wat je moet doen is je action linken naar een PHP script die de mailafhandeling doet.quote:
Pff, kom er echt niet uit. Heb ik een kant en klaar formulier genomen, opent hij gewoon een nieuwe mail met wat tekst erin.. Dat is niet de bedoeling.
Een 'mailform' opent dat een nieuwe mail met tekst erin, of kan dat ook direct vanaf de site mailtjes versturen? Want dat is wat ik wil..
Dan weet ik of ik naar het goede zoek
Dan ga ik weer even googlen.
Dussss, ik heb nu op http://www.lucsenden.nl/contact.php een form staan.
Alleen ik snap niet hoe ik het email adres op moet geven waar het heen gestuurd moet worden.
Ik dacht dus bij 'mail' maar dat is het niet want dat krijg ik de melding dat het fout is gegaan.
quote:
Ik bedacht me net dat ik het pas op school over PHP mail forms heb gehad -.-
Dussss, ik heb nu op http://www.lucsenden.nl/contact.php een form staan.
Alleen ik snap niet hoe ik het email adres op moet geven waar het heen gestuurd moet worden.
Ik dacht dus bij 'mail' maar dat is het niet want dat krijg ik de melding dat het fout is gegaan.
Je hebt serieus een les over PHP mail forms gehad, en je krijgt het nieteens voor elkaar een e-mail adres in te vullen? Of uberhaupt <form> tags om je formulier te zeten???? Wat heb je daar in hemelsnaam zitten doen dan? Ik krijg hier een beetje het gevoel dat we je huiswerk zitten maken met al deze ultieme beginnersvragen... Ga eerst maar eens zelf wat uitzoeken.quote:
Ik heb een ander verzoekje. Ik wil graag deze website ook op m'n portfolio zetten: http://1586563.huweb.nl Het was van een conceptopdracht waar we hard aan hebben gewerkt en ik vind het jammer dat 'ie ergens tijdens het eraan werken kapot ging. In IE is de hele layout enorm naar de klote.
Misschien een hoog verzoekje, maar kan iemand kijken wat de fout is, of waar de fout kán liggen?
Enneuh, niet om het één of ander, maar dat menu is ook compleet ontoegankelijk op minder grote schermen.
Spijker op z'n kop, waarde KomtTijd...quote:
Was het niet dat IE in quirksmode ging als het doctype niet op de eerste regel staat? (heb zelf geen IE dus kan het niet testen, maar misschien ook wel handig om te vermelden welke versie het mis gaat)
Enneuh, niet om het één of ander, maar dat menu is ook compleet ontoegankelijk op minder grote schermen.
| 1 | <!DOCTYPE html> |
Of een van de overige: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Maar who cares, ik gebruik gewoon altijd HTML5
.Ik vraag me sowieso af waarom we vroeger altijd met die moeilijke HTML4-doctypes liepen te kutten, als het ook gewoon zo kan.quote:Op donderdag 5 januari 2012 11:27 schreef picodealion het volgende:
[..]
Maar who cares, ik gebruik gewoon altijd HTML5
| 1 2 | <!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"> |
Ja ach. Dit was 6 maanden terug voor een schoolopdracht gemaakt. Ik wil alleen even het menu fixen voor IEquote:
Enneuh, niet om het één of ander, maar dat menu is ook compleet ontoegankelijk op minder grote schermen.
eh nee, op regel 6 en 7 om precies te zijn.quote:
Dit staat er gewoon op de 1e en 2e regel
[ code verwijderd ]
-edit- oh je hebt er inmiddels de html5 doctype ingezet.
Je mist nu wel je <html> opentag.
Zo issie gewoon:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!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 profile="http://gmpg.org/xfn/11"> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_get_archives('type=monthly&format=link'); ?> <?php //comments_popup_script(); // off by default ?> <?php wp_head(); ?> </head> <body> |
Ik weet niet hoe je html daar geoutput wordt maar het staat nog steeds pas op de 6e regel. De eerste 5 regels van je html zijn gewoon blanco. Daar gaat het mis.quote:
Ik dacht altijd dat het een css fout was. Maar ik heb iets van 12 van die doctypes van de pagina geprobeerd, en het werkt niet. Ik weet niet meer wanneer deze fout optradt maar de doctype hadden we vanaf het begin al.
Zo issie gewoon:
[ code verwijderd ]
OH, ik weet nog ooit dat er iets was met vage javascript die begon voor de html. Ik weet niet meer hoe ik die javascript eruit had geflikkerd maar dit is er dus nog.
-edit- sluit wel aan bij dat verhaal ja.
Maar thanks, nu weet ik waar ik naar moet zoeken
edit! gevonden: http://feed2.w3.org/docs/error/WPBlankLine.html
ik had lege regels in functions.php. Ik denk dat ik die ook nog zelf daar heb neergezet omdat het makkelijker te lezen was
[ Bericht 17% gewijzigd door Mirel op 05-01-2012 13:15:13 ]
Wat is nu het echte probleem dat op m'n front page bij lagere resoluties (momenteel nu in IE en Chrome) de boel naar beneden wordt gebumpt? Dat gekut met de reset wat ik een paar posts terug nog deed, doe ik nu niet meer, heb de reset gereset naar z'n origineel
heb body ook apart waar de overflow-x hidden en y visible regels in zitten, en het werkt voor firefox en opera.Chrome en IE duwen nog steeds de boel naar beneden.. Ik denk dat als dit opgelost is, ik echt klaar ben qua layout met de site
Nogal wiedes, die knoppen rechts heeft een vaste breedte, terwijl 3% van bijv. 800 pixels heul anders is dan 3% van 1200 pixels. Margin-right gebruiken is de oplossing.quote:
Maar dat 96% werkt ook tot een bepaalde breedte. Ik moet iets vinden wat op elke breedte werkt. Tot aan de grote foto toe. Ik zie in Opera en Firefox dat het sorteermenutje gewoon over die andere div's heen komt. Dus misschien met z-index iets?
Boven de content van datzelfde element? Nee.quote:
Kan je met CSS een background-image boven de content krijgen?
| 1 2 3 4 | .sort{ position: absolute; right: 0px; } |
Ook de fontgrootte aangepast van het menu enzo.
Hier een link: http://dahndesigns.net/theme.png
[ Bericht 42% gewijzigd door Mirel op 08-01-2012 00:13:48 ]