[html, css, js] Waar dummies iniatief gaan tonen! ;) #23

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_109010737
quote:
0s.gif Op maandag 12 maart 2012 13:56 schreef RenRen- het volgende:
Ik wel, ook met die van een ander. Wat wil je weten?
Ik wil dus een eenvoudige huisstijl gaan ontwerpen, alleen ben ik dus niet handig in het maken van een eenvoudig logo.

Zijn er nog goede tutorials op internet die ik kan/moet volgen?
pi_109012003
quote:
0s.gif Op maandag 12 maart 2012 14:38 schreef Alovenac het volgende:

[..]

Ik wil dus een eenvoudige huisstijl gaan ontwerpen, alleen ben ik dus niet handig in het maken van een eenvoudig logo.

Zijn er nog goede tutorials op internet die ik kan/moet volgen?
Ik heb nooit een logo ontworpen met tutorials. Wat ik altijd doe is schetsen, nagaan wat ik wil uitstralen als bedrijf/onderneming, dat opschrijven, meer schetsen, misschien meer out of the box denken, nog meer schetsen, kijken naar wat anderen doen en daar inspiratie uit opdoen.

En dan maken. En dán pas komt een tutorial van pas, over hoe illustrator werkt.

Waar ik inspiratie opdoe:
Logopond.com

Net even gegooglet, deze lijkt wel een paar leuke tutorials te hebben:
http://speckyboy.com/2009(...)iques-and-tutorials/
http://sixrevisions.com/g(...)s-using-illustrator/
Paar avn hetzeflde, aar ook wat nieuwe.

En als ik advies kan geven; Houd het echt simpel! Niet te veel gradients en gedoe, 1/2 fonts met een beeldmerk is mooi, simpel en onthouden mensen sneller.
pi_109012146
quote:
0s.gif Op maandag 12 maart 2012 15:08 schreef RenRen- het volgende:

[..]

Ik heb nooit een logo ontworpen met tutorials. Wat ik altijd doe is schetsen, nagaan wat ik wil uitstralen als bedrijf/onderneming, dat opschrijven, meer schetsen, misschien meer out of the box denken, nog meer schetsen, kijken naar wat anderen doen en daar inspiratie uit opdoen.

En dan maken. En dán pas komt een tutorial van pas, over hoe illustrator werkt.

Waar ik inspiratie opdoe:
Logopond.com

Net even gegooglet, deze lijkt wel een paar leuke tutorials te hebben:
http://speckyboy.com/2009(...)iques-and-tutorials/
http://sixrevisions.com/g(...)s-using-illustrator/
Paar avn hetzeflde, aar ook wat nieuwe.

En als ik advies kan geven; Houd het echt simpel! Niet te veel gradients en gedoe, 1/2 fonts met een beeldmerk is mooi, simpel en onthouden mensen sneller.
Thanks. Ik ben dus eigenlijk meer de programmeur, maar wil voor mijn eigen bedrijf wel een mooi logo/huisstijl hebben. Echter had ik geen idee waar ik moest beginnen met het ontwerpen hiervan.
pi_109012185
quote:
0s.gif Op maandag 12 maart 2012 15:11 schreef Alovenac het volgende:

[..]

Thanks. Ik ben dus eigenlijk meer de programmeur, maar wil voor mijn eigen bedrijf wel een mooi logo/huisstijl hebben. Echter had ik geen idee waar ik moest beginnen met het ontwerpen hiervan.
Echt nagaan waarin jij onderscheidend bent, of wat bij jou past, dat lijkt me een leuk begin :) En dan een beetje schetsen, hoeft niet geniaal te zijn!
  maandag 12 maart 2012 @ 15:12:55 #260
56176 Catch22-
Ben je Blind?!
pi_109012194
Stap 1 is een echte designer inhuren. een logo maken is meer dan wat op papier schetsen wat je zelf mooi vindt.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_109012321
quote:
11s.gif Op maandag 12 maart 2012 15:12 schreef Catch22- het volgende:
Stap 1 is een echte designer inhuren. een logo maken is meer dan wat op papier schetsen wat je zelf mooi vindt.
Als je er het geld niet voor hebt, omdat je net begint en een echte designer nog wat kost, is een mooi begin.
pi_109012516
Inderdaad, ik ben nog student en loop nu een jaar stage. Echter komen steeds meer mensen in mijn omgeving erachter dat ik programmeur ben van websites en dus komen er steeds meer mensen aankloppen of ik een website kan maken.

Dit heeft mij tot nadenken gezet en vind dat ik eigenlijk wel een goede huisstijl moet hebben. Dit kan namelijk weer voor een stukje reclame zorgen.
pi_109012582
quote:
0s.gif Op maandag 12 maart 2012 15:20 schreef Alovenac het volgende:
Inderdaad, ik ben nog student en loop nu een jaar stage. Echter komen steeds meer mensen in mijn omgeving erachter dat ik programmeur ben van websites en dus komen er steeds meer mensen aankloppen of ik een website kan maken.

Dit heeft mij tot nadenken gezet en vind dat ik eigenlijk wel een goede huisstijl moet hebben. Dit kan namelijk weer voor een stukje reclame zorgen.
Gewoon zelf doen, lekker veel om meningen vragen (Als je niet weet wat je verder moet, Post hier je grafisch- en webdesign in dit topic zijn mensen je altijd bereid om te helpen :) ) en doen.
pi_109013342
quote:
0s.gif Op maandag 12 maart 2012 13:07 schreef RenRen- het volgende:
*O* Hij doet het in IE dus mijn grootste probleem is opgelost O+ Held.
Wow. Just wow.
  maandag 12 maart 2012 @ 15:48:54 #265
230788 n8n
Pragmatisch
pi_109013500
quote:
0s.gif Op maandag 12 maart 2012 15:20 schreef Alovenac het volgende:
Inderdaad, ik ben nog student en loop nu een jaar stage. Echter komen steeds meer mensen in mijn omgeving erachter dat ik programmeur ben van websites en dus komen er steeds meer mensen aankloppen of ik een website kan maken.

Dit heeft mij tot nadenken gezet en vind dat ik eigenlijk wel een goede huisstijl moet hebben. Dit kan namelijk weer voor een stukje reclame zorgen.
Kan ook gewoon je naam gebruiken, genoeg vakmensen aan de top die dit doen dus niks om je zorgen om te maken.
“Specialization is for insects”.—Robert Heinlein
  maandag 12 maart 2012 @ 15:49:46 #266
56176 Catch22-
Ben je Blind?!
pi_109013535
Beter je naam in een mooi font dan een nietszeggende generieke krabbel bij je hype-naam
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_109013675
quote:
7s.gif Op maandag 12 maart 2012 15:48 schreef n8n het volgende:

[..]

Kan ook gewoon je naam gebruiken, genoeg vakmensen aan de top die dit doen dus niks om je zorgen om te maken.
Eensch.
  maandag 12 maart 2012 @ 16:52:47 #268
87680 Mirel
Mirel wil een bongophone.
pi_109015925
Op http://www.ditisjeugdzorg.nl/nl/home/ als je op 't is zoals 't is klikt,(wat overigens een vreemde URL geeft) kom je op een pagina met een filmpje.

Op een iphone is de resolutie van dat filmpje duidelijk breedbeeld, maar op een gewoon computerscherm niet.. Hoe kan dat eigenlijk? Het heeft geen mobiele layout..

Heb via firebug even geschoven met dingen, en er zitten niet stukjes van het filmpje verstopt. Of je het via firebug dusdanig kan aanpassen weet ik verder niet.
When all else fails, you always have delusion.
  maandag 12 maart 2012 @ 16:54:15 #269
230788 n8n
Pragmatisch
pi_109015990
quote:
0s.gif Op maandag 12 maart 2012 16:52 schreef Mirel het volgende:
Op http://www.ditisjeugdzorg.nl/nl/home/ als je op 't is zoals 't is klikt,(wat overigens een vreemde URL geeft) kom je op een pagina met een filmpje.

Op een iphone is de resolutie van dat filmpje duidelijk breedbeeld, maar op een gewoon computerscherm niet.. Hoe kan dat eigenlijk? Het heeft geen mobiele layout..

Heb via firebug even geschoven met dingen, en er zitten niet stukjes van het filmpje verstopt. Of je het via firebug dusdanig kan aanpassen weet ik verder niet.
mobiel is (waarschijnlijk) .mp4 en desktop krijg je flash, zou daar aan kunnen liggen
“Specialization is for insects”.—Robert Heinlein
  maandag 12 maart 2012 @ 17:03:42 #270
87680 Mirel
Mirel wil een bongophone.
pi_109016468
Enkel de extensie zorgt ervoor dat de resolutie ook anders wordt?
When all else fails, you always have delusion.
  maandag 12 maart 2012 @ 17:04:31 #271
230788 n8n
Pragmatisch
pi_109016492
als het verschillende bestanden zijn. moet er wel bij vermelden dat ik niet bijster veel ervaring heb met online video
“Specialization is for insects”.—Robert Heinlein
pi_109027021
Beste menschen :) Ik heb een vraagje; ik bouw momenteel een website met html/css maar wil ik het volgende:

Ik wil bedrijfslogo's uitgelijnd onder elkaar hebben en als je op het logo klikt, je de informatie van dat bedrijf krijgt. Als je er weer op klikt klapt het weer in en zie je alleen het logo. Dus een soort 'dropdown' met een image.

Iemand enig idee hoe die code eruit ziet, of hoe dat in het engels heet dat ik het zelf uit kan zoeken :P

Alvast bedankt
pi_109027196
google maar op "Jquery Accordeon".
zcflevo.nl
pi_109030946
Top bedankt!

Nu heb ik via w3schools een jQuery effect wat ik wel zou willen hebben: http://www.w3schools.com/(...)tryjquery_slide_down

Maar als ik deze letterlijk op mijn website plaats (in een al-bestaande-div), doet hij niks? Ik heb een aparte .css, maar als ik hem letterlijk zou kopiëren zou die het toch moeten doen? Wat ik zou willen is, dit effect maar dan een plaatje ipv tekst. Maar om de basis te begrijpen probeer ik het zo eerst maar even, maar zelfs dat wil dus al niet lukken.
  PR/Manusje van alles maandag 12 maart 2012 @ 22:24:43 #275
148800 crew  Surveillance-Fiets
Toezicht is gezond!
pi_109032174
Ik heb een aantal checkboxjes die onderdeel zijn van een stukje javascript. Deze code laat een aantal thumbnails wel / niet zien. Alleeeen in de code worden er standaard maar 2 checkboxjes getoond van de 8. De andere 6 zitten onder een 'show all' knopje... :{ Als het er 30 zijn is dat inderdaad wel handig. Maar nu dus totaal niet nodig.

De code aanpassen heb ik geprobeerd maar dan werkt het helemaal niet meer. De checkboxjes zijn dan wel standaard zichtbaar. Maar doen vervolgens niets meer... Ik hooop dat ik ergens overheen kijk..

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		 <div class="sidebar_bar">
    <div class="sidebar_left_find">
  <div class="sidebar_list">
<ul id="category_list">

<li count="2" style="display:block;">
<input id="category_1" value="1" type="checkbox">
<span style="display: none;">1 </span>
</li>

<li count="2" style="display:block;">
<input id="category_2" value="2" type="checkbox">
<span style="display: none;">2 </span>
</li>

<li count="11" style="display: list-item;">
<input id="category_3" value="3" type="checkbox">
<span style="display: none;">3 </span>
</li>

<li count="11" style="display: list-item;">
<input id="category_4" value="4" type="checkbox">
<span style="display: none;">4 </span>
</li>

</ul>
<p>
<a href="#" id="category_more" style="display:list-item;">
show all
<img alt="arrow" src="services_bestanden/find_down_arrow.png">
</a>
</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
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		<?php
jjQuery(document).ready(function($)
 {
 ;$('#category_more,').click(function(e){

      e.preventDefault();
      $('#' + this.id.replace('more', 'list li')).fadeIn(0);
      $(this).hide();

     })
 

   $(' #nonprofit_all, #price_all').closest('ul').children().find(':checkbox').attr('checked', true);

   var tJS = serviceRenderInit();

   

   $('#category_none, #nonprofit_none, #price_none').click(function(e){
     e.preventDefault();
     $(this).closest('ul').children().find(':checkbox').attr('checked', true);
     tJS.filter();
   });

   $('#category_ li:gt(20)').hide();
   $('#nonprofit_list li:gt(10)').hide();

});

function serviceRenderInit(){

  var spots = function(service){
    if(!service.booking_capacity) return null;

    var spot_count = service.booking_capacity - service.booked_seats;
    if(spot_count <= 3){
       return  spot_count + (spot_count == 1 ? ' Spot Left' : ' Spots Left');
    }
    return null;
  };

  var day_left = function(service){
    if(service.is_schedulelater) return null;
    var d = service.start_date.split('-');
    var days = Math.round((new Date(d[0],d[1] - 1, d[2]) - new Date())/86400000);

    if(days <= 3){
      if(days == 0) return 'Last Day';
      else if(days == 1) return '1 Day Left';
      else if(days > 1) return days + ' Days Left';
    }

    return null;
  };

  var view = function(service){
    var spot_content = spots(service);
    var day_content = day_left(service);
    var service_title = service.title.length < 24 ? service.title : service.title.substring(0,21) +'...';
    var nonprofit_name = service.nonprofit.name.length < 27 ? service.nonprofit.name : service.nonprofit.name.substring(0,27) +'...';
  

    clear     = this.div({'class': 'clear'});
    //s_image   = this.div({'class': 'fs_box_pic'}, this.image(service.thumbnail));
    s_image   = this.div({'class': 'fs_box_pic', 'style':'background:url(' + service.thumbnail + ') no-repeat center center'}); 
    tag_spots = spot_content ? this.div({'class': 'tag_spots'}, spot_content) : null;
    tag_day   = day_content ? this.div({'class': 'tag_day'}, day_content) : null;
    fs_price  = this.div({'class': 'fs_price'}, '$' + service.amount );
    fs_head   = this.span({'class': 'fs_head'}, service_title);
    fs_for    = this.span({'class': 'fs_for'}, 'for');
    fs_disc   = this.span({'class': 'fs_disc'}, nonprofit_name);
    fs_left   = this.div({'class': 'fs_left'}, [fs_head, fs_for, fs_disc]);
    fs_box    = this.div({'class': 'fs_box'}, [tag_spots, tag_day, s_image, fs_left, fs_price, clear ] );

    return this.link('/services/' + service.to_param ,{'title': service.title}, fs_box);
  };

  var settings = {
      filter_criteria: {
          category: ['#category_list input:checkbox .EVENT.click .SELECT.:checked', 'service_categories.ARRAY.category_id'],
          nonprofit: ['#nonprofit_list input:checkbox .EVENT.click .SELECT.:checked' , 'nonprofit.nonprofit_categories.ARRAY.category_id'],
          price: ['#price_list input:checkbox .EVENT.click .SELECT.:checked .TYPE.range', 'amount']
          }
      };

  var tJS = new tagJS(services, "#service_list", view, settings);

  obj_map = tJS.settings.object_map;
  for (name in obj_map) {
      if (name != 'price') {
        $('#' + name + '_list li:gt(0)').hide();

        $.each(obj_map[name], function(el) {
          $('#' + name + "_" + el).next().append(" (" + obj_map[name][el].length +")"); 
          $('#' + name + "_" + el).parent().show();
          $('#' + name + "_" + el).parent().attr('count', obj_map[name][el].length);
        });

        $('#' + name + '_list li:gt(0)').each(function() { 
          if(!$(this).attr('count')) $(this).remove();
        });

        if ($('#' + name + '_list li').length > 6) $('#' + name + '_more').show();
      }
  }
  testJS = tJS;
  return tJS;
}

var testJS;
?>

Kijk ik er nou gewoon overheen of is het niet zo snel mogelijk en moet ik dan een deel van de code herschrijven? :')
Ik denk meer dat je als nieuwsposter een geile egocentrische narcist moet zijn, die een flinke stijve krijgt van alle berichten die ie van zijn eigen hand ziet op de FP, zo! İyvonne
Beste nieuwsbericht ooit op de FOK!frontpage!
pi_109032695
quote:
0s.gif Op maandag 12 maart 2012 22:07 schreef -tape- het volgende:
Top bedankt!

Nu heb ik via w3schools een jQuery effect wat ik wel zou willen hebben: http://www.w3schools.com/(...)tryjquery_slide_down

Maar als ik deze letterlijk op mijn website plaats (in een al-bestaande-div), doet hij niks? Ik heb een aparte .css, maar als ik hem letterlijk zou kopiëren zou die het toch moeten doen? Wat ik zou willen is, dit effect maar dan een plaatje ipv tekst. Maar om de basis te begrijpen probeer ik het zo eerst maar even, maar zelfs dat wil dus al niet lukken.
Mijn magische bol is kapot helaas.
pi_109032750
quote:
11s.gif Op maandag 12 maart 2012 22:24 schreef Surveillance-Fiets het volgende:
Ik heb een aantal checkboxjes die onderdeel zijn van een stukje javascript. Deze code laat een aantal thumbnails wel / niet zien. Alleeeen in de code worden er standaard maar 2 checkboxjes getoond van de 8. De andere 6 zitten onder een 'show all' knopje... :{ Als het er 30 zijn is dat inderdaad wel handig. Maar nu dus totaal niet nodig.

De code aanpassen heb ik geprobeerd maar dan werkt het helemaal niet meer. De checkboxjes zijn dan wel standaard zichtbaar. Maar doen vervolgens niets meer... Ik hooop dat ik ergens overheen kijk..
[ code verwijderd ]

[ code verwijderd ]

Kijk ik er nou gewoon overheen of is het niet zo snel mogelijk en moet ik dan een deel van de code herschrijven? :')
Herschrijven moet je sowieso :') wat een bagger.
  PR/Manusje van alles maandag 12 maart 2012 @ 22:38:04 #278
148800 crew  Surveillance-Fiets
Toezicht is gezond!
pi_109032989
quote:
0s.gif Op maandag 12 maart 2012 22:33 schreef Scorpie het volgende:

[..]

Herschrijven moet je sowieso :') wat een bagger.
:') :D Ja, heuj, het lijkt te werken. deels... uitkleden en herschrijven doe ik wel als alles werkt.

Maar zie je iets? of is het geen poging waard door el bagger?
Ik denk meer dat je als nieuwsposter een geile egocentrische narcist moet zijn, die een flinke stijve krijgt van alle berichten die ie van zijn eigen hand ziet op de FP, zo! İyvonne
Beste nieuwsbericht ooit op de FOK!frontpage!
  PR/Manusje van alles maandag 12 maart 2012 @ 22:39:55 #279
148800 crew  Surveillance-Fiets
Toezicht is gezond!
pi_109033099
heuj, het lijkt te lukken.. hoe ik het doe weet ik niet. Maar het liekt te werken. :X
Ik denk meer dat je als nieuwsposter een geile egocentrische narcist moet zijn, die een flinke stijve krijgt van alle berichten die ie van zijn eigen hand ziet op de FP, zo! İyvonne
Beste nieuwsbericht ooit op de FOK!frontpage!
pi_109033743
quote:
0s.gif Op maandag 12 maart 2012 22:39 schreef Surveillance-Fiets het volgende:
heuj, het lijkt te lukken.. hoe ik het doe weet ik niet. Maar het liekt te werken. :X
Ik heb geen idee, een testpagina waarop het script werkend te zien is zou al mooi zijn.
  PR/Manusje van alles maandag 12 maart 2012 @ 22:54:26 #281
148800 crew  Surveillance-Fiets
Toezicht is gezond!
pi_109033901
quote:
0s.gif Op maandag 12 maart 2012 22:51 schreef Scorpie het volgende:

[..]

Ik heb geen idee, een testpagina waarop het script werkend te zien is zou al mooi zijn.
ff kijken, hold on
Ik denk meer dat je als nieuwsposter een geile egocentrische narcist moet zijn, die een flinke stijve krijgt van alle berichten die ie van zijn eigen hand ziet op de FP, zo! İyvonne
Beste nieuwsbericht ooit op de FOK!frontpage!
  PR/Manusje van alles maandag 12 maart 2012 @ 23:16:20 #282
148800 crew  Surveillance-Fiets
Toezicht is gezond!
pi_109034926
het is me gelukt. *O* ik ga nog ff verder en als het toonbaar is post ik wel een linkje of zo :*
Ik denk meer dat je als nieuwsposter een geile egocentrische narcist moet zijn, die een flinke stijve krijgt van alle berichten die ie van zijn eigen hand ziet op de FP, zo! İyvonne
Beste nieuwsbericht ooit op de FOK!frontpage!
pi_109040345
Veel succes met die code toonbaar maken :')
pi_109057078
Ik heb dus de volgende code die ik in mijn code wil;

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		<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("fast");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>
 
<p class="flip">Show/Hide Panel</p>
 
</body>
</html>

Maar als ik het stukje /script in mijn [/head] zet, de /style in mijn aparte .css bestand en het stukje /body in mijn div (waar ik het dus in wil); krijg ik wel de balk die moet verschijnen, maar niet het 'slide' effect wat je hier ziet: http://www.w3schools.com/(...)yjquery_slide_toggle Iemand enig idee wat ik verkeerd doe?

PS. Dit is mijn div waar hij in moet:

1
2
3
4
5
6
7
8
9
10
11		<div id="body">
<h2 class="title">Lorem Ipsum</h2>
    <div class="story">
            <p>
Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.
<br /></p>
<h4>Lorem Ipsum</h4>
Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke). <br />
    </div>
  </div>
</div>

Waar nu dus een Lorem Ipsum zit.

Alvast bedankt
pi_109057643
Ik gok dat het door die display:none komt.
Nee.
  dinsdag 13 maart 2012 @ 21:36:39 #286
137776 boem-dikkie
Jedi Mind Baby!
pi_109066711
Omdat je jQuery een div aanspreekt die panel heet en je de div in je code 'story' noemt?
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
pi_109067350
Oh fuck, ik had alleen gekeken naar het eerste code stuk. Maar dat is vast de jQuery demo's HTML :')
Nee.
  donderdag 15 maart 2012 @ 17:31:27 #288
230788 n8n
Pragmatisch
pi_109136198


alleen mogelijk met tables?
“Specialization is for insects”.—Robert Heinlein
pi_109139456
Hoe bedoel je? Je kunt toch gewoon de footer absoluut onderaan positioneren, en de body een padding geven aan de onderkant die even hoog is als de footer?

Of snap ik niet helemaal wat je wilt?
Nee.
pi_109139629
Je wilt 2 headers??
  donderdag 15 maart 2012 @ 19:34:21 #291
284294 BBQSausage
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
pi_109140209
quote:
0s.gif Op dinsdag 13 maart 2012 18:33 schreef -tape- het volgende:
Ik heb dus de volgende code die ik in mijn code wil;
[ code verwijderd ]

Maar als ik het stukje /script in mijn [/head] zet, de /style in mijn aparte .css bestand en het stukje /body in mijn div (waar ik het dus in wil); krijg ik wel de balk die moet verschijnen, maar niet het 'slide' effect wat je hier ziet: http://www.w3schools.com/(...)yjquery_slide_toggle Iemand enig idee wat ik verkeerd doe?

PS. Dit is mijn div waar hij in moet:
[ code verwijderd ]

Waar nu dus een Lorem Ipsum zit.

Alvast bedankt
De content is te lang, daarom schiet de rest er uit.

Klik

Twee mogelijke oplossingen;

1. overflow: auto; of overflow: hidden; gebruiken op .panel, zodat je de hoogte van 120px kunt behouden.
2. De hoogte van .panel aanpassen naar iets van 350px / 400px.
pi_109140543
Of gewoon een wrapper er om heen, met overflow:hidden en die animeren in de hoogte. Dan heb je ook niet meer dat gezeik met paddings/margins die voor een verspringend effect zorgen.
Nee.
  donderdag 15 maart 2012 @ 19:56:24 #293
284294 BBQSausage
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
pi_109141337
quote:
9s.gif Op donderdag 15 maart 2012 17:31 schreef n8n het volgende:
[ afbeelding ]

alleen mogelijk met tables?
Lukt prima zonder.

Klik.
pi_109141664
quote:
7s.gif Op donderdag 15 maart 2012 19:56 schreef BBQSausage het volgende:

[..]

Lukt prima zonder.

Klik.
Behalve als je content langer wordt ja. Voglens mij moet je je body een min-height van 100% geven, met daarin een wrapper met de bovenste header en de content, met aan de onderkant een padding/negatieve margin die even hoog is als de onderste footer. Daarnaast een absoluut gepositioneerde footer.

1
2
3
4
5
6
7
8
9
10		<body>
<div id="wrapper">
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>

met als CSS

1
2
3		body, html, #wrapper { min-height:100%; height:100%; }
#wrapper { margin-bottom:-100px; }
#footer { height: 100px; }

Zo ongeveer. Anders even zoeken op 'sticky footer' ofzo.

[ Bericht 26% gewijzigd door PimD op 15-03-2012 20:08:31 ]
Nee.
  donderdag 15 maart 2012 @ 20:38:55 #295
284294 BBQSausage
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
pi_109143875
quote:
0s.gif Op donderdag 15 maart 2012 20:02 schreef PimD het volgende:

[..]

Behalve als je content langer wordt ja. Voglens mij moet je je body een min-height van 100% geven, met daarin een wrapper met de bovenste header en de content, met aan de onderkant een padding/negatieve margin die even hoog is als de onderste footer. Daarnaast een absoluut gepositioneerde footer.
[ code verwijderd ]

met als CSS
[ code verwijderd ]

Zo ongeveer. Anders even zoeken op 'sticky footer' ofzo.
Het ligt er ook maar net aan hoe 'sticky' je die footer wilt hebben. Als je hem altijd in beeld wilt hebben, en niet gewoon onderaan de tekst, zou je de content een overflow mee moeten geven oid.

Wil je hem gewoon altijd écht onderaan je pagina hebben, werkt het inderdaad prima met een min-height en padding / filler.
Klik

En bij minder content ziet dat er dus zo uit: Klik
pi_109144039
Als je 'm altijd onderaan de viewport wilt hebben moet je 'm fixed positioneren, niet absoluut zoals in jouw voorbeeld.
Nee.
  donderdag 15 maart 2012 @ 20:47:44 #297
284294 BBQSausage
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
pi_109144485
quote:
0s.gif Op donderdag 15 maart 2012 20:41 schreef PimD het volgende:
Als je 'm altijd onderaan de viewport wilt hebben moet je 'm fixed positioneren, niet absoluut zoals in jouw voorbeeld.
Klopt, maar dat is in de meeste gevallen niet gewenst. Net als zo'n grote header die constant bovenaan je pagina blijft zweven.
  donderdag 15 maart 2012 @ 21:11:14 #298
230788 n8n
Pragmatisch
pi_109146044
Footer en de header moeten beide blijven, content in het midden moet schalen naar de overgebleven beschikbare ruimte. Wat ik eigenlijk wil is wat normaal met marge aan de breedte gebeurd. De pagina krijgt een 'letterbox' dat altijd in beeld blijft met daartussen een gallery. Body mag dan ook nooit hoger zijn dan 100%, dat maakt het lastig, zelfs met een table lukt het niet dus voel me genoodzaakt naar js uit te wijken. Bedankt alvast.
“Specialization is for insects”.—Robert Heinlein
  donderdag 15 maart 2012 @ 21:15:17 #299
284294 BBQSausage
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
pi_109146321
quote:
7s.gif Op donderdag 15 maart 2012 21:11 schreef n8n het volgende:
Footer en de header moeten beide blijven, content in het midden moet schalen naar de overgebleven beschikbare ruimte. Wat ik eigenlijk wil is wat normaal met marge aan de breedte gebeurd. De pagina krijgt een 'letterbox' dat altijd in beeld blijft met daartussen een gallery. Body mag dan ook nooit hoger zijn dan 100%, dat maakt het lastig, zelfs met een table lukt het niet dus voel me genoodzaakt naar js uit te wijken. Bedankt alvast.
Hoe bedoel je "schalen" naar overgebleven ruimte?
  donderdag 15 maart 2012 @ 21:20:54 #300
230788 n8n
Pragmatisch
pi_109146686
quote:
15s.gif Op donderdag 15 maart 2012 21:15 schreef BBQSausage het volgende:

[..]

Hoe bedoel je "schalen" naar overgebleven ruimte?
dat als de viewport minder hoog wordt de afbeeldingen kleiner worden met het venster mee. Net als content zou moeten als je normaliter een venster minder breed maakt.
“Specialization is for insects”.—Robert Heinlein
  donderdag 15 maart 2012 @ 21:24:22 #301
370539 kucher
is snucher
pi_109146905
Dat kan met media queries

http://kyleschaeffer.com/(...)g-css-media-queries/

Tevens, gebruik een gecentreerde achtergrond op een div met automatische breedte. Wordt de div kleiner, wordt het plaatje gewoon afgesneden.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[html, css, js] Waar dummies iniatief gaan tonen! ;) #23
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')