[CSS] voor dummies.

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_24811995
Hij is IE-only, jammer.

Als je een witte border maakt op een witte achtergrond dan zie je 'm niet. Lijk me logisch.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_24812123
Klopt, dat had ik vannochtend nog even aangepast maar iemand die een betere variant weet... Ennuh ik wil um nog FF klaar maken maar dat is nou niet zo simpel
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24812888
Ik zou 'm eerst crossbrowser maken en me daarna pas zorgen maken over een mouseover effect van een knopje.

Die popups voor kleur en lettertype werken wel, maar het lijkt me mooier (en mss nog makkelijker te maken) als je die extra opties als dropdown bij 't knopje toont.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_24812975
Ja met een soort vallende layer bedoel je? of heb je een klein voorbeeldje voor me?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24815042
Nou ok dan
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_24817201
Vet man! wat een style!!!!! ziet er echt verdomde nice uit
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24817320
Er zitten nog wat schoonheidsfoutjes in. De positioning in IE is niet helemaal goed. En er zou maar 1 panel tegelijk open moeten zijn.
Maar dat is aan jou
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_24818099
haha tnx, ik ben al even bezig; leuk is dat alleen blijf ik toch mijn routines m.b.t het maken van de html gebruiken, maar dat gaat ook lekker z'n gangetje... een voorbeeldje..

http://upload.bruggema.nl/files/editor.html
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24900543
Ik heb het volgende plaatje van me designer gekregen



en dat wil ik bereiken met het volgende stukje css en html

CSS
1
2
3
4
5		.imagereplycontainer 
{
    margin-top: 10px;
    width: 380px;
}


en HTML (h1 zit in een andere container dus vergeet die ff)
1
2
3
4
5
6
7
8
9
10
11		 
        <h1>React</h1>
        <form method="post" action="gallery/react/%image_id%" style="display:inline;">
        <div class="imagereplycontainer">
        <textarea name="text" cols=1 rows=1 style="width: 384px; height: 40px;"></textarea>
            <div style="text-align: right;">
                <input type="text" value="<name>" name="user" style="width: 100px">
                <input type="image" src="layout/default/elements/button-send.jpg" ALT="Send">
            </div>
        </div>
        </form>


Nu krijg ik echter als resultaat



weet iemand hoe ik het 'username' vakje en de button goed krijg? tnx
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24900931
Denk dat je een float right op de button moet doen, of een float:left op de textfield. Moet je niet vergeten een clear:both div te adden.
pi_24901990
volgens mij komt je zo verder in de buurt:
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		<style type="text/css">
FORM.imagereplycontainer 
{
    margin-top: 10px;
    width: 380px;
   display: inline;
}
FORM.imagereplycontainer UL, FORM.imagereplycontainer UL LI
{
    list-style: none; 
   margin: 0; padding: 0;
}
FORM.imagereplycontainer UL LI
{
    text-align: right;
}
FORM.imagereplycontainer UL LI TEXTAREA
{
   width: 384px; height: 40px;
   border: 1px solid #ccc;
   overflow: auto;
}
FORM.imagereplycontainer UL LI INPUT
{
   width: 100px; height: 1em;
   border: 1px solid #ccc;
}
FORM.imagereplycontainer UL LI BUTTON
{
   width: 100px; height: 1em;
   border: 0;
   padding: 0; margin: 0;
}
FORM.imagereplycontainer UL LI BUTTON IMG
{
   border: 0; padding: 0; margin: 0;
}
</style>

<h1>React</h1>
<form method="post" action="gallery/react/%25image_id%25" class="imagereplycontainer">
   <ul>
      <li> <label for="myTexarea">insert your text</label>
         <textarea name="myTexarea" id="myTexarea"></textarea></li>
      <li> <label for="myTexarea">username</label>
         <input type="text" value="name" name="user" id="user">
         <button type="submit"><img src="layout/default/elements/button-send.jpg" alt="Send"><button></li>
   </ul>
</form>


doordat je de css-styles duidelijk scheidt van de HTML-code ben je veel flexibeler, voor je HTML-code is het dan essentieel dat deze een goede beschrijving is van de inhoud, in dit geval een form...

Het gebruik van een Unordered List is een eigenschap die veel HTML-bouwers die veel met CSS doen snel overnemen, en welke ook enigszins terughoudend moet worden behandeld (pas op dat je het gebruik van UL's niet gaat overdoen, ik heb al mensen gezien die data-strukturen die gewoon tabulaire data waren, ipv in eennormale table, toch in lelijk genestte UL-LI's neergezet werden uit css-gewoonte) ...

In deze structuur zie je ook een zeker zwaktepunt, namelijk dat de button direkt in dezelfde LI als het input-veld staat, wat voor gebruikers verwarrend kan zijn, omdat het de indruk wekt dat die submit enkel geldig is voor dat specifieke veld (als een 'file-upload-veld') .. hier ligt die 'fout' echter al aan het design zelf, en kan je in de HTMLstruktuur daar weinig aan doen.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_24901999
Inderdaad Roonaan, met een float: right op de button en dan die voor het textveld zetten is het gelukt!!! tnx
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24902601
quote:
Op donderdag 3 februari 2005 14:06 schreef RM-rf het volgende:
volgens mij komt je zo verder in de buurt:
[ code verwijderd ]
RM-rf, je moet me hier niet op vastpinnen, maar is CSS niet hoofdletter gevoelig, dwz dat FORM#a alleen matched met <FORM id="a"> en niet met <form id="a">?

Dit vroeg ik mij af, omdat ik jou (als enige eigenlijk) altijd in css de tags in uppercase zie schrijven.
quote:
<ul><li>....</li></ul>
Is een fieldset in deze zaak niet sematisch correcter?

-r-
pi_24902915
quote:
Op donderdag 3 februari 2005 14:36 schreef Roönaän het volgende:

Dit vroeg ik mij af, omdat ik jou (als enige eigenlijk) altijd in css de tags in uppercase zie schrijven.
css is niet hoofdlettergevoelig, ik heb zelf de gewoonte om alle tag-selectoren altijd in hoofdletters te zetten, maar dat is gewoon een leesbaarheid-issue, zo kun je makkelijk de tag-selectoren uit de code halen...

In XML is de element-selector echter wel case-sensitive. (wat in theorie het ook bij XHTML zou zijn, echter dat komst niet echt ter sprake zolang XHTML gewoon verzonden wordt met text/html mimetype)
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_24905495
Tag-names zijn niet case sensitive, classnames wel!
Testje
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_24954873
Ik ben even verder gegaan met mijn UBB editor echter heb ik 1 probleem met het menutje..

als ik een mouseover heb op een 'button' dan springt de rest één pixel naar rechts

http://editor.bruggema.nl/editor.html

The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24959009
Probleem is half opgelost laat staan dat de buttons in IE er fancy uitzien maar in FF de plaatjes als het ware iets anders er uit zien
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24961364
-edit-
pi_24964203
why -edit-?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24967289
quote:
Op maandag 7 februari 2005 01:58 schreef Chandler het volgende:
why -edit-?
Ze leken er goed uit te zien, tot ik de rollover probeerde.
pi_24968228
Yep en waar het in zit nobody knows
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24977463
Ik zit vast .

http://nitespeed.servebeer.com/ns/

In FireFox werkt het als een tiet, snel geladen en 100% valide code.
Open je het in IE dan zijn de borders anders, en is mijn menu divje niet meer zo hoog als de content hoog is.

Ik heb express de menu div inherent gemaakt aan de content div, zodat 100% height er voor zou zorgen dat hij de hoogte van mijn content div zou overnemen...

niet dus !
We'll keep on whispering our mantras.
pi_24977519
Om te zorgen dat IE in strict mode springt moet de doctype op de eerste regel staan. Dit betekend dus dat je je <?xml definitie weg moet halen, wil je dat het in ie er netjes uitziet. Om dit te compenseren zou je een text/xml header kunnen produceren aan de serverkant natuurlijk.
pi_24977616
quote:
Op maandag 7 februari 2005 21:46 schreef Roönaän het volgende:
Om te zorgen dat IE in strict mode springt moet de doctype op de eerste regel staan. Dit betekend dus dat je je <?xml definitie weg moet halen, wil je dat het in ie er netjes uitziet. Om dit te compenseren zou je een text/xml header kunnen produceren aan de serverkant natuurlijk.
Goed, gedaan wat je hebt gezegd en de borders zijn nu inderdaad hetzelfde waardoor de IMG perfect blijft in IE en FF. Helaas was dit nog geen goede oplossing voor mijn menu div.

Update:

Een hoop geklooi later weet ik nog niet hoe ik dit het beste kan oplossen, de vraag blijft dus:
"Hoe zorg ik ervoor dat mijn menu div even hoog is als mijn content div?"

[ Bericht 13% gewijzigd door NiteSpeed op 07-02-2005 23:53:44 ]
We'll keep on whispering our mantras.
pi_24980318
@Roonaan, heb jij misschien een idee m.b.t mijn buttons?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_24992365
Ik weet niet of dit een css vraagje is of gewoon html (ik denk het laatste) maar jullie weten het vast ook wel.
Ik heb 2 tabellen die boven elkaar staan, nu wil ik een beetje ruimte tussen de 2 tabellen, een halve <br> ongeveer. Maar ik weet niet hoe ik dit voor elkaar kan krijgen.... Ik kan niks doen met de border van de tabel want ik wil er een 1px border is, en die heeft een andere kleur dan de achtergrond.

[ Bericht 0% gewijzigd door _Mal_ op 08-02-2005 21:47:03 ]
pi_24993330
quote:
Op dinsdag 8 februari 2005 21:00 schreef _Mal_ het volgende:
Ik weet niet of dit een css vraagje is of gewoon html (ik denk het laatste) maar jullie weten het vast ook wel.
Ik heb 2 tabellen die boven elkaar staan, nu wil ik een beetje ruimte tussen de 2 tabellen, een halve <br> ongeveer. Maar ik weet niet hoe ik dit voor elkaar kan krijgen.... Ik kan niks doen met de border van de tabel want ik wil er een 1px border is, en die heeft een andere kleur dan de achtergrond.
Spelen met je margins in simpele HTML kan een hoop schelen.

Goed, twee tables dus.
Ik zou met CSS een margin er aan toevoegen, bijvoorbeeld:

[code]
.table2 {
top-margin: 5px;
}

<table class="table2">
We'll keep on whispering our mantras.
pi_24994759
tnx Roonaan
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_25003641
@Nitespeed Dat werkt niet.... als ik die regel toevoeg gebeurt er niks
Vogelaars.nl
pi_25004080
quote:
Op woensdag 9 februari 2005 11:10 schreef ikke_ook het volgende:
@Nitespeed Dat werkt niet.... als ik die regel toevoeg gebeurt er niks
Een beetje interpretatievermogen mag wel hoor

1
2
3
4
5
6		<table id="table1">
..
</table>
<table id="table2" style="margin-top:0.5em;">
..
</table>


-r-
pi_25004180
quote:
Op woensdag 9 februari 2005 11:45 schreef Roönaän het volgende:

[..]

Een beetje interpretatievermogen mag wel hoor
[ code verwijderd ]

-r-
haha, ik had het al wel zo geprobeerd hoor Misschien was mn post niet al te duidelijk. Maar ik had het al in mn css veranderd, en ik had ook al geprobeerd zoals jij zei maar er gebeurt helemaal niks......

Wat is trouwens het verschil van het gebruik van class="menu" of id="menu" ? Je moet dan #menu in de stylesheet zetten toch?Maar is er verder ook nog verschil?

--edit--
Stom...ik maakte een stomme type fout, het werkt toch wel Bedankt!! (bovenstaande vraag blijft wel openstaan

[ Bericht 25% gewijzigd door ikke_ook op 09-02-2005 12:06:58 ]
Vogelaars.nl
pi_25005122
Verschil tussen een id en een class is (behalve de # en de . in de stylesheet) dat een id uniek is en maar voor één element binnen een document gebruikt mag worden, en dat een class aan een heleboel elementen kan worden toegekend.

Daarnaast kan een element maar één id hebben, maar wel verschillende classes.

-r-
pi_25010643
Roonaan, kan je even kijken naar mijn 'height' probleem?
Mijn menu moet even groot blijven als mijn content layer.
We'll keep on whispering our mantras.
pi_25019886
Nitespeed,

Op het moment krijg ik een 404 op http://nitespeed.servebeer.com/ns/.

Stuur me anders even een mailtje of zie sig.

-r-
pi_25023574
ik heb een probleempje met me divjes..

ik wil namelijk 1 div laten zweven boven de rest van de divjes:

#login {
width: 274px;
display: block;
background-image: url(login.png);
position: relative;
left: 51px;
margin: 0px;
top: -400px;
height: 135px;
margin:0 auto;
text-align: left;
}

het divje staat onder de rest van de divjes. maar door de positie zweeft het divje boven de rest van de divjes alleen krijg ik nu onderaan de pagina wel een groot wit vlak waar niks zit (wit) maar dus wel ruimte inneemt op me pagina nu krijg ik dus een scrollbalk waar ik niet op zit te wachten. hoe krijg ik het voormelkaar dat die div dus



dus dat blauwe geselecteerde is de oorspronkelijk plaats van het login divje en dat wil i kweg hebben..
De enige echte BaggerUser!
Riemen
fiets kopen
pi_25023815
Gebruik position:absolute.

-r-
pi_25024124
ja maar hoe krijg ik hem als ik hem absolue heb in het midden ?
als ik left: auto; doe staat tie nog net niet in het midden
en text-align: center; helpt in dit geval ook niet
De enige echte BaggerUser!
Riemen
fiets kopen
pi_25024553
1
2
3
4
5
6
7
8		#login {
   background-image: url(login.png);
   position: absolute;
   top: 25px; left: 50%;
   width: 274px; height: 135px; 
   margin-left: -137px;
   text-align: left;
}
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_25024725
ja wat werkt wel alleen jammer dat als ik me browser kleiner maak (zodat ik een scrollbalk krijg hij gaat verschuiven wat niet echt netjes is maar verder ziet het er normaal gesproken wel goed uit nu
De enige echte BaggerUser!
Riemen
fiets kopen
pi_25025259
quote:
Op donderdag 10 februari 2005 15:15 schreef BaggerUser het volgende:
ja maar hoe krijg ik hem als ik hem absolue heb in het midden ?
als ik left: auto; doe staat tie nog net niet in het midden
en text-align: center; helpt in dit geval ook niet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		#login {
  position:absolute;
  left:0px;
  top:100px;
  width:100%;
}

#innerlogin {
  position:relative;
  margin:0px auto;
}

<div id="login">
<div id="innerlogin">
..
</div>
</div>
pi_25028989
Ik kwam deze pagina tegen tijdens het surfen: http://www.tizag.com/cssT/

Een wat uigebreide tutorial dan die van w3schools.
  vrijdag 11 februari 2005 @ 12:24:07 #243
74523 BaggerUser
ModderFokker!
pi_25038174
ben ik weer
heb nog een klein probleempje wat voor een groot deel al is opgelost maar 1 deel wil niet lukken.

ik heb een div in een andere div maar:
als ik height:100% doe neemt hij 100% van de schermgrootte
maar ik wil 100% van de div hebben waar die inzit.. hoe kan ik dit regelen
De enige echte BaggerUser!
Riemen
fiets kopen
pi_25038635
Height definieren van de buitenste div.
  vrijdag 11 februari 2005 @ 12:55:05 #245
74523 BaggerUser
ModderFokker!
pi_25038723
de buitenste div staat op 100%
daarin zitten bovenaan een paar divs die samen een paar 100 pixel zijn..
en dan staat de div die de rest van de div moet vullen zegmaar.. maar die neemt dus de waarde 100% van het scherm en niet van de overige ruimte
De enige echte BaggerUser!
Riemen
fiets kopen
pi_25039309
Nee, die neemt de 100% aan van de buitenste div. 100% is natuurlijk niet hetzelfde als "de overgebleven ruimte".
  vrijdag 11 februari 2005 @ 13:57:24 #247
74523 BaggerUser
ModderFokker!
pi_25039771
hoe kan ik dan zorgen dat de overgebleven ruimte opgevult wordt ?..
aangezien de buitenste ook elke keer moet verranderen ?..
De enige echte BaggerUser!
Riemen
fiets kopen
pi_25039994
Hoe kan ik iets centreren in een divje? Als ik dat met text-align:center; doe, dan werkt dat in Firefox alleen met tekst en niet met andere objecten.
http://www.schwaproductions.nl/
pi_25045597
quote:
Op vrijdag 11 februari 2005 14:08 schreef schwa78 het volgende:
Hoe kan ik iets centreren in een divje? Als ik dat met text-align:center; doe, dan werkt dat in Firefox alleen met tekst en niet met andere objecten.
Daarom heet het ook text-align

Hoe je objecten kan centreren staat bijvoorbeeld uitgelegd bij SimpleBits.com.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_25061864
Ik ben bezig met een nieuwe site, http://belegspel.c-q.nl/.

Nu probeer ik alleen om de banner en de 'Belegspel.nl' tekst naast elkaar te krijgen. En met display: inline wil het niet lukken.

De bankbiljetten en de tekst + banner staan allebei in een aparte div.
pi_25062901
De banner image heeft nu display:block
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_25064368
quote:
Op zaterdag 12 februari 2005 21:41 schreef SuperRembo het volgende:
De banner image heeft nu display:block
Nu niet meer, maar dit maakt niks uit....
pi_25064707
1
2
3
4		<div style="border:1px solid #000;width:600px;">
   <div style="width:200px;float:left;">Title</div>
   <div style="width:300px;">Banner</div>
</div>

Misschien hier en daar nog een height zetten of een <div style="clear:both"></div> na de header.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_25071012
quote:
Op zaterdag 12 februari 2005 23:22 schreef SuperRembo het volgende:

[ code verwijderd ]

Misschien hier en daar nog een height zetten of een <div style="clear:both"></div> na de header.
Thnx, het is gelukt .
  zondag 13 februari 2005 @ 13:05:48 #255
74523 BaggerUser
ModderFokker!
pi_25071235
ik heb een tijdje lopen zoeken maar ik kan nog steeds niet echt vinden hoe ik met een div de overgebleven ruimte van een andere div kan opvullen..

of is dit gewoon niet mogelijk?
De enige echte BaggerUser!
Riemen
fiets kopen
  zondag 13 februari 2005 @ 13:05:49 #256
74523 BaggerUser
ModderFokker!
pi_25071236
ik heb een tijdje lopen zoeken maar ik kan nog steeds niet echt vinden hoe ik met een div de overgebleven ruimte van een andere div kan opvullen..

of is dit gewoon niet mogelijk?
De enige echte BaggerUser!
Riemen
fiets kopen
  zondag 13 februari 2005 @ 13:08:55 #257
74523 BaggerUser
ModderFokker!
pi_25071287
?
hoe kan ik 2 keer hetzelfde bericht posten dat kan toch niet ..
De enige echte BaggerUser!
Riemen
fiets kopen
pi_25076514
als je met snel reageren 2x snel achter elkaar op invoeren klikt kun je een dubbelpost maken.
Vogelaars.nl
pi_25077161
quote:
Op zondag 13 februari 2005 13:05 schreef BaggerUser het volgende:
ik heb een tijdje lopen zoeken maar ik kan nog steeds niet echt vinden hoe ik met een div de overgebleven ruimte van een andere div kan opvullen..

of is dit gewoon niet mogelijk?
Als je van te voren niet de afmetingen weet, heb je daar nog steeds een table voor nodig.
Voor zover ik weet dan
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  zondag 13 februari 2005 @ 23:02:24 #260
74523 BaggerUser
ModderFokker!
pi_25077732
quote:
Op zondag 13 februari 2005 21:48 schreef ikke_ook het volgende:
als je met snel reageren 2x snel achter elkaar op invoeren klikt kun je een dubbelpost maken.
normaal kreeg je dan een melding dat je neit 2 keer hetzelfde bericht kon posten zeker uitgezet
De enige echte BaggerUser!
Riemen
fiets kopen
  zondag 13 februari 2005 @ 23:07:09 #261
46383 Tiemie
sowieso wel!
pi_25077825
http://www.lampenzen.nl/pics.php

ik heb daar in een td een aantal links staan en deze werken onder IE perfect, maar onder mozilla werkt de link maar "half". Alleen als je op het begin van de link klikt kun je de link openen. .

ik d8 dat het misschien aan de spaties in de namen lag, omdat na de spatie de link niet meer klikbaar is.

dus heb ik met str_replace() spaties vervangen door $nbsp; maar dat helpt ook niet.

1
2
3
4
5
6
7
8
9
10
11		 <td class="msgbody"> 
<a href="pics.php?id=9">[12-02-05] Achterhoek Arena</a><br />
<a href="pics.php?id=8">[12-02-05] @ Ayhan</a><br />
<a href="pics.php?id=7">[10-02-05] @ Bringenborg</a><br />
<a href="pics.php?id=6">[15-01-05] Mark-k & sammy's</a><br />
<a href="pics.php?id=5">[14-01-05] @ Tim</a><br />
<a href="pics.php?id=4">[08-01-05] verjaardag rob</a><br />
<a href="pics.php?id=3">[07-01-05] @ sammy's</a><br />
<a href="pics.php?id=2">[19-12-04] verjaardag jeremy & koen</a><br />
<a href="pics.php?id=1">[10-12-04] @ tim</a><br />
 </td>



iemand een idee hoe dat komt?
pi_25077897
quote:
Op zondag 13 februari 2005 23:07 schreef Tiemie het volgende:
http://www.lampenzen.nl/pics.php

ik heb daar in een td een aantal links staan en deze werken onder IE perfect, maar onder mozilla werkt de link maar "half". Alleen als je op het begin van de link klikt kun je de link openen. .

ik d8 dat het misschien aan de spaties in de namen lag, omdat na de spatie de link niet meer klikbaar is.

dus heb ik met str_replace() spaties vervangen door $nbsp; maar dat helpt ook niet.
[ code verwijderd ]

iemand een idee hoe dat komt?
Spaties in links moeten geen probleem op leveren.

Werkt het wel als je ze buiten de tabel haalt?
  zondag 13 februari 2005 @ 23:18:45 #263
46383 Tiemie
sowieso wel!
pi_25078041
quote:
Op zondag 13 februari 2005 23:10 schreef DutchBlood het volgende:

[..]

Spaties in links moeten geen probleem op leveren.

Werkt het wel als je ze buiten de tabel haalt?
Ja dat werkt wél ja, maar het is wel de bedoeling dat het in die tabel blijft staan.
pi_25079304
quote:
Op zondag 13 februari 2005 23:18 schreef Tiemie het volgende:

[..]

Ja dat werkt wél ja, maar het is wel de bedoeling dat het in die tabel blijft staan.
Het lijkt alsof er iets fout gaat met de positionering van het geheel, ik kan de linkjes namelijk ook niet selecteren. (ook niet met Caret Browsing (F7) aan)...
pi_25081956
De div met id=rechts staat er voor.
Waar zouden we zijn zonder de DOM-inspector
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  maandag 14 februari 2005 @ 09:36:12 #266
46383 Tiemie
sowieso wel!
pi_25082638
.

en hoe los ik dat op?
pi_25085706
quote:
Op maandag 14 februari 2005 09:36 schreef Tiemie het volgende:
.

en hoe los ik dat op?
Maak die div kleiner/minder breed?
pi_25099798
Ik heb weer eens een vaag probleem:
Ik wil hier 3 divs naast elk zetten (dit kunnen er ook meer of minder zijn) in die div staat een image, dan een br, en dan een text. En daar gaat het fout, ze worden niet naast elkaar geplaatst.
Haal ik de br weg uit de div dan is er geen probleem dan staan de images naast elkaar maar dan staat de text naast de image ipv eronder.
Hoe los ik dit op?

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		<style type="text/css">
.thumb
{
display:inline;
border:1px solid #000000;
}
</style>

<div class="thumb">
<img src="thumbs/1_2_1_2test_dsc00212.jpg"><br><b style="color:#ff6600;">Waiting for approval.</b></div>
   

<div class="thumb">
<img src="thumbs/1_2_1_2test_dsc00212.jpg"><br><b style="color:#ff6600;">Waiting for approval.</b></div>
   

<div class="thumb">
<img src="thumbs/1_2_1_2test_dsc00212.jpg"><br><b style="color:#ff6600;">Waiting for approval.</b></div>
   
<br />

<div class="thumb">
<img src="thumbs/1_2_1_2test_dsc00212.jpg"><br><b style="color:#ff6600;">Waiting for approval.</b></div>
   

<div class="thumb">
<img src="thumbs/1_2_1_2test_dsc00212.jpg"><br><b style="color:#ff6600;">Waiting for approval.</b></div>
   

<div class="thumb">
<img src="thumbs/1_2_1_2test_dsc00212.jpg"><br><b style="color:#ff6600;">Waiting for approval.</b></div>
   
pi_25100043
1
2
3
4
5
6
7
8		<style type="text/css">
.thumb
{
  float: left;
  width: 33%;
   border:1px solid #000000;
}
</style>


overigens, volgens mij zou je kunnen overwegen een UL (Unordered List) te gebruiken in je HTML:
1
2
3
4
5
6		<UL>
   <LI> <img /> 
       Waiting for approval </LI>
   <LI> <img /> 
      Waiting for approval </LI>
</UL>

en dan werkelijk alle styles ook echt via CSS doen:
1
2
3
4
5
6
7
8
9		UL LI  {
   list-style: none;
   display: block;
   border:1px solid #000;
   width: 33%;
   float: left;
   color: #F60;
   font-weight: bold;
}
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_25101284
Tnx, dat ga ik dus met een UL regelen
pi_25109323
Ik heb hierp/url] 3 boxes.
[url=http://www.toycular.nl/v2/css/style.css]Dit is de CSS.

Bij de linker en de rechterste box loopt de 'rand' goed 'eromheen'.
Bij de middelste box loopt mijn border/rand niet eromheen maar eroverheen.
Wat is er verkeerd
ne okuyon, bokmu var?
pi_25109925
Enige wat ik kan bedenken is dat het te maken heeft met je position:absolute.

Maar zoals het er nu uitziet is het een IE only iets.
pi_25109945
quote:
Op woensdag 16 februari 2005 10:48 schreef Roönaän het volgende:
Enige wat ik kan bedenken is dat het te maken heeft met je position:absolute.

Maar zoals het er nu uitziet is het een IE only iets.
Ik heb hier geen FF en ik weet ook niet hoe ik het kan oplossen voor andere browsers.
Ben nog een CSS-noob...
ne okuyon, bokmu var?
  woensdag 16 februari 2005 @ 13:47:09 #274
18008 hornage
FOK! Movie Trivia-Prijsmeester
pi_25112771
quote:
Op dinsdag 15 februari 2005 14:01 schreef RM-rf het volgende:

[ code verwijderd ]

overigens, volgens mij zou je kunnen overwegen een UL (Unordered List) te gebruiken in je HTML:
[ code verwijderd ]

en dan werkelijk alle styles ook echt via CSS doen:
[ code verwijderd ]
Dit is een mooi stukje code om een lijst te maken. Ik wil nu nog aan elk item van de lijst van button dingen toevoegen als hover, active, link etc. Kan ik dat dan op deze manier doen?

1
2
3
4		LI:hover {
   color: red;
   text-decoration: none;
}
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
pi_25113920
quote:
Op woensdag 16 februari 2005 13:47 schreef hornage het volgende:

Dit is een mooi stukje code om een lijst te maken. Ik wil nu nog aan elk item van de lijst van button dingen toevoegen als hover, active, link etc. Kan ik dat dan op deze manier doen?
[ code verwijderd ]
´
Je mag het doen, en je schept valide CSS volgens de CSS1 specificatie:
http://www.w3.org/TR/REC-(...)namic-pseudo-classes

Maar het nadeel is wel dat MS Internet Explorer enkel :hover over A-elementen ondersteund, in dat geval zou je dus alsnog een <a> aan je HTML-code moeten toevoegen (wat natuurlijk, als je element sowieso wilt linken, eigenlijk ook de methode is die semantisch correct is, beter dan een link enkel via javascript maken en via CSS een 'schijnlink' creeeren)
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
  donderdag 17 februari 2005 @ 00:16:09 #276
46383 Tiemie
sowieso wel!
pi_25119498
quote:
Op maandag 14 februari 2005 13:50 schreef DutchBlood het volgende:

[..]

Maak die div kleiner/minder breed?
was alles maar zo simpel.

dankje! !
pi_25130217
Ik snap het niet denk ik. Ik gebruik dit:
1
2
3
4
5
6
7
8
9
10
11
12
13
14		.menu, .menu:visited
 { 
color: #333; 
font-size: 7.5pt; 
font-family: Verdana, Arial; 
text-decoration: none; 
background-color: #ff8c00; 
letter-spacing: -1px; 
display: block; 
margin: 1px; 
padding: 5px; 
width: 160px; 
border: outset 1px #fff 
}


Maar de visited werkt wel en de standaard niet. Dat geeft ie een lettertype van 9 pt en een lijn onder de link. Hoe kan dat en hoe krijg ik dat weg?
Geloven is zeker weten dat je het niet weet.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.
pi_25130289
Probeer het eens met
a.menu of a.menu:link

-r-
pi_25130477
quote:
Op donderdag 17 februari 2005 18:50 schreef Roönaän het volgende:
Probeer het eens met
a.menu of a.menu:link

-r-
Was ik al mee bezig maar bovenstaande werkt ook. Of beter gezegd, werkte eerder ook.

[ Bericht 1% gewijzigd door wonko op 17-02-2005 20:41:02 ]
Geloven is zeker weten dat je het niet weet.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.
  FOK!-Schrikkelbaas zaterdag 26 februari 2005 @ 19:43:20 #280
1972 Swetsenegger
Egocentrische Narcist
pi_25269564
Hoe los ik dit op:



De content in het blauwe of witte vlak varieren onafhankelijk van elkaar in hoogte. Ik wil uiteindelijk bereiken dat uiteraard de footer onder aanblijft en dat het witte vlak en het blauwe vlak altijd even hoog zijn.

Dus als het witte vlak 2 maal zoveel content heeft als het blauwe vlak, moet het blauwe vlak dus gewoon opvullen.

Ik krijg het niet voor elkaar met divjes. Iemand een tip?
 | FOK! Schrikkelbaasch
pi_25270257
quote:
Op zaterdag 26 februari 2005 19:43 schreef Swetsenegger het volgende:
Hoe los ik dit op:

[afbeelding]

De content in het blauwe of witte vlak varieren onafhankelijk van elkaar in hoogte. Ik wil uiteindelijk bereiken dat uiteraard de footer onder aanblijft en dat het witte vlak en het blauwe vlak altijd even hoog zijn.

Dus als het witte vlak 2 maal zoveel content heeft als het blauwe vlak, moet het blauwe vlak dus gewoon opvullen.

Ik krijg het niet voor elkaar met divjes. Iemand een tip?
Maak twee divjes, die je onder elkaar zet.
1. Blauwe en witte div container
2. Footer

en 1. bestaat dan wederom uit twee divjes die je naast elkaar zet?
  FOK!-Schrikkelbaas zaterdag 26 februari 2005 @ 21:02:05 #282
1972 Swetsenegger
Egocentrische Narcist
pi_25270863
quote:
Op zaterdag 26 februari 2005 20:22 schreef DutchBlood het volgende:

[..]

Maak twee divjes, die je onder elkaar zet.
1. Blauwe en witte div container
2. Footer

en 1. bestaat dan wederom uit twee divjes die je naast elkaar zet?
Dat heb ik dus, maar de divjes in de container vullen natuurlijk niet op tot de hoogte van de container wanneer de inhoud kleiner is.



Het blauwe vlak vult zo niet op tot de hoogte van de container
 | FOK! Schrikkelbaasch
pi_25271362
Als de linker div altijd groter is dan de rechter, dan geef je de container een blauwe achtergrond en de linker div een witte achtergrond.
Anders kan je de container een wit/blauw achtergrond plaatje geven.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  FOK!-Schrikkelbaas zondag 27 februari 2005 @ 09:07:20 #284
1972 Swetsenegger
Egocentrische Narcist
pi_25278395
quote:
Op zaterdag 26 februari 2005 21:31 schreef SuperRembo het volgende:
Als de linker div altijd groter is dan de rechter, dan geef je de container een blauwe achtergrond en de linker div een witte achtergrond.
Helaas is dat niet het geval
quote:
Anders kan je de container een wit/blauw achtergrond plaatje geven.
Hmz, dat had een oplossing geweest.
Maar aangezien het toch om content gaat heb ik in de container div maar een tabel geplaatst
 | FOK! Schrikkelbaasch
pi_25278911
quote:
Op zondag 27 februari 2005 09:07 schreef Swetsenegger het volgende:

[..]

Helaas is dat niet het geval
[..]

Hmz, dat had een oplossing geweest.
Maar aangezien het toch om content gaat heb ik in de container div maar een tabel geplaatst
Een table voor de layout? Zondaar!

Een voorbeeldje van de oplossing met een achtergrondplaatje .
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  FOK!-Schrikkelbaas zondag 27 februari 2005 @ 10:58:14 #286
1972 Swetsenegger
Egocentrische Narcist
pi_25278920
quote:
Op zondag 27 februari 2005 10:57 schreef SuperRembo het volgende:

[..]

Een table voor de layout? Zondaar!
Nee dus.
De lay-out is div, de content is table
quote:
Een voorbeeldje van de oplossing met een achtergrondplaatje .
ff checken.
 | FOK! Schrikkelbaasch
pi_25395595
Vraagje he

Hoe kan ik alleen een checkbox en radio button aanpassen in css zonder dat ik het input type veld verander?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  zondag 6 maart 2005 @ 15:16:48 #288
3677 SuperRembo
Sinds 1998
pi_25396683
In CCS2 heb je ook attribute selectors. Firefox en Opera7 ondersteunen dat, Internet Explorer naturrlijk weer niet

1
2
3
4
5
6		input[type=checkbox] {
    color: red;
}
input[type=radio] {
    color: blue;
}
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_25400400
Maar dus onmogelijk met IE klote microsoft weer
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_25407652
quote:
Op zondag 6 maart 2005 13:51 schreef Chandler het volgende:
Vraagje he

Hoe kan ik alleen een checkbox en radio button aanpassen in css zonder dat ik het input type veld verander?
Je kan toch classes toekennen?
pi_25407658
quote:
Op zondag 27 februari 2005 10:58 schreef Swetsenegger het volgende:

[..]

Nee dus.
De lay-out is div, de content is table
[..]

ff checken.
Je kan de blauwe achtergrond div toch een containerdiv van degene met de witte achtergrond maken? Of past dat niet in jouw format?
pi_25408039
true roonaan, eens ff kijken of ik een transparant plaatje als 'achtergrond' kan gebruiken ofzo... hehe
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_25430558
Zucht... irritante verschillen tussen FF en IE...
Kan iemand even een kijkje nemen op een projectsite van me en dan met name naar de verschillen? In IE ziet het er simpelweg niet uit. In FF vind ik het best een gail layoutje. Ik vraag me alleen af waarom het er nu weer zo verneukt uit ziet.

Om bij de bron te kunnen, moet je even rechtermuisknopklikken linksonder op de pagina, onder "Pagina geladen". Dit is niet een lame antirechtermuisknop-scriptje, maar een poging om minder dataverkeer kwijt te zijn en snellere rendertijden. Ik ben er nog wat mee aan het experimenteren.

en de stylesheets voor de fp staan hier en hier
» Help mee met DrugsMag.nl! «
Chillosophy, Gras is groen
pi_25432132
quote:
Op dinsdag 8 maart 2005 21:06 schreef Heliospan het volgende:
Zucht... irritante verschillen tussen FF en IE...
Kan iemand even een kijkje nemen op een projectsite van me en dan met name naar de verschillen? In IE ziet het er simpelweg niet uit. In FF vind ik het best een gail layoutje. Ik vraag me alleen af waarom het er nu weer zo verneukt uit ziet.

Om bij de bron te kunnen, moet je even rechtermuisknopklikken linksonder op de pagina, onder "Pagina geladen". Dit is niet een lame antirechtermuisknop-scriptje, maar een poging om minder dataverkeer kwijt te zijn en snellere rendertijden. Ik ben er nog wat mee aan het experimenteren.

en de stylesheets voor de fp staan hier en hier
Ik krijg een Forbidden melding.
pi_25433786
Mijn excuses. Ik heb de fout inmiddels gerepareerd. De site is even offline om het nog niet publiekelijk te maken. Ik was even vergeten mijn post leeg te editen hier
» Help mee met DrugsMag.nl! «
Chillosophy, Gras is groen
pi_25442356
hoop dat jullie me kunnen helpen, ik ben bezig met een paginaatje.. daar zit een div in, die 100px vanaf de linkerkant moet staan, en 100px van de bovenkant. dit is geen probleem, maar om de div (ongeacht de resolutie..) 10px van de rechterkant af te houden wil me niet lukken.. zelfde geldt voor de onderkant. ik heb het op de volgende manier gedaan

mn css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20		html, body {
   width: 100%;
   height: 100%;
   margin: 0px;
   background-image:url(../img/bg.png);
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:11px;
}

div.content {
   position: absolute;
   left: 100px;
   top: 100px;
   right: 10px;
   bottom: 10px;
   right: 10px;
   bottom: 10px;
   border: 1px solid #111111; 
   width: auto;
   height: auto;


het vreemde.. in firefox werkt het wel zoals ik het wil!

[ Bericht 3% gewijzigd door markiemark op 09-03-2005 16:12:37 ]
Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..
pi_25452496
schopje..
Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..
pi_25453309
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 HTML 4.01 Transitional//EN">
<html>
<head>
   <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <meta http-equiv="Content-Language" content="en-us">
   <style type="text/css">
   
html {
   margin: 0;
   padding: 0;
}
body {
   margin: 100px 10px 10px 100px;
   padding: 0;
}

div#content {
   height: 100%;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border: 1px solid #000;
}

   </style>
</head>
<body>

<div id="content">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
</div>

</body>
</html>


Gebaseerd op de eerste oplossing van Quirksmode.org - 100% height.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_25453411
hmmz.. dit kan ik wel gewoon in een aparte css file laten staan? heb het even geprobeerd, maar het zit nog wat buggy... kan omdat ik hem nog niet helemaal goed heb staan qua argumenten.. maar dat vind ik het belangrijkste..
Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..
pi_25453874
Dit werkt alleen in quirks mode, niet in strict mode. Je moet er dus wel de goeie doctype bij hebben staan.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies.
Index

» digital corner

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