[CSS] voor dummies - deel 9 | Digital Corner (DIG/DEV)

maandag 24 maart 2008 @ 16:46:44 #1

CraZaay

prettig gestoord

Vorige topics:

[CSS] voor dummies.
[CSS] voor dummies - Deel 2
[CSS] voor dummies - Deel 3
[CSS] voor dummies - Deel 4
[CSS] voor dummies - Deel 5
[CSS] voor dummies - deel 6
[CSS] voor dummies - Deel 7
[CSS] voor dummies - Deeltje 8

Mijn laatste post in deel 8:

quote:
Op maandag 24 maart 2008 16:24 schreef CraZaay het volgende:
IE voor de Mac moet je niet meer ondersteunen, niemand gebruikt die meer, wordt sinds 1999 niet meer ontwikkeld en kun je niet eens meer downloaden bij MS

Firefox 3 zal er net zo mee omgaan als Firefox 2, namelijk standards compliant conform de W3C richtlijnen

En voor box model problemen: met welk doctype?

maandag 24 maart 2008 @ 16:54:36 #2

Fliepke

Serieuze waarheid

Ik heb wat te leuk zitten spelen met margins en paddings, dat gaat wel eens mis

Komt goed. Irriteert me alleen

maandag 24 maart 2008 @ 17:02:48 #3

donroyco

dus niet Donroyco

tvp

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

maandag 24 maart 2008 @ 17:20:22 #4

CraZaay

prettig gestoord

Met een valid doctype heb ik qua box model eigenlijk zelden problemen met inconsistencies tussen IE en andere browsers.

maandag 24 maart 2008 @ 17:47:06 #5

Fliepke

Serieuze waarheid

Dit probleem, dat staat lost van je doctype

maandag 24 maart 2008 @ 20:26:47 #6

CraZaay

prettig gestoord

quote:
Op maandag 24 maart 2008 17:47 schreef Fliepke het volgende:
Dit probleem, dat staat lost van je doctype

Ik denk het niet

Als jij met een valid doctype een browser in standards mode laat renderen dan gebruikt zowel IE (6 & 7), Firefox, Safari, etc allemaal het W3C box model

maandag 24 maart 2008 @ 21:33:28 #7

Fliepke

Serieuze waarheid

hmm lijkt er idd op dat je gelijk hebt.

Ik ga er eens naar kijken.

(heb even wat zitten googlen

)

* Fliepke is n00b en biedt zijn nederige domheid aan

maandag 24 maart 2008 @ 21:36:07 #8

CraZaay

prettig gestoord

Hehe, no prob. Vandaar dat ik naar het gebruikte doctype vroeg, want dat scheelt héél veel box model koppijn

maandag 24 maart 2008 @ 21:49:28 #9

Fliepke

Serieuze waarheid

quote:
Op maandag 24 maart 2008 21:36 schreef CraZaay het volgende:
Hehe, no prob. Vandaar dat ik naar het gebruikte doctype vroeg, want dat scheelt héél veel box model koppijn

hehe, ik ben gewoon gestopt

Ga morgne wel verder

maandag 24 maart 2008 @ 23:00:03 #10

mcDavid

quote:
Op maandag 24 maart 200821:49 schreef Fliepke het volgende:

[..]

hehe, ik ben gewoon gestopt Ga morgne wel verder

Ja hoe moet ik nu nog een nuttige TVP doen dan?

woensdag 9 april 2008 @ 12:32:42 #11

Tuvai.net

Had net al een nieuw topic gepost omdat ik dit topic niet eens meer zag in de topiclist, maar goed...

Okee, een 100% height layout zonder al te veel poespas, tot daar aan toe. Dat is relatief eenvoudig en vrij vaak gedaan, als volgt (effe snel voorbeeld):

CSS

1
2
3
4
5
6
7
8
9
10

body, html{
border-width:0;
height:100%;
margin:0;
padding:0;

}
#container{
height:100%;
}

HTML

1
2
3
4
5
6
7
8
9

Goed, relatief eenvoudig en tevens 23424242 keren gedocumenteerd op Internet. Nu wil ik voor mezelf effe een simpel pagina`tje bouwen voor een kleine applicatie. Nu wil ik als het ware het volgende:

Ik wil dus een pagina zoals hierboven. De rode balk is een header waar naderhand alle leuke dingetjes als het logo en de navigatie in komt, deze header moet altijd 100px height hebben en zich over de volledige paginabreedte stretchen (100% width). Deze plak ik direct binnen mijn container en positioneer ik absolute.

In de container ligt ook een divje 'content', meteen na de div 'header'. Div 'content' bevat weer een divje 'innercontent', die in bovenstaande afbeelding blauw is. Om 'innercontent' moet een ruimte van 10px zitten en boven 'content' een margin van 100px (anders valt 'ie onder de header), en hier gaat het gewoon gigantisch de fout in; de pagina valt buiten mijn viewport (met als gevolg natuurlijk een scrollbarretje). Hoe op te lossen?

Voorbeeld staat hier: http://www.tuvai.net/zooi/cee-es-es/

Normaal werk ik nooit met 100% height layouts, en mij lijkt het iets relatief eenvoudigs, toch echter flinke problemen mee zoals je wel kunt zien. :P

FOK!-Schrikkelbaas woensdag 9 april 2008 @ 13:23:14 #12

Swetsenegger

Egocentrische Narcist

http://test.xploise.nl/floattest.html

Simpel verhaal. containerdivje met een blauwe achtergrond.
Daarbinnen 2 floating divs genest. 1 met een transparante background en 1 met een rode background.

De bedoeling is nu dat de linkerbalk de blauwe achtergrond krijgt van de containerdiv. Immers zal de linkerdiv anders 'korter' zijn dan de rechter div met volledige content.

Maar.... de container div 'groeit' niet mee met de content als dit floats zijn.... Hoe los ik dit op? (in dit voorbeeld kan je met een background image aan de gang, maar in de uiteindelijke pagina is dit stuk onderdeel van een groter geheel.)

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

FOK!-Schrikkelbaas woensdag 9 april 2008 @ 13:24:08 #13

Swetsenegger

Egocentrische Narcist

CSS 100% viewport/canvas heights zijn een drama tuvai. Ik zou je bijna aanraden een tabel te gebruiken....

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

woensdag 9 april 2008 @ 13:29:25 #14

Tuvai.net

quote:
Op woensdag 9 april 2008 13:23 schreef Swetsenegger het volgende:
http://test.xploise.nl/floattest.html

Simpel verhaal. containerdivje met een blauwe achtergrond.
Daarbinnen 2 floating divs genest. 1 met een transparante background en 1 met een rode background.

De bedoeling is nu dat de linkerbalk de blauwe achtergrond krijgt van de containerdiv. Immers zal de linkerdiv anders 'korter' zijn dan de rechter div met volledige content.

Maar.... de container div 'groeit' niet mee met de content als dit floats zijn.... Hoe los ik dit op? (in dit voorbeeld kan je met een background image aan de gang, maar in de uiteindelijke pagina is dit stuk onderdeel van een groter geheel.)

Dat komt doordat je alles aan het floaten bent (inclusief div right, waar de content nu in staat), dan gaat 'ie altijd vaag doen als je de hoogte in gaat werken. Probeer anders div.right eens margin-left:150px; mee te geven en de float er van weg te halen.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
   <style>
   #container{
      position:relative;
      width:950px;
      padding:0;
      background-color:blue;
   }

   .left{
      float:left;
      width:150px;
      padding:0;
      margin:0;
      background-color:transparent;
   }

   .right{
      margin-left:150px;
      padding:0;
      background-color:red;
      width:800px;
   }</style>
   </head>
   <body>
      <div id="container">
         <div class="left">Left</div>
         <div class="right">
            <p>bla</p>
            <p>bla</p>
            <p>bla</p>
         </div>
      </div>
   </body>
</html>

Tevens was je de DOCTYPE declaratie vergeten.

woensdag 9 april 2008 @ 13:31:12 #15

Tuvai.net

quote:
Op woensdag 9 april 2008 13:24 schreef Swetsenegger het volgende:
CSS 100% viewport/canvas heights zijn een drama tuvai. Ik zou je bijna aanraden een tabel te gebruiken....

Vertel mij wat.

100% height is eigenlijk best wel eenvoudig te doen met kleine website`jes/apps waar weinig van content in zit en waar je toch NOOIT buiten de viewport zult vallen. Maar het gaat gewoon door margin en padding gigantisch de mist in. Lijkt wel alsof ze met 100% height layouts ineens helemaal niet meer doen wat ze moeten doen (dus margin als in ruimte BUITEN het betreffende element en padding de ruimte IN het betreffende element).

Horizontaal, dus met widths, gaat het prima. Je kunt tegen een element al heel eenvoudig width:700px; margin:0 100px; laten doen wat gewoon perfect werkt.

FOK!-Schrikkelbaas woensdag 9 april 2008 @ 13:32:22 #16

Swetsenegger

Egocentrische Narcist

Hee, die had ik in de 'echte' omgeving geprobeerd maar werkte niet. NU wel...

Eens zien wat ik verkeerd gedaan had

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

FOK!-Schrikkelbaas woensdag 9 april 2008 @ 13:33:18 #17

Swetsenegger

Egocentrische Narcist

quote:
Op woensdag 9 april 2008 13:31 schreef Tuvai.net het volgende:

[..]

Vertel mij wat. 100% height is eigenlijk best wel eenvoudig te doen met kleine website`jes/apps waar weinig van content in zit en waar je toch NOOIT buiten de viewport zult vallen. Maar het gaat gewoon door margin en padding gigantisch de mist in. Lijkt wel alsof ze met 100% height layouts ineens helemaal niet meer doen wat ze moeten doen (dus margin als in ruimte BUITEN het betreffende element en padding de ruimte IN het betreffende element).

Klopt, ik heb wel hacks gezien die een footer altijd strak onderaan de viewport positioneren. Maar eigenlijk geen zuivere css oplossing.

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

woensdag 9 april 2008 @ 15:41:03 #18

mcDavid

quote:
Op woensdag 9 april 200813:23 schreef Swetsenegger het volgende:
http://test.xploise.nl/floattest.html

Simpel verhaal. containerdivje met een blauwe achtergrond.
Daarbinnen 2 floating divs genest. 1 met een transparante background en 1 met een rode background.

De bedoeling is nu dat de linkerbalk de blauwe achtergrond krijgt van de containerdiv. Immers zal de linkerdiv anders 'korter' zijn dan de rechter div met volledige content.

Maar.... de container div 'groeit' niet mee met de content als dit floats zijn.... Hoe los ik dit op? (in dit voorbeeld kan je met een background image aan de gang, maar in de uiteindelijke pagina is dit stuk onderdeel van een groter geheel.)

In het vorige topic ook al zo'n probleem opgelost.
Wat het beste werkt is er een lege div onder zetten, met alleen clear:both als css stijl.
Omdat die door de clear:both niet naast andere objecten mag gaan staan, gaat'ie er onder staan, en weet de parent div weer hoe hoog zijn inhoud is.

-edit- Als je ook een footer hebt, kun je die ook voor dit doel gebruiken.

FOK!-Schrikkelbaas woensdag 9 april 2008 @ 15:46:07 #19

Swetsenegger

Egocentrische Narcist

ook met footer, die uiteraard al een clear:both had, groeit de container div niet mee met de langste geneste float.

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

vrijdag 11 april 2008 @ 08:54:46 #20

webbyplus

Hallo,

Ik zit met een website probleempje.
Ergens heb ik iets gewijzigd in mijn website layout wat er voor gezorgd heeft dat het vernacheld getoond wordt in internetexplorer. In firefox loopt ie wel perfect.
Kan iemand zien wat er mis is? Mijn site www.voetbalmanager.net , mijn css: http://www.dutchville.com/kid/images/Orange.css

bvd
webby

to say of what is that it is not, or of what is not that it is, is false, while to say of what is that it is, or of what is not that it is not, is true

vrijdag 11 april 2008 @ 09:08:15 #21

donroyco

dus niet Donroyco

quote:
Op vrijdag 11 april 2008 08:54 schreef webbyplus het volgende:
Hallo,

Ik zit met een website probleempje.
Ergens heb ik iets gewijzigd in mijn website layout wat er voor gezorgd heeft dat het vernacheld getoond wordt in internetexplorer. In firefox loopt ie wel perfect.
Kan iemand zien wat er mis is? Mijn site www.voetbalmanager.net , mijn css: http://www.dutchville.com/kid/images/Orange.css

bvd
webby

Hier is niks te zien

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

vrijdag 11 april 2008 @ 09:17:16 #22

CraZaay

prettig gestoord

quote:
Op vrijdag 11 april 2008 08:54 schreef webbyplus het volgende:

Ergens heb ik iets gewijzigd in mijn website layout wat er voor gezorgd heeft dat het vernacheld getoond wordt in internetexplorer.

Wat heb je gewijzigd? Dat beperkt het zoeken een heel stuk

vrijdag 11 april 2008 @ 09:20:03 #23

webbyplus

Ik heb alleen een aanpassing gedaan aan de blockquote. Verder niets. Misschien iets in de index file dat ik verkeerd heb aangepast...

to say of what is that it is not, or of what is not that it is, is false, while to say of what is that it is, or of what is not that it is not, is true

vrijdag 11 april 2008 @ 09:22:07 #24

webbyplus

quote:
Op vrijdag 11 april 2008 09:08 schreef donroyco het volgende:

[..]

Hier is niks te zien

Zo ziet het er uit in IE:

to say of what is that it is not, or of what is not that it is, is false, while to say of what is that it is, or of what is not that it is not, is true

vrijdag 11 april 2008 @ 10:35:34 #25

webbyplus

Arghhh ik ben er al achter.
Ik heb deze domein geregistreerd en hij verwijst door naar mijn webhosting. Het doorsturen gebeurd door middel van een pagina-groot frame met daarin de gelinkte pagina's op mijn webhosting. Door middel van javascript vebreek ik die frame... En dat was ik dus vergeten mee te nemen in mijn html

Is weer gefixed!

to say of what is that it is not, or of what is not that it is, is false, while to say of what is that it is, or of what is not that it is not, is true

donderdag 17 april 2008 @ 17:06:20 #26

JJasperO

Sinds mijn vorige vraag over divjes en floats ben ik gestart met een nieuw/schoon ontwerp omdat ik niet tevreden was. Wat ik de vorige keer heb geleerd is dat de volgorde van je div elementen in de code van belang is: je moet beseffen dat de volgorde van de div elementen de 'normal document flow' bepaalt zolang het normal document flow blijft. Wat ik ook heb geleerd is dat floats ervoor zorgen dat de div elementen niet meer deelnemen aan de normal document flow. Als je echter veel floats gebruikt is alnog de volgorde van belang want ook met meerdere floats wordt de document flow bepaald door de volgorde in de code. Verder begrijp ik de functie van 'clear'.

Met deze kennis dacht ik volledig autonoom te kunnen zijn, maar nog steeds stuit ik op een klein probleem.

Eerst even de code:

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

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="file:///C|/Users/Administrator/Desktop/Test 03/Assets/styles.css" rel="stylesheet" type="text/css" />
<link href="Assets/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="containerDiv">
   <div id="rechterDiv"></div>
    <div id="headerDiv"></div>
    <div id="mainDiv"></div>
    <div id="footerDiv"></div>
    <div id="navigatieDiv"></div>
</div>
</body>
</html>

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

@charset "utf-8";
#containerDiv {
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   height: 600px;
   width: 900px;
   background-color: #333333;
}
#rechterDiv {
   float: right;
   height: 500px;
   width: 100px;
   border: 1px solid #FFFFFF;
}
#headerDiv {
   float: right;
   height: 100px;
   width: 690px;
   border: 1px solid #FFFFFF;
}
#mainDiv {
   float: right;
   height: 300px;
   width: 690px;
   border: 1px solid #FFFFFF;
}
#footerDiv {
   float: right;
   height: 100px;
   width: 690px;
   border: 1px solid #FFFFFF;
}
#navigatieDiv {
   height: 500px;
   width: 100px;
   border: 1px solid #FFFFFF;
}

body {
   margin: 0px;
   background-color: #000000;
}

Als je deze codering overneemt zul je waarschijnlijk in je browser een goed geheel tegenkomen. Maar als je in Dreamweaver zit (ik althans), dan zul je zien dat de navigatieDiv ergens onderin blijft hangen: alsof hij nog rekening houdt met de float-divjes terwijl deze toch verwijderd zijn uit de normal document flow waar de navigatieDiv nog WEL onderdeel van uitmaakt.

Met andere woorden. Wat is hier nu toch niet optimaal aan? Edit: ook in IE7 blijft navigatieDiv hangen.

[ Bericht 12% gewijzigd door JJasperO op 17-04-2008 22:16:30 ]

donderdag 17 april 2008 @ 17:13:31 #27

CraZaay

prettig gestoord

quote:
Op donderdag 17 april 2008 17:06 schreef JJasperO het volgende:

Met andere woorden. Wat is hier nu toch niet optimaal aan?

Wat is jouw graadmeter voor optimale code is dan mijn vraag. Of het er goed uitziet in Dreamweaver?

donderdag 17 april 2008 @ 17:22:25 #28

JJasperO

quote:
Op donderdag 17 april 2008 17:13 schreef CraZaay het volgende:

[..]

Wat is jouw graadmeter voor optimale code is dan mijn vraag. Of het er goed uitziet in Dreamweaver?

Hoewel de divjes zich voorbeeldig

gedragen in Opera, blijft de navigatieDiv in de Dreamweaver interface hangen. Dat is mijns inziens niet optimaal omdat het dan moeilijker is om in design view de website te overzien.

Verder vermoed ik dat het blijven hangen van een divje in de dreamweaver interface ook een indicatie is voor een technische onvolkomenheid.

donderdag 17 april 2008 @ 19:32:04 #29

CraZaay

prettig gestoord

Check je site in Opera, IE6 & 7, Safari en Firefox zou ik zeggen. Ziet dat er goed uit en is de W3C-validator het eens met je code, dan zou ik me geen zorgen maken. Meteen een goede reden om Dreamweaver de deur uit te doen

donderdag 17 april 2008 @ 21:34:43 #30

JJasperO

quote:
Op donderdag 17 april 2008 19:32 schreef CraZaay het volgende:
Check je site in Opera, IE6 & 7, Safari en Firefox zou ik zeggen. Ziet dat er goed uit en is de W3C-validator het eens met je code, dan zou ik me geen zorgen maken. Meteen een goede reden om Dreamweaver de deur uit te doen

Oei, in IE7 gaat het ook fout. Daar blijft navigatieDiv hangen. In Opera niet. Het is dus half goed

.

donderdag 17 april 2008 @ 21:39:36 #31

CraZaay

prettig gestoord

quote:
Op donderdag 17 april 2008 21:34 schreef JJasperO het volgende:

[..]

Oei, in IE7 gaat het ook fout. Daar blijft navigatieDiv hangen. In Opera niet. Het is dus half goed .

Je HTML valideert wel?

donderdag 17 april 2008 @ 21:45:51 #32

JJasperO

Ik heb de HTML erdoor gegooid, ik weet niet of ik ook iets met de externe CSS moet? Dit is het resultaat:

Passed validation, 1 warning(s)

Warning:
Character Encoding mismatch!

The character encoding specified in the HTTP header (iso-8859-1) is different from the value in the <meta> element (utf-8). I will use the value from the HTTP header (iso-8859-1) for this validation.

Klik hier voor de volledige validatie.

donderdag 17 april 2008 @ 22:44:16 #33

JJasperO

Probleem opgelost.

<div id="headerDiv"></div>
<div id="mainDiv"></div>
<div id="footerDiv"></div>

Deze divjes heb ik tezamen in 1 grote div gezet waardoor er drie grote blokken ontstaan. Links/midden/rechts. Links is normal document flow of float left of float right, midden en rechts is float right. Nu gaat alles wel goed. Waarom kan ik niet doorgronden maar het is duidelijk dat ik zoveel mogelijk moet bundelen.

dinsdag 22 april 2008 @ 17:16:10 #34

BaggerUser

ModderFokker!

ik heb nu iets wat normaal giga simpel zou moeten zijn maar kom er even niet uit, heb gewoon simpel 3 divs nodig

div 3 moet zich dus automatisch aanpassen aan de grootte van het scherm... maar met width: auto; etc klopt er allemaal geen snars van

of loop ik nu tegen een algemene css probleem op? heb er namelijk nooit last van gehad nog

De enige echte BaggerUser!
Riemen
fiets kopen

vrijdag 25 april 2008 @ 01:35:47 #35

chalrune

met inhoud in "right" word het automatisch netjes groter

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">

<head>
   <title>Baggeruser opzetje</title>
   
   <link rel="stylesheet" type="text/css" href="stylesheet.css" />

</head>

<body>
   
   <div id="header">

   </div>

      <div id="left">   </div>
      <div id="right"> sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs gggfgsf sfgsf sf sf sfgsf gs </div>


</body>

</html>

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

body {
   font-family: Myriad Pro, Tahoma, Verdana, Arial, Sans-Serif;
   background-color: #FFF;
   font-size: 12px;
}

/*Header*/
#header {
   background-color: #0F0;
   height: 100px;
}

/*Inhoud*/
#left {
   float: left;
   height: 500px;
   color: #000;
   width: 20%;
   background-color: #F00;
}
#right {
   overflow: auto;
   float: left;
   color: #000;
   width: 80%;
   background-color: #00F;
}

vrijdag 25 april 2008 @ 07:58:02 #36

CraZaay

prettig gestoord

quote:
Op vrijdag 25 april 2008 01:35 schreef chalrune het volgende:
met inhoud in "right" word het automatisch netjes groter

En als je wilt dat dat vlak om lay-out redenen altijd zo groot is: faux columns (de breedte is geen probleem, die kun je gewoon op 100% zetten met links een marge voor het blok ernaast, de hoogte is wel een issue wat je hiermee oplost).

maandag 28 april 2008 @ 22:53:48 #37

Chandler

Weet iemand of het volgende mogelijk is in CSS/Divs en zo ja, hoe?

en dan doel ik op het eerste kopje een soortement van mouse on/over?

Just say hi!

maandag 28 april 2008 @ 23:04:49 #38

CraZaay

prettig gestoord

Wat wil je nou pecies wanneer je waar precies met je muis over gaat?

maandag 28 april 2008 @ 23:08:36 #39

Light

quote:
Op maandag 28 april 2008 22:53 schreef Chandler het volgende:
Weet iemand of het volgende mogelijk is in CSS/Divs en zo ja, hoe?

[ afbeelding ]

en dan doel ik op het eerste kopje een soortement van mouse on/over?

Dat kan in principe met de pseudo-class :hover. Dat werkt niet gegarandeerd in IE, daar is :hover eigenlijk alleen voor linkjes. Maar zo staat het niet in de W3C specificatie.

fokstok.nl

maandag 28 april 2008 @ 23:16:27 #40

Chandler

Ik doel dus op het eerste blok met de ronde border er omheen. Dit wil ik per blok laten zien en als je tabt/klikt dat deze verspringt naar het volgende blok!

Just say hi!

dinsdag 29 april 2008 @ 08:37:31 #41

CraZaay

prettig gestoord

Dat gaat Javascript worden. Waneer een input focus ontvangt moet de omliggende div de alternatieve styling krijgen.

dinsdag 29 april 2008 @ 08:56:56 #42

Chandler

Ik heb het dan maar zelf gemaakt
http://www.bruggema.nl/2/hovertest.html

Wat vinden jullie er van? en hebben jullie tips?

Dit dan alleen met mouseover! en zonder de stijling, graag zou ik comments ontvangen m.b.t. de code en eventueel tips om het te verbeteren.

En hoe zal ik de inhoud vullen? fieldset? divs?

Just say hi!

dinsdag 29 april 2008 @ 09:09:40 #43

CraZaay

prettig gestoord

Als je alleen onmouseover wilt hebben kun je natuurlijk volstaan met om je "buitenste" div's iets als:

1	onmouseover="this.className='hover'" onmouseout="this.className=''"

En in je CSS:

1
2
3
4
5
6
7

div.hover div.header {
doe iets
}

div.hover div.footer {
doe iets
}

En voor het tweede deel van je vraag: gebruik wat semantisch correct is. Fieldsets om labels (lees hoe je ze gebruikt!) en inputs die bij elkaar horen te groeperen dus.

dinsdag 29 april 2008 @ 09:24:21 #44

Chandler

Ik heb je tips overgenomen en het volgende er van gemaakt!

Werkt inderdaad veel netter, beter en overzichtelijker

http://www.bruggema.nl/2/hovertest1.html

maar nu snap ik helaas nog niet precies hoe ik moet werken met de fieldset, aangezien het gaat om veel div boxjes... heb je een handige en goede tutor in je bookmark lijst?

-edit-
In firefox krijg ik 10px spacing, was te verwachten

Just say hi!

dinsdag 29 april 2008 @ 09:40:01 #45

CraZaay

prettig gestoord

this.className overschrijft overigens de class "box" die je al gezet had.

De laatste bookmarks die ik had voor basic HTML waren in 2002 ofzo

Maar moet op te googlen zijn toch? Overigens heb jij waarschijnlijk div's nodig, aangezien voor iedere input een fieldset gebruiken geen nut heeft.

dinsdag 29 april 2008 @ 09:43:05 #46

Chandler

Ja, ik was al even met fieldset bezig geweest maar dat werkt idd niet zoals verwacht

en aangezien ik afbeeldingen wil gebruiken ben ik dus even bezig

Ik heb het nu middels divjes gemaakt, al vind ik wel dat het heel veel space in gebruik neemt maar goed, dat kost nou eenmaal fancy shit

Nu het volgende, echter vind ik als ik een lange text gebruik dit echt erg lelijk.

http://www.bruggema.nl/2/hovertest2.html

Any idea's?

[ Bericht 24% gewijzigd door Chandler op 29-04-2008 09:54:57 ]

Just say hi!

dinsdag 29 april 2008 @ 11:56:11 #47

CraZaay

prettig gestoord

Als jij er eerst eens valid HTML van maakt, dan zal ik eens kijken

dinsdag 29 april 2008 @ 12:49:11 #48

Chandler

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bruggema.nl%2F2%2Fhovertest2.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Strict

[ Bericht 63% gewijzigd door Chandler op 29-04-2008 12:57:14 ]

Just say hi!

dinsdag 29 april 2008 @ 16:47:09 #49

Chandler

quote:
Op dinsdag 29 april 2008 12:49 schreef Chandler het volgende:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bruggema.nl%2F2%2Fhovertest2.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Strict

Iemand tips?

Just say hi!

dinsdag 29 april 2008 @ 21:09:18 #50

Xcalibur

Ik ben toch echt geen dummy, maar ik heb nu iets waar ik niet uitkom....

Ik heb een tabel, met in iedere cel een INPUT veld. Ik wil dat het inputveld stijf tegen de borders van de TD aanstaat, maar wat ik ook doe: boven en onder 1px ruimte. Een image kan ik er wel stijf inzetten, door een <br /> erachter te zetten, maar bij de INPUT heeft dat geen enkel effect. Dit doet zich zowel in IE (6) als in FF voor.

Hier een vereenvoudigd codevoorbeeld (de image is ter illustratie dat dat dus wel werkt):

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

Alle mogelijke variaties met margins en paddings enzo heb ik volgens mij al geprobeerd. Wie heeft de gouden tip?

FOK!-Schrikkelbaas dinsdag 29 april 2008 @ 22:15:30 #51

Swetsenegger

Egocentrische Narcist

Ik zie nergens een form tag. heb je daar alle paddings en margins al uitgehaald?

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

dinsdag 29 april 2008 @ 23:08:29 #52

CraZaay

prettig gestoord

quote:
Op dinsdag 29 april 2008 21:09 schreef Xcalibur het volgende:
Ik ben toch echt geen dummy, maar ik heb nu iets waar ik niet uitkom....

Kun je dit ergens online zetten? Kunnen we met Firebug realtime editen

dinsdag 29 april 2008 @ 23:21:12 #53

Light

quote:
Op dinsdag 29 april 2008 16:47 schreef Chandler het volgende:

[..]

Iemand tips?

text-indent: -999;
-999 wat? appels? peren?

En footer mag wel een clear: both;

Ik ga nog even verder kijken

fokstok.nl

woensdag 30 april 2008 @ 00:30:56 #54

Light

Try this:
CSS:

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

@CHARSET "UTF-8";
html, body {
   background-color: #d8d0bd;
}
.box {
   width: 635px;
}
.box:hover, .ebhover {
   background-color: #b4a78d;
}
.header {
   height: 11px;
}
.box:hover .header, .ebhover .header {
   background-image: url(http://www.bruggema.nl/2/h1header.png);
}
.content {
   padding: 5px;
   width: 625px;
}
.footer {
   height: 11px;
   clear: both;
}
.box:hover .footer, .ebhover .footer {
   background-image: url(test);
}
.cleft, .cright {
   float: left;
   width: 50%;
}

HTML

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test opzetje</title>
<link rel="stylesheet" style="text/css" href="hovertest2.css"/>
<meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-15"/>
</head>
<body id="mybody">
<div class="box">
   <div class="header"></div>
   <div class="content">
      <div class="cleft">
         <img src="map.png" class="map" alt="map" />Test<br />
         <img src="pointer.png" class="pointer" alt="pointer" /> Korte omschrijving
      </div>
      <div class="cright">
         <select name="woei"><option>Sorteren op ABC</option><option>Sorteren op CBA</option></select>
      </div>
   </div>
   <div class="footer"></div>
</div>
<div class="box">
   <div class="header"></div>
   <div class="content">
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
   </div>
   <div class="footer"></div>
</div>
<div class="box">
   <div class="header"></div>
   <div class="content">
      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
   <div class="footer"></div>
</div>
<script type="text/javascript">
ebHover = function() {
   var ebEls = document.getElementById("mybody").getElementsByTagName("div");
   var regex = new RegExp('box');
   for (var i=0; i<ebEls.length; i++) {
      if(regex.test(ebEls[i].className)) {
         ebEls[i].onmouseover=function() {
            this.className+=" ebhover";
         }
         ebEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" ebhover\\b"), "");
         }
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", ebHover);
</script>
</body>
</html>

(De javascriptcode is een licht aangepaste versie van de code hier. Ik heb die code niet getest, zit hier ook zonder IE6. Kan dus ook niet garanderen dat het gaat werken.)

fokstok.nl

woensdag 30 april 2008 @ 08:38:50 #55

Chandler

@Light, jou hover is inderdaad fijner dan die van mij

maar ik heb die van mij gisteren reeds aangepast (en vandaag ook weer een beetje)

http://www.bruggema.nl/2/hovertest4.html (net even gespiekt bij jou codes) en dit er van gemaakt!

Maar nu als ik een item uit een pulldown wil selecteren en buiten het kader komt schiet mij box gelijk terug naar het orgineel, hoe kan ik dit oplossen?

Just say hi!

woensdag 30 april 2008 @ 09:51:40 #56

Xcalibur

quote:
Op dinsdag 29 april 2008 22:15 schreef Swetsenegger het volgende:
Ik zie nergens een form tag. heb je daar alle paddings en margins al uitgehaald?

De form tag staat sowieso buiten de table, dus die zou sowieso geen invloed moeten hebben op de ruimte in de TD?

Ik heb em hier online gezet: http://test.dubbelepunt.com/table_input.html
Ik ga zo Koninginnedag vieren, dus ik weet niet wanneer ik dit topic weer check

woensdag 30 april 2008 @ 14:49:37 #57

JJasperO

Goedemidkoninginnedag,

Enkel in IE6 blijft een div element onderin hangen

.

1
2
3

  <div id="navigatieDiv">
        <div id="linksDiv"><a href="index.html">SCHILDERIJEN</a><a href="beaottink.html">BEA OTTINK</a><a href="index.html">KUNSTMARKTEN</a><a href="index.html">CONTACT</a></div>
  </div>

1
2
3
4
5
6

#navigatieDiv {
   height: 515px;
   width: 110px;
   background-color: #333333;
   padding-top: 100px;
}

De navigatieDiv is ondergebracht in een containerDiv, heeft oorspronkelijk geen positioning eigenschappen meegekregen en is de parent div voor een child div dat linkjes bevat, zoals je in de html code hierboven kunt zien. Alle andere parent divs in de containerDiv hebben de eigenschap float right meegekregen en staan in de code allemaal voor de navigatieDiv zodat de navigatieDiv als vanzelf linksbovenin moet komen te staan zonder dat het de float right div elementen naar beneden drukt (hoewel dat volgens mij alleen gebeurt als je de navigatieDiv ook een float meegeeft). Dat gebeurt ook, behalve in IE6. Een float left haalt niks uit.

Ideeen?

Concept website. De links aan de linkerkant van het zwarte midden staan dus in de linksDiv welke is ondergebracht in de navigatieDiv waar we het hier over hebben.

woensdag 30 april 2008 @ 15:05:05 #58

CraZaay

prettig gestoord

Hey JJasperO, ook hier?

woensdag 30 april 2008 @ 15:54:58 #59

JJasperO

quote:
Op woensdag 30 april 2008 15:05 schreef CraZaay het volgende:
Hey JJasperO, ook hier?

correct

donderdag 1 mei 2008 @ 13:36:44 #60

Hmail

Ha, help

Ik heb een pagina die niet helemaal mee wil werken. Al met al heb ik door te doen al aardig wat geleerd, en tot nu toe lijkt het ook aardig goed te gaan, alleen heb ik in de huidige situatie even geen enkel idee hoe ik dit moet oplossen.
Probleem: http://geensite.nl/boxed/boxed.html
Zoals je ziet is het de bedoeling dat de div main_center doorloopt, stretcht. Alleen zou het prettig wezen als aan de linker-, en rechterkant de rest van de pagina ook mee loopt, in plaats van dat het halverwege ophoudt. Van de linkerkant snap ik het wel, daar heb ik (nog) overal fixed heights opgegeven, maar ik focus me nu eerst even op de rechterkant. Iemand enig idee hoe ik er voor zorg dat de div main_right net zo lang is als main_center?

Alvast bedankt

edit: Dit is dus wat ik bedoel: http://geensite.nl/boxed/stretch.html -> Hoe zorg ik dat div3 net zo lang word als div2?
edit2: Inmiddels allang opgelost

[ Bericht 7% gewijzigd door Hmail op 02-05-2008 00:59:20 ]

donderdag 1 mei 2008 @ 19:05:44 #61

Chandler

Crazzaaaaay? vergeet je mijn gevalideerd documentje niet?

Just say hi!

vrijdag 2 mei 2008 @ 11:54:43 #62

Xcalibur

quote:
Op woensdag 30 april 2008 09:51 schreef Xcalibur het volgende:
Ik heb em hier online gezet: http://test.dubbelepunt.com/table_input.html

Schopje

Ik heb dus een pixel ruimte tussen de TD en de INPUT, de vraag is hoe ik die weg krijg

zaterdag 3 mei 2008 @ 09:50:59 #63

Chandler

Heb je de border van de input al op 0 gezet? (hoop dat dat gaat werken hoor, niet getest)

Just say hi!

zaterdag 3 mei 2008 @ 09:54:52 #64

Light

quote:
Op vrijdag 2 mei 2008 11:54 schreef Xcalibur het volgende:

[..]

Schopje
Ik heb dus een pixel ruimte tussen de TD en de INPUT, de vraag is hoe ik die weg krijg

Nou, in ieder geval niet met inline styles. Of wel, maar je maakt het jezelf niet makkelijker en ik kan ook niet snel even wat testen.

fokstok.nl

maandag 5 mei 2008 @ 21:26:43 #65

Xcalibur

De inline styles zijn voor test-doeleinden, zodat ik het hier wat gemakkelijker kon posten

De border van de input op 0 helpt ook niet, en die staan hier ook voor test-doeleinden aan....

dinsdag 6 mei 2008 @ 08:40:07 #66

Tuvai.net

quote:
Op woensdag 30 april 2008 09:51 schreef Xcalibur het volgende:

[..]

De form tag staat sowieso buiten de table, dus die zou sowieso geen invloed moeten hebben op de ruimte in de TD?

Ik heb em hier online gezet: http://test.dubbelepunt.com/table_input.html
Ik ga zo Koninginnedag vieren, dus ik weet niet wanneer ik dit topic weer check

Ik zou sowieso eens beginnen met je apostrophes te vervangen voor aanhalingstekens.

Wat het probleem zelf betreft, probeer eens alles een margin en padding van 0 mee te geven, en de border van je inputs uit te schakelen.

EDIT: Dit werkt voor mij. Heb effe de <table> 1px cellspacing en een bgColor meegegeven zodat je de grijze achtergrond van deze table ziet. Door de <input>s op display:block te zetten ging de rare marge weg.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
   <title>Table input</title>
</head>

<style type="text/css">
input{
   display:block;
}
</style>

<body>

<form action="" style="margin: 0; padding: 0;">
   <table cellspacing="1" cellpadding="0" style="background-color:#aaaaaa;">
      <tr>
         <td><input style="border-width:0; background-color: #FFBFBF;" /></td>
         <td><input style="border-width:0; background-color: #FFBFBF;" /></td>
      </tr>
      <tr>
         <td><input style="border-width:0; background-color: #FFBFBF;" /></td>
         <td><input style="border-width:0; background-color: #FFBFBF;" /></td>
      </tr>
      <tr>
         <td><img src="http://i.fokzine.net/pm_media/swtb_no_pm.png" width="15" height="15" border="0" /></td>
         <td><img src="http://i.fokzine.net/pm_media/swtb_no_pm.png" width="15" height="15" border="0" /></td>
      </tr>
   </table>
</form>

</body>
</html>

Maare, je weet dat je voor zulke dingetjes eigenlijk geen table moet gebruiken en dat een formulier in een <fieldset> hoort, toch?

[ Bericht 30% gewijzigd door Tuvai.net op 06-05-2008 08:48:38 ]

dinsdag 6 mei 2008 @ 11:09:25 #67

Xcalibur

quote:
Op dinsdag 6 mei 2008 08:40 schreef Tuvai.net het volgende:
Door de <input>s op display:block te zetten ging de rare marge weg.

Dat ga ik eens proberen dan

quote:
Op dinsdag 6 mei 2008 08:40 schreef Tuvai.net het volgende:
Maare, je weet dat je voor zulke dingetjes eigenlijk geen table moet gebruiken en dat een formulier in een <fieldset> hoort, toch?

Een normaal formulier gaat in een fieldset inderdaad, maar dit wordt een grid en is daarmee tabelvormig

Vandaar dat ik ook die gekke marge weg wil hebben, zodat ik de velden tegen elkaar kan zetten....

dinsdag 6 mei 2008 @ 19:28:25 #68

Xcalibur

Die display:block heeft bij mij geen enkel effect..... ?

zaterdag 24 mei 2008 @ 06:21:09 #69

DionysuZ

Respect my authority!

Ok vraagje, zit met een probleem en krijg deze niet opgelost.

Probleem is als volgt: ik heb een containerdiv (#menu) van een bepaalde, vaste grootte. In die container zit een unordered list met daarin alle menu items. Dit menu moet rechtsonder aan de div uitgelijnd zijn. Dit heb ik opgelost door de UL position: absolute te geven en bottom: 0.

Allemaal goed en aardig, werkt mooi. Maar nu wil ik, dat als de gebruiker bijv. een bepaalde tekstgrootte kiest (alle tekst is volgens em maten opgebouwd voor accessibility voor slechtzienden), of er meer dan een bepaalde hoeveelheid menuitems worden aangemaakt (variabel), dat de containerdiv dus gaat scrollen.

Nu dacht ik dat even op te lossen met overflow: auto. Maar dat werkt dus niet. Zelfs bij overflow: scroll blijven de scrollbalken grijs als je de tekst zó groot maakt dat hij buiten de kaders valt.

De enige oplossing was om de UL een vaste grootte te geven, maar dan is het menu weer niet volledig aan de onderkant van #menu uitgelijnd.

Probleem dus.

Weet iemand een oplossing?

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

zaterdag 24 mei 2008 @ 09:15:43 #70

CraZaay

prettig gestoord

Door de absolute positionering haal je het menu uit de flow, en komen er dus geen scrollbalken. Heb je een voorbeeld online staan?

zaterdag 24 mei 2008 @ 20:49:21 #71

DionysuZ

Respect my authority!

quote:
Op zaterdag 24 mei 2008 09:15 schreef CraZaay het volgende:
Door de absolute positionering haal je het menu uit de flow, en komen er dus geen scrollbalken. Heb je een voorbeeld online staan?

ik kan wel een voorbeeld laten zien, maar omdat het de toekomstige site van een klant betreft kan ik die niet zomaar hier posten. PM misschien?

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

vrijdag 30 mei 2008 @ 19:14:32 #72

Irix

Ik heb nogal een vaag probleem met het opmaken van submit buttons dmv css.

De relevante css code

input[type="submit"]
{

background-color: #3399FF;
border:double;
font-family:Verdana, Arial, Helvetica, sans-serif;

}

select {

background-color:#3399FF;
font-family:Verdana, Arial, Helvetica, sans-serif;
border:double;
}

Dit werkt allemaal prima op de meeste pagina's. Bij een pagina werkt 't echter niet.
De code van deze pagina is (let niet op php):

<form action="changebet2.php" method="post">
<input name="who" type="hidden" value="<?php echo $who;?>"/>
<select name="select">
<option>
€0M
</option>
<?php

$counter = '1';

while ($counter <= $money)
{
echo "<option>";
echo "€";
echo $counter;
echo "M";
echo "</option>";
$counter = $counter +1;
}
?>
</select>
<input type="submit" value="Place bet." name="submit"/>
</form>

Het select-menu ziet eruit zoals opgegeven in de css. De submit-button heeft een dubbele rand, maar het font-type klopt niet!

Het gekke is dat als ik of het select menu weghaal, of de submit button in de code boven de code van het select menu plak, dat het dan wel klopt. Weet iemand waarom dit is?

zaterdag 31 mei 2008 @ 10:36:28 #73

CraZaay

prettig gestoord

Begin eens met de geparste PHP (oftewel: de HTML die naar de browser gaat) te posten en deze binnen [code] tags te zetten

Je weet overigens dat deze CSS 3 selectors niet in alle browsers werken (lees: IE6 bijvoorbeeld)?

zaterdag 31 mei 2008 @ 10:37:12 #74

CraZaay

prettig gestoord

quote:
Op zaterdag 24 mei 2008 20:49 schreef DionysuZ het volgende:

ik kan wel een voorbeeld laten zien, maar omdat het de toekomstige site van een klant betreft kan ik die niet zomaar hier posten. PM misschien?

Late reacte: je kunt toch gewoon een testcase zonder bedrijfsgegevens online zetten

zaterdag 31 mei 2008 @ 12:09:58 #75

Light

quote:
Op zaterdag 31 mei 2008 10:36 schreef CraZaay het volgende:
Begin eens met de geparste PHP (oftewel: de HTML die naar de browser gaat) te posten en deze binnen [code] tags te zetten

Je weet overigens dat deze CSS 3 selectors niet in alle browsers werken (lees: IE6 bijvoorbeeld)?

Ik zie er ook nog php in staan, dus het zou ook binnen [php] tags mogen

fokstok.nl

zaterdag 31 mei 2008 @ 13:23:45 #76

CraZaay

prettig gestoord

quote:
Op zaterdag 31 mei 2008 12:09 schreef Light het volgende:

Ik zie er ook nog php in staan, dus het zou ook binnen [php] tags mogen

Vandaar dat ik vroeg de geparste PHP te posten (de uiteindelijke HTML dus). Het is immers geen PHP probleem

zaterdag 31 mei 2008 @ 21:14:03 #77

DionysuZ

Respect my authority!

quote:
Op zaterdag 31 mei 2008 10:37 schreef CraZaay het volgende:

[..]

Late reacte: je kunt toch gewoon een testcase zonder bedrijfsgegevens online zetten

testcase:
http://testcase.einz.nl

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

zondag 1 juni 2008 @ 01:55:30 #78

Irix

quote:
Op zaterdag 31 mei 2008 12:09 schreef Light het volgende:

[..]

Ik zie er ook nog php in staan, dus het zou ook binnen [php] tags mogen :)

1
2
3
4
5
6
7
8
9

Your current bet for Erwin Koeman is €5M. If you want to cancel this bet, set amount to 0.<br>You can spend €60M on bets.<br><br><form action="changebet2.php" method="post">
<input name="who" type="hidden" value="Erwin Koeman"/>
<select name="select">
<option>
€0M
</option>
<option>€1M</option><option>€2M</option><option>€3M</option><option>€4M</option><option>€5M</option><option>€6M</option><option>€7M</option><option>€8M</option><option>€9M</option><option>€10M</option><option>€11M</option><option>€12M</option><option>€13M</option><option>€14M</option><option>€15M</option><option>€16M</option><option>€17M</option><option>€18M</option><option>€19M</option><option>€20M</option><option>€21M</option><option>€22M</option><option>€23M</option><option>€24M</option><option>€25M</option><option>€26M</option><option>€27M</option><option>€28M</option><option>€29M</option><option>€30M</option><option>€31M</option><option>€32M</option><option>€33M</option><option>€34M</option><option>€35M</option><option>€36M</option><option>€37M</option><option>€38M</option><option>€39M</option><option>€40M</option><option>€41M</option><option>€42M</option><option>€43M</option><option>€44M</option><option>€45M</option><option>€46M</option><option>€47M</option><option>€48M</option><option>€49M</option><option>€50M</option><option>€51M</option><option>€52M</option><option>€53M</option><option>€54M</option><option>€55M</option><option>€56M</option><option>€57M</option><option>€58M</option><option>€59M</option><option>€60M</option></select>
<input type="submit" value="Place bet." name="submit"/>
</form>

Browser die ik gebruik is Firefox 2.0.0.14.

zondag 1 juni 2008 @ 20:23:11 #79

Banzaiaap

Tony Rocky Horror

Wordpress CSS bewerken is een pain in the ass zeg :(

Ik heb het nu aardig voor elkaar: blog.banzaidesign.nl , maar als je een losse pagina bekijkt loopt de footer niet goed door! :/

HTML gewone index

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

<?php
<div id="wrapper">
<div id="menutekst"><ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About me</a></li>
            <li><a href="#">C V</a></li>
        </ul>
        <ul id="right_menu">
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>       </div> <img src="http://www.banzaidesign.nl/blog/wp-content/themes/banzaidesign/images/blogheader.jpg" id="banner" border="0px" alt="Dark Times"/>
get_header();
    <div id="menu">
    </div>
    <div id="content" class="narrowcolumn">


     if (have_posts()) :

         while (have_posts()) : the_post();

            <div class="post" id="post- the_ID(); ">
                <h2><a href=" the_permalink() " rel="bookmark" title="Permanent Link to  the_title_attribute(); "> the_title(); </a></h2>
                <small> the_time('F jS, Y')  </small>

                <div class="entry">
                     the_content('Read the rest of this entry »');
                </div>

                <p class="postmetadata"> the_tags('Tags: ', ', ', '<br />');  Posted in  the_category(', ')  |  edit_post_link('Edit', '', ' | ');    comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); </p>
            </div>

         endwhile;

        <div class="navigation">
            <div class="alignleft"> next_posts_link('« Older Entries') </div>
            <div class="alignright"> previous_posts_link('Newer Entries »') </div>
        </div>

     else :

        <h2 class="center">Not Found</h2>
        <p class="center">Sorry, but you are looking for something that isnt here.</p>
         include (TEMPLATEPATH . "/searchform.php");

     endif;

    </div>
</div>

get_sidebar();

</div> get_footer();
?>

HTML losse pagina:

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

<?php
<div id="wrapper">
    <div id="menutekst">
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About me</a></li>
            <li><a href="#">C V</a></li>
        </ul>
        <ul id="right_menu">
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>       </div> <img src="http://www.banzaidesign.nl/blog/wp-content/themes/banzaidesign/images/blogheader.jpg" id="banner" border="0px" alt="Dark Times"/>

get_header();

<div id="content" class="narrowcolumn">

     if (have_posts()) : while (have_posts()) : the_post();

        <div class="navigation">
            <div class="alignleft"> previous_post_link('« %link') </div>
            <div class="alignright"> next_post_link('%link »') </div>
        </div>

        <div class="post" id="post- the_ID(); ">
            <h2> the_title(); </h2>

            <div class="entry">
                 the_content('<p class="serif">Read the rest of this entry »</p>');

                 wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number'));
                 the_tags( '<p>Tags: ', ', ', '</p>');

                <p class="postmetadata alt">
                    <small>
                        This entry was posted
                         /* This is commented, because it requires a little adjusting sometimes.
                            You'll need to download this plugin, and follow the instructions:
                            http://binarybonsai.com/archives/2004/08/17/time-since-plugin/ */
                            /* $entry_datetime = abs(strtotime($post->post_date) - (60*120)); echo time_since($entry_datetime); echo ' ago'; */
                        on  the_time('l, F jS, Y')  at  the_time()
                        and is filed under  the_category(', ') .
                        You can follow any responses to this entry through the  post_comments_feed_link('RSS 2.0');  feed.

                         if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
                            // Both Comments and Pings are open
                            You can <a href="#respond">leave a response</a>, or <a href=" trackback_url(); " rel="trackback">trackback</a> from your own site.

                         } elseif (!('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
                            // Only Pings are Open
                            Responses are currently closed, but you can <a href=" trackback_url();  " rel="trackback">trackback</a> from your own site.

                         } elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
                            // Comments are open, Pings are not
                            You can skip to the end and leave a response. Pinging is currently not allowed.

                         } elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
                            // Neither Comments, nor Pings are open
                            Both comments and pings are currently closed.

                         } edit_post_link('Edit this entry.','','');

                    </small>
                </p>

            </div>
        </div>

     comments_template();

     endwhile; else:

        <p>Sorry, no posts matched your criteria.</p>

endif;

    </div>
</div>

get_sidebar();

get_footer();
?>

zondag 1 juni 2008 @ 22:14:51 #80

SuperRembo

Sinds 1998

Je footer moet buiten de wrapper staan.

maandag 2 juni 2008 @ 13:19:04 #81

Banzaiaap

Tony Rocky Horror

quote:
Op zondag 1 juni 2008 22:14 schreef SuperRembo het volgende:
Je footer moet buiten de wrapper staan.

Staat ie dat niet dan?

maandag 2 juni 2008 @ 14:32:48 #82

SuperRembo

Sinds 1998

Niet bij de losse pagina.

woensdag 4 juni 2008 @ 13:47:49 #83

Doc.Brown

Great Scott!

Ik vroeg me af of het een beetje mogelijk is om een drop-down box te stylen? Vind die standaard OS knoppen zo lelijk eigenlijk. Of kan je alleen een border en de inhoud van de box stylen?

You have to come back with me! Back to the Future!

woensdag 4 juni 2008 @ 18:07:56 #84

Light

quote:
Op woensdag 4 juni 2008 13:47 schreef Doc.Brown het volgende:
Ik vroeg me af of het een beetje mogelijk is om een drop-down box te stylen? Vind die standaard OS knoppen zo lelijk eigenlijk. Of kan je alleen een border en de inhoud van de box stylen?

Voor IE geef ik je weinig kans van slagen. Voor andere browsers vind je hier een beschrijving hoe je een select-box kunt stylen. Niet lastig van opzet, en het beperkt de bruikbaarheid van je site niet.

Op diezelfde pagina staat ook hoe je checkboxes en radio boxes kunt stylen.

fokstok.nl

woensdag 4 juni 2008 @ 19:41:01 #85

Doc.Brown

Great Scott!

quote:
Op woensdag 4 juni 2008 18:07 schreef Light het volgende:

[..]

Voor IE geef ik je weinig kans van slagen. Voor andere browsers vind je hier een beschrijving hoe je een select-box kunt stylen. Niet lastig van opzet, en het beperkt de bruikbaarheid van je site niet.

Op diezelfde pagina staat ook hoe je checkboxes en radio boxes kunt stylen.

Thanks!

Interessante voorbeelden, en het is primair voor FF bedoeld. Dus daar heb ik wat aan!

Ik zie dat in IE7, waar die drop-down dus niet gestyled is, hij toch gewoon werkend blijft. Helemaal top

[ Bericht 9% gewijzigd door Doc.Brown op 04-06-2008 19:48:23 ]

You have to come back with me! Back to the Future!

zondag 15 juni 2008 @ 17:57:58 #86

Banzaiaap

Tony Rocky Horror

Ik hoop dat dit het goede topic hiervoor is, maar dat zal wel goed zitten:P

Ik ben bezig met een site voor een goede vriend van mij, een DJ.

Ik krijg echter een aantal dingen niet voor elkaar
- Het beveiligen van zijn nummers op zn site, die staan nu in een player, maar als iemand de playlist vind, kan je zo de links naar de nummers pakken.
- Een fatsoenlijk formulier maken, wat ook daadwerkelijk wat verstuurd.. hoe doe ik dit?

dinsdag 17 juni 2008 @ 20:57:12 #87

BugWorks

Ik ben bezig om een div gecentreerd te vertonen op een pagina die verder blanco is. Nu heb ik al van alles geprobeerd, zelfs m.b.v. een tabel, maar ook dat wil niet lukken. Krijg het hooguit in de breedte gecentreerd maar in de hoogte blijft hij bovenaan staan. Kan iemand mij hiermee helpen of een oplossing voor geven.

Alvast bedankt :)

Hier de betreffende css:

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

#box {
width:300px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
background:#cccccc;
}
#header {
font-size:15px;
font-weight:bold;
text-align:left;
padding-top:2px;
padding-left:8px;
padding-right:8px;
padding-bottom:2px;
}
#body {
height:100px;
font-size:12px;
text-align:left;
background:#ffffff;
margin-left:2px;
margin-right:2px;
padding-top:2px;
padding-left:8px;
padding-right:8px;
padding-bottom:2px;
}
#footer {
font-size:9px;
text-align:left;
padding-top:2px;
padding-left:8px;
padding-right:8px;
padding-bottom:2px;
}
a {
color:#000000;
text-decoration:none;
}
a:hover {
color:#0099ff;
text-decoration:underline;
}

Hier de betreffende div's

1
2
3
4
5

<div id="box">
  <div id="header">header</div>
  <div id="body">Message</div>
  <div id="footer">Contact: <a href="mailto:bla@bla.nl">mailto:bla@bla.nl</a></div>
</div>

FOK!-Schrikkelbaas dinsdag 17 juni 2008 @ 21:01:05 #88

Swetsenegger

Egocentrische Narcist

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#distance {
   width:1px;
   height:50%;
   margin-bottom:-300px; /* helft van de containers hoogte */
   float:left;
}

.container{
   position:relative;
   clear:left;
   margin:0 auto; /*horizontale centrering. Werkt niet in IE quircksmode. Dan text-align:center aan body toevoegen*/
   width:1000px;
   height:600px;
}

1
2
3
4
5
6

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

dinsdag 17 juni 2008 @ 21:16:32 #89

BugWorks

quote:
Op dinsdag 17 juni 2008 21:01 schreef Swetsenegger het volgende:

[ code verwijderd ]

[ code verwijderd ]

Indien dit een reactie is op mijn vraag moet ik helaas zeggen dat dit niet het resultaat geeft wat ik zoek. In FF blijft hij bovenaan de pagina staan, ietwat naar het midden. In IE ook bovenaan maar wel in het midden.

FOK!-Schrikkelbaas dinsdag 17 juni 2008 @ 21:19:44 #90

Swetsenegger

Egocentrische Narcist

quote:
Op dinsdag 17 juni 2008 21:16 schreef BugWorks het volgende:

[..]

Indien dit een reactie is op mijn vraag moet ik helaas zeggen dat dit niet het resultaat geeft wat ik zoek. In FF blijft hij bovenaan de pagina staan, ietwat naar het midden. In IE ook bovenaan maar wel in het midden.

gek, want bij mij werkt het in elke major browser. Heb je ook de commentaar regels gelezen?

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

dinsdag 17 juni 2008 @ 21:28:44 #91

BugWorks

quote:
Op dinsdag 17 juni 2008 21:19 schreef Swetsenegger het volgende:

[..]

gek, want bij mij werkt het in elke major browser. Heb je ook de commentaar regels gelezen?

Je commentaar regels heb ik gelezen. Als ik de container hoogte aanpas (en de margin-bottom) blijft hij alsnog boven aan de pagina staan. Bij beide browser blijft hij op ongeveer 25% steken in de breedte, gebruik ik de text-align bij IE dan staat het wel in het midden, maar nog steeds bovenaan.

Betreffende website: www.bugworks.eu

FOK!-Schrikkelbaas dinsdag 17 juni 2008 @ 21:30:00 #92

Swetsenegger

Egocentrische Narcist

quote:
Op dinsdag 17 juni 2008 21:28 schreef BugWorks het volgende:

[..]

Je commentaar regels heb ik gelezen. Als ik de container hoogte aanpas (en de margin-bottom) blijft hij alsnog boven aan de pagina staan. Bij beide browser blijft hij op ongeveer 25% steken in de breedte, gebruik ik de text-align bij IE dan staat het wel in het midden, maar nog steeds bovenaan.

Betreffende website: www.bugworks.eu

Voeg eens een doctype toe.

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

dinsdag 17 juni 2008 @ 21:30:54 #93

Light

quote:
Op dinsdag 17 juni 2008 21:16 schreef BugWorks het volgende:

[..]

Indien dit een reactie is op mijn vraag moet ik helaas zeggen dat dit niet het resultaat geeft wat ik zoek. In FF blijft hij bovenaan de pagina staan, ietwat naar het midden. In IE ook bovenaan maar wel in het midden.

Die code van Swetsenegger is gewoon goed hoor. Maar ik zou bij de body geen hoogte instellen, dat staat wel in de css die je hebt gepost.

Edit: correctie, die hoogte staat bij een #body, niet bij body. Da's net even anders.

fokstok.nl

FOK!-Schrikkelbaas dinsdag 17 juni 2008 @ 21:33:46 #94

Swetsenegger

Egocentrische Narcist

je hebt sowieso al een aflsuitende div te veel en die text-align heb je nodig omdat je in je CSS een text-align:left in je body hebt staan.

en die box die je wil centreren is veel kleiner dan je container. Dus je container is wel gecentreerd, maar je box wordt gewoon links in de container uitgelijnd.

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

dinsdag 17 juni 2008 @ 21:36:16 #95

BugWorks

quote:
Op dinsdag 17 juni 2008 21:30 schreef Swetsenegger het volgende:

[..]

Voeg eens een doctype toe.

Ik heb het volgende wat bovenaan staat:

quote:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Ik zou niet weten wat er anders zou moeten staan

, krijg bovenstaande standaard mee als ik een nieuwe html pagina maak met dreamweaver.

dinsdag 17 juni 2008 @ 21:47:16 #96

BugWorks

Nu heb ik het werkend. Heb de regel "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" verwijderd en verder nog wat aangepast (hoogte van de container) en nu werkt het naar wens.

Dank

woensdag 18 juni 2008 @ 15:57:12 #97

Pizzahut

Het Bora Bora Gebergte

ik vergeet dit elke keer weer:

Mijn pagina bestaat uit 4 elementen; header, menu, main en footer.
nu wil ik mijn main op height:auto; zetten, echter als ik mijn menu op height:100% doe blijft hij minimaal.

Hoe kan ik dit fixen?

Disturbed Mind
Het leven: Soms ben je de duif, soms het standbeeld.

woensdag 18 juni 2008 @ 19:39:25 #98

CraZaay

prettig gestoord

quote:
Op dinsdag 17 juni 2008 21:47 schreef BugWorks het volgende:
Nu heb ik het werkend. Heb de regel "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" verwijderd en verder nog wat aangepast (hoogte van de container) en nu werkt het naar wens.

Dank

En welk doctype heb je in plaats van deze gebruikt? Zeg me ALSJEBLIEFT dat je niet gewoon de hele doctype declaratie maar achterwege laat

woensdag 18 juni 2008 @ 19:52:54 #99

HenkBenzinetank

Toegevoegde waarde

quote:
Op zondag 15 juni 2008 17:57 schreef Banzaiaap het volgende:
Ik hoop dat dit het goede topic hiervoor is, maar dat zal wel goed zitten:P

Ik ben bezig met een site voor een goede vriend van mij, een DJ.

Ik krijg echter een aantal dingen niet voor elkaar
- Het beveiligen van zijn nummers op zn site, die staan nu in een player, maar als iemand de playlist vind, kan je zo de links naar de nummers pakken.
- Een fatsoenlijk formulier maken, wat ook daadwerkelijk wat verstuurd.. hoe doe ik dit?

Dat doe je niet met CSS, maar PHP

donderdag 19 juni 2008 @ 13:32:48 #100

wobbel

Da WoBBeL King

Ik word gek

ik ben absoluut geen held met <div> en CSS maar nu kom ik er niet meer uit....

Ik heb een wrapper met daarin 2 divjes, links en rechts.
Nu heeft die wrapper een background image, maar die geeft hij dus niet goed weer in FF3, IE7, opera etc...
In IE6/IE7 gaat het daar in tegen wel goed!!!

In IE6 en IE7 gaat het wel goed:
http://www.dumpzooi.nl/zooi/fok/ie6_1.jpg
http://www.dumpzooi.nl/zooi/fok/ie7_1.jpg

Daar gaat het prima

FF3 denkt daar trouwens heel anders over:
http://www.dumpzooi.nl/zooi/fok/ff3_1.jpg

Ik krijg het niet opgelost?!!!

De code is te vinden op

http://www.senscomputers.nl/v3/test1.html
http://www.senscomputers.(...)eets/snsv3_test1.css

Hosted VoIP SIP trunks Vast mobiel VoIP

donderdag 19 juni 2008 @ 14:44:54 #101

Geqxon

Op het moment heb ik wat semantiek problemen. Op een pagina heb ik een aantal openstaande berichten (zoals een PM-systeem), waarbij de afzender, enkele gegevens en de content wordt getoond.

Zoals ik het nu heb:

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

<ul class="messages">
   <li>

      
      <fieldset>
         <legend><a href="new.php?prepare&user=Pepijn">Pepijn</a></legend>

         
         <dl>
            <dt>Aan:</dt>
            <dd><a href="new.php?prepare&user=Bep">Bep</a></dd>

            <dt>Verzonden:</dt>
            <dd>19-06-08 14:17</dd>
         </dl>

         
         <p>Telefoon voor bep!</p>

         
         <ul>
            <li><a href="inbox.php?setread&id=10">Markeer als afgehandeld</a></li>
         </ul>

      </fieldset>
   </li>
</ul>

Mijn problemen met deze manier van werken:

De enkele fieldset binnen de list-item lijkt mij onnodig, klopt dit?

Is een fieldset niet enkel voor formulieren?

Is een definition list uberhaupt wel slim voor het bevatten van dit soort data?

Binnen de content van de pagina is het duidelijk wie de ontvanger van het bericht is, maar ik weet er geen goede plek voor te vinden in de HTML zelf.

Zal de legend binnen de fieldset voor een screenreader duidelijk genoeg zijn dat dit de afzender van het bericht is? Doormiddel van CSS opmaak is het iig wel duidelijk.

Kan iemand hier wat licht op schijnen? :)

vrijdag 20 juni 2008 @ 18:04:20 #102

LordNemephis

computer says no

een dikke vette TeeVeePee!

Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.

vrijdag 20 juni 2008 @ 22:12:30 #103

Light

quote:
Op donderdag 19 juni 2008 14:44 schreef Geqxon het volgende:
Op het moment heb ik wat semantiek problemen. Op een pagina heb ik een aantal openstaande berichten (zoals een PM-systeem), waarbij de afzender, enkele gegevens en de content wordt getoond.

Zoals ik het nu heb:
[ code verwijderd ]

Mijn problemen met deze manier van werken:
De enkele fieldset binnen de list-item lijkt mij onnodig, klopt dit?
Is een fieldset niet enkel voor formulieren?

Twee keer ja

quote:
Is een definition list uberhaupt wel slim voor het bevatten van dit soort data?

Ik zou daar gewoon een div of een span voor gebruiken.

quote:
Binnen de content van de pagina is het duidelijk wie de ontvanger van het bericht is, maar ik weet er geen goede plek voor te vinden in de HTML zelf.

In de buurt van de verzender, zou ik zeggen.

quote:
Zal de legend binnen de fieldset voor een screenreader duidelijk genoeg zijn dat dit de afzender van het bericht is? Doormiddel van CSS opmaak is het iig wel duidelijk.

Die fieldset hoort daar niet, dus die legend ook niet. Als dat de verzender is dan kun je dat gewoon als zodanig weergeven.

quote:
Kan iemand hier wat licht op schijnen?

Is het toeval (als in voor demo) dat er maar 1 bericht wordt gegeven in <ul class="messages"> ? Of laat je wel meer berichten zien (als die er zijn uiteraard)?

fokstok.nl

zaterdag 21 juni 2008 @ 01:23:50 #104

HenkBenzinetank

Toegevoegde waarde

Misschien een beetje kort door de bocht, maar bij twijfel moet je je pagina eens zonder CSS bekijken. Als de structuur dan nog te volgen is, dan zit je qua semantiek vaak ook al goed in de richting.

dinsdag 24 juni 2008 @ 15:02:54 #105

wobbel

Da WoBBeL King

In hoeverre is dit mogelijk?

Ik wil 1 grote div, met daarin een kleiner divje met tekstomloop....

Dit idee dus:

Hosted VoIP SIP trunks Vast mobiel VoIP

dinsdag 24 juni 2008 @ 20:27:33 #106

Ruud

ik ben bezig met een website, maar kom er niet uit

ik heb 2 divjes naast elkaar, de een is het linker menu en de ander is de content
bij de ene pagina is het linker divje langer, maar als ik een andere pagina open is de content weer langer (afhankelijk van de inhoud)

is het mogelijk om beide divjes even lang (height) te houden?

dinsdag 24 juni 2008 @ 20:59:00 #107

Dzy

It is I

Ruud_fr, dat is zonder foefjes niet mogelijk cross-browser, maar waarschijnlijk ben je op zoek naar "Faux columns". Zoek daar eens op

"Reality is an illusion created by a lack of alcohol."

dinsdag 24 juni 2008 @ 20:59:46 #108

Dzy

It is I

En wobbel, dit is natuurlijk heel makkelijk te krijgen door gewoon een DIV container te maken met daarin die twee divs waarvan er een float.

"Reality is an illusion created by a lack of alcohol."

dinsdag 24 juni 2008 @ 21:14:02 #109

Ruud

quote:
Op dinsdag 24 juni 2008 20:59 schreef Dzy het volgende:
Ruud_fr, dat is zonder foefjes niet mogelijk cross-browser, maar waarschijnlijk ben je op zoek naar "Faux columns". Zoek daar eens op

nee, dat is helaas niet wat ik zoek
ik wil background images meegeven aan de header, left, content en footer

dus niet aan de container

dinsdag 24 juni 2008 @ 21:51:33 #110

Dzy

It is I

Maak eens een paint? En vertel er even bij wat allemaal kan stretchen enzo. Dan kan ik je wel vertellen of dit mogelijk is

"Reality is an illusion created by a lack of alcohol."

dinsdag 24 juni 2008 @ 22:12:26 #111

Ruud

ok, zo moet het worden:

'left' en 'content' kunnen verschillen van grootte (height), maar moeten dus even lang worden/blijven

dinsdag 24 juni 2008 @ 22:30:23 #112

Dzy

It is I

Ik zou toch nog een keer naar Faux Columns kijken

Maak om Left en Content een DIV container heen, deze zal dus altijd even lang zijn als de langste van die twee divs. Als je nu deze container een backgroundimage meegeeft die een y-repeat heeft (maakt niet zoveel uit hoeveel pixels hoog hij is) dan lijkt het net alsof de beide divs een aparte background hebben, al is dit er in principe eentje. Lees je nog even goed in in de materie want dit is serieus de enige manier om zo'n ontwerp te realiseren.

"Reality is an illusion created by a lack of alcohol."

woensdag 25 juni 2008 @ 00:03:45 #113

LordNemephis

computer says no

quote:
Op dinsdag 24 juni 2008 22:30 schreef Dzy het volgende:
Ik zou toch nog een keer naar Faux Columns kijken Maak om Left en Content een DIV container heen, deze zal dus altijd even lang zijn als de langste van die twee divs. Als je nu deze container een backgroundimage meegeeft die een y-repeat heeft (maakt niet zoveel uit hoeveel pixels hoog hij is) dan lijkt het net alsof de beide divs een aparte background hebben, al is dit er in principe eentje. Lees je nog even goed in in de materie want dit is serieus de enige manier om zo'n ontwerp te realiseren.

Dit is wel de meest makkelijke manier voor dit doel

Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.

woensdag 25 juni 2008 @ 03:14:58 #114

DorentuZ

quote:
Op dinsdag 24 juni 2008 22:30 schreef Dzy het volgende:
Ik zou toch nog een keer naar Faux Columns kijken Maak om Left en Content een DIV container heen, deze zal dus altijd even lang zijn als de langste van die twee divs. Als je nu deze container een backgroundimage meegeeft die een y-repeat heeft (maakt niet zoveel uit hoeveel pixels hoog hij is) dan lijkt het net alsof de beide divs een aparte background hebben, al is dit er in principe eentje. Lees je nog even goed in in de materie want dit is serieus de enige manier om zo'n ontwerp te realiseren.

Die laatste regel kan je beter weglaten

woensdag 25 juni 2008 @ 10:55:04 #115

Ruud

quote:
Op dinsdag 24 juni 2008 22:30 schreef Dzy het volgende:
Ik zou toch nog een keer naar Faux Columns kijken Maak om Left en Content een DIV container heen, deze zal dus altijd even lang zijn als de langste van die twee divs. Als je nu deze container een backgroundimage meegeeft die een y-repeat heeft (maakt niet zoveel uit hoeveel pixels hoog hij is) dan lijkt het net alsof de beide divs een aparte background hebben, al is dit er in principe eentje. Lees je nog even goed in in de materie want dit is serieus de enige manier om zo'n ontwerp te realiseren.

jouw uitleg is een stuk duidelijker dan de site die ik gevonden had, het is gelukt

ik heb nu 3 containers:

container 1: header
container 2: left (menu) en content
container 3: footer

thanks voor de hulp

woensdag 25 juni 2008 @ 11:01:06 #116

Dzy

It is I

Ok Dorentuz, de beste en makkelijkste manier dan

En mooi ruud dat het gelukt is.

"Reality is an illusion created by a lack of alcohol."

woensdag 25 juni 2008 @ 19:10:13 #117

Mirel

Mirel wil een bongophone.

Hoi, ik heb een stukje tekst die ik in het midden van de pagina wil. Ik dacht dus <center> en </center> voor en achter het divje te zetten zodat de tekst in het midden komt, maar elke regel tekst is dan gecentered, en dat wil ik niet.

Heb ook geprobeerd text-align: left in de .css te zetten, maar dan komt de tekst gewoon helemaal links op de pagina. De <center> code doet dus niks.

Denk dat de foto wel duidelijk is

Ik wil dus dat de tekst links uitlijnt, maar wel in het midden zit.

When all else fails, you always have delusion.

woensdag 25 juni 2008 @ 19:18:36 #118

spaceninjapirate

mhh k

Dit moet volgens mij werken:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
html {
    background-color:#000000
}
div#tekst {
   margin:0px auto 0px;
   width:400px;
}
div#tekst p{
    color:#FFFFFF;
}
</style>
</head>
<body>
<div id="tekst">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ligula ligula, rhoncus sed, consectetuer ut, mattis sit amet, enim. Vivamus laoreet placerat felis. Aenean iaculis tristique lacus. Pellentesque diam metus, tempus et, dapibus vitae, faucibus in, eros. Sed eu arcu quis urna mattis dapibus. Cras vitae metus id libero blandit consequat. Cras viverra, dolor eget pulvinar ultricies, orci lacus malesuada neque, sit amet luctus arcu eros sed dui. Morbi eros nisi, consequat ac, condimentum nec, posuere eget, nulla. Quisque bibendum venenatis sapien. Nam sem est, vulputate in, suscipit ut, tincidunt non, massa. Vestibulum sagittis enim eget mauris. Morbi consectetuer, ipsum auctor consectetuer venenatis, arcu diam iaculis metus, eu lobortis est mauris bibendum felis. Nulla ultrices, dui vitae feugiat adipiscing, tortor libero ultricies ipsum, non convallis tortor est id pede. Quisque sollicitudin. Suspendisse accumsan nulla sit amet risus.</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vehicula. Nam ullamcorper, erat a congue imperdiet, turpis diam tincidunt lectus, et tempor nulla risus a dui. Morbi non nunc. Praesent ultricies nibh sed arcu. Sed dictum, quam vel tempor viverra, nunc dolor viverra nisl, quis pharetra leo ipsum in neque. Donec eget velit. Ut vulputate faucibus enim. In hac habitasse platea dictumst. Donec posuere semper urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In lorem. Mauris hendrerit adipiscing nisi.</p>
</div>
</body>
</html>

[ Bericht 0% gewijzigd door spaceninjapirate op 25-06-2008 19:19:28 (typfoutje) ]

woensdag 25 juni 2008 @ 19:18:42 #119

Light

quote:
Op woensdag 25 juni 2008 19:10 schreef Mirel het volgende:
Hoi, ik heb een stukje tekst die ik in het midden van de pagina wil. Ik dacht dus <center> en </center> voor en achter het divje te zetten zodat de tekst in het midden komt, maar elke regel tekst is dan gecentered, en dat wil ik niet.

Heb ook geprobeerd text-align: left in de .css te zetten, maar dan komt de tekst gewoon helemaal links op de pagina. De <center> code doet dus niks.

[ afbeelding ]
Denk dat de foto wel duidelijk is :) Ik wil dus dat de tekst links uitlijnt, maar wel in het midden zit.

Even aangenomen dat die div met teks als id centertext heeft:

1
2
3
4

#centertext {
width: 50%; /* Of iets anders, maar je moet een breedte instellen */
margin: 0 auto; /* Links en rechts auto -> Links en rechts gelijk -> Div staat gecentreerd */
}

fokstok.nl

FOK!-Schrikkelbaas dinsdag 1 juli 2008 @ 12:51:46 #120

Swetsenegger

Egocentrische Narcist

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

<tr id="ipRow">
<td class="lc">spatie</td>
<td class="rc">

<table border="0" cellspacing="0" cellpadding="2">
    <tr>
   <td>IP</td>
   <td nowrap="nowrap"><input type="text" class="num" name="ip1" value="@ip1#" size=3 maxlength=3>.<input type="text" class="num" name="ip2" value="@ip2#" size=3 maxlength=3>.<input type="text" class="num" name="ip3" value="@ip3#" size=3 maxlength=3>.<input type="text" class="num" name="ip4" value="@ip4#" size=3 maxlength=3>
   </td>
  </tr>
  <tr>
   <td>mask</td>
   <td><input type="text" name="mask1" class="num" value="@mask1#" size=3 maxlength=3>.<input type="text" name="mask2" class="num" value="@mask2#" size=3 maxlength=3>.<input type="text" class="num" name="mask3" value="@mask3#" size=3 maxlength=3>.<input type="text" class="num" name="mask4" value="@mask4#" size=3 maxlength=3>
   </td>
  </tr>
  <tr>
   <td>gateway</td>
   <td><input type="text" class="num" name="gw1" value="@gw1#" size=3 maxlength=3>.<input type="text" class="num" name="gw2" value="@gw2#" size=3 maxlength=3 onFocus="if(this.disabled)this.blur()">.<input type="text" class="num" name="gw3" value="@gw3#" size=3 maxlength=3>.<input type="text" class="num" name="gw4" value="@gw4#" size=3 maxlength=3>
   </td>
  </tr>
</table>

</td>
</tr>

De 'ipRow' toggle ik display:none; en display:block dmv een onclick.

In IE krijg ik keurig dit te zien als de row visible is

1
2
3
4
5
6
7

---------------------------------------------------------------------
| cel 1                     |                                       |
---------------------------------------------------------------------
| spatie                    | IP      [].[].[].[]                   |
|                           | Mask    [].[].[].[]                   |
|                           | Gateway [].[].[].[]                   |
---------------------------------------------------------------------

In elke andere browser dit

1
2
3
4
5
6
7

---------------------------------------------------------------------
| cel 1                       |                                     |
---------------------------------------------------------------------
| spatie | IP      [].[].[].[]|
|        | Mask    [].[].[].[]|
|        | Gateway [].[].[].[]|
---------------------------------------------------------------------

Kortom, de geneste table wordt tov de parenttable in de linker cel gepropt. Terwijl die toch echt afgesloten is.
Wat doe ik fout?

-edit- ter verduidelijking: http://test.xploise.nl/test.html
In IE is het gedrag zoals ik verwacht (en wat ik nodig heb) in elke andere browser niet.

-edit- En het antwoord

http://snook.ca/archives/html_and_css/dynamically_sho/

[ Bericht 6% gewijzigd door Swetsenegger op 01-07-2008 14:11:40 ]

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

dinsdag 1 juli 2008 @ 19:41:45 #121

BugWorks

Ik ben bezig met het maken van een website. De betreffende site gaat stukken tekst bevatten waardoor de scrollbar gebruikt wordt. Nu is het me opgevallen dat in IE7 de website mooi gecentraliseerd blijft staan maar in FF3 een klein beetje naar links springt (jammer genoeg).

Weet iemand hoe ik dit kan voorkomen? Alvast bedankt

.

dinsdag 1 juli 2008 @ 20:14:26 #122

DorentuZ

quote:
Op dinsdag 1 juli 2008 19:41 schreef BugWorks het volgende:
Ik ben bezig met het maken van een website. De betreffende site gaat stukken tekst bevatten waardoor de scrollbar gebruikt wordt. Nu is het me opgevallen dat in IE7 de website mooi gecentraliseerd blijft staan maar in FF3 een klein beetje naar links springt (jammer genoeg).

Weet iemand hoe ik dit kan voorkomen? Alvast bedankt .

Dat komt omdat ie altijd de scrollbalk laat zien, en firefox alleen als die nodig is.. Je zou dus overflow:scroll aan je html of body kunnen hangen (weet zo niet welke van de 2), zodat firefox zich gedraagt als IE..

dinsdag 1 juli 2008 @ 20:15:35 #123

Light

quote:
Op dinsdag 1 juli 2008 19:41 schreef BugWorks het volgende:
Ik ben bezig met het maken van een website. De betreffende site gaat stukken tekst bevatten waardoor de scrollbar gebruikt wordt. Nu is het me opgevallen dat in IE7 de website mooi gecentraliseerd blijft staan maar in FF3 een klein beetje naar links springt (jammer genoeg).

Weet iemand hoe ik dit kan voorkomen? Alvast bedankt .

Firefox laat geen scrollbalk zien als je die niet gebruikt, IE wel.
Oplossing: de volgende regel toevoegen bij of html of body:
overflow-y: scroll;

Kijk dan even in IE om te zien of je geen dubbele scrollbalk krijgt. Dat zou namelijk niet handig zijn.

fokstok.nl

dinsdag 1 juli 2008 @ 20:28:08 #124

BugWorks

Dank jullie.

donderdag 3 juli 2008 @ 18:58:49 #125

DionysuZ

Respect my authority!

Ik heb een vraagje, niet gericht op CSS, maar kan wellicht toch hier terecht omdat ik geen apart topic ervoor wil openen.

Weet iemand of ik de FIELDSET tag ook legaal kan gebruiken buiten een form, bijvoorbeeld om een menu heen (zoals fieldset met legend = main menu, sub menu, dat soort)?

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

donderdag 3 juli 2008 @ 19:56:52 #126

Light

quote:
Op donderdag 3 juli 2008 18:58 schreef DionysuZ het volgende:
Ik heb een vraagje, niet gericht op CSS, maar kan wellicht toch hier terecht omdat ik geen apart topic ervoor wil openen.

Weet iemand of ik de FIELDSET tag ook legaal kan gebruiken buiten een form, bijvoorbeeld om een menu heen (zoals fieldset met legend = main menu, sub menu, dat soort)?

Het mag wel van de W3 validator. Maar ik zou het niet doen, naar mijn idee hoort een fieldset in een form.

fokstok.nl

FOK!Fotograaf / Beeldredactie zondag 6 juli 2008 @ 12:08:46 #127

Ynske

Bedankt voor de zon...

Echt ik voel me zo dom als de achterkant van de klerenkast hier.

Heb zitten klooien en heb 1 pagina klaar van mijn site waarin foto's getoond worden. (let niet op de baggerheid van de foto's das allemaal test)
Nu is deze pagina zonder CSS opgebouwd.
Het probleem wat ik nog ondervind in de pagina is dat in IE de bladerpijltjes van de foto's goed staan maar in FF voor geen mogelijkheid goed te krijgen is.

Er word nu aangeraden om als nog met een CSS te beginnen, maar ik zie door de bomen het bos niet meer. Helpt een CSS er echt aan om die verdomde pijltjes in beide browsers goed te krijgen?

wie o wie wil mij verlossen

de test pagina staat hier
http://www.throughmylens.nl/test5.php

Today is life -
the only life you are sure of. Make the most of today.
Dale Carnegie

zondag 6 juli 2008 @ 14:11:56 #128

SuperRembo

Sinds 1998

Eigenlijk is een pagina als dat niet zo ingewikkeld... alleen is de code in dit geval zo'n aaneenschakeling van fouten en onhandige constructies dat 't een wonder is dat het in IE en Fx nog een beetje op elkaar lijkt.

De enige echte oplossing is opnieuw beginnen. En hou het dan simpel.

Redactie Sport maandag 7 juli 2008 @ 20:40:07 #129

dennistd

FOK!sport *O*

Ik heb een div bovenin staan als banner, en vervolgens wil ik links een div gebruiken als menu
hoe zorg ik ervoor dat die div links de resterende lengte van de pagina opvult?
met een height:100%; wordt het 100% plus de 100px van de div bovenin

edit:
heb het inmiddels opgelost door de linkerdiv geen height:100% te geven, maar bottom:0px

[ Bericht 17% gewijzigd door dennistd op 07-07-2008 22:18:34 ]

PM mij!
Disclaimer: Mijn posts worden geschreven als user, en niet als crew, tenzij dit duidelijk wordt aangegeven

dinsdag 8 juli 2008 @ 22:30:58 #130

MadGuy

Fever Ray

Even een stomme vraag tussendoor, omdat het mij niet helemaal duidelijk is.

Kun je <img> nu ook afsluiten met /> net zoals <br /> of moet dat altijd > zijn? En hoe zit dat met metatags?

last.fm
marksluymers.nl

dinsdag 8 juli 2008 @ 22:55:18 #131

Geqxon

quote:
Op dinsdag 8 juli 2008 22:30 schreef MadGuy het volgende:
Even een stomme vraag tussendoor, omdat het mij niet helemaal duidelijk is.

Kun je <img> nu ook afsluiten met /> net zoals <br /> of moet dat altijd > zijn? En hoe zit dat met metatags?

Bij XHTML sluit je een tag altijd af. Bij een dubbele tag krijg je dus <b> en </b>, bij een enkele tag krijg je resultaten als <img .... /> en <br />.

Bij HTML mag je simpelweg <img ...> en <br> doen.

woensdag 9 juli 2008 @ 10:42:52 #132

MadGuy

Fever Ray

Dank voor je antwoord. Dat is dan duidelijk!

Ik raakte een beetje in de war omdat Firefox die /> tags achter img, meta en link een rood kleurtje geeft.

[ Bericht 42% gewijzigd door MadGuy op 09-07-2008 11:33:54 ]

last.fm
marksluymers.nl

woensdag 9 juli 2008 @ 22:12:13 #133

wonderer

Hung like a My Little Pony

Hoe zorg je ervoor dat de parent-div dezelfde hoogte krijgt als de inhoud? En waarom gaat dat niet automatisch?

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

#container {
position:absolute;
background-repeat:no-repeat;
width:792px;
margin-left:-400px;
margin-top:100px;
left:50%;
background-color:#FFCCFF;
}

.page_content {
position:absolute;
width:613px;
left:100px;
top:144px;
overflow:auto;
background-color:transparent;
}
<div id="container">
<div class="page_content">
veeeeel tekst
</div>
</div>

De tekst loopt uit de container, waarvan ik de achtergrondkleur nodig heb. Waarom gebeurt dit en hoe fix it het?

"Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
"My brain is too smart for me."
"We don't need no education." "Yes you do, you just used a double negative."

woensdag 9 juli 2008 @ 22:25:42 #134

DionysuZ

Respect my authority!

position:absolute; doet dit.

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

woensdag 9 juli 2008 @ 22:46:56 #135

wonderer

Hung like a My Little Pony

Maar met relative werkt het ook niet. Wat moet ik dan?

"Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
"My brain is too smart for me."
"We don't need no education." "Yes you do, you just used a double negative."

woensdag 9 juli 2008 @ 22:54:04 #136

HuHu

Doe eens in die container iets van height:100% of height:auto ofzo, en gooi bij page_content die overflow en background-color eens weg.

woensdag 9 juli 2008 @ 23:03:54 #137

wonderer

Hung like a My Little Pony

quote:
Op woensdag 9 juli 2008 22:54 schreef HuHu het volgende:
Doe eens in die container iets van height:100% of height:auto ofzo, en gooi bij page_content die overflow en background-color eens weg.

height:100% maakt de hoogte van container zo hoog als het scherm (plus die 100px positioning), height:auto; doet helemaal niks.

"Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
"My brain is too smart for me."
"We don't need no education." "Yes you do, you just used a double negative."

woensdag 9 juli 2008 @ 23:14:11 #138

Light

quote:
Op woensdag 9 juli 2008 22:54 schreef HuHu het volgende:
Doe eens in die container iets van height:100% of height:auto ofzo, en gooi bij page_content die overflow en background-color eens weg.

Een background-color: transparent; doet vrij weinig. Bij een snelle test had ik meteen resultaat toen ik "position: absolute;" weghaalde bij .page_content.

fokstok.nl

woensdag 9 juli 2008 @ 23:19:57 #139

Light

quote:
Op woensdag 9 juli 2008 22:46 schreef wonderer het volgende:
Maar met relative werkt het ook niet. Wat moet ik dan?

Waarom gebruik je eigenlijk "position: absolute;" ? Er zijn meer opties om dingen te positioneren, en met absolute haal je dingen uit de normale flow en wordt het voor de browsers veel lastiger om er goed mee te werken. Normaal gesproken staan elementen met "position: absolute;" onder in de pagina (qua html source, niet noodzakelijk qua layout).

fokstok.nl

woensdag 9 juli 2008 @ 23:27:55 #140

wonderer

Hung like a My Little Pony

quote:
Op woensdag 9 juli 2008 23:19 schreef Light het volgende:

[..]

Waarom gebruik je eigenlijk "position: absolute;" ? Er zijn meer opties om dingen te positioneren, en met absolute haal je dingen uit de normale flow en wordt het voor de browsers veel lastiger om er goed mee te werken. Normaal gesproken staan elementen met "position: absolute;" onder in de pagina (qua html source, niet noodzakelijk qua layout).

Omdat ik niet beter weet? Ik sta open voor suggesties, hoor

"Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
"My brain is too smart for me."
"We don't need no education." "Yes you do, you just used a double negative."

woensdag 9 juli 2008 @ 23:33:09 #141

wonderer

Hung like a My Little Pony

"top" en "left in .page_content heb ik veranderd in margin-top en margin-left en position weggehaald en nu werkt het... alleen in FF

"Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
"My brain is too smart for me."
"We don't need no education." "Yes you do, you just used a double negative."

woensdag 9 juli 2008 @ 23:45:55 #142

Light

quote:
Op woensdag 9 juli 2008 23:27 schreef wonderer het volgende:

[..]

Omdat ik niet beter weet? Ik sta open voor suggesties, hoor ;)

Een suggestie dan, met wat css commentaar om wat dingen te verduidelijken.

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

html, body {
/* De meeste browsers hanteren hier niet standaard 0, waardoor je pagina nooit strak tegen de rand kan komen */
margin: 0;
padding: 0;
}
#container {
width:792px;
/* De volgende twee regels zorgen voor horizontaal centreren */
margin-left:auto;
margin-right:auto;
margin-top:100px;
background-color:#FFCCFF;
}
.page_content {
width:613px;
/* Ik neem aan dat deze div gecentreerd moet worden in de vorige */
margin-left:90px;
/* Eventueel kun je met margin-top een ruimte vanaf de bovenkant instellen */
}

Het horizontaal centreren gaat niet altijd goed in IE6. Dat kun je eenvoudig oplossen:

1
2
3
4
5
6

html, body {
text-align: center;
}
#container {
text-align: left;
}

In IE6 ('k weet niet zeker of het ook opgaat voor IE7) wordt text-align niet alleen op tekst maar ook op andere elementen toegepast. Maar de eigenschap heet niet everything-align ;)

Als de container tegen de bovenrand moet komen is het nog makkelijker (niet voor IE6):

1
2
3

#container {
margin: 0 auto;
}

Die shorthandnotatie is ook mogelijk in het eerdere voorbeeld, maar daar voegt'ie weinig aan duidelijkheid toe dus specificeer ik liever gewoon de randen afzonderlijk, voor zover nodig.

fokstok.nl

woensdag 9 juli 2008 @ 23:46:45 #143

Light

quote:
Op woensdag 9 juli 2008 23:33 schreef wonderer het volgende:
"top" en "left in .page_content heb ik veranderd in margin-top en margin-left en position weggehaald en nu werkt het... alleen in FF

Ik heb hier helaas geen IE bij de hand om mee te testen

fokstok.nl

woensdag 9 juli 2008 @ 23:54:55 #144

wonderer

Hung like a My Little Pony

quote:
Op woensdag 9 juli 2008 23:46 schreef Light het volgende:

[..]

Ik heb hier helaas geen IE bij de hand om mee te testen

Het lijkt erop dat IE6 margin-top negeert

Ik heb nu een padding in de container met dezelfde afstand, maar nu doen mijn muisovers (css, daar heb ik al een hack voor gebruikt voor IE6. Ik haat IE6

) het niet meer...

"Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
"My brain is too smart for me."
"We don't need no education." "Yes you do, you just used a double negative."

woensdag 9 juli 2008 @ 23:59:32 #145

Light

quote:
Op woensdag 9 juli 2008 23:54 schreef wonderer het volgende:

[..]

Het lijkt erop dat IE6 margin-top negeert Ik heb nu een padding in de container met dezelfde afstand, maar nu doen mijn muisovers (css, daar heb ik al een hack voor gebruikt voor IE6. Ik haat IE6 ) het niet meer...

IE6 is een ramp. Gelukkig komt IE7 steeds meer op, en die gedraagt zich een stuk beter.

fokstok.nl

donderdag 10 juli 2008 @ 00:01:40 #146

wonderer

Hung like a My Little Pony

Ik weet het. Ik zal het echter toch crossbrowser moeten maken tot IE6 van de aardkloot is verdwenen

Nou ja, ik puzzel nog even verder, anders verzin ik wel iets anders. In ieder geval bedankt voor de hulp

"Pain is my friend. I can trust pain. I can trust pain to make my life utterly miserable."
"My brain is too smart for me."
"We don't need no education." "Yes you do, you just used a double negative."

maandag 11 augustus 2008 @ 22:05:25 #147

donroyco

dus niet Donroyco

Op mijn site wil ik sIFR in de headers gaan gebruiken. Ik heb al deze stappen doorlopen, maar hij werkt nog steeds niet. Iemand misschien een idee waar het aan kan liggen?

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

maandag 11 augustus 2008 @ 22:36:54 #148

Light

Ik heb recentelijk ook sIFR gebruikt op een site en ik kreeg sIFR 2.0 niet werkend. Maar ik zag wel een sIFR 3.0 beta, en die werkt wel (maar bij mij niet goed in IE6).

fokstok.nl

maandag 11 augustus 2008 @ 22:42:06 #149

donroyco

dus niet Donroyco

quote:
Op maandag 11 augustus 2008 22:36 schreef Light het volgende:
Ik heb recentelijk ook sIFR gebruikt op een site en ik kreeg sIFR 2.0 niet werkend. Maar ik zag wel een sIFR 3.0 beta, en die werkt wel (maar bij mij niet goed in IE6).

Dat dan maar eens morgen proberen, thanks!

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

dinsdag 12 augustus 2008 @ 13:36:11 #150

HenkBenzinetank

Toegevoegde waarde

Wat sIFR betreft, het kan ook aan je lettertype liggen. Met name sommige OTF letters trekt ie niet zo goed

dinsdag 12 augustus 2008 @ 13:38:00 #151

donroyco

dus niet Donroyco

quote:
Op dinsdag 12 augustus 2008 13:36 schreef HenkBenzinetank het volgende:
Wat sIFR betreft, het kan ook aan je lettertype liggen. Met name sommige OTF letters trekt ie niet zo goed

Dat ga ik dan ook nog eens proberen

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

maandag 18 augustus 2008 @ 22:53:09 #152

Light

Een probleempje waar ik laatst mee zat en wat ik niet opgelost kreeg met css. Misschien heeft iemand hier nog een idee hoe het met css netjes moet kunnen?

Eerst het probleem:

1
2
3

dd-mm-jjjj > lange tekst die niet op
een regel past
dd-mm-jjjj > korte tekst op 1 regel

Waar het > staat moet een plaatje komen. Dat kan normaal heel goed met een list-style-image, maar dan zit ik in de knoop met de datum die daarvoor staat. Bij een andere variant waar die datum er niet is, wordt alles uiteraard als list weergegeven. En semantisch gezien is dit ook een lijst, dus wilde ik het ook zo weergeven. Maar door de vreemde plaatsing van de datum is me dat niet gelukt.

Heeft iemand een idee hoe ik dit had kunnen oplossen met een list, en wel zo dat als de titel na de > te lang wordt, deze gaat inspringen zodat alles netjes onder elkaar blijft staan?

fokstok.nl

dinsdag 19 augustus 2008 @ 09:17:45 #153

Tuvai.net

quote:
Op maandag 18 augustus 2008 22:53 schreef Light het volgende:
Een probleempje waar ik laatst mee zat en wat ik niet opgelost kreeg met css. Misschien heeft iemand hier nog een idee hoe het met css netjes moet kunnen?

Eerst het probleem:
[ code verwijderd ]

Waar het > staat moet een plaatje komen. Dat kan normaal heel goed met een list-style-image, maar dan zit ik in de knoop met de datum die daarvoor staat. Bij een andere variant waar die datum er niet is, wordt alles uiteraard als list weergegeven. En semantisch gezien is dit ook een lijst, dus wilde ik het ook zo weergeven. Maar door de vreemde plaatsing van de datum is me dat niet gelukt.

Heeft iemand een idee hoe ik dit had kunnen oplossen met een list, en wel zo dat als de titel na de > te lang wordt, deze gaat inspringen zodat alles netjes onder elkaar blijft staan?

Zorgen dat je datum altijd in hetzelfde formaat is (dus altijd dd-mm-yyyy en niet één keer d-mm-yy en de andere keer dd-m-yyyy) en deze een vaste breedte laten hanteren (monospace lettertype gebruiken?), vervolgens het plaatje als background-image, en de te 'wrappen' tekst in een span.

dinsdag 19 augustus 2008 @ 09:37:42 #154

CraZaay

prettig gestoord

Of de datum in een span (of misschien is de datum zo belangrijk dat het een kop moet zijn?) en die een negatieve margin-left geven. Rest dan positioneren met padding-left en de afbeelding als achtergrondafbeelding. Dan maakt de breedte van de datum ook niet meer uit.

zondag 24 augustus 2008 @ 18:19:11 #155

Rotzooi

Herr Rotzooi voor u..

tvp

And the number is 61.000.000, who has number 61.000.000? BINGO!

maandag 25 augustus 2008 @ 14:00:33 #156

LeeHarveyOswald

hmm ik ben weer eens met mn menu-vanuit-een-database aan het stoeien, maar ik kom dr niet uit (klote css

).

Het menu heb ik qua opzet hiervandaan geplukt: http://tutorials.alsacreations.com/deroulant/

(grootste verschil is dat ik de opbouw als moeder/dochter structuur in een database heb staan en met 2 loopjes dit er uit pluk - dat werkt).

Enige wat mij niet lukt is het centreren ... op http://pestforum.nl/users/test.php draai ik een testje, op http://pestforum.nl/users/white.css staat't CSS - de boosdoener. left = 50% zet het linkerpunt van het menu mooi gecentreerd - maar ik wil dus het hele menu centreren.

Mocht iemand weten hoe - dan hoor ik het heel graag

- Ik kan wel handmatig centreren, maar dat is niet echt een oplossing bij een dynamisch menu

maandag 25 augustus 2008 @ 16:49:09 #157

LeeHarveyOswald

Help

maandag 25 augustus 2008 @ 17:18:53 #158

HenkBenzinetank

Toegevoegde waarde

Komt ie dan he:

1
2
3
4
5
6
7
8

#menu {
height: 20px /* hoogte van de knoppen */'
width: 700px; /* breedte van het menu, nodig om te centreren */
margin: 0 auto; /* zet linker en rechter marges op automatisch, dus het menu in het midden */
top: 75px;
z-index: 100px;
line-height: /* finishing touch, centreer tekst verticaal */
}

persoonlijk vind ik het een beetje een zuur menu. Als je muis eraf hovert, blijft ie open staan.

maandag 25 augustus 2008 @ 19:57:56 #159

Light

quote:
Op maandag 25 augustus 2008 14:00 schreef LeeHarveyOswald het volgende:
hmm ik ben weer eens met mn menu-vanuit-een-database aan het stoeien, maar ik kom dr niet uit (klote css ).

Het menu heb ik qua opzet hiervandaan geplukt: http://tutorials.alsacreations.com/deroulant/

(grootste verschil is dat ik de opbouw als moeder/dochter structuur in een database heb staan en met 2 loopjes dit er uit pluk - dat werkt).

Enige wat mij niet lukt is het centreren ... op http://pestforum.nl/users/test.php draai ik een testje, op http://pestforum.nl/users/white.css staat't CSS - de boosdoener. left = 50% zet het linkerpunt van het menu mooi gecentreerd - maar ik wil dus het hele menu centreren.

Mocht iemand weten hoe - dan hoor ik het heel graag - Ik kan wel handmatig centreren, maar dat is niet echt een oplossing bij een dynamisch menu

Om iets te centreren moet je het een breedte geven (en dan een kleinere breedte dan het element waar het in staat). Als je body 1000px breed is en je menu ook dan valt er niet veel te centreren

En als je body 1000px breed is en je menu 500px dan kun je wel centreren. Probleem met een dynamisch menu is dat je niet weet hoeveel items er in zitten, dus hoe breed het menu moet worden. Dat kun je wel weer oplossen met een stukje javascript. Een idee is dan om in je template ( / html) een variabele te setten die aangeeft hoeveel menu-items er zijn. De rest regel je dan met een stukje javascript in een ander bestand.

fokstok.nl

maandag 25 augustus 2008 @ 19:59:04 #160

Light

quote:
Op maandag 25 augustus 2008 17:18 schreef HenkBenzinetank het volgende:
Komt ie dan he:
[ code verwijderd ]

persoonlijk vind ik het een beetje een zuur menu. Als je muis eraf hovert, blijft ie open staan.

Eens. Ik vind de Son of Suckerfish-implementatie altijd wel handig. En lekker overzichtelijk klein

fokstok.nl

maandag 25 augustus 2008 @ 20:06:10 #161

HenkBenzinetank

Toegevoegde waarde

quote:
Op maandag 25 augustus 2008 19:57 schreef Light het volgende:

[..]

Om iets te centreren moet je het een breedte geven (en dan een kleinere breedte dan het element waar het in staat). Als je body 1000px breed is en je menu ook dan valt er niet veel te centreren En als je body 1000px breed is en je menu 500px dan kun je wel centreren. Probleem met een dynamisch menu is dat je niet weet hoeveel items er in zitten, dus hoe breed het menu moet worden. Dat kun je wel weer oplossen met een stukje javascript. Een idee is dan om in je template ( / html) een variabele te setten die aangeeft hoeveel menu-items er zijn. De rest regel je dan met een stukje javascript in een ander bestand.

min-width zou dan kunnen werken

maandag 25 augustus 2008 @ 20:09:57 #162

CraZaay

prettig gestoord

quote:
Op maandag 25 augustus 2008 20:06 schreef HenkBenzinetank het volgende:

min-width zou dan kunnen werken

Maar niet erg IE6 compatible helaas.

maandag 25 augustus 2008 @ 20:19:52 #163

HenkBenzinetank

Toegevoegde waarde

Daar zijn oplossingen voor

maandag 25 augustus 2008 @ 20:30:21 #164

CraZaay

prettig gestoord

quote:
Op maandag 25 augustus 2008 20:19 schreef HenkBenzinetank het volgende:
Daar zijn oplossingen voor

Geef die er dan meteen bij zou ik zeggen, anders is het een redelijk loze suggestie imo

maandag 25 augustus 2008 @ 20:33:15 #165

HenkBenzinetank

Toegevoegde waarde

1
2
3
4
5
6
7
8
9

body {
  width: 100%;
  height: 100%;
  min-width:800px; /* This takes care of all the 'decent' browsers */
  margin: 0px;
  padding: 0px;  /*optional*/
  /* Optionally set text-align: center; and increase the padding if you wish to have the page centered with margins... */
}

of

1 2	min-width: 600px; width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");

u vraagt, google draait

maandag 25 augustus 2008 @ 20:38:08 #166

LeeHarveyOswald

quote:
Op maandag 25 augustus 2008 17:18 schreef HenkBenzinetank het volgende:
Komt ie dan he:
[ code verwijderd ]

persoonlijk vind ik het een beetje een zuur menu. Als je muis eraf hovert, blijft ie open staan.

1
2
3
4
5
6
7
8

#menu {
position: absolute;
width: 700px; /* breedte van het menu, nodig om te centreren */
margin: 0 auto; /* zet linker en rechter marges op automatisch, dus het menu in het midden */
top: 75px;
z-index: 100px;
line-height: /* finishing touch, centreer tekst verticaal */
}

Dit zou ook moeten werken als het menu breder is?

Dit is de variatie die ik daarop gebruikt heb (Zonder Pos. absolute; verplaatst de tekst als ik over het menu scroll). Nu lijnt hij hem volledig links uit (anders wel gecentreerd).

En de vaste knophoogte heb ik dr uitgesloopt, dit omdat een knop ook 2 regels kan bevatten. .

maandag 25 augustus 2008 @ 20:38:57 #167

LeeHarveyOswald

quote:
Op maandag 25 augustus 2008 20:33 schreef HenkBenzinetank het volgende:

[ code verwijderd ]

of
[ code verwijderd ]

u vraagt, google draait

Dus dit is meer wat ik nodig heb?

maandag 25 augustus 2008 @ 21:36:05 #168

CraZaay

prettig gestoord

CSS expressions zijn niet echt lekker overigens, heeft een sterke (negatieve) invloed op rendering van je pagina in een browser.

maandag 25 augustus 2008 @ 22:09:38 #169

Light

quote:
Op maandag 25 augustus 2008 20:09 schreef CraZaay het volgende:

[..]

Maar niet erg IE6 compatible helaas.

IE6 moet dan ook dood.

fokstok.nl

maandag 25 augustus 2008 @ 22:12:21 #170

CraZaay

prettig gestoord

quote:
Op maandag 25 augustus 2008 22:09 schreef Light het volgende:

IE6 moet dan ook dood.

Eensch. Maar maak dat die 30+% van alle internetgebruikers ook maar wijs

maandag 25 augustus 2008 @ 22:18:25 #171

Light

quote:
Op maandag 25 augustus 2008 22:12 schreef CraZaay het volgende:

[..]

Eensch. Maar maak dat die 30+% van alle internetgebruikers ook maar wijs

Gewoon Windows Update gebruiken. Is dat ding toch ergens goed voor

fokstok.nl

maandag 25 augustus 2008 @ 22:39:15 #172

LeeHarveyOswald

quote:
Op maandag 25 augustus 2008 22:18 schreef Light het volgende:

[..]

Gewoon Windows Update gebruiken. Is dat ding toch ergens goed voor

Sinds wanneer haalt die Firefox binnen?

maandag 25 augustus 2008 @ 22:46:56 #173

Light

quote:
Op maandag 25 augustus 2008 22:39 schreef LeeHarveyOswald het volgende:

[..]

Sinds wanneer haalt die Firefox binnen?

Hmm.... goed punt.. Maar 'k maak liever iets voor IE7 dan voor IE6. IE7 werkt al 100x beter.

(En voor de rest van de browserwars kunnen we vast beter een ander topic opzoeken.)

fokstok.nl

maandag 25 augustus 2008 @ 22:56:06 #174

HenkBenzinetank

Toegevoegde waarde

Punt is alleen dat uitgerekend je klanten op hun kantoortjes vaak allemaal een verrotte windows xp installatie met IE6 hebben..

maandag 25 augustus 2008 @ 23:02:44 #175

CraZaay

prettig gestoord

quote:
Op maandag 25 augustus 2008 22:56 schreef HenkBenzinetank het volgende:
Punt is alleen dat uitgerekend je klanten op hun kantoortjes vaak allemaal een verrotte windows xp installatie met IE6 hebben..

Yip. En je kan nog zo vurig willen dat mensen upgraden naar IE7, feit blijft dat 3 op alle 10 bezoekers IE6 gebruiken. Da's best veel

maandag 25 augustus 2008 @ 23:11:57 #176

LeeHarveyOswald

quote:
Op maandag 25 augustus 2008 23:02 schreef CraZaay het volgende:

[..]

Yip. En je kan nog zo vurig willen dat mensen upgraden naar IE7, feit blijft dat 3 op alle 10 bezoekers IE6 gebruiken. Da's best veel

Zo'n 29% van de IE gebruikers van 2 van mijn sites (boeroendoek.nl en pestforum.nl) gebruiken op dit moment nog IE6. Dat is dus minder dan 1/3e van de IE gebruikers. 70% van de bezoekers is een IE bezoeker, dus pakweg 1/5e van de bezoekers is IE6 (en dat op ca. 5000 bezoekers/maand, redelijk representatief dus).

0,2% van de IE gebruikers gebruikt een versie ouder dan 6.0

maandag 25 augustus 2008 @ 23:32:23 #177

CraZaay

prettig gestoord

Het ligt ook aan de doelgroep natuurlijk; de grotere publiekssites die ik ontwikkel hebben al gauw 90+% (!!) IE bezoekers. Nadeel van sites voor het grote publiek is dat ze vaak op scholen en kantoren gebruikt worden (en tussen 9.00 en 17.00 komt daar het merendeel van het bezoek vandaan), en daar hebben ze weer relatief veel IE6.

We zullen ermee moeten leven

dinsdag 26 augustus 2008 @ 08:41:11 #178

Tuvai.net

quote:
Op maandag 25 augustus 2008 23:32 schreef CraZaay het volgende:
Het ligt ook aan de doelgroep natuurlijk; de grotere publiekssites die ik ontwikkel hebben al gauw 90+% (!!) IE bezoekers. Nadeel van sites voor het grote publiek is dat ze vaak op scholen en kantoren gebruikt worden (en tussen 9.00 en 17.00 komt daar het merendeel van het bezoek vandaan), en daar hebben ze weer relatief veel IE6.

We zullen ermee moeten leven

Verschilt bij mij ook heel veel. Als ik de Boekenbox (uit m'n sig) of mijn blog neem dan zit ik gemiddeld op 57% Mozilla (waarvan 40% Firefox ouder dan versie 3.x), 15% IE7, 21% IE6 en de rest Safari/Opera/etc.

Bij de gemiddelde applicatie van m'n werk zit ik makkelijk boven de 80% aan IE gebruikers, waarvan het grootste percentage jammer genoeg nog steeds op IE6. Wel merk ik dat steeds meer mensen, zowel bij mijn thuisprojectjes als bij mijn grotere projecten op het werk, steeds meer interesse hebben in andere browsers en veel klanten ook al aangeven dat hun website/applicatie 'wel op alle browsers moet werken'.

Goede ontwikkeling vind ik zelf, dan vallen al die prutsers die nog steeds enkel voor browser X devven al buiten de boot.

dinsdag 26 augustus 2008 @ 11:36:06 #179

HenkBenzinetank

Toegevoegde waarde

Op mijn site (veel bezocht door creatieven) is het aandeel IE6 marginaal, Safari en Opera scoren (net als FF natuurlijk) veel hoger. Er is daarom vrijwel geen tijd gestoken in het IE6 compatibel maken

dinsdag 26 augustus 2008 @ 11:54:39 #180

CraZaay

prettig gestoord

quote:
Op dinsdag 26 augustus 2008 11:36 schreef HenkBenzinetank het volgende:
Op mijn site (veel bezocht door creatieven) is het aandeel IE6 marginaal, Safari en Opera scoren (net als FF natuurlijk) veel hoger. Er is daarom vrijwel geen tijd gestoken in het IE6 compatibel maken

Lucky you

dinsdag 26 augustus 2008 @ 12:07:53 #181

HenkBenzinetank

Toegevoegde waarde

Het is slecht, ik weet het.. Maar tering, upgrade gewoon eens dan (ja ik bevind me in een luxepositie dat ik me dat kan verlangen)!

dinsdag 26 augustus 2008 @ 15:49:45 #182

LeeHarveyOswald

quote:
Op maandag 25 augustus 2008 23:32 schreef CraZaay het volgende:
Het ligt ook aan de doelgroep natuurlijk; de grotere publiekssites die ik ontwikkel hebben al gauw 90+% (!!) IE bezoekers. Nadeel van sites voor het grote publiek is dat ze vaak op scholen en kantoren gebruikt worden (en tussen 9.00 en 17.00 komt daar het merendeel van het bezoek vandaan), en daar hebben ze weer relatief veel IE6.

We zullen ermee moeten leven

Zelfde gaat op voor pestforum.nl. Meeste hits komen van kennisnet, onder schooltijd. Ook daar valt het kwartje dus.

Boeroendoek.nl is wat algemener (maar wel veel minder bezoekers).

dinsdag 26 augustus 2008 @ 15:51:14 #183

LeeHarveyOswald

quote:
Op dinsdag 26 augustus 2008 08:41 schreef Tuvai.net het volgende:

[..]

Verschilt bij mij ook heel veel. Als ik de Boekenbox (uit m'n sig) of mijn blog neem dan zit ik gemiddeld op 57% Mozilla (waarvan 40% Firefox ouder dan versie 3.x), 15% IE7, 21% IE6 en de rest Safari/Opera/etc.

Bij de gemiddelde applicatie van m'n werk zit ik makkelijk boven de 80% aan IE gebruikers, waarvan het grootste percentage jammer genoeg nog steeds op IE6. Wel merk ik dat steeds meer mensen, zowel bij mijn thuisprojectjes als bij mijn grotere projecten op het werk, steeds meer interesse hebben in andere browsers en veel klanten ook al aangeven dat hun website/applicatie 'wel op alle browsers moet werken'. Goede ontwikkeling vind ik zelf, dan vallen al die prutsers die nog steeds enkel voor browser X devven al buiten de boot.

Ik zie de variatie in besturingssystemen ook langzaam aan toenemen

Lichte stijging Linux, forse stijging MacOs ...

Zelfs af en toe wat bezoekers van af een console

dinsdag 26 augustus 2008 @ 16:32:57 #184

CraZaay

prettig gestoord

Ik zie ook steeds meer iPhone als device in de statistieken staan

donderdag 28 augustus 2008 @ 11:57:29 #185

Ruud

is er een mogelijkheid om een background in een textarea fixed te maken? het lukt mij niet...

donderdag 28 augustus 2008 @ 14:43:21 #186

Ruud

ik bedoel dus eigenlijk dat de achtergrond in het tekstvak blijft staan als het vak groter (scrollbaar) wordt d.m.v. typen

donderdag 28 augustus 2008 @ 23:42:39 #187

Banzaiaap

Tony Rocky Horror

quote:
Op donderdag 28 augustus 2008 14:43 schreef ruud_fr het volgende:
ik bedoel dus eigenlijk dat de achtergrond in het tekstvak blijft staan als het vak groter (scrollbaar) wordt d.m.v. typen

Euh?

.tekstvak{background: url(plaatjeurl.jpg) no-repeat top center;}

Ofzoiets?

vrijdag 29 augustus 2008 @ 00:02:53 #188

Ruud

vrijdag 29 augustus 2008 @ 07:11:20 #189

Light

quote:
Op donderdag 28 augustus 2008 11:57 schreef ruud_fr het volgende:
is er een mogelijkheid om een background in een textarea fixed te maken? het lukt mij niet...

1
2
3

textarea {
background-position: bottom left;
}

fokstok.nl

vrijdag 29 augustus 2008 @ 08:07:26 #190

CraZaay

prettig gestoord

Met "position" scrollt de afbeelding nog steeds mee uiteraard. Het kan niet door simpelweg de textarea te stylen; "background-attachment: fixed" werkt niet in IE6. Als je het ook in IE6 wilt laten werken kom je uit bij een element met de gewenste achtergrondafbeelding en daarbinnen de textarea met "background: transparent".

vrijdag 29 augustus 2008 @ 08:17:24 #191

Light

In Firefox is het voldoende om de textarea een hoogte en breedte te geven, en dan natuurlijk een achtergrond. Als de content langer wordt, krijg je een scrollbalk voor de content maar niet voor de textarea zelf. De achtergrond blijft dus mooi op z'n plaats.

In IE(6 en 7) scrollt de achtergrond mee omhoog met de tekst. Met een position: bottom zorg je dat de achtergrond altijd onderaan blijft staan, ook als er meer tekst wordt ingevoerd. Ook hier geldt weer dat je wel een hoogte en breedte op moet geven. Het nadeel is dat als iemand met de cursortoetsen weer omhoog gaat scrollen, de achtergrond naar beneden gaat.

fokstok.nl

vrijdag 29 augustus 2008 @ 09:01:00 #192

CraZaay

prettig gestoord

quote:
Op vrijdag 29 augustus 2008 08:17 schreef Light het volgende:
Het nadeel is dat als iemand met de cursortoetsen weer omhoog gaat scrollen, de achtergrond naar beneden gaat.

Lijkt mij nogal een show stopper

vrijdag 29 augustus 2008 @ 10:12:19 #193

Ruud

bedankt voor de reacties, ik zal vanavond of in het weekend even kijken

vrijdag 29 augustus 2008 @ 12:35:32 #194

HenkBenzinetank

Toegevoegde waarde

quote:
Op vrijdag 29 augustus 2008 08:07 schreef CraZaay het volgende:
Met "position" scrollt de afbeelding nog steeds mee uiteraard. Het kan niet door simpelweg de textarea te stylen; "background-attachment: fixed" werkt niet in IE6. Als je het ook in IE6 wilt laten werken kom je uit bij een element met de gewenste achtergrondafbeelding en daarbinnen de textarea met "background: transparent".

prima oplossing dus

donderdag 4 september 2008 @ 13:52:01 #195

Chandler

Ik heb een vraag.

Een site wil ik opdelen in het volgende

HEADER
LI-MID-RE
FOOTER

Nu heb ik de header, content en footer voor elkaar, echter wil het niet lukken om het middelste gedeelte goed te krijgen.

Wat wil ik met het middelste gedeelte!?

Links & Rechts zijn vast qua maat
MID is variabel en moet meerekken met de breedte van het scherm.

Echter moet de content (mid) kunnen doorlopen... en dat lukt mij niet.

Zie: http://www.bruggema.nl/3/ en voor de stijlsheet: http://www.bruggema.nl/3/stijl.css

Ik heb gezocht via google naar fixed 3 columns maar helaas, niets dat mij kon helpen

Just say hi!

donderdag 4 september 2008 @ 14:07:49 #196

mcDavid

een div "float:left" én "clear:both" geven, gaat blijkbaar niet zo goed.

Dat je middelste div niet meeloopt komt doordat er geen enkel object instaat wat in de natuurlijke float zit. Normaal gesproken kun je dit oplossen door een lege div met "clear:both" maar dat gaat dus niet omdat je met deze opzet ook alle divs een float meegeeft (en die div dus alsnog uit de natuurlijke float haalt)

donderdag 4 september 2008 @ 14:12:19 #197

mcDavid

Overigens zitten er nogal wat fouten in je opzet. Sowieso is je hele code erg onoverzichtelijk (de helft van de CSS staat verwoven in je HTML, de andere helft in eentwéé externe sheets

Maar voor bijv. div .middle geef je een "top: 10px" op, terwijl die div geen position heeft.

Volgens mij heb je geen idee wat je aant doen bent en heb je het grootste deel van de code van andere sites of uit tutorials gecopiëerd of niet?

donderdag 4 september 2008 @ 14:40:00 #198

CraZaay

prettig gestoord

quote:
Op donderdag 4 september 2008 13:52 schreef Chandler het volgende:

Wat wil ik met het middelste gedeelte!?

Links & Rechts zijn vast qua maat
MID is variabel en moet meerekken met de breedte van het scherm.

Echter moet de content (mid) kunnen doorlopen... en dat lukt mij niet.

The holy grail

http://www.alistapart.com/articles/holygrail

donderdag 4 september 2008 @ 14:45:53 #199

Chandler

mcDavid; de ene stijlsheet is gemaakt door de slicer, de andere door mij, de stijles die je in de HTML ziet zijn tijdelijk, om alleen maar de opzet aan te geven, niets meer niets minder. Er zijn idd delen van de stijl.css gekopieerd van andere plekjes op het internet, juist omdat ik er zelf niet uitkwam!..

Maar heb je een oplossing? want anders ben ik bang dat ik weer voor tabellen moet gaan kiezen...

Just say hi!

donderdag 4 september 2008 @ 14:46:39 #200

CraZaay

prettig gestoord

quote:
Op donderdag 4 september 2008 14:45 schreef Chandler het volgende:

want anders ben ik bang dat ik weer voor tabellen moet gaan kiezen...

Lutser

Maar check mijn link...

donderdag 4 september 2008 @ 14:49:39 #201

Chandler

quote:
Op donderdag 4 september 2008 14:40 schreef CraZaay het volgende:

[..]

The holy grail http://www.alistapart.com/articles/holygrail

Het lullige is dat die in IE7 weer niet werkt!

(tenminste hier, zie eerste voorbeeld)

Just say hi!

donderdag 4 september 2008 @ 14:50:16 #202

mcDavid

quote:
Op donderdag 4 september 2008 @ 14:45 schreef Chandler het volgende:
mcDavid; de ene stijlsheet is gemaakt door de slicer, de andere door mij, de stijles die je in de HTML ziet zijn tijdelijk, om alleen maar de opzet aan te geven, niets meer niets minder. Er zijn idd delen van de stijl.css gekopieerd van andere plekjes op het internet, juist omdat ik er zelf niet uitkwam!..

Maar heb je een oplossing? want anders ben ik bang dat ik weer voor tabellen moet gaan kiezen...

quote:
Op donderdag 4 september 2008 @ 14:07 schreef mcDavid het volgende:
een div "float:left" én "clear:both" geven, gaat blijkbaar niet zo goed.

Dat je middelste div niet meeloopt komt doordat er geen enkel object instaat wat in de natuurlijke float zit. Normaal gesproken kun je dit oplossen door een lege div met "clear:both" maar dat gaat dus niet omdat je met deze opzet ook alle divs een float meegeeft (en die div dus alsnog uit de natuurlijke float haalt)

donderdag 4 september 2008 @ 14:51:37 #203

CraZaay

prettig gestoord

quote:
Op donderdag 4 september 2008 14:49 schreef Chandler het volgende:

Het lullige is dat die in IE7 weer niet werkt! (tenminste hier, zie eerste voorbeeld)

Even zelf googlen anders? Er zijn ongetwijfeld kleine modificaties te vinden op deze aanpak die prima werken.

donderdag 4 september 2008 @ 14:54:04 #204

Chandler

quote:
Op donderdag 4 september 2008 14:50 schreef mcDavid het volgende:

Ik probeer je te begrijpen maar doe het gewoon niet

quote:
Op donderdag 4 september 2008 14:51 schreef CraZaay het volgende:
Even zelf googlen anders? Er zijn ongetwijfeld kleine modificaties te vinden op deze aanpak die prima werken.

Dat heb ik dus de gehele ochtend al gedaan maar niets 'simpels' kunnen vinden, maar goed ik zoek ook altijd verkeerd

-edit-
fix gevonden
http://www.gerd-riesselmann.net/examples/paddedholygrail.html

Just say hi!

donderdag 4 september 2008 @ 17:33:32 #205

mcDavid

clear:both

is het antwoord

En dan niet ook nog float:left of iets anders op een element gooien! Wat je doet doormiddel van de ".middle div" in je eigen css!

donderdag 4 september 2008 @ 19:10:04 #206

Ruud

quote:
Op vrijdag 29 augustus 2008 08:07 schreef CraZaay het volgende:
Als je het ook in IE6 wilt laten werken kom je uit bij een element met de gewenste achtergrondafbeelding en daarbinnen de textarea met "background: transparent".

thanks

donderdag 4 september 2008 @ 21:21:13 #207

Chandler

Jongens, ik heb er de hele dag mee zitten stoeien en een hoop gelezen maar kom er gewoon domweg niet uit... het probleem is de stomme float; op zich heb ik deze nodig om ze netjes naast elkaar te krijgen, maar zodra de linker en rechter kant 'weg' zijn vallen de plaatjes daar over de opengedeeltes heen

Ik heb The holy grail en een hoop fixes daarvan en nog veel meer sites bezocht maar helaas

wil er niet in en wil het niet vinden

Preview tot zover:
http://www.bruggema.nl/3

^{voor jullie ongetwijfeld een eitje maar ik blijf het ondanks alle tips gewoon niet zien.... grrr}

Just say hi!

donderdag 4 september 2008 @ 21:46:05 #208

CraZaay

prettig gestoord

quote:
Op donderdag 4 september 2008 19:10 schreef ruud_fr het volgende:

thanks

Graag gedaan

Ik ben de afgelopen paar dagen bezig geweest met wat "kleine aanpassingen" qua html/css aan een begin dit jaar door een andere partij gebouwde website. Wat een hoop stront zeg. Tabellen, alles het liefst absoluut gepositioneerd, gekloot met floats, inline & externe styles en gewoon brakke semantiek (een kop? dan pak je toch een span met "font-size: 24px"?). Doe ik NOOIT meer

donderdag 4 september 2008 @ 22:29:05 #209

Light

quote:
Op donderdag 4 september 2008 21:21 schreef Chandler het volgende:
Jongens, ik heb er de hele dag mee zitten stoeien en een hoop gelezen maar kom er gewoon domweg niet uit... het probleem is de stomme float; op zich heb ik deze nodig om ze netjes naast elkaar te krijgen, maar zodra de linker en rechter kant 'weg' zijn vallen de plaatjes daar over de opengedeeltes heen :(

Ik heb The holy grail en een hoop fixes daarvan en nog veel meer sites bezocht maar helaas :{ wil er niet in en wil het niet vinden :P

Preview tot zover:
http://www.bruggema.nl/3

^{voor jullie ongetwijfeld een eitje maar ik blijf het ondanks alle tips gewoon niet zien.... grrr}

Ik zie in je css niet meteen een padding bij de container. En bij de holy grail staat content voor de linker- en rechterkolom, bij jou niet.

Back to basic tijd dus:
html

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

<?xml version="1.0" encoding="UTF-8" ?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Geklooi voor Chandler</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header"></div>
<div id="container">
   <div id="content"></div>
   <div id="left"></div>
   <div id="right"></div>
</div>
<div id="footer"></div>
</body>
</html>

css

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

html, body {
   width: 100%;
   margin: 0;
   padding: 0;
}
#header {
   height: 10px;
   width: 100%;
   background: #f00;
}
#container {
   padding-left: 160px;
   padding-right: 160px;
}
#left, #right {
   width: 160px;
   height: 600px;
   background: url(http://www.bruggema.nl/3/afbeeldingen/wide-skyscraper.gif);
   float: left;
   position: relative;
}
#left {
   margin-left: -100%;
   right: 160px;
}
#right {
   margin-right: -160px;
}
#content {
   height: 700px;
   width: 100%;
   float: left;
   background: #ff8;
}
#footer {
   clear: both;
   background: #8ff;
   float: left;
   height: 10px;
   width: 100%;
}

Have fun :)

fokstok.nl

donderdag 4 september 2008 @ 22:34:19 #210

Light

quote:
Op donderdag 4 september 2008 21:46 schreef CraZaay het volgende:

[..]

Graag gedaan

Ik ben de afgelopen paar dagen bezig geweest met wat "kleine aanpassingen" qua html/css aan een begin dit jaar door een andere partij gebouwde website. Wat een hoop stront zeg. Tabellen, alles het liefst absoluut gepositioneerd, gekloot met floats, inline & externe styles en gewoon brakke semantiek (een kop? dan pak je toch een span met "font-size: 24px"?). Doe ik NOOIT meer

Ik mocht/moest vandaag een menu-item toevoegen aan een menu dat met een tabel was gemaakt. Alles bleef gewoon staan verder, er was voldoende ruimte om iets toe te voegen. En dat was al een ramp

Met enkel het toevoegen van een <td> ben je er uiteraard niet.

fokstok.nl

donderdag 4 september 2008 @ 22:49:26 #211

Tuvai.net

Ah, het genot van het moeten rotzooien met andermans programmatuur / markup.

Ik had laatst ook zo'n projectje waar ik zowel aan de serverkant als aan de voorkant aanpassingen moest doen. Het C# gedeelte ging an sich nog, de voorkant was zo ongeveer een beetje helemaal opgezet met tabellen en absoluut gepositioneerde bagger.

donderdag 4 september 2008 @ 23:04:57 #212

Light

quote:
Op donderdag 4 september 2008 22:49 schreef Tuvai.net het volgende:
Ah, het genot van het moeten rotzooien met andermans programmatuur / markup.

Ik had laatst ook zo'n projectje waar ik zowel aan de serverkant als aan de voorkant aanpassingen moest doen. Het C# gedeelte ging an sich nog, de voorkant was zo ongeveer een beetje helemaal opgezet met tabellen en absoluut gepositioneerde bagger.

Tabellen vind ik echt een ramp, zeker voor layout.
Dingen absoluut positioneren kan soms best nuttig zijn, maar dat moet je per geval afwegen. Mijn voorkeur gaat iig uit naar floats

fokstok.nl

donderdag 4 september 2008 @ 23:08:40 #213

CraZaay

prettig gestoord

De achterkant (Ruby on Rails) hebben we volledig moeten herschrijven, daar was niets mee aan te vangen

donderdag 4 september 2008 @ 23:11:05 #214

Tuvai.net

quote:
Op donderdag 4 september 2008 23:04 schreef Light het volgende:

[..]

Tabellen vind ik echt een ramp, zeker voor layout.
Dingen absoluut positioneren kan soms best nuttig zijn, maar dat moet je per geval afwegen. Mijn voorkeur gaat iig uit naar floats

Absolute positionering kan inderdaad handig zijn en ik gebruik het zelf vrij regelmatig voor fixed menu`tjes en dergelijke. Het is echter gewoon kut om een heel menu met subitems en andere afhankelijkheden op een dusdanige manier absoluut te positioneren, dat bij het toevoegen van een nieuw element zo'n beetje alles dat niet absoluut gepositioneerd is, niet meer op z'n plaats staat en daardoor de wél absoluut gepositioneerde elementen niet meer op de juiste plek staan.

donderdag 4 september 2008 @ 23:16:16 #215

HenkBenzinetank

Toegevoegde waarde

quote:
Op donderdag 4 september 2008 21:46 schreef CraZaay het volgende:

[..]

Graag gedaan

Ik ben de afgelopen paar dagen bezig geweest met wat "kleine aanpassingen" qua html/css aan een begin dit jaar door een andere partij gebouwde website. Wat een hoop stront zeg. Tabellen, alles het liefst absoluut gepositioneerd, gekloot met floats, inline & externe styles en gewoon brakke semantiek (een kop? dan pak je toch een span met "font-size: 24px"?). Doe ik NOOIT meer

Welcome to my world.. Ik doe bijna niet anders

donderdag 4 september 2008 @ 23:18:58 #216

Light

De truc is dan ook om eerst alle floats te doen en pas aan het eind de absoluut gepositioneerde elementen. En dat gaat dan over de volgorde van de elementen in de html.

fokstok.nl

vrijdag 5 september 2008 @ 00:03:16 #217

mcDavid

quote:
Op donderdag 4 september 2008 @ 21:21 schreef Chandler het volgende:
Jongens, ik heb er de hele dag mee zitten stoeien en een hoop gelezen maar kom er gewoon domweg niet uit... het probleem is de stomme float; op zich heb ik deze nodig om ze netjes naast elkaar te krijgen, maar zodra de linker en rechter kant 'weg' zijn vallen de plaatjes daar over de opengedeeltes heen

Ik heb The holy grail en een hoop fixes daarvan en nog veel meer sites bezocht maar helaas wil er niet in en wil het niet vinden

Preview tot zover:
http://www.bruggema.nl/3

^{voor jullie ongetwijfeld een eitje maar ik blijf het ondanks alle tips gewoon niet zien.... grrr}

Hier kunnen we echt weinig mee, je verhaal is veel te vaag!

Maak anders eens een voorbeeld met alléén de elementen die mis gaan, zo eenvoudig mogelijk!
Helpt je wellicht ook om zelf inzicht te krijgen in wat er mis gaat!

vrijdag 5 september 2008 @ 00:14:55 #218

CraZaay

prettig gestoord

Ik heb ook het idee dat je iets teveel tegelijk wilt. Maak eerst eens de basis aan de hand van die "holy grail" met IE7 fixes, dus header, footer en drie kolommen. Geef ze allemaal een achtergrondkleurtje en zet er een paar regels tekst in om te testen. Werkt dat niet, kom dan hier met je code. Werkt dat wel, voeg dan stuk voor stuk de andere elementen toe, zonder je oude CSS te hergebruiken (anders krijg je weer per ongeluk floats die je niet wilt, etc etc). Werkt het niet, probeer het dan niet op te lossen door zonder te weten wat het doet te pas en te onpas floats, etc toe te gaan voegen

vrijdag 5 september 2008 @ 09:24:41 #219

Chandler

Ik zal het probleem voorleggen.

Eingelijk wil ik precies hetzelfde dat een tabel doet.

1
2
3
4
5
6
7

<table width="100%">
<tr>
    <td width="160">Links</td>
    <td>Midden</td>
    <td width="160">Rechts</td>
</tr>
</table>

In het geval van bovenstaand tabel worden alle velden evenlang ongeacht welk veld het langste is. Gebruik ik floats voor bijvoorbeeld afbeeldingen dan blijven de afbeeldingen binnen dat kader en overlappen bv niet rechts zoals met de holy grail etc wel.

http://www.bruggema.nl/3/grail.html

Ik wil dus een oplossing vinden voor het feit dat de afbeeldingen gewoon binnen het middelste gedeelte blijven, niets meer niets minder

Ik heb de float verwijderd maar dan komen ze onder elkaar, ook een display inline werkt niet aangezien dan de background en padding/margins niet meer van toepassing zijn

wordt gek van CSS

De versie van Light is ook aardig maar heeft ook zijn beperkingen

http://www.bruggema.nl/3/light.html

Ik hoop dat ik duidelijk genoeg ben, en loop denk ik weer tegen iets onmogelijks aan... stom dat tabellen nog steeds moeilijk te evenaren zijn middels divs en css...

Just say hi!

vrijdag 5 september 2008 @ 10:02:48 #220

CraZaay

prettig gestoord

Ik snap je probleem nog steeds niet. Wanneer ik in de code op http://www.bruggema.nl/3/grail.html al die divs met een afbeelding erin "float: left" geef dan vallen ze uiteraard onder buiten de div; je hebt ze immers uit de flow gehaald. Is dat je probleem? Zo ja, een "overflow: auto" op #imagelist lost het dan op (alternatief voor "clear").

vrijdag 5 september 2008 @ 10:39:36 #221

Chandler

Het probleem is idd opgelost door de overflow: auto; al snap ik niet precies waarom!?

ik ga eens kijken waarom overflow: auto dit precies oplost (misschien leer ik er wat van...

)

Just say hi!

vrijdag 5 september 2008 @ 10:42:46 #222

Light

quote:
Op vrijdag 5 september 2008 09:24 schreef Chandler het volgende:

De versie van Light is ook aardig maar heeft ook zijn beperkingen
http://www.bruggema.nl/3/light.html

In de CSS staat een height bij #content. Sloop die er eens uit, dan ben je al een stuk verder

fokstok.nl

vrijdag 5 september 2008 @ 11:24:55 #223

Chandler

Heb ik al gedaan

werkt nu aardig goed

Just say hi!

vrijdag 5 september 2008 @ 11:47:31 #224

mcDavid

Dat bedoel ik, je CSS is al veel te verward door andere dingen om nog goed te kunnen zien wat je aant doen bent

Het verbaast me overigens dat "overflow:auto" ook werkt. Deze eigenschap heeft namelijk niets met de float van een element te maken. Alleen maar met wat er gebeurd als de content niet in een element past.

clear:both geeft in ieder geval aan dat dit element aan beide kanten geen elementen mag hebben die gefloat zijn. Daardoor gaat dit element er onder staan. Dat is wat je wilt.

Als je wilt dat alle div's tot de onderkant doorlopen, gebruik je ipv borders e.d. op de divs, een achtergrondafbeelding in de parent div die je verticaal herhaald. De divs lopen dan niet echt door, maar dat lijkt wel zo.

vrijdag 5 september 2008 @ 13:35:15 #225

CraZaay

prettig gestoord

quote:
Op vrijdag 5 september 2008 11:47 schreef mcDavid het volgende:

Het verbaast me overigens dat "overflow:auto" ook werkt. Deze eigenschap heeft namelijk niets met de float van een element te maken. Alleen maar met wat er gebeurd als de content niet in een element past.

Juist, en op deze manier zeg je "wanneer de gefloate elementen binnen mij niet passen, maak me dan automatisch groter".

Met andere woorden: een niet-floating div met daarin alleen gefloate elementen (die dus uit de flow zijn en visueel buiten de div vallen), kun je mee laten schalen met de elementen binnen die div door "overflow: auto" te gebruiken (mits je div geen "height" heeft).

vrijdag 5 september 2008 @ 13:44:02 #226

mcDavid

Overflow:auto geeft aan dat een div scrollbalken krijgt indien de content groter is als de div. Het gedrag wat jij beschrijft is gewoon standaard gedrag van div's. Daarom vind ik het vaag.

vrijdag 5 september 2008 @ 13:47:26 #227

CraZaay

prettig gestoord

quote:
Op vrijdag 5 september 2008 13:44 schreef mcDavid het volgende:
Overflow:auto geeft aan dat een div scrollbalken krijgt indien de content groter is als de div.

Alleen wanneer je een height gedefinieerd hebt.

quote:
Het gedrag wat jij beschrijft is gewoon standaard gedrag van div's. Daarom vind ik het vaag.

Het standaard gedrag is dat de floating elementen uit de flow zijn en de parent dus niet "meerekt". Dat los je hiermee dus op. Het staat inderdaad niet in de CSS specs (die zeggen alleen dat "overflow: auto" iets met scrollbalken zou moeten doen, maar dat user-agents zelf mogen beslissen hoe en wat).

vrijdag 5 september 2008 @ 14:29:38 #228

Chandler

Super uitleg CraZaay, zou bijna zeggen begin een tutoriaal site

Just say hi!

vrijdag 5 september 2008 @ 16:49:49 #229

hello_moto1992

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

/* Link Colors */
h1 a {
   color:#000;
   text-decoration:none;
   }
h1 a:hover {
   color:#000;
   }
#content a {
   text-decoration:none;
   font-weight:none;
   }
#content a:hover {
   text-decoration:none;
   }
[b]#footer a {
font-family: Bookman Old Style;
text-decoration:none;
a:link, a:visited{
color: #fff;
text-decoration: none;
a:hover, a:active{
color: #fff;
text-decoration: none;
}[/b]

a:link, a:visited{
color: #000;
text-decoration: none;
}

a:hover, a:active{
color: #000;
text-decoration: none;
}

Ik wil graag bij de footer dat de links wit worden.... maar ze blijven zwart

vrijdag 5 september 2008 @ 16:50:32 #230

CraZaay

prettig gestoord

quote:
Op vrijdag 5 september 2008 14:29 schreef Chandler het volgende:
Super uitleg CraZaay, zou bijna zeggen begin een tutoriaal site

Hehe. Ben er ooit mee begonnen, maar heb (helaas?) mijn handen vol aan ander werk

vrijdag 5 september 2008 @ 16:52:54 #231

CraZaay

prettig gestoord

quote:
Op vrijdag 5 september 2008 16:49 schreef hello_moto1992 het volgende:

[ code verwijderd ]

Ik wil graag bij de footer dat de links wit worden.... maar ze blijven zwart

Er klopt niets van je syntax, pas dat eerst eens aan in je post. Je opent { die je niet sluit, etc.

vrijdag 19 september 2008 @ 08:43:43 #232

hello_moto1992

Hoi

Ik heb een stukje CSS:

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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

/* Misc. */

* {
   margin:0;
   padding:0;
   }
html, body {

   }
body {
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; /* Hier worden de lettertypes aangegeven. Als bijvoorbeeld "Trecbuchet MS" niet op de pc van de gebruiker staat, wordt "Arial" gebruikt enzovoort.*/
   font-size : 12px; /* Dit geeft de grootte van de letters aan */
   background-color: #444444;  /* Dit is de achtergrondkleur*/
   }
img {
   border: none; /* Dit geeft aan of een afbeelding op de website door een rand moet worden omgeven. */
   }
p {
   margin-bottom:10px;/* Dit geeft de afstand van de tekst of een ander element minimaal 10 pixels moet zijn */
   line-height:20px; /* Dit geeft de regelhoogte aan */
   }
/* Structure */
#wrapper { /* De wrapper is "opeenhoping" van de "header", "content" en de "footer"*/
   width:650px; /* Dit geeft de wijdte van het element aan */
   height:600px; /* Dit geeft de hoogte van het element aan  */
   margin:0 auto; /* Dit geeft de ruimte  tussen de verschillende elementen. Deze is hier op nul gezet, zodat ze goed op elkaar aansluiten   */
   border:2px solid #000; /* De border geeft de lijn om de wrapper aan. Deze is hier dus 2 pixels dik.  */
   border-bottom:0 !important; /* Hier wordt de lijn onder aan de "wrapper mee aangegeven. Dit is dus eigenlijk een uitzondering op de gewone "border". Important! geeft aan dat de browser deze regel niet mag overslaan als er iets niet goed uitkomt.  */
   background-color: white;
   }
#header {
   width:630px;
        height:160px;
   border-bottom: 2px solid #000;
   font-size:30px;
   background-image: url('afbeeldingen_achtergronden/achtergrond.jpg');
   padding-left: 20px;
   margin: 0px;
   }
   }
#content {
   padding-left: 50px;
        text-align: right;
padding: 25px; !important
/* Dit geeft aan dat een afbeelding of tekst minimaal 25 pixels van de rand van het element moet staan.  */
   }
#sidebar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 200px;
padding: 0px;
margin: 0px;
}
#sidebar h1 {
display: block;
background-color:#FF9900;
font-size: 100%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:200px;
}

#sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
border: 1px;
}
#sidebar ul li {
margin: 0px;
padding: 0px;
}
#sidebar ul li a {
font-size: 100%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:200px;
}
#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

#footer {
   width:610px;
   height:50px;
   margin:0 auto;
   border-top: 1px solid #000;
   border: 2px solid #000;
   background-color: #000; /* Dit geeft de achtergrondkleur aan */
   padding-right: 20px;
   padding-left: 20px;
   color: #fff;
   }
oration:none;
   }

/* Headings */
#header h1{
   color:white;
}
h1 {
   font-size:30px;
   font-weight:normal;
   letter-spacing:-1px;
   }
h2 {
   font-size:16px;
}

/* Link Colors */
h1 a {
   color:#000;
   text-decoration:none;
   }
h1 a:hover {
   color:#000;
   }
#content a {
   text-decoration:none;
   font-weight:none;
   }
#content a:hover {
   text-decoration:none;
   }
#footer a {
font-family: Bookman Old Style;
text-decoration:none;
a:visited
color: #fff;
text-decoration: none;
a:active
color: #fff;
text-decoration: none;
}

a:link, a:visited{
color: #000;
text-decoration: none;
}

a:hover, a:active{
color: #000;
text-decoration: none;
}

Hoe krijg ik in vredesnaam de tekst in de center naast de sidebar?

Van:

Naar:

Iemand die een opzetje kan geven?

vrijdag 19 september 2008 @ 09:28:42 #233

Banzaiaap

Tony Rocky Horror

Het menu en je content in twee aparte div's zetten en allebei {float:left;} geven

vrijdag 19 september 2008 @ 09:30:45 #234

Tuvai.net

quote:
Op vrijdag 19 september 2008 09:28 schreef Banzaiaap het volgende:
Het menu en je content in twee aparte div's zetten en allebei {float:left;} geven

Inderdaad, echter hoef je de div met content niet in een float te zetten maar enkel een margin-left mee te geven. Vergeet niet dat je elementen uit hun normale document-flow haalt wanneer je ze gaat floaten.

EDIT: Of toch niet, 'k was even de IE6 gap bug vergeten.

[ Bericht 6% gewijzigd door Tuvai.net op 19-09-2008 09:56:04 ]

vrijdag 19 september 2008 @ 09:47:43 #235

Cracka-ass

knip

vrijdag 19 september 2008 @ 09:48:45 #236

Cracka-ass

Kan iemand mij vertellen waarom mijn button 'active' blijft? Hij blijft altijd ingedrukt zodra ie eenmaal is aangeklikt:

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

#navigatie{
display: block;
align: center;
margin: 0 0 0 15px;

padding: 0px;
width: 725px;
height: 53px;
}
#navigatie ul, #navigatie li{
display: block;
margin: 0px;
padding: 0px;
align: center;
}
#navigatie li a, #navigatie li a:hover{
display: block;
align: center;
width: 725px;
height: 53px;
background: url(http://mijn-domein/wp-content/themes/default/images/Menu.jpg) no-repeat 0 0;
text-indent: -9999px;
line-height: 10px;
}
#navigatie li a:hover{
background: url(http://mijn-domein/wp-content/themes/default/images/Menuu.jpg) no-repeat 0 0px;
}
#navigatie li a, #navigatie li a:active{
background-image: url(http://mijn-domein/wp-content/themes/default/images/Menuu.jpg);
}

(Noobie I know

)

vrijdag 19 september 2008 @ 11:22:50 #237

mcDavid

quote:
Op vrijdag 19 september 2008 @ 09:48 schreef Cracka-ass het volgende:
Kan iemand mij vertellen waarom mijn button 'active' blijft? Hij blijft altijd ingedrukt zodra ie eenmaal is aangeklikt:
[ code verwijderd ]

(Noobie I know )

quote:
Op vrijdag 19 september 2008 @ 03:35 schreef mcDavid het volgende:

[..]

niet dat het in de verste verte maar iets met PHP of MySQL te maken heeft, maar als je alle declaraties voor een psuedo-class ook aan de gewone class meegeeft, zal er weinig veranderen inderdaad.

vrijdag 19 september 2008 @ 14:01:07 #238

hello_moto1992

quote:
Op vrijdag 19 september 2008 09:28 schreef Banzaiaap het volgende:
Het menu en je content in twee aparte div's zetten en allebei {float:left;} geven

Bedankt voor je hulp, het is al gelukt. Het was nog wel een beetje irritant doordat de tekst van de content half door de sidebar heen ging, maar dat heb ik veranderd door de breedte van de sidebar aan te passen. Dit had geen gevolgen voor het uiterlijk van de sidebar. Met padding-left in de content lukt het niet (

).

vrijdag 19 september 2008 @ 14:16:06 #239

mcDavid

quote:
Op vrijdag 19 september 2008 @ 14:01 schreef hello_moto1992 het volgende:

[..]

Bedankt voor je hulp, het is al gelukt. Het was nog wel een beetje irritant doordat de tekst van de content half door de sidebar heen ging, maar dat heb ik veranderd door de breedte van de sidebar aan te passen. Dit had geen gevolgen voor het uiterlijk van de sidebar. Met padding-left in de content lukt het niet ( ).

In principe moet het goed gaan als je de content een magrin-left geeft even groot (of net een pixel groter) als de breedte van de sidebar...

vrijdag 26 september 2008 @ 18:18:36 #240

mcDavid

Ik ontdekte zojuist iets grappigs, en vaak best handigs:
als je een element een padding en een breedte geeft, wordt de padding bij de breedte opgeteld.
tenzij je -1 achter de breedte declaratie zet, dan is dat niet het geval! (althans, in IE7 en Fx)

ik heb even een demonstratie gemaakt:
http://duft.nl/test.html

nog ff een beetje uitbreiden en dan door browserschreenshots.org halen...

-edit-
het lijkt te komen doordat de breedte daardoor ongeldig wordt... kun je dus net zo goed weglaten

en ik denken iets spannends ontdekt te hebben...

[ Bericht 21% gewijzigd door mcDavid op 26-09-2008 18:26:41 ]

vrijdag 26 september 2008 @ 21:09:05 #241

zaara

online

tvp

vrijdag 26 september 2008 @ 21:14:45 #242

Light

quote:
Op vrijdag 26 september 2008 18:18 schreef mcDavid het volgende:
Ik ontdekte zojuist iets grappigs, en vaak best handigs:
als je een element een padding en een breedte geeft, wordt de padding bij de breedte opgeteld.
tenzij je -1 achter de breedte declaratie zet, dan is dat niet het geval! (althans, in IE7 en Fx)

ik heb even een demonstratie gemaakt:
http://duft.nl/test.html

nog ff een beetje uitbreiden en dan door browserschreenshots.org halen...

-edit-
het lijkt te komen doordat de breedte daardoor ongeldig wordt... kun je dus net zo goed weglaten
en ik denken iets spannends ontdekt te hebben...

Je had het natuurlijk ook kunnen testen met een smallere div.

En als je geen breedte instelt en wel padding gebruikt dan is de breedte inclusief padding 100%. Stel je wel een breedte in dan komt de padding daarbij (behalve in IE6).

fokstok.nl

zaterdag 27 september 2008 @ 09:34:56 #243

CraZaay

prettig gestoord

quote:
Op vrijdag 26 september 2008 21:14 schreef Light het volgende:

En als je geen breedte instelt en wel padding gebruikt dan is de breedte inclusief padding 100%. Stel je wel een breedte in dan komt de padding daarbij (behalve in IE6).

In IE6 ook, zolang je een geldig doctype gebruikt (en dat doe je uiteraard

).

zaterdag 27 september 2008 @ 11:09:26 #244

Light

quote:
Op zaterdag 27 september 2008 09:34 schreef CraZaay het volgende:

[..]

In IE6 ook, zolang je een geldig doctype gebruikt (en dat doe je uiteraard ).

Ik gebruik altijd een geldig doctype, meestal xhtml 1.0 transitional. En toch moet ik allerlei IE6-hacks gaan toepassen.

fokstok.nl

zaterdag 27 september 2008 @ 12:52:32 #245

mcDavid

quote:
Op vrijdag 26 september 2008 21:14 schreef Light het volgende:

[..]

Je had het natuurlijk ook kunnen testen met een smallere div.

En als je geen breedte instelt en wel padding gebruikt dan is de breedte inclusief padding 100%. Stel je wel een breedte in dan komt de padding daarbij (behalve in IE6).

Daar kwam ik ook achter ja, ik zat dus onnodig moeilijk te doen... inmiddels doet mijn menutje het prima (ook in IE6, met de nodige IE6-specifieke CSS)

zaterdag 4 oktober 2008 @ 01:08:55 #246

Archytas

Hoi,

Ik ben een CSS noob en zou graag van jullie expertise gebruikmaken, zelf red ik het namelijk niet. Kort even mijn uitleg: ik heb een website gemaakt met een afbeelding als logo bovenaan de pagina( http://img253.imageshack.us/img253/5634/logobuonissimodn7.gif ) waarbij ik gewerkt heb met image maps. Image maps blijken echter totaal niet meer 'done' te zijn en nu word ik aangeraden het boeltje met CSS te klaren ( animated gif op gif ).

Het logo is reeds aangepast (check: http://filifestijn.leadhoster.com), maar de noodzakelijke CSS-code geeft me hoofdbrekens. Op die site kan je zien dat ik wat geëxperimenteerd heb met de positie maar afhankelijk van de schermresolutie wordt waarom 'kok aan huis? verkeerd weergegeven.

De bedoeling is dus gewoon om alles te krijgen zoals in het aanvankelijke logo staat, maar dan met gewone tekst (omdat dat sneller inlaadt, beter is etc etc.) Dit moet door positionering gebeuren maar welke? absolute of relatieve?
Zelf dacht ik: absoluut en relatief t.a.v. WAT is ook nog belangrijk. In principe kanik mijn tekst absoluut positioneren tav mijn afbeelding maar niet absoluut tav de pagina omdat bij een andere schermresolutie het er dan anders uitziet. Verder zou ik mijn tekst relatief kunne positioneren tav de BREEDTE omdat mijn afbeelding toch gecentreerd is, maar niet relatief tav de lengte van de pagina omdat de lengte van de pagina kan verschillen.

In theorie zou ik zeggen: positioneer de tekst relatief gezien tav de breedte van de pagina in percentages en absoluut gezien tav de lengte van de pagina. Maar waarschijnlijk zit ik fout.

Zoals je ziet weet ik nog niet hoe ik er theoretisch uitraak laat staan het coderen in CSS. Hopelijk kan iemand me met zijn/haar inzichten helpen!

groeten

zaterdag 4 oktober 2008 @ 19:28:39 #247

mcDavid

Ook de position-tag in CSS moet je proberen zoveel mogelijk te vermijden. Niet omdat het 'slecht' is ofzo, maar als je het teveel gebruikt raak je binnen de kortste keren het overzicht kwijt. Niet handig dus. en ik denk dat je het ook zonder kunt.
ik zou de pagina als ik jou was ongeveer zo opbouwen:

1
2
3
4
5
6
7

de div .container geef je een breedte naar keuze (bijv 770px, dan is'ie in een 800x600 resolutie beeldvullend), en de margin links en rechts zet je op 'auto', dan schuift die div automatisch naar het midden.

Voor je header zou ik 2 plaatjes gebruiken: je logo (strak uitgeknipt!) en het plaatje rechts daarvan.
Met margins zorg je dat de plaatjes op de goeie positie komen. De witte lijntjes maak je m.b.v. borders.

overigens is het aan te raden om je div's tijdens het maken even een opvallende achtergrondkleur en border te geven, dan zie je beter hoe ze precies lopen

[ Bericht 1% gewijzigd door mcDavid op 04-10-2008 19:45:30 ]

zaterdag 4 oktober 2008 @ 20:06:00 #248

Light

quote:
Op zaterdag 4 oktober 2008 19:28 schreef mcDavid het volgende:

overigens is het aan te raden om je div's tijdens het maken even een opvallende achtergrondkleur en border te geven, dan zie je beter hoe ze precies lopen

Ik gebruik meestal #ff8, #f8f, #8ff, #f88, #8f8 of #88f als ik even tijdelijk een opvallende lichte achtergrondkleur nodig heb. Die kleuren zijn herkenbaar genoeg, en als je een donkere tekst op een lichte achtergrond plaatst dan blijft de tekst ook leesbaar met die achtergrondkleurtjes.

fokstok.nl

zaterdag 4 oktober 2008 @ 20:11:31 #249

mcDavid

ik knal er meestal gewoon "yellow", "red", "blue", "grey", "purple", of wat me maar te binnen schiet in

zaterdag 4 oktober 2008 @ 20:16:45 #250

HenkBenzinetank

Toegevoegde waarde

nothing beats #f00, fool!

zaterdag 4 oktober 2008 @ 20:55:26 #251

Light

quote:
Op zaterdag 4 oktober 2008 20:11 schreef mcDavid het volgende:
ik knal er meestal gewoon "yellow", "red", "blue", "grey", "purple", of wat me maar te binnen schiet in

Voor grote vlakken vind ik die kleuren niet echt prettig om naar te kijken. En daarbij is die kleurcode meestal korter

fokstok.nl

zondag 5 oktober 2008 @ 10:01:37 #252

CraZaay

prettig gestoord

quote:
Op zaterdag 4 oktober 2008 19:28 schreef mcDavid het volgende:

overigens is het aan te raden om je div's tijdens het maken even een opvallende achtergrondkleur en border te geven, dan zie je beter hoe ze precies lopen

Die borders daar ben ik het niet mee eens: die maken je div aan alle kanten een pixel groter en zorgt daarom vaak voor verneukte lay-outs (bij mij iig).

maandag 6 oktober 2008 @ 12:00:33 #253

Ruud

quote:
Op zaterdag 4 oktober 2008 20:06 schreef Light het volgende:

[..]

Ik gebruik meestal #ff8, #f8f, #8ff, #f88, #8f8 of #88f als ik even tijdelijk een opvallende lichte achtergrondkleur nodig heb. Die kleuren zijn herkenbaar genoeg, en als je een donkere tekst op een lichte achtergrond plaatst dan blijft de tekst ook leesbaar met die achtergrondkleurtjes.

#00FF00 hier

goede tip trouwens

maandag 6 oktober 2008 @ 12:40:54 #254

Tuvai.net

Containers even een felle kleur geven is sowieso verstandig als je een HTML layout uit je mouw gaat schudden. Al is het alleen om het hoofdgedeelte visueel even in beeld te brengen, meestal heb je immers een hoofdcontainer, header, mogelijk ook een footer en meerdere kolommen.

zondag 12 oktober 2008 @ 13:55:38 #255

DennisMoore

*met blogspot css klooi*

Pfff... wat heeft blogspot er een hoop. Voor een leek als ik best lastig om de draad te volgen. Net wat zitten editten met Dreamweaver, en 'k heb de css in ieder geval extern nu.

Vage verschillen tussen Explorer en Firefox ook. Zal wel met margin en padding te maken hebben ofzo.

Misschien is 't handiger om vanuit het niets een css te maken ipv een bestaande blogspot-css aan te passen.

maandag 13 oktober 2008 @ 00:33:37 #256

mcDavid

quote:
Op zondag 12 oktober 2008 13:55 schreef DennisMoore het volgende:
*met blogspot css klooi*

Pfff... wat heeft blogspot er een hoop. Voor een leek als ik best lastig om de draad te volgen. Net wat zitten editten met Dreamweaver, en 'k heb de css in ieder geval extern nu.

Vage verschillen tussen Explorer en Firefox ook. Zal wel met margin en padding te maken hebben ofzo.

Misschien is 't handiger om vanuit het niets een css te maken ipv een bestaande blogspot-css aan te passen.

Heb je de web developer firefox addon al geinstalleerd?

ctrl-shift-f en er gaat een wereld voor je open!

maandag 13 oktober 2008 @ 11:39:42 #257

CraZaay

prettig gestoord

quote:
Op maandag 13 oktober 2008 00:33 schreef mcDavid het volgende:

[..]

Heb je de web developer firefox addon al geinstalleerd?

ctrl-shift-f en er gaat een wereld voor je open!

En vergeet Firebug niet met YSlow. Die 3 Firefox plugins zijn echt onmisbaar imo.

maandag 13 oktober 2008 @ 12:18:32 #258

DennisMoore

'k Ga eens experimenteren

.

De ctrl-shift-f is trouwens gekaapt door Foxmarks...
-edit-

@ Google

[ Bericht 28% gewijzigd door DennisMoore op 13-10-2008 12:26:12 ]

dinsdag 14 oktober 2008 @ 14:04:39 #259

donroyco

dus niet Donroyco

Waarom is amazinglyenigmatic.nl in IE zo anders? Ik weet niet waar de fout zit

Inmiddels is het positioneren van de 'geopend blabla' wel al gelukt..

Nu nog de tekst..

[ Bericht 24% gewijzigd door donroyco op 14-10-2008 14:15:17 ]

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

dinsdag 14 oktober 2008 @ 17:39:36 #260

donroyco

dus niet Donroyco

quote:
Op dinsdag 14 oktober 2008 14:04 schreef donroyco het volgende:
Waarom is amazinglyenigmatic.nl in IE zo anders? Ik weet niet waar de fout zit Inmiddels is het positioneren van de 'geopend blabla' wel al gelukt..

Nu nog de tekst..

Iemand die het weet?

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

dinsdag 14 oktober 2008 @ 19:03:11 #261

mcDavid

Omdat je totaal geen natuurlijke float hebt?

Ik kan trouwens niet ontdekken in welke browser je 'getest' hebt, het staat bij allebei schots en scheef.

-edit-
en vraag je ook eens af hoe je site eruit ziet in een browservenster met een andere grootte.

zaterdag 18 oktober 2008 @ 16:58:41 #262

Johnns

Is iemand hier bekend met een fout in Internet Explorer 7, waarbij een foto ineens horizontaal gesplitst wordt? Het vage is vooral, dat dit maar heeeeel soms gebeurd, en niet eens steeds bij dezelfde foto.

you and I ain't done Zeke!

zaterdag 18 oktober 2008 @ 17:04:06 #263

donroyco

dus niet Donroyco

quote:
Op dinsdag 14 oktober 2008 19:03 schreef mcDavid het volgende:
Omdat je totaal geen natuurlijke float hebt?

Ik kan trouwens niet ontdekken in welke browser je 'getest' hebt, het staat bij allebei schots en scheef.

-edit-
en vraag je ook eens af hoe je site eruit ziet in een browservenster met een andere grootte.

Misschien een ietwat late reactie, maar dank je wel voor de moeite.. het probleem is inmiddels opgelost

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

zaterdag 18 oktober 2008 @ 17:25:02 #264

donroyco

dus niet Donroyco

Even een header gemaakt voor de OP:

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

woensdag 29 oktober 2008 @ 19:43:24 #265

veldmuis

Ik wil een menu hebben op m'n testpaginaatje:
De items staan in LI's in een UL. De UL heb ik een class meegegeven die zorgt dat het ding 800px breed is, zodat er een border om kan.
De LI's wil ik nu rechts uitlijnen. Hoe doe ik dat? Ik laat ze nu left floaten zodat ze naast elkaar staan, en dat gaat keurig. Right laten floaten heeft ongeveer het gewenste effect, behalve dat de items dan, logisch, achterstevoren staan. Dat in de HTML oplossen lijkt me geen vriendelijke oplossing. Is er een nette oplossing te bedenken, of moet ik gewoon een div toevoegen die ik de border geef, en daar de UL in mikken die ik rechts uitlijn, waarbinnen de LI's weer left floaten?

woensdag 29 oktober 2008 @ 19:45:57 #266

mcDavid

ik denk dat dat laatste de beste oplossing is idd..

woensdag 29 oktober 2008 @ 19:47:18 #267

veldmuis

Was er al bang voor. Ik probeer de DIVs zoveel mogelijk te beperken, maar als't moet...!

woensdag 29 oktober 2008 @ 19:55:51 #268

mcDavid

Mwoah, hoewel je dr natuurlijk niet onnodig mee moet gaan strooien (hyves

) maakt het niet zoveel uit volgens mij. Divs betekenen verder niets dus behalve dat het wat extra bits zijn, zal het weinig effect hebben op de performance van je site.

woensdag 29 oktober 2008 @ 20:01:43 #269

HenkBenzinetank

Toegevoegde waarde

@veldmuis: text-align: right is niet wat je bedoelt?

woensdag 29 oktober 2008 @ 20:06:47 #270

veldmuis

Nee, het spul float al naar links binnen de UL, en die float overruled de text-align geloof ik.

woensdag 29 oktober 2008 @ 20:07:40 #271

veldmuis

quote:
Op woensdag 29 oktober 2008 19:55 schreef mcDavid het volgende:
Mwoah, hoewel je dr natuurlijk niet onnodig mee moet gaan strooien (hyves ) maakt het niet zoveel uit volgens mij. Divs betekenen verder niets dus behalve dat het wat extra bits zijn, zal het weinig effect hebben op de performance van je site.

Ik dacht dat het bij SEO wel wat kan uitmaken?

woensdag 29 oktober 2008 @ 20:07:42 #272

Light

quote:
Op woensdag 29 oktober 2008 20:01 schreef HenkBenzinetank het volgende:
@veldmuis: text-align: right is niet wat je bedoelt?

Met text-align: right zorg je ervoor dat de tekst in de li's rechts wordt uitgelijnd. De enige manier om dan te zorgen dat het laatste menu-item tegen de rechterkantlijn komt te staan, is door te zorgen dat de li's zodanig worden verdeeld dat het precies uitkomt.

fokstok.nl

woensdag 29 oktober 2008 @ 20:09:13 #273

Light

quote:
Op woensdag 29 oktober 2008 20:06 schreef veldmuis het volgende:
Nee, het spul float al naar links binnen de UL, en die float overruled de text-align geloof ik.

float en text-align zijn verschillende dingen. En je kunt best een element float: left; en text-align: right; meegeven.

fokstok.nl

woensdag 29 oktober 2008 @ 20:11:02 #274

Light

quote:
Op woensdag 29 oktober 2008 19:43 schreef veldmuis het volgende:
Ik wil een menu hebben op m'n testpaginaatje:
De items staan in LI's in een UL. De UL heb ik een class meegegeven die zorgt dat het ding 800px breed is, zodat er een border om kan.
De LI's wil ik nu rechts uitlijnen. Hoe doe ik dat? Ik laat ze nu left floaten zodat ze naast elkaar staan, en dat gaat keurig. Right laten floaten heeft ongeveer het gewenste effect, behalve dat de items dan, logisch, achterstevoren staan. Dat in de HTML oplossen lijkt me geen vriendelijke oplossing. Is er een nette oplossing te bedenken, of moet ik gewoon een div toevoegen die ik de border geef, en daar de UL in mikken die ik rechts uitlijn, waarbinnen de LI's weer left floaten?

De UL width: auto; en float: right; meegeven, de LI's dan float: left; En dat in de DIV met de border.

fokstok.nl

woensdag 29 oktober 2008 @ 20:16:11 #275

DorentuZ

quote:
Op woensdag 29 oktober 2008 20:01 schreef HenkBenzinetank het volgende:
@veldmuis: text-align: right is niet wat je bedoelt?

Dat gaat niet werken in dit geval.. het was een ander verhaal als 't over met list items met een inline position ging

edit: moet toch eens wat vaker refreshen..

woensdag 29 oktober 2008 @ 20:17:56 #276

veldmuis

quote:
Op woensdag 29 oktober 2008 20:09 schreef Light het volgende:

[..]

float en text-align zijn verschillende dingen. En je kunt best een element float: left; en text-align: right; meegeven.

Dat snap ik, maar als ik de float:left zou weglaten en wel een text-align: right meegeef staat het lijstje wel rechts in de UL. Zo bedoelde ik het

quote:
Op woensdag 29 oktober 2008 20:11 schreef Light het volgende:

[..]

De UL width: auto; en float: right; meegeven, de LI's dan float: left; En dat in de DIV met de border.

Zo heb ik het nu idd ook opgelost

. Werkt prima, jammer dat er een DIV bij moet

.

woensdag 29 oktober 2008 @ 20:27:45 #277

mcDavid

quote:
Op woensdag 29 oktober 2008 @ 20:07 schreef veldmuis het volgende:

[..]

Ik dacht dat het bij SEO wel wat kan uitmaken?

theoretisch wel misschien... maar ik geloof daar niet zo in.

Nou ken ik de scan-algoritmes van google natuurlijk niet, maar kan me niet voorstellen dat een divje meer of minder van invloed is op je score.

woensdag 29 oktober 2008 @ 20:39:53 #278

HenkBenzinetank

Toegevoegde waarde

quote:
Op woensdag 29 oktober 2008 20:07 schreef Light het volgende:

[..]

Met text-align: right zorg je ervoor dat de tekst in de li's rechts wordt uitgelijnd. De enige manier om dan te zorgen dat het laatste menu-item tegen de rechterkantlijn komt te staan, is door te zorgen dat de li's zodanig worden verdeeld dat het precies uitkomt.

i know, ik snapte alleen niet precies wat veldmuis bedoelde;

vrijdag 31 oktober 2008 @ 08:08:09 #279

Ronster

morge allemaal,

Ik ben al een tijdje bezig met het ontwerpen van een template en wil het volgende bereiken.
een 100% height pagina met bover een header en beneden een footer die een vaste hoogte hebben.
Ik wil de pagina helemaal opbouwen met DIVjes en heb al heel veel artikelen gevonden over een 100% height DIV echter wil het nog niet helemaal werken.

Ik heb de pagina nu in IE en ook alleen in IE zoals ik hem wil hebben, pagina staat hieronder weergegeven
maar heb de HTML en BODY tags weg moeten halen om dit resultaat te krijgen.

kan iemand mij vertellen wat ik verkeerd doe of hoe ik dit ook werkend krijg in FF?

alvast bedankt.. Groetjes Ronny

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

[ Bericht 31% gewijzigd door Ronster op 31-10-2008 08:30:41 ]

vrijdag 31 oktober 2008 @ 08:25:19 #280

Light

Kun je die zooi eens tusseen [ code] en [ /code] zetten? (en dan zonder spaties na de [ )

fokstok.nl

vrijdag 31 oktober 2008 @ 08:32:06 #281

Ronster

owja had de verkeerde tags gebruikt

vrijdag 31 oktober 2008 @ 11:10:07 #282

Chandler

Ik heb een z-index probleem en kan er niet achterkomen hoe en waar deze vandaan komt.

Voor een site wil ik een transparante achtergrond gebruiken en daar overheen een div met inhoud laten vallen.

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

#blackout {
    opacity:.7;
    filter:alpha(opacity=70);
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:2000px;
    z-index:3;
    background-image:url('/layout/images/darkbackgroundimage.gif');
    display: none;
}

#popupproduktopties {
    z-index: 4;
    position: absolute;
    top: -100px;
    left: 10%;
    width: 600px;
    height: 500px;
    display: block;
    background: #fff;
    border: 5px solid black;
    overflow: scroll;
}

Nu heb ik 2 divjes met bovenstaande namen, echter de div blackout maakt de achtergrond 'grijs' maar de 2e div valt ook onder het grijze gedeelte terwijl deze er op moet liggen? wat doe ik fout?

Ik denk dat ik trouwens de fout al weet, de div ligt in binnen andere divs, vandaar dat de z-index meegenomen wordt, is hier een workaround voor?

Just say hi!

vrijdag 31 oktober 2008 @ 12:59:49 #283

mcDavid

quote:
Op vrijdag 31 oktober 2008 @ 11:10 schreef Chandler het volgende:
Ik heb een z-index probleem en kan er niet achterkomen hoe en waar deze vandaan komt.

Voor een site wil ik een transparante achtergrond gebruiken en daar overheen een div met inhoud laten vallen.
[ code verwijderd ]

Nu heb ik 2 divjes met bovenstaande namen, echter de div blackout maakt de achtergrond 'grijs' maar de 2e div valt ook onder het grijze gedeelte terwijl deze er op moet liggen? wat doe ik fout?

Ik denk dat ik trouwens de fout al weet, de div ligt in binnen andere divs, vandaar dat de z-index meegenomen wordt, is hier een workaround voor?

Nope, Z-index werkt alleen voor elementen die op het zelfde niveau genest zitten.
Makkelijkste manier is gewoon de 'hoogste' div nesten in de achtergronddiv lijkt me.

vrijdag 31 oktober 2008 @ 13:43:18 #284

Chandler

Hmm.. Ik denk dat het in dit geval pittig gaat worden maar toch bedankt voor je reactie!

weer wat geleerd

Just say hi!

vrijdag 31 oktober 2008 @ 15:24:12 #285

Geqxon

IE6... aargh. Heerlijk dat de browser er compleet uit klapt wanneer je +/- 50 transparent PNG objecten in je CSS hebt zitten.

vrijdag 31 oktober 2008 @ 23:04:10 #286

mcDavid

quote:
Op vrijdag 31 oktober 2008 @ 15:24 schreef Geqxon het volgende:
IE6... aargh. Heerlijk dat de browser er compleet uit klapt wanneer je +/- 50 transparent PNG objecten in je CSS hebt zitten. :+

:') Trieste boel heh. Maarja wat wil je met een browser van 7 jaar oud.

Meestal heb ik zoiets van "dan maar lelijke plaatjes hoor". Heb wel een keer een 'hack' gebruikt.

1
2
3
4

#shadow {background: url("/images/schaduw.png") repeat;}

/* IE6 hack */
* html #shadow {background-color:#000;back\ground-color:transparent;background-image:url(blank.gif);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/schaduw.png", sizingMethod="scale");}

vrijdag 31 oktober 2008 @ 23:28:34 #287

Geqxon

quote:
Op vrijdag 31 oktober 2008 23:04 schreef mcDavid het volgende:

[..]

Trieste boel heh. Maarja wat wil je met een browser van 7 jaar oud.

Meestal heb ik zoiets van "dan maar lelijke plaatjes hoor". Heb wel een keer een 'hack' gebruikt.
[ code verwijderd ]

Heb ik ook in de CSS gebruikt. En dan een keer of 40. En toen bevroor IE6 compleet bij het bezoeken van de website. Het was dan ook zo'n heerlijke hippe ronde hoekjes website.

vrijdag 31 oktober 2008 @ 23:30:01 #288

HenkBenzinetank

Toegevoegde waarde

dr zijn ook andere manieren om ie png's e laten slikken ipv 50x hetzelfde opnemen in de css

vrijdag 31 oktober 2008 @ 23:46:21 #289

Johnns

quote:
Op vrijdag 31 oktober 2008 23:30 schreef HenkBenzinetank het volgende:
dr zijn ook andere manieren om ie png's e laten slikken ipv 50x hetzelfde opnemen in de css

Maar dan nog mis je functionaliteit. Zo vind ik het erg frustrerend dat de background-*.* elementen niet meer werken als je een PNGfix toepast in Internet Explorer 6.

zelf neem ik altijd het volgende op in mijn IE6 conditional comment:

quote:
#div,
#div h1,
#div .subdiv {
behavior:url(iepngfix.htc);
}

you and I ain't done Zeke!

vrijdag 31 oktober 2008 @ 23:47:29 #290

HenkBenzinetank

Toegevoegde waarde

ook daar is een fix voor

edit
beter lezen, repeat en position werken nog steeds niet

vrijdag 31 oktober 2008 @ 23:49:50 #291

mcDavid

Idd als je zoiets 50x moet doen, kun je denk ik beter een javascript hack zoeken!

Heb ik toendertijd ook naar gekeken. Zijn over het algemeen een stuk omslachtiger, maar wel vaak in één keer voor de hele pagina klaar.

Maar, tegenwoordig is het gebruik van IE6 naar mijn mening ver genoeg afgenomen om die mensen dan maar een paar grijze randjes voor te schotelen. Evt. met de mededeling dat ze hun browser moeten upgraden voor optimaal kijkgemak.

[edit]
niezosnelineensjoh!

vrijdag 31 oktober 2008 @ 23:55:50 #292

Light

quote:
Op vrijdag 31 oktober 2008 23:47 schreef HenkBenzinetank het volgende:
ook daar is een fix voor

edit
beter lezen, repeat en position werken nog steeds niet

Er is een nieuwe versie van iepngfix die wel ondersteuning heeft voor repeat en position. Zie hier

fokstok.nl

zaterdag 1 november 2008 @ 00:01:55 #293

HenkBenzinetank

Toegevoegde waarde

o ja, dat was ;m

heb het laatst nog gebruikt voor een site maar kon het niet meer vinden

zaterdag 1 november 2008 @ 00:29:24 #294

Geqxon

quote:
Op vrijdag 31 oktober 2008 23:30 schreef HenkBenzinetank het volgende:
dr zijn ook andere manieren om ie png's e laten slikken ipv 50x hetzelfde opnemen in de css

Het zijn achtergrondafbeeldingen voor diverse objecten. Dat is niet met javascript aan te passen.

Tuurlijk, voor de IMG objecten met een transparante PNG gebruik ik wel javascript. Al voer je daar hetzelfde uit, dus het maakt geen verschil of je het met CSS of JS doet.

Het feit dat IE6, op welke computer dan ook, volledig crashde op deze website, is wel erg triest.

zaterdag 1 november 2008 @ 00:37:49 #295

mcDavid

quote:
Op zaterdag 1 november 2008 @ 00:29 schreef Geqxon het volgende:

[..]

Het zijn achtergrondafbeeldingen voor diverse objecten. Dat is niet met javascript aan te passen.

wie heeft je dit wijsgemaakt?

zaterdag 1 november 2008 @ 00:51:00 #296

Geqxon

quote:
Op zaterdag 1 november 2008 00:37 schreef mcDavid het volgende:

[..]

wie heeft je dit wijsgemaakt?

Hoe wil jij dan via javascript een in CSS aangeduidt achtergrond-property oproepen? Is niet mogelijk.

zaterdag 1 november 2008 @ 00:53:24 #297

mcDavid

quote:
Op zaterdag 1 november 2008 @ 00:51 schreef Geqxon het volgende:

[..]

Hoe wil jij dan via javascript een in CSS aangeduidt achtergrond-property oproepen? Is niet mogelijk.

object.style.background="..."

zaterdag 1 november 2008 @ 00:55:19 #298

Geqxon

quote:
Op zaterdag 1 november 2008 00:53 schreef mcDavid het volgende:

[..]

object.style.background="..."

Als ik die opvraag van een object waarbij de background-image in CSS is aangegeven krijg je een lege waarde.

zaterdag 1 november 2008 @ 01:00:06 #299

mcDavid

Hmm daar heb je idd gelijk in.

Mot je ook ff een scriptje schijven dat die achtergrondafbeeldingen ook nog een keer via DOM invoegt

zaterdag 1 november 2008 @ 01:01:16 #300

Geqxon

Kijk, een plaatje van de filter voorzien is simpel. Even in een for-lusje over alle PNG objecten een simpel scriptje:

1
2
3
4
5
6
7
8

   oldSrc = new String(pngObject.src);
   oldWidth = new String(pngObject.width);
   oldHeight = new String(pngObject.height);

      pngObject.src = "images/pixel_trans.gif";
      pngObject.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + oldSrc + "', sizingMethod='scale')";
      pngObject.style.width = oldWidth;
      pngObject.style.height = oldHeight;

Maar bij bijvoorbeeld een H3 met een background-image propery in CSS kun je niet de background-image property aanvragen.

zaterdag 1 november 2008 @ 01:02:46 #301

Geqxon

quote:
Op zaterdag 1 november 2008 01:00 schreef mcDavid het volgende:
Mot je ook ff een scriptje schijven dat die achtergrondafbeeldingen ook nog een keer via DOM invoegt

Natuurlijk, maar dan moet ik b.v. een javascript array hebben met alle objecten en hun achtergrond afbeeldingen. Vind ik geen nette oplossing. Tevens dat 40x in de CSS zetten.

Waarom Microschoft niet een IE6 upgrade uitbrengt om dingen als transparency voor PNG toe te voegen is mij overigens een raadsel...

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

[CSS] voor dummies - deel 9

» digital corner

» development

» digital corner

» development