[CSS] voor dummies - Deel 7 | Digital Corner (DIG)

donderdag 21 juni 2007 @ 09:41:44 #76

CraZaay

prettig gestoord

quote:
Op woensdag 20 juni 2007 22:58 schreef Ewaldus het volgende:
Kan niet laten zien wat het geworden is, bepaalde afspraken met de Nederlandse divisie van dit automerk gemaakt.

Off topic: Neem je niet standaard in je overeenkomsten op dat je je werkzaamheden voor promotionele doeleinden mag gebruiken?

donderdag 21 juni 2007 @ 10:09:57 #77

Ewaldus

Save the cheerleader

quote:
Op donderdag 21 juni 2007 09:41 schreef CraZaay het volgende:

[..]

Off topic: Neem je niet standaard in je overeenkomsten op dat je je werkzaamheden voor promotionele doeleinden mag gebruiken?

Het zit iets moeilijker dan dat. Leg later wel uit

niets

zaterdag 30 juni 2007 @ 00:06:14 #78

-Orion-

Hoe kun je het voorkomen dat wanneer je een in een div rechtsklikt er een selecteerrandje om heenkomt!?

[ Bericht 70% gewijzigd door -Orion- op 30-06-2007 02:36:46 ]

Hier komt ooit nog iets interessants te staan.

zaterdag 30 juni 2007 @ 10:05:58 #79

HuHu

quote:
Op zaterdag 30 juni 2007 00:06 schreef -Orion- het volgende:
Hoe kun je het voorkomen dat wanneer je een in een div rechtsklikt er een selecteerrandje om heenkomt!?

Huh :?.

Als je zoiets hebt:

1
2
3

Dan verschijnt er bij mij geen randje om de div als je met de rechtermuisknop erop klikt.

zaterdag 30 juni 2007 @ 10:59:48 #80

Chandler

Zou iemand mijn SVP willen helpen? Ik kom er echt niet meer uit

[CSS] voor dummies - Deel 7

[CSS] voor dummies - Deel 7

komt door met de muis over de 'menu' buttons te gaan.

haal ik een div weg, dan is het probleem verholpen maar zie ik de nummering niet meer in de comments!

http://www.gfxpoll.com/index.php?page=show&id=2063 is een pagina waar je kunt zien hoe het fout gaat!

^{ps het werkt perfect in FF maar IE zuigt weer eens}

Just say hi!

zaterdag 30 juni 2007 @ 17:43:42 #81

CraZaay

prettig gestoord

quote:
Op zaterdag 30 juni 2007 00:06 schreef -Orion- het volgende:
Hoe kun je het voorkomen dat wanneer je een in een div rechtsklikt er een selecteerrandje om heenkomt!?

Heb ik nog nooit gezien, maar "outline: none" zal het iig wel oplossen

zaterdag 30 juni 2007 @ 19:17:12 #82

AnGabhar

quote:
Op zaterdag 30 juni 2007 00:06 schreef -Orion- het volgende:
Hoe kun je het voorkomen dat wanneer je een in een div rechtsklikt er een selecteerrandje om heenkomt!?

Dat voorkom je niet. Er bestaan truuks voor maar daarmee help je toetsenbordnavigatie van je webpagina om zeep, tot helse ergernis van toetsenbordgebruikers. Het uitlijnen van een geselecteerde link is belangrijk voor de toegankelijkheid van webpagina's, daar moet je niet mee prutsen.

zaterdag 30 juni 2007 @ 19:17:53 #83

AnGabhar

quote:
Op zaterdag 30 juni 2007 17:43 schreef CraZaay het volgende:
Heb ik nog nooit gezien, maar "outline: none" zal het iig wel oplossen

In Mozilla werkt dat, in IE niet. Ik vermoed dat de vraagsteller dat gebruikt.

zaterdag 30 juni 2007 @ 23:14:48 #84

CraZaay

prettig gestoord

quote:
Op zaterdag 30 juni 2007 19:17 schreef AnGabhar het volgende:

[..]

In Mozilla werkt dat, in IE niet. Ik vermoed dat de vraagsteller dat gebruikt.

Ook die omrandt volgens mij geen div's, en voor een link moet je het inderdaad gewoon aan laten staan.

zondag 1 juli 2007 @ 16:37:08 #85

SlimShady

hoi,
ik probeer de Filmstrip in Windows XP na te maken.
de horizontale scrollbar heb ik voor mekaar en de plaatjes passen erin.
maar als je teveel plaatjes hebt, worden ze gewrapped (zoals de tekst op deze pag).

mijn vraag:
hoe voorkom je dat elementen onder elkaar worden gepositioneerd?
dat ze alleen horizontaal geplaatst worden?

zondag 1 juli 2007 @ 16:40:05 #86

HuHu

Je kan op een DIV een overflow toekennen, en die laat je dan scrollen.

1
2
3

<div id="blok">
HEEL VEEL PLAATJES NAAST ELKAAR
</div>

1
2
3
4

#blok {
width:500px;
height:40px;
overflow:scroll; }

Als iets dan breder wordt dan die 500 pixels, dan verschijnt er een scrollbar.

zondag 1 juli 2007 @ 17:17:12 #87

SlimShady

maar ik wil geen verticale. en ze verschijnen nog steeds onder elkaar.
bij de plaatjes heb ik styles 'clear none' en 'float left' meegegeven.
en 'clear left' & 'float left' geprobeerd.

hier is mijn test-script.

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

<!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>
    <title>
      Flipmode
    </title>
    <style type="text/css">
/*<![CDATA[*/
    div.c1 {width: 80%; height: 150px; overflow-x: scroll; overflow-y: hidden; display: block; border-style: solid; border-width: 2px; padding: 5px; }
    img.c2 {width: auto; height: auto; display: block; border-style: solid; border-width: 2px;}
    img.c3 {float: left; clear: none; margin: 5px;}
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="flipbar" class="c1"></div><img id="showbase" align="center" class="c2" src=
    "data:image/bmp;base64,Qk06AAAAAAAAADYAAAAoAAAAAQAAAAEAAAABABgAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="
    alt="Image" name="showbase" /> <script type="text/javascript">
      var newimg;
      for (i = 0; i < 10; i++) {
         newimg = document.createElement('img');
         newimg.src = 'http://i1.tinypic.com/47xq6g8.jpg';
         newimg.setAttribute('class', 'c3');
         document.getElementById('flipbar').appendChild(newimg);
      }
    </script>

  </body>
</html>

zondag 1 juli 2007 @ 19:56:51 #88

keijz

quote:
Op zondag 1 juli 2007 17:17 schreef SlimShady het volgende:
maar ik wil geen verticale. en ze verschijnen nog steeds onder elkaar.
bij de plaatjes heb ik styles 'clear none' en 'float left' meegegeven.
en 'clear left' & 'float left' geprobeerd.

hier is mijn test-script.

[ code verwijderd ]

div#flipbar {
overflow-x:scroll;
}
#flipbar img {
float:left;
}

moet genoeg zijn toch?

zondag 1 juli 2007 @ 20:22:13 #89

SlimShady

vind ik ook. helaas.
ik bedenk wel iets...

zondag 1 juli 2007 @ 20:40:31 #90

keijz

quote:
Op zondag 1 juli 2007 20:22 schreef SlimShady het volgende:
vind ik ook. helaas.
ik bedenk wel iets...

Oh ehmmm

1
2
3
4
5

misschien de div ff om de img heen zetten :P

zondag 1 juli 2007 @ 20:56:55 #91

SlimShady

nee! juist niet want het zijn 2 verschillende elementen.
er is een balk met de thumbs en één element (showbase) met de grote foto.

zondag 1 juli 2007 @ 22:41:51 #92

AnGabhar

quote:
Op zondag 1 juli 2007 16:37 schreef SlimShady het volgende:
hoi,
ik probeer de Filmstrip in Windows XP na te maken.
de horizontale scrollbar heb ik voor mekaar en de plaatjes passen erin.
maar als je teveel plaatjes hebt, worden ze gewrapped (zoals de tekst op deze pag).

mijn vraag:
hoe voorkom je dat elementen onder elkaar worden gepositioneerd?
dat ze alleen horizontaal geplaatst worden?

Om te voorkomen dat floats naar een nieuwe regel springen zul je het blok waar ze in staan een breedte moeten geven die genoeg is om alle plaatjes naast elkaar te laten staan. Je zou bijvoorbeeld een blok met width: 4000px kunnen aanmaken waarin je met javascript al die plaatjes zet, en dat blok in je blok met overflow: scroll; width: 80% zetten. Probleem is dat dit wel statisch is dus je moet van tevoren weten hoe breed al je plaatjes zijn. Of nog meer scripting toepassen om dat uit te lezen natuurlijk.

woensdag 4 juli 2007 @ 19:15:00 #93

SlimShady

thx. maar dat statische is niet praktisch.
na heel veel probeersels wordt het een verticale bar.

vraagje:
waarom wordt in het volgende voorbeeld geen blok weergegeven?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!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>
    <title>
      Test
    </title>
    <style type="text/css">
/*<![CDATA[*/
    div.c1 {
    width: 85%; height: 85%; display: block;
    border-width: 2px; border-style: solid;
    }
    /*]]>*/
    </style>
  </head>
  <body>
    <div class="c1" id="flipbar">
    </div>
  </body>
</html>

woensdag 4 juli 2007 @ 22:25:00 #94

SuperRembo

Sinds 1998

Misschien verwacht je dat de body minstens zo groot wordt als je browser window, en dat div#flipbar daar dan 85% van wordt. Dat is dus niet zo, de body rekt gewoon mee met de inhoud. Als er niets in de body staat is de hoogte 0.

woensdag 4 juli 2007 @ 22:45:22 #95

SlimShady

ok, het werkt dus anders dan je zou denken. thx.

woensdag 4 juli 2007 @ 22:49:13 #96

AnGabhar

quote:
Op woensdag 4 juli 2007 19:15 schreef SlimShady het volgende:
vraagje:
waarom wordt in het volgende voorbeeld geen blok weergegeven?
[ code verwijderd ]

Het werkt wel aardig als je in je css body, html {height: 100%} opneemt.

Donald Duck held woensdag 25 juli 2007 @ 14:54:35 #97

__Saviour__

Superstapelsmoor op Kristel

Hoe krijg ik een DIV netjes gecentreerd in het midden van het totale beeld?
Ik heb nu
margin-right:auto; margin-left:auto;
en dat werkt in Firefox. Maar IE7 zet het gewoon helemaal links

❤ Rozen zijn rood ❤
❤ Viooltjes zijn blauw ❤
❤ Kristel, ik hou van jou! ❤

woensdag 25 juli 2007 @ 15:40:34 #98

Geqxon

quote:
Op woensdag 25 juli 2007 14:54 schreef __Saviour__ het volgende:
Hoe krijg ik een DIV netjes gecentreerd in het midden van het totale beeld?
Ik heb nu
margin-right:auto; margin-left:auto;
en dat werkt in Firefox. Maar IE7 zet het gewoon helemaal links

1	margin: 0 auto

woensdag 25 juli 2007 @ 19:40:50 #99

DorentuZ

quote:
Op woensdag 25 juli 2007 15:40 schreef Geqxon het volgende:

[..]
[ code verwijderd ]

Volgens mij moest je de text-align van de parent op center zetten in IE (ik weet niet of dit ook geldt voor IE7).

1 2	body { text-align: center; } div { margin: 0 auto; }

donderdag 2 augustus 2007 @ 21:13:32 #100

Ewaldus

Save the cheerleader

quote:
Op woensdag 25 juli 2007 15:40 schreef Geqxon het volgende:

[..]
[ code verwijderd ]

je moet de div wel een breedte geven, als je dan margin: 0 auto geeft is het goed.
Dit geeft aan: margin-top: 0 (en tegenovergestelde ook want die is niet aangegeven) en margin-left en margin-right zijn auto.
als je semantisch code schrijft, bijv de margin en dan 4 waarden geeft (bijv. margin: 5px 10px 3px 15px;) dan is dat clockwise: top right bottom left.
Als je invult: margin: 5px 10px 3px; dan is de margin-left 10px, want dat is rechts ook.

niets

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

[CSS] voor dummies - Deel 7

» digital corner

» digital corner