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

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

vrijdag 3 augustus 2007 @ 00:32:24 #101

DorentuZ

quote:
Op donderdag 2 augustus 2007 21:13 schreef Ewaldus het volgende:

[..]

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.

Voor zover ik weet heeft een block-level element altijd een breedte van 100%. Dus je hoeft geen breedte mee te geven. De hoogte daarentegen heeft geen standaard waarde (of die is 0).

zaterdag 4 augustus 2007 @ 11:24:58 #102

CraZaay

prettig gestoord

quote:
Op vrijdag 3 augustus 2007 00:32 schreef DorentuZ het volgende:

[..]

Voor zover ik weet heeft een block-level element altijd een breedte van 100%. Dus je hoeft geen breedte mee te geven. De hoogte daarentegen heeft geen standaard waarde (of die is 0).

Een block-level element neemt de volledige breedte in, maar dan heb je dus niets aan "margin: 0 auto", omdat er dan niets te centreren valt

zaterdag 4 augustus 2007 @ 14:46:30 #103

Ewaldus

Save the cheerleader

quote:
Op zaterdag 4 augustus 2007 11:24 schreef CraZaay het volgende:

[..]

Een block-level element neemt de volledige breedte in, maar dan heb je dus niets aan "margin: 0 auto", omdat er dan niets te centreren valt

niets

maandag 6 augustus 2007 @ 11:25:33 #104

Darkomen

Ik heb een div, met de classname, 'entrybox' daarin staat een img, deze wil ik aanspreken zonder de link zelf een class of id te geven.

maandag 6 augustus 2007 @ 13:06:36 #105

SuperRembo

Sinds 1998

Als er 1 img in staat dan kan dat met "div.entrybox img", als er meer plaatjes in staan wordt het lastig / onmogelijk.

maandag 6 augustus 2007 @ 13:08:38 #106

Darkomen

gaat idd maar om 1 plaatje, had vanalles geprobeerd, maar geen spatie

Tnx

woensdag 15 augustus 2007 @ 20:08:30 #107

Chandler

Ik zit met het volgende.

Door een foutje in Firefox krijg ik het volgende niet werkend. Ik wil voor een website adsense (skyscraper) gaan gebruiken. Echter zit mijn complete website in een 'container' en deze is precies in het midden van de brouwser gepositioneerd. Nu wil ik graag aan de rechterkant (ongv 25 pixels vanaf de huidige 'container' de sky scraper plaatsen. Met de volgende code lukt dit in IE maar in Firefox staat hij links van de container en loopt een stukje in de container over!

1
2
3
4
5
6
7
8
9
10
11

body {
    width: 721px;
    margin: 15px auto;
    background: url(../../../layout/img/body_bg.gif) center top repeat-y;
}

#kop {
    width: 721px;
    height: 93px;
    background: url(../../../layout/img/kop_bg.gif) no-repeat;
}

en zo plaats ik het

1
2
3
4
5
6
7

<body>

<div id="ad"><div style="margin-top: 150px; border: 1px solid black; width: 200px; text-align: left;"><h3>test</h3></div></div>

<div id="kop">etc etc etc</div>

etc etc etc

Echter werkt dit dus niet in Firefox! hoe kan ik dit oplossen? CSS of een stukje javascript? :X

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 15 augustus 2007 @ 20:27:14 #108

DorentuZ

quote:
Op woensdag 15 augustus 2007 20:08 schreef Chandler het volgende:
Ik zit met het volgende.

Door een foutje in Firefox krijg ik het volgende niet werkend. Ik wil voor een website adsense (skyscraper) gaan gebruiken. Echter zit mijn complete website in een 'container' en deze is precies in het midden van de brouwser gepositioneerd. Nu wil ik graag aan de rechterkant (ongv 25 pixels vanaf de huidige 'container' de sky scraper plaatsen. Met de volgende code lukt dit in IE maar in Firefox staat hij links van de container en loopt een stukje in de container over!
[ code verwijderd ]

en zo plaats ik het
[ code verwijderd ]

Echter werkt dit dus niet in Firefox! hoe kan ik dit oplossen? CSS of een stukje javascript?

Absoluut positioneren?

woensdag 15 augustus 2007 @ 20:44:11 #109

Chandler

Ik vergat #ad nog

1
2
3
4
5
6
7
8
9

#ad {
width: 1000px; /* 200PX advertentie breedte */
position: absolute;
top: 0px;
left: 50%;
margin: 0px 0px 0px -400px;
z-index: 50;
text-align: right;
}

oftewel absoluut gepositioneerd :)

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 15 augustus 2007 @ 23:27:53 #110

Wouser

Even vraagje hoe zorg ik ervoor dat tekst 'dotted' onderstreept wordt?

donderdag 16 augustus 2007 @ 07:53:57 #111

Chandler

border-bottom: 1px dotted #kleur

of http://www.google.nl/search?hl=nl&sa=X&oi=spell&resnum=0&ct=result&cd=1&q=link+dotted+css&spell=1

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 16 augustus 2007 @ 10:31:35 #112

Wouser

<abbr title="Laughing Out Loud" style="border-bottom: 1px dotted #FF3333;">lol</abbr>

Werkt niet

? In IE7...

donderdag 16 augustus 2007 @ 10:38:53 #113

Geqxon

Dotted lines van 1px worden in IE6 overigens dashed.

donderdag 16 augustus 2007 @ 12:12:39 #114

Fliepke

Serieuze waarheid

Ik heb een navigatiemenu en in FF krijg ik voor ieder item, zo'n
>>
In IE komt dit niet voor.

Hoe zorg ik ervoor dat dit niet gebeurd in FF

(het gaat overigens om het standaard Wordpress thema )

donderdag 16 augustus 2007 @ 15:56:24 #115

Chandler

Heeft iemand nog een oplossing voor mijn probleempje?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 16 augustus 2007 @ 16:24:59 #116

DorentuZ

quote:
Op donderdag 16 augustus 2007 15:56 schreef Chandler het volgende:
Heeft iemand nog een oplossing voor mijn probleempje?

Geen idee of 't werkt, maar maak eens een container voor je hele site (om alles in 't midden te zetten, kan in dit geval ook de body zijn geloof ik). Die positioneer je relatief (gewoon position: relative; meegeven, niets anders). Vervolgens positioneer je de ad op (breedte container + afstand 'spacer')px vanaf de linkerkant.

Hoop dat 't te begrijpen is?

donderdag 16 augustus 2007 @ 17:00:13 #117

Chandler

Ik begrijp je! echter zit ik met een aantal beperkingen

Had gehoopt dat eventueel gebruik van javascript icm stylesheets een uitkomst zou kunnen bieden

bv

schermbreedte / 2 + helft van container + 20px = begin positie nieuwe container voor adsense

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 16 augustus 2007 @ 17:03:34 #118

Geqxon

quote:
Op donderdag 16 augustus 2007 17:00 schreef Chandler het volgende:
Ik begrijp je! echter zit ik met een aantal beperkingen

Had gehoopt dat eventueel gebruik van javascript icm stylesheets een uitkomst zou kunnen bieden

bv

schermbreedte / 2 + helft van container + 20px = begin positie nieuwe container voor adsense

Of je pakt de "left" attribuut van de container, en plakt daar 1050 pixels aan.

donderdag 16 augustus 2007 @ 17:35:00 #119

Chandler

Hoe zie je dat dan voor ogen? ook m.b.v. Javascript oid?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 16 augustus 2007 @ 20:11:16 #120

CraZaay

prettig gestoord

Gebruik geen javascript voor je lay-out, daar is het nog steeds niet voor bedoelt

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

[CSS] voor dummies - Deel 7

» digital corner

» digital corner