[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.)

 | FOK! Schrikkelbaasch

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....

 | FOK! Schrikkelbaasch

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

 | FOK! Schrikkelbaasch

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.

 | FOK! Schrikkelbaasch

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.

 | FOK! Schrikkelbaasch

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?

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

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!

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

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?

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

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

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

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 ]

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

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 ]

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

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?

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

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?

 | FOK! Schrikkelbaasch

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?

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

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?

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

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)

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

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

 | FOK! Schrikkelbaasch

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?

 | FOK! Schrikkelbaasch

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.

 | FOK! Schrikkelbaasch

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.

 | FOK! Schrikkelbaasch

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

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

[CSS] voor dummies - deel 9

» digital corner

» development

» digital corner

» development