[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.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies.
Index

» digital corner

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