Ah, da's wel een leuk voorbeeld van hoe het niet moetquote:Op dinsdag 28 februari 2012 23:48 schreef Scorpie het volgende:
[..]
Was een bekende casus bij ons van een bedrijf dat zijn hele website in de company colors had laten doen (groen), en mooie rode waarschuwingen bij validatiefoutjes. Totdat bleek dat hun bezoekers voor 96% uit mannen bestond, en 8% van alle mannen kleurenblind zijn, en ze dus gewoon de helft van de website niet zagen
dan heb je de vaste elementen een plek gegeven en dan?quote:Op dinsdag 28 februari 2012 23:40 schreef Light het volgende:
[..]
Menu's staan bovenin of links (of rechts, als je een taal hebt die van rechts naar links wordt gelezen). Ook afhankelijk van de site.
Maar ook daar zijn conventies voor die je dient te volgen. Het is niet zo dat je dat op gevoel een beetje fixed toch? Tenminste, ik nietquote:Op woensdag 29 februari 2012 08:35 schreef Catch22- het volgende:
[..]
dan heb je de vaste elementen een plek gegeven en dan?
als ik met interaction design bezig ben gaat t om de inhoud (ik doe hoofdzakelijk applicaties). dus hoe structureer ik overzichten, zoek- of invulformulieren, gegevens, hoe richt ik een dashboard in etc
Nee, helaas. Wel 456785646 Forrst invitesquote:Op dinsdag 28 februari 2012 23:50 schreef Neraice het volgende:
Niemand hier heeft zeker Dribbble invites?
Je kan een eind komen, alleen IE (8 en lager) gaat dwarsliggen.quote:Op woensdag 29 februari 2012 10:39 schreef Scorpie het volgende:
Pffffffff, jQuery is stiekem soms best wel frustrerend. Smooth scrolling is geen smooth scrolling, dat effect heb je bijna alleen maar met Flash
Niet echt. Check dit voorbeeld qua scrolling:quote:Op woensdag 29 februari 2012 10:48 schreef Catch22- het volgende:
[..]
Je kan een eind komen, alleen IE (8 en lager) gaat dwarsliggen.
Ik gebruik voor dat soort dingen CSS transform + transition, met jQuery als fallback. Dan hebben de meeste users een soepele scroll, zonder Flash.quote:Op woensdag 29 februari 2012 10:39 schreef Scorpie het volgende:
Pffffffff, jQuery is stiekem soms best wel frustrerend. Smooth scrolling is geen smooth scrolling, dat effect heb je bijna alleen maar met Flash
Die eerste loopt in IE9, Chrome en FF goed hier. In IE8 doet hij niets.quote:Op woensdag 29 februari 2012 11:11 schreef Scorpie het volgende:
[..]
Niet echt. Check dit voorbeeld qua scrolling:
http://www.smoothdivscroll.com/v1-2.htm
Tegenover deze:
http://www.flabell.com/flash/Continuous-Image-Slider-283
Let op de blokkerigheid van de animatie van de 1e link, terwijl dit bij de 2e link niet gebeurt.
Elke image scroller in jQuery of ander JS framework heeft er last van....wel ven in Chrome/FF doen, IE werkt het weer perfect
Thanks, heb er nog niet zo heel veel ervaring mee maar ga er eens induikenquote:Op woensdag 29 februari 2012 11:14 schreef Tijn het volgende:
[..]
Ik gebruik voor dat soort dingen CSS transform + transition, met jQuery als fallback. Dan hebben de meeste users een soepele scroll, zonder Flash.
Hier loopt hij in IE9 goed, Chrome en FF blokkerig (af en toe vertraagt de animatie, om daarna weer verder te lopen). Je hebt wel autoscroll geklikt?quote:Op woensdag 29 februari 2012 11:18 schreef Catch22- het volgende:
[..]
Die eerste loopt in IE9, Chrome en FF goed hier. In IE8 doet hij niets.
Oh ik besef nu ook ineens dat ik het wss niet direct in html kan zetten maar alleen in css.. klopt dat?quote:Op woensdag 29 februari 2012 14:48 schreef Neraice het volgende:
Probeer eens z-index:1; bij de andere?
Z-index werkt volgens mij alleen als de position ook gedefinieerd is.
Ah.. dat werkt idd, alleen is het netjes centreren in de sidebar dan wel gelijk foetsiequote:Op woensdag 29 februari 2012 14:48 schreef Catch22- het volgende:
je hebt ze geen position:absolute gegeven
Dan krijg ik wel een gigantisch hoeveelheid CSS codes als ik bekijk hoeveel elementen wel niet even een 'style="margin-left:-3px" e.d. hebben.. Zeker bij het typen van een nieuw blogje niet ideaal als ik daarvoor elke keer mijn css bestand weer opnieuw moet uploaden.quote:Op woensdag 29 februari 2012 14:50 schreef Neraice het volgende:
Je kan sowieso beter al je styles in een CSS file doen.
daar heb je een class voorquote:Op woensdag 29 februari 2012 14:52 schreef Maartel het volgende:
[..]
Dan krijg ik wel een gigantisch hoeveelheid CSS codes als ik bekijk hoeveel elementen wel niet even een 'style="margin-left:-3px" e.d. hebben.. Zeker bij het typen van een nieuw blogje niet ideaal als ik daarvoor elke keer mijn css bestand weer opnieuw moet uploaden.
left: 50% en margin-left: - de helft van de breedte.quote:Op woensdag 29 februari 2012 14:51 schreef Maartel het volgende:
[..]
Ah.. dat werkt idd, alleen is het netjes centreren in de sidebar dan wel gelijk foetsie
Ff zien hoe ik dat dan weer oplos.
uhm, want?quote:Op woensdag 29 februari 2012 15:10 schreef n8n het volgende:
CSS 3 is best nice in de zin dat je min of meer geen classes meer nodig hebt
Dat en meer manieren om een element te selecteren, bijv. “header > h1” etc.quote:Op woensdag 29 februari 2012 15:10 schreef Catch22- het volgende:
[..]
uhm, want?
omdat je specifiekere tags hebt style je doe, bedoel je dat?
...Dat kan al jaren?quote:Op woensdag 29 februari 2012 15:11 schreef n8n het volgende:
[..]
Dat en meer manieren om een element te selecteren, bijv. “header > h1” etc.
http://www.css3.info/selectors-test/
Support is waar, leesbaarheid is even wennen. Voordeel vind ik zelf dat zonder classes content en opmaak geheel gescheiden kunnen worden daar een ID semantische waarde heeft en een class niet.quote:Op woensdag 29 februari 2012 15:15 schreef Catch22- het volgende:
Ja zo, dat klopt. Weet niet of ik dat zelf wel zo snel zal gebruiken, gezien de support en de leesbaarheid is ook wat minder, maar dat laatste zal gewenning zijn.
Dacht dat IE nalatig was met de ondersteuning, weet iemand die handige site waar de hele css-specificatie per browser op te zoeken is in een tabel?quote:Op woensdag 29 februari 2012 15:16 schreef KomtTijd... het volgende:
[..]
...Dat kan al jaren?
header h1 is ieder <h1> element dat genest is in een <header> element, header > h1 is een <h1> element dat als directe parent een <header> element heeft.
Alleen <header> als element is nieuw.
Dat is ondertussen dus niet meer zo..quote:Op woensdag 29 februari 2012 15:18 schreef n8n het volgende:
Dat tragere is wel iets om uit te zoeken, weet alleen dat * de boel flink kan vertragen.
zie je maar hoe snel informatie achterhaald kan zijn, laatste keer dat ik er op zocht was enkel Opera sneller met een * ipv alle elementen los te resetten.quote:Op woensdag 29 februari 2012 15:22 schreef QM84 het volgende:
[..]
Dat is ondertussen dus niet meer zo..
met lange bedoel je het aantal karakters?quote:Op woensdag 29 februari 2012 15:28 schreef KomtTijd... het volgende:
* is sowieso een overbodige selector, heb ik nog nooit nodig gehad.
> gebruikte ik al bij mijn allereerste website in 2006 ofzo, al wist ik toen nog niet echt wat precies het nut was.
En Yslow waarschuwt wel nog steeds voor te lange CSS selectors. Daar ga ik dus maar van uit
Dat deed t m niet helemaal aangezien ie met absolute volledig buiten de sidebar kwam te staan :squote:Op woensdag 29 februari 2012 15:08 schreef QM84 het volgende:
Daarvoor zijn er styleguides uitgevonden.. Standaarden binnen je design..
Met classes en ID's kan je dat prima afvangen, dat je dezelfde elementen op dezelfde manier styled.
[..]
left: 50% en margin-left: - de helft van de breedte.
Die kende ik nog niet. Fucking briljant!quote:Op woensdag 29 februari 2012 15:30 schreef QM84 het volgende:
* {box-sizing: border-box} wordt steeds populairder tegenwoordig.. Ik gebruik het ook steeds vaker voor projecten..
Nee, 't gaat om het aantal selectors wat je gebruikt.quote:Op woensdag 29 februari 2012 15:31 schreef n8n het volgende:
[..]
met lange bedoel je het aantal karakters?
dan is het in mijn geval body > header h1 vs. header#top h1
Centreren doe je met margin: 0 auto, niet met negatieve margins en positions en gedoe.quote:Op woensdag 29 februari 2012 15:36 schreef Maartel het volgende:
[..]
Dat deed t m niet helemaal aangezien ie met absolute volledig buiten de sidebar kwam te staan :s
Oh, t was bij mij middels text-align:centerquote:Op woensdag 29 februari 2012 15:39 schreef KomtTijd... het volgende:
[..]
Centreren doe je met margin: 0 auto, niet met negatieve margins en positions en gedoe.
text-align is iets anders als (block-level) elementen centreren.quote:Op woensdag 29 februari 2012 15:43 schreef Maartel het volgende:
[..]
Oh, t was bij mij middels text-align:center
Ah oke.. desalniettemin raar dat ie zich buiten de breedte van de sitebar bevindt.. Maakt het verplaatsen naar een ander level dat ie niet meer 'luistert' naar de div waarin ie zich bevindt?quote:Op woensdag 29 februari 2012 15:44 schreef KomtTijd... het volgende:
[..]
text-align is iets anders als (block-level) elementen centreren.
Ik begrijp het, had naar aanleiding van het vorige bericht alle 'section#' en 'header#'s al door '#' vervangen. Dat laatste vind ik inderdaad kul en dat is toch niet merkbaar, bovendien zorgen nodeloos veel ID's in de html ook voor vertraging.quote:Op woensdag 29 februari 2012 15:37 schreef KomtTijd... het volgende:
[..]
Die kende ik nog niet. Fucking briljant!
[..]
Nee, 't gaat om het aantal selectors wat je gebruikt.
header#top is sowieso overbodig, aangezien een id maar één keer voor mag komen kun je ook gewoon #top schrijven, wat dan sneller is. CSS-wise zou het snelste zijn om het <h1> element een id mee te geven, en alleen op dat id te selecteren. Maar dat geeft in je HTML weer een hoop onzin, dus je moet een beetje een compromis zoeken.
Oke.. ik zal het even proberen te isoleren.quote:Op woensdag 29 februari 2012 19:50 schreef KomtTijd... het volgende:
Nee, de pagina waar je je probleem geisoleerd hebt zonder alle poespas eromheen.
Ik snap nieteens waar je het over hebt. "een rand", ik zie 6 miljoen randen (Húúúúúú) op die website.. waar gaat het in hemelsnaam over?
Eromheen? die staat toch rechtsonder in de hoek? Geen widescreen?quote:Op woensdag 29 februari 2012 19:53 schreef KomtTijd... het volgende:
En wat is dan precies het verschil?
Behalve dat die blonde dame eroverheen komt staan in de live versie?
Oh, ik had alleen de html aangepast.. momentje..quote:Op woensdag 29 februari 2012 19:57 schreef KomtTijd... het volgende:
Een css van 1174 regels noem ik geen testcase.
CSS is nu ingekort. En nee, wat ik dan ook aan doen mag zijn doe ik niet 'bewust'.quote:Op woensdag 29 februari 2012 19:58 schreef KomtTijd... het volgende:
Je HTML slaat ook nergens op. Zit je nou bewust in quirksmode te werken?
En wtf is al die inline style?
Vind je het gek dat je niets voor elkaar krijgt als je nieteens weet hoe de basis van je eigen werk in elkaar zit?
Zolang dat het geval is kunnen we je hier in ieder geval niet helpen.quote:Op woensdag 29 februari 2012 20:03 schreef Maartel het volgende:
[..]
En nee, wat ik dan ook aan doen mag zijn doe ik niet 'bewust'.
1 2 3 4 5 6 7 | body{ background: #ffffff url(http://i387.photobucket.com/albums/oo315/Maartel/bgsite.jpg) repeat top center ; color:#000; font-size:12px; font-family: "Arial", "Lucida Sans", "Lucida Sans Unicode", Geneva, Verdana, sans-serif ; <style> } |
Wat hij zegt.quote:
1 | <div id="map_canvas" style="width:100%; height:500px"></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 | <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" data-src="http://maps.google.com/maps/api/js?sensor=false" style="visibility:hidden;"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(52.1025780, 5.0978729); var settings = { zoom: 15, center: latlng, mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), settings); var companyPos = new google.maps.LatLng(52.1025780, 5.0978729); var companyLogo = new google.maps.MarkerImage('http://www.filmdepartment.nl/v2/wp-content/themes/filmdept/images/googlemaps/logo.png', new google.maps.Size(100,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var companyShadow = new google.maps.MarkerImage('http://www.filmdepartment.nl/v2/wp-content/themes/filmdept/images/googlemaps/logo_shadow.png', new google.maps.Size(130,50), new google.maps.Point(0,0), new google.maps.Point(65, 50) ); var companyPos = new google.maps.LatLng(52.1025780, 5.0978729); var companyMarker = new google.maps.Marker({ position: companyPos, map: map, icon: companyLogo, shadow: companyShadow, title:"Filmdepartment" }); } </script> |
waar komt dit overigens vandaan?quote:
1 | <body <?php body_class(); ?> onload="initialize()"> |
1 | $(document).ready(function() { initialize(); }); |
1 2 3 | function initialize() { //blablab } |
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 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title> <?php /* * Print the <title> tag based on what is being viewed. */ global $page, $paged; wp_title( '|', true, 'right' ); // Add the blog name. bloginfo( 'name' ); // Add the blog description for the home/front page. $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; ?> </title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <?php /* We add some JavaScript to pages with the comment form * to support sites with threaded comments (when in use). */ if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); /* Always have wp_head() just before the closing </head> * tag of your theme, or you will break many plugins, which * generally use this hook to add elements to <head> such * as styles, scripts, and meta tags. */ wp_head(); ?> <?php $google_bodyfont=get_option('google_bodyfont')? get_option('google_bodyfont'):'Ubuntu Condensed'; $google_generaltitlefont=get_option('google_generaltitlefont')? get_option('google_generaltitlefont'):'Ubuntu Condensed'; $gbodyfont = str_replace( ' ', '+', $google_bodyfont); $generaltitlefont = str_replace( ' ', '+', $google_generaltitlefont); ?> <?php if( get_option('kaya_typhography')=="false") { ?> <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'/> <?php }else{ ?> <?php if($google_bodyfont !="") { ?> <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=<?php echo $gbodyfont; ?>'> <?php } ?> <?php if($generaltitlefont !="") { ?> <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=<?php echo $generaltitlefont; ?>'> <?php } ?> <?php } ?> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" data-src="http://maps.google.com/maps/api/js?sensor=false" style="visibility:hidden;"></script> <script type="text/javascript"> $(document).ready(function() { initialize(); }) function initialize() { var latlng = new google.maps.LatLng(52.1025780, 5.0978729); var settings = { zoom: 15, center: latlng, mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), settings); var companyPos = new google.maps.LatLng(52.1025780, 5.0978729); var companyLogo = new google.maps.MarkerImage('http://www.filmdepartment.nl/v2/wp-content/themes/filmdept/images/googlemaps/logo.png', new google.maps.Size(100,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var companyShadow = new google.maps.MarkerImage('http://www.filmdepartment.nl/v2/wp-content/themes/filmdept/images/googlemaps/logo_shadow.png', new google.maps.Size(130,50), new google.maps.Point(0,0), new google.maps.Point(65, 50) ); var companyPos = new google.maps.LatLng(52.1025780, 5.0978729); var companyMarker = new google.maps.Marker({ position: companyPos, map: map, icon: companyLogo, shadow: companyShadow, title:"Filmdepartment" }); } </script> </head> <body <?php body_class(); ?> onload="initialize()"> <!-- Start demobar --> <?php //get_template_part('demo/demo'); ?> <!-- Start Demobar --> <?php if(get_option('topToggleBoxDisable')!="true") { ?> <?php get_template_part('lib/includes/top_toggle_section'); ?> <?php } ?> <?php // Get $post if you're inside a function global $post; if ( is_home() and get_option('sliderdisable') != 'true'){ echo "<div id='header_wrapper'>"; echo "<div id='header'>"; } else { echo "<div id='inner_header_wrapper'>"; echo "<div id='inner_header'>"; } ?> <!--Start header_wrapper --> <div id="logo"> <?php $logo=get_option('logo'); ?> <?php if($logo) { ?> <a href="<?php echo home_url(); ?> "> <img src="<?php echo $logo; ?>" alt="<?php the_title(); ?>" /> </a> <?php }else{ ?> <a href="<?php echo home_url(); ?> "> <img src="<?php echo get_template_directory_uri()?>/images/logo.png" alt="<?php the_title(); ?>" /> </a> <?php } ?> </div> <?php wp_nav_menu( array( 'container_class' =>'jqueryslidemenu','container_id' => 'myslidemenu','menu_class' =>'jqueryslidemenu','menu_id'=> '' ) ); ?> <div class="clear"></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 | <?php $footercolumn=get_option('footercolumn'); echo '<div id="panel_widget">'; echo '<div id="panel_wrapper">'; { $last = ($fc == $footercolumn and $footercolumn != 1) ? 'last' : ''; ?> <div id="map_canvas" style="width:100%; height:500px"></div> <?php } echo '</div>'; echo '</div>'; ?> <!-- The tab on top --> <div class="tab"> <ul class="login"> <li id="toggle"> <a id="open" class="open" href="#"></a> <a id="close" style="display: none;" class="close" href="#"></a> </li> </ul> </div> </div> |
Fair enough, al heeft naar mijn inzien mijn vraag over of het mogelijk is een dergelijke rand met css3 te maken totaal niets van doen met wat voor een andere css/html ik wel of niet op de pagina ga gebruiken. Dat is een beetje 'zolang jij geen vloeiend spaans spreekt ga ik je niet vertellen of dit spreekwoord in het spaans te vertalen is'.quote:Op woensdag 29 februari 2012 20:16 schreef KomtTijd... het volgende:
[..]
Zolang dat het geval is kunnen we je hier in ieder geval niet helpen.
Werkt ook niet.quote:Op donderdag 1 maart 2012 20:31 schreef Mirel het volgende:
Dus dan moet 'ie ergens in dat php bestand die de overlay regelt? Straks maar proberen.
Zo zet Tumblr templates in elkaar, zodat de users alles vanuit 1 bestand kunnen editten, html en css. Voor een weblog die niet van jezelf is waarvan je het een en ander kan aanpassen werkt het wel ok.quote:Op donderdag 1 maart 2012 22:04 schreef KomtTijd... het volgende:
Als je hier vragen komt stellen over een CSS3 effect terwijl je het nieteens voor elkaar krijgt een valide HTML-bestand op te stellen, dan ben je toch echt in de verkeerde volgorde bezig.
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |