[CSS] voor dummies - Deel 4

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_36288002
Is het misschien een optie om een mod de laatste post van het vorige topic aan te passen met een verwijzing naar dit topic? Of vraag ik dan teveel?

Verkapte TVP
Geloven is zeker weten dat je het niet weet.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.
pi_36288346
quote:
Op woensdag 22 maart 2006 17:27 schreef Desdinova het volgende:
<IFRAME SRC="hoofdpagina.html" WIDTH="100%" HEIGHT=100%" frameborder="0" name="content" scrolling="no">[knip errortekst]</IFRAME>
Dat is een oplossing, maar zorgt weer voor een ander probleem; je krijgt (logischerwijs) geen scrollbalk te zien. Maar de content is op sommige pagina's wel langer dan het iframe hoog is...

Andere oplossing? Toevoegingen?
.
pi_36289647
er staat trouwens geen dubbele quote voor 100% bij height?
quote:
<body>
<table style="border-width: 0px; width: 760px; height: 100%; border-collapse: collapse;" border="1">
<tr>
<td colspan="2" style="text-align: right; vertical-align: bottom; width: 760px; height: 129px; padding: 8px; background-image: url(images/header.jpg); background-repeat: no-repeat;">
".$menuitems."
</td>
</tr>
<tr>
<td style="vertical-align: bottom; text-align: left; width: 158px; height: 80px; padding-left: 8px; padding-bottom: 8px; background-image: url(images/left.jpg); background-repeat: no-repeat;">
<div style="width: 150px; height: 20px; overflow: hidden; text-align: left; vertical-align: bottom; padding:0px; margin:0px;">".$nav."</div>
</td>
<td rowspan="2" style="text-align: left; vertical-align: top; width: 602px; height: 100%;">
<div style="width: 600px; margin: 0px; padding: 0px; text-align: center;">".$table."</div>
</td>
</tr>
<tr>
<td style="text-align: right; width: 158px; vertical-align: top; padding-right: 8px; height: 100%; background-image: url(images/bg.jpg);">
".$submenuitems."
</td>
</tr>
</table>
</body>
waarom wordt hier de cel met $nav groter naarmate de $table groter wordt?
ik kom er ECHT niet uit.. even niet letten op incompatibiliteit met PHP want dat zit in t echte script wel snor
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_36290760
quote:
Op donderdag 23 maart 2006 10:12 schreef Desdinova het volgende:
er staat trouwens geen dubbele quote voor 100% bij height?
Ah, dat is waarschijnlijk een copy/paste foutje geweest, bedankt.
niet dat het verschil maakt, maar ik houd wel van nette code
.
pi_36290903
<IFRAME SRC="hoofdpagina.html" WIDTH="100%" HEIGHT=100%" frameborder="0" name="content" scrolling="no">[knip errortekst]</IFRAME>
scrolling="no" heb ik er toch maar weer uitgehaald, aangezien ik op zijn minst wél de scrollbalken wil hebben. Maar hoe zorg ik ervoor dat Internet Explorer netjes omgaat met de inhoud?

FireFox zet dus 'goed' de verticale scrollbalk neer en zorg dat de inhoud wordt aangepast. Internet Explorer behoudt de breedte van de inhoud en plaatst DAN PAS de verticale scrollbalk. Daar komt de horizontale scrollbalk om de hoek kijken, aangezien daar te weinig ruimte voor is op dat moment.
.
pi_36291056
als je in je body van de pagina in je iframe een margin zet? margin-right: 20px; ofzo?
As a rule, I never touch anything more sophisticated and delicate than myself.
  donderdag 23 maart 2006 @ 11:24:28 #8
23170 WebForce
Kijk mij nou!
pi_36291481
Hallo! Ik heb een standaard pivot weblogje al een tijdje in beheer, maar nu kom ik er eigenlijk pas achter dat het helemaal niet lekker in elkaar zit met IE. In Firefox doet 'ie het prima...
Dit is de site. In FF ziet die er dus prima uit, maar als je in IE het venster kleiner maakt zie je dat de onderste twee kolommen (div) blijven ; staan'...

Alles zit 'in' een body, de rechter kolom heet heeft de div 'centercolumn', de rechter 'rightcolumn' en het plaatje/logo 'header'.

Zo zit een gedeelte van de css eruit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21		body {
   padding: 0px;
   width: 807px;
   background: #DDD;
   margin: auto;
}

#centercolumn {
   padding: 6px 0px;
   position: absolute;
   width: 600px;
}

#rightcolumn {
   position: absolute;
   margin-left: 600px;
   width: 205px;
}

#header {
}


Ik heb lopen zoeken hoe dat precies zit met position etc., maar ik kom er niet uit . Wie helpt?

the_disheaver, de laatste post in het vorige topic was voor mij? Want dan gaat het niet helemaal werken...
pi_36291552
quote:
Op donderdag 23 maart 2006 11:08 schreef Desdinova het volgende:
als je in je body van de pagina in je iframe een margin zet? margin-right: 20px; ofzo?
Dat maakt helaas geen verschil, IE lijkt de margin mee te rekenen als content-ruimte. Het resultaat blijft dus hetzelfde... Jij hoopte dat IE deze ruimte zou 'gebruiken' voor de verticale scrollbalk neem ik aan?
.
pi_36291566
zet om die 2 divs een container div, dan ben je klaar denk ik.
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_36291629
quote:
Op donderdag 23 maart 2006 11:26 schreef Tackleberry het volgende:

[..]

Dat maakt helaas geen verschil, IE lijkt de margin mee te rekenen als content-ruimte. Het resultaat blijft dus hetzelfde... Jij hoopte dat IE deze ruimte zou 'gebruiken' voor de verticale scrollbalk neem ik aan?
dat hoopte ik ja

je zou padding-right kunnen proberen.. voor de volledigheid.


waarom pakt Opera + Netscape <body style="text-align: center;"> niet btw? hij blijft mn content links uitlijnen..
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_36291651
quote:
Op donderdag 23 maart 2006 11:27 schreef Desdinova het volgende:
zet om die 2 divs een container div, dan ben je klaar denk ik.
Als je het tegen mij hebt: ik maak geen gebruik van divs en (dummie topic) wat een container div is...
.
  donderdag 23 maart 2006 @ 11:30:30 #13
23170 WebForce
Kijk mij nou!
pi_36291667
quote:
Op donderdag 23 maart 2006 11:27 schreef Desdinova het volgende:
zet om die 2 divs een container div, dan ben je klaar denk ik.
Dat is een reactie op mijn post?
pi_36291709
quote:
Op donderdag 23 maart 2006 11:30 schreef WebForce het volgende:

[..]

Dat is een reactie op mijn post?
die was op jou ja
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_36291718
quote:
Op donderdag 23 maart 2006 11:29 schreef Desdinova het volgende:
dat hoopte ik ja

je zou padding-right kunnen proberen.. voor de volledigheid.
Hetzelfde resultaat, zoals verwacht.
.
  donderdag 23 maart 2006 @ 11:32:27 #16
23170 WebForce
Kijk mij nou!
pi_36291726
quote:
Op donderdag 23 maart 2006 11:32 schreef Desdinova het volgende:

[..]

die was op jou ja
En hoe moet ik dat ongeveer zien dan?
pi_36291767
quote:
Op donderdag 23 maart 2006 11:24 schreef WebForce het volgende:
Hallo! Ik heb een standaard pivot weblogje al een tijdje in beheer, maar nu kom ik er eigenlijk pas achter dat het helemaal niet lekker in elkaar zit met IE. In Firefox doet 'ie het prima...
Dit is de site. In FF ziet die er dus prima uit, maar als je in IE het venster kleiner maakt zie je dat de onderste twee kolommen (div) blijven ; staan'...

Alles zit 'in' een body, de rechter kolom heet heeft de div 'centercolumn', de rechter 'rightcolumn' en het plaatje/logo 'header'.

Zo zit een gedeelte van de css eruit:
[ code verwijderd ]

Ik heb lopen zoeken hoe dat precies zit met position etc., maar ik kom er niet uit . Wie helpt?

the_disheaver, de laatste post in het vorige topic was voor mij? Want dan gaat het niet helemaal werken...
Wat werkt er niet? Ga wel met float werken, en zeker niet met een margin van 600 px. Kijk eens hoe float werken.
pi_36291791
hehe.

als het goed is heb je iets als <div id="centercolumn">

daarvoor zet je <div>

en aan het einde ergens zou je een </div> moeten hebben. waar je nog een </div> achter zet.
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_36291920
quote:
Op donderdag 23 maart 2006 11:34 schreef Desdinova het volgende:
hehe.

als het goed is heb je iets als <div id="centercolumn">

daarvoor zet je <div>

en aan het einde ergens zou je een </div> moeten hebben. waar je nog een </div> achter zet.
Zou je voor de overzichtelijkheid gebruik willen maken van de QUOTE functie van het forum?
.
pi_36291934
Eventjes een andere tip. Mocht je problemen hebben met CSS in oa Opera, download de nieuwste preview (beta) van opera 9. ( http:/labs.opera.com) het heeft onder tools > advanced > een error console waarmee je onder andere de css struikelblokken kunt vinden.
pi_36292049
quote:
Op donderdag 23 maart 2006 11:39 schreef Tackleberry het volgende:

[..]

Zou je voor de overzichtelijkheid gebruik willen maken van de QUOTE functie van het forum?
mja ik heb het net bij de ontwikkelaars gelegd om een snelquote te introduceren voor het snel reageren.
As a rule, I never touch anything more sophisticated and delicate than myself.
  donderdag 23 maart 2006 @ 11:46:48 #22
23170 WebForce
Kijk mij nou!
pi_36292094
quote:
Op donderdag 23 maart 2006 11:40 schreef the_disheaver het volgende:
Eventjes een andere tip. Mocht je problemen hebben met CSS in oa Opera, download de nieuwste preview (beta) van opera 9. ( http:/labs.opera.com) het heeft onder tools > advanced > een error console waarmee je onder andere de css struikelblokken kunt vinden.
Bij mijn site geeft ie geen errors, maar het ziet er idd belabberd uit... Help!

1
2
3
4
5
6
7
8
9
10		<body>
<div id="header">
</div>

<div id="rightcolumn">
</div>

<div id="centercolumn">
</div>
</body>

Zo ziet mijn 'frontpage' er nu uit. Wat moet ik aangeven in mijn css om de rightcolumn rechts onder de header te zetten en de centercoloum links naast de header. En dat alles gecentreerd...
pi_36292172
<body style="text-align: center;">
<center>
<div id="header">
</div>
<div style="width: 800px; margin: 0px; padding: 0px;">
<div id="centercolumn" style="float: left;"></div>
<div id="rightcolumn" style="float: left;"></div>
</div>
</body>

ik heb width: 800px; gedaan, je kan beter even kijken hoe breed je je header hebt en die breedtje gebruiken. dit kan je allemaal weer rechtstreeks in je sheet zetten natuurlijk.
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_36292365
quote:
Op donderdag 23 maart 2006 11:46 schreef WebForce het volgende:

[..]

Bij mijn site geeft ie geen errors, maar het ziet er idd belabberd uit... Help!
[ code verwijderd ]

Zo ziet mijn 'frontpage' er nu uit. Wat moet ik aangeven in mijn css om de rightcolumn rechts onder de header te zetten en de centercoloum links naast de header. En dat alles gecentreerd...
WAT gaat er dan niet goed als je met float werkt? Wel de <div id="right"> onder de left zetten anders krijg je de navigatie aan de linker kant.
pi_36292424
ik heb een div met height en min-height op 100%, positioning absolute, en top op 200px. Dit creeert een scrollbalk in mn browser omdat hij eerst 100% hoogte berekent, en daarna 200px naar beneden opschuift (of iets dergelijks). Maar ik wil dus 100% - 200px. Kan dit?
As a rule, I never touch anything more sophisticated and delicate than myself.
  donderdag 23 maart 2006 @ 12:03:48 #26
52200 ViPeRII
It's a good day to die
pi_36292490
Als je nu een margin-bottom er in zet van 200px lost dat je probleem op Desdinova?
-- ViPeRII --
pi_36292539
quote:
Op donderdag 23 maart 2006 12:00 schreef Desdinova het volgende:
ik heb een div met height en min-height op 100%, positioning absolute, en top op 200px. Dit creeert een scrollbalk in mn browser omdat hij eerst 100% hoogte berekent, en daarna 200px naar beneden opschuift (of iets dergelijks). Maar ik wil dus 100% - 200px. Kan dit?
Kun je een (container)div niet om de header en dat andere ding zetten met als min-heigt 100%?
  donderdag 23 maart 2006 @ 12:18:03 #28
23170 WebForce
Kijk mij nou!
pi_36292849
Ik heb het denk ik opgelost:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		body {
   width: 808px;
   background: #DDD;
   margin-top: 5px;
   margin: 0px auto;
}

#centercolumn {
   width: 600px;
   padding-top: 6px;
   float: left;
}

#rightcolumn {
   width: 205px;
   float: right;
}

#header {
   width: 800px;
   border: 1px solid #999;
}

Idd met float dus Maar moest de centercolumn ook vertellen dat die rechts moest floaten
pi_36293100
@ ViperII
het lijkt erop van niet. Alleen in netscape en FF werkt het niet okee. Het ziet er wel goed uit, maar met het scrollwieltje is er 200pixels naar beneden te scrollen (er zijn geen scrollbalken).

@ disheaver
kan, maar werkt niet.
misschien als ik dan bij de andere divs de 100% weghaal, maar dan klopt de layout niet meer. de divs hebben een backgroundimage, en eentje draagt de content, dus die moet ook een overflow krijgen.
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_36306266
tvp
Just say hi!
pi_36355301
Even een klein vraagje:
ik heb het volgende:
1
2
3
4
5
6		<td>
              <a href="" title="test1">test1</a>
              <a href="" title="test2">test2</a>
              <a href="" title="testT">testT</a>
              <span class="weekday">25</span>
</td>

Nu wil ik dat de span met weekday gepositioneerd wordt boven de a's zonder dat ik de span er in de html boven moet zetten. Iemand ideeen?
Curiosity Killed The Cat
pi_36360909
Hey,

in Firefox en MSIE doet ie het prima, maar niet in Opera. Het effect van de links werkt wel, maar de kleuren niet?

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		A:visited {
                    font-family: verdana, Helvetica, sans-serif;
                    font-size: 11px;color:"#624800";
                    text-decoration:none;
                   font-weight: bold;
}
A:hover {
font-family: verdana, Helvetica, sans-serif;
font-size: 11px;
color:"#846100";
text-decoration:underline;
font-weight: bold;
}
A:link {
font-family: verdana, Helvetica, sans-serif;
font-size: 11px;
color:"#624800";
text-decoration:none;
font-weight: bold;
}
A:active {
font-family: verdana, Helvetica, sans-serif;
font-size: 11px;
color:"#846100";
text-decoration:none;
font-weight: bold;
}


[ Bericht 61% gewijzigd door dewitteparel op 25-03-2006 19:01:55 (leesvriendelijk gemaakt ;)) ]
pi_36361563
je hoeft geen " om je hex codes te zetten voor kleurtjes .
Curiosity Killed The Cat
pi_36361630
quote:
Op zaterdag 25 maart 2006 19:21 schreef rickmans het volgende:
je hoeft geen " om je hex codes te zetten voor kleurtjes .
geniaal , maar het werkt wel dank!
pi_36364513
Is het mogelijk om in 1 stylesheet meerdere kleuren te gebruiken voor linkjes?
Ik heb namelijk een menu waarvan de linkjes wit moeten zijn. Maar in de rest van de pagina's moeten ze zwart zijn. Maar nu blijkt dus dat het niet mogelijk is om een classe aan een a href te hangen.
Ik weet dat het kan als je gaat kutten met lists, maar ook dat voorkom ik liever.

Kortom, hoe krijg ik voor elkaar dat je met 1 stylesheet gebruik kunt maken van 2 types urls met elk andere kleuren en andere CSS attributen?
Dwz. in het menu zijn ze wit en in de rest van de pagina zwart .

[ Bericht 20% gewijzigd door blieblie op 25-03-2006 21:17:31 ]
Audioscrobbler _O_
Poezel
pi_36364572
Ik ben net begonnen met css. Mijn vragen gaan zeker nog wel komen
stupidity has become as common as common sense was before
pi_36365223
@ blieblie

zet in je <a> tag een class. bijv:
<a class="white" href="etc

en in je stylesheet zet je dan:

a.white {
color: white;
}

en a.white:hover {
color: black;
}
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_36365556
quote:
Op zaterdag 25 maart 2006 21:28 schreef Desdinova het volgende:
@ blieblie

zet in je <a> tag een class. bijv:
<a class="white" href="etc

en in je stylesheet zet je dan:

a.white {
color: white;
}

en a.white:hover {
color: black;
}
Jup! Dat is em . Dank je! Heerlijk is dat... Zulke makkelijke logische oplossingen en ze gewoon niet zelf verzonnen of gevonden krijgen .
Audioscrobbler _O_
Poezel
  maandag 27 maart 2006 @ 17:55:30 #39
74523 BaggerUser
ModderFokker!
pi_36410555
oke hoe ga ik dit fixen met div's en css zodat het en in internet explorer en firefox werkt?



het problem is dat als paars langer wordt (content) groen en blauw ook langer moeten worden... heb nog nooit een oplossing voor dit probleem kunnen vinden, maar ik neeeem aan dat dit wel moet kunnen

het kan zelfs met tabellen maar ik wil graag divs gebruiken...

iemand die wel weet hoe dit moet ?
De enige echte BaggerUser!
Riemen
fiets kopen
pi_36413251
Faux columns
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  maandag 27 maart 2006 @ 19:32:35 #41
145090 HenkBenzinetank
Toegevoegde waarde
pi_36413463
quote:
Op zaterdag 25 maart 2006 15:24 schreef rickmans het volgende:
Even een klein vraagje:
ik heb het volgende:
[ code verwijderd ]

Nu wil ik dat de span met weekday gepositioneerd wordt boven de a's zonder dat ik de span er in de html boven moet zetten. Iemand ideeen?
Volgens mij kan dat niet, omdat je HTML gebruikt voor de lay-out/volgorde van de tekst en css voor de opmaak.
  maandag 27 maart 2006 @ 21:48:20 #42
74523 BaggerUser
ModderFokker!
pi_36418092
het is me al gelukt, op een andere manier maar het werkt welliswaar
zit nu alleen nog met het probleem dat mn text langer is dan mn div, in firefox

http://80.61.232.209/essek/layout.php
De enige echte BaggerUser!
Riemen
fiets kopen
pi_36418584
Voor Firefox moet je min-height gebruiken. Als je een height opgeeft dan houdt FF zich daar ook echt aan.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  maandag 27 maart 2006 @ 22:10:57 #44
74523 BaggerUser
ModderFokker!
pi_36418835
heb nu een min-height opgegeven maar nu komt die div over de onderliggende div heen.. dat is ook niet de bedoeling.

http://80.61.232.209/essek/layout.php
De enige echte BaggerUser!
Riemen
fiets kopen
pi_36429288
hoe krijg ik iets in het vertikale midden van een div?
Ben dit probleem al een aantal keer tegen gekomen..
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_36443319
Ik heb een container met daarin een menu en een inhoud div
De menu div is 16px breed en de inhoud begint op 165px. Maar als het menu 'klaar' is dan loopt de tekst in de inhoud ineens een stuk terug. Dit in meerdere ua's. Weet iemand wat dat is? Of nog beter, wat ik kan doen om dat op te lossen?

-- Al gefixt

[ Bericht 6% gewijzigd door wonko op 29-03-2006 13:11:43 ]
Geloven is zeker weten dat je het niet weet.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.
  woensdag 29 maart 2006 @ 02:57:30 #47
46275 Castor
Obey the rules, miss the fun
pi_36453356
quote:
Op maandag 27 maart 2006 22:10 schreef BaggerUser het volgende:
heb nu een min-height opgegeven maar nu komt die div over de onderliggende div heen.. dat is ook niet de bedoeling.

http://80.61.232.209/essek/layout.php
Haal height weg uit .CONTENT_WRAPPER. En zorg ervoor dat je background-image hoog genoeg is voor je content of stop er ook een achtergrond kleur in.

Bijvoorbeeld:
1
2
3		.CONTENT_WRAPPER {
width: 760px;
background:#62E8F9 url(images/background.bmp) repeat-x top left;}   
Castor's Photostream op Flickr
  woensdag 29 maart 2006 @ 03:16:25 #48
46275 Castor
Obey the rules, miss the fun
pi_36453406
quote:
Op dinsdag 28 maart 2006 11:49 schreef Desdinova het volgende:
hoe krijg ik iets in het vertikale midden van een div?
Ben dit probleem al een aantal keer tegen gekomen..
De oplossing is relatief eenvoudig (maar wel lastig te begrijpen), en je hebt helaas een extra "container" div nodig. Het kan echter wel... Ja ook in IE.

Check: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Castor's Photostream op Flickr
  woensdag 29 maart 2006 @ 03:27:10 #49
46275 Castor
Obey the rules, miss the fun
pi_36453437
quote:
Op zaterdag 25 maart 2006 15:24 schreef rickmans het volgende:
Even een klein vraagje:
ik heb het volgende:
[ code verwijderd ]

Nu wil ik dat de span met weekday gepositioneerd wordt boven de a's zonder dat ik de span er in de html boven moet zetten. Iemand ideeen?
Dit is een mogelijke oplossing:
1
2		td {position:relative;}
td span {position:absolute;top:0;left:0;}


Ik hoorde dat het voor Opera ook wel handig is om er een z-index in te zetten als je relative/absolute positioning gebruikt.
Castor's Photostream op Flickr
  Redactie Games woensdag 29 maart 2006 @ 23:16:19 #50
52557 crew  Mr.Noodle
Offtopic in geleuter...
pi_36479080
Iemand nog een idee hoe je een List met verticale tekst in CSS krijgt? verwerkt in tabjes? Ik had een oplossing gevonden, alleen die is lelijk en werkt alleen in IE.
Als in:
T|
a|
b|
1|

T|
a|
b|
2|
How do you get precisely 4 Gallons of water with a 3 Gallon and 5 Gallon Can...
  donderdag 30 maart 2006 @ 00:54:21 #51
46275 Castor
Obey the rules, miss the fun
pi_36481907
quote:
Op woensdag 29 maart 2006 23:16 schreef Mr.Noodle het volgende:
Iemand nog een idee hoe je een List met verticale tekst in CSS krijgt? verwerkt in tabjes? Ik had een oplossing gevonden, alleen die is lelijk en werkt alleen in IE.
Als in:
T|
a|
b|
1|

T|
a|
b|
2|
Ik zou gewoon images gebruiken. Het zit nog niet standaard in CSS. Ik geloof wel dat het een recommendation is voor CSS3, maar dat duurt nog wel even.
Castor's Photostream op Flickr
pi_36489841
Ik ben bezig met een site en ik ben nog niet zo thuis in CSS en HTML. Maar met vallen en opstaan komen we er wel.

Ik heb een ideetje, en het gaat tot op bepaalde hoogte goed, maar ergens loopt het mis. Misschien wil ik ook dingen die helemaal niet kunnen, maar dat hoor ik dan ook graag.

Dit is het idee:



Op zich gaat dat best goed. Maar eigenlijk wil ik dat de balken bovenaan, dus boven de container waar de tekst in staat, doorlopen naar rechts, als er van een hogere resolutie gebruikt wordt gemaakt. Omdat het menuutje een image is, is dit moeilijk. Ik dacht dat ik het kon oplossen door de image uit elkaar te halen en in verschillende divjes te plaatsen, zodat ik die naar rechts kon laten doorlopen. Maar dat schijnt niet te werken. Of wel?

Het zou dan ook nog best eens ingewikkeld kunnen worden; Het witte van de banner, dat donkerblauwe lijntje, daaronder dus die lichtblauwe balk, vervolgens weer een wit lijntje, dan een grijs lijntje, weer een wit lijntje, grijze balk en weer een wit lijntje. Wat doe ik mezelf ook aan...

Overigens heb ik de URL van het plaatje in mijn stylesheet verwerkt, maar het is uiteindelijk de bedoeling dat de buttons klikbaar worden. Kan dat via een stylesheet, of moet dat echt in de HTML pagina staan?

Nou ja, zo maar een paar vraagjes van een dummie.
last.fm
marksluymers.nl
pi_36492298
@madguy
als je de menuitems uit de div haalt en er een a-tag van maakt met dezelfde style opmaak is als het goed is je hele plaatje clickable.

verder snap k niet wat je wilt
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_36493806
Oeh ja, dat klinkt eigenlijk wel logisch.

Wel, wat ik wil. Het menu gedeelte heb ik Banner genoemd in het plaatje hierboven. Bij een hogere resolutie dan 1024x768 houdt het plaatje natuurlijk rechts een keer op. Ik wil eigenlijk voor het mooie dat de kleuren rechts doorlopen bij een hogere resolutie.



Dit plaatje dus. Alle streepjes en dingetjes moeten doorlopen. Geen repeat-code dus, maar slechts de kleuren. Hoe pak ik dit slim aan, of wordt dat te ingewikkeld of onmogelijk om uit te voeren?
last.fm
marksluymers.nl
pi_36493859
quote:
Op donderdag 23 maart 2006 09:11 schreef Tackleberry het volgende:

[..]

Dat is een oplossing, maar zorgt weer voor een ander probleem; je krijgt (logischerwijs) geen scrollbalk te zien. Maar de content is op sommige pagina's wel langer dan het iframe hoog is...

Andere oplossing? Toevoegingen?
Wat heeft een iframe met CSS te maken?
Steam - SC2
pi_36494018
quote:
Op donderdag 30 maart 2006 15:16 schreef MadGuy het volgende:
Oeh ja, dat klinkt eigenlijk wel logisch.

Wel, wat ik wil. Het menu gedeelte heb ik Banner genoemd in het plaatje hierboven. Bij een hogere resolutie dan 1024x768 houdt het plaatje natuurlijk rechts een keer op. Ik wil eigenlijk voor het mooie dat de kleuren rechts doorlopen bij een hogere resolutie.

[afbeelding]

Dit plaatje dus. Alle streepjes en dingetjes moeten doorlopen. Geen repeat-code dus, maar slechts de kleuren. Hoe pak ik dit slim aan, of wordt dat te ingewikkeld of onmogelijk om uit te voeren?
Ik doen jou niet begrijp?
Steam - SC2
pi_36494900
quote:
Op donderdag 30 maart 2006 15:21 schreef super-muffin het volgende:

[..]

Ik doen jou niet begrijp?
Ik denk dat hij bedoelt dat de de achtergrond kleur van de div moet doorlopen tot dezelfde breedte als de boven c.q onderliggende div.
Geloven is zeker weten dat je het niet weet.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.
pi_36494972
quote:
Op donderdag 30 maart 2006 15:17 schreef super-muffin het volgende:
Wat heeft een iframe met CSS te maken?
Dit gebeurde naar aanleiding van een CSS 'oplossing'...
.
pi_36495901
quote:
Op donderdag 30 maart 2006 15:16 schreef MadGuy het volgende:
Oeh ja, dat klinkt eigenlijk wel logisch.

Wel, wat ik wil. Het menu gedeelte heb ik Banner genoemd in het plaatje hierboven. Bij een hogere resolutie dan 1024x768 houdt het plaatje natuurlijk rechts een keer op. Ik wil eigenlijk voor het mooie dat de kleuren rechts doorlopen bij een hogere resolutie.

[afbeelding]

Dit plaatje dus. Alle streepjes en dingetjes moeten doorlopen. Geen repeat-code dus, maar slechts de kleuren. Hoe pak ik dit slim aan, of wordt dat te ingewikkeld of onmogelijk om uit te voeren?
aah op die manier. als je de laatste div op width: 100% zet, en een background-repeat: repeat-x; erin zet?

edit
je moet wel ff 6e div aanmaken net na het einde van je laatste menubutton.

oh en waarom geen repeat code?
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_36497189
Omdat je dan een repeat krijgt van het plaatje, toch? Dat wil ik juist niet. Ik wil slechts dat de kleuren doorlopen, alsof het balken zijn.

Ik geloof dat ik het te moeilijk uitleg ook.

Ik heb op dit moment vijf div's: Top, Banner, Banner2, Left en Container.

Banner is de div waar het gehele plaatje instaat:



Dit plaatje dus.

Ik wil juist dat alle elementen doorlopen naar rechts bij een eventuele hogere resolutie. Top is geen probleem. DE achtergrondkleur is zwart en width staat op 100%. Hetzelfde geldt voor Banner2. Maar nu wil ik dat ook voor het plaatje in Banner. Probleem is dat het een plaatje is en ik niet wil dat het herhaalt wordt. Ik zal dus de achtergrondkleuren mooi over moeten laten lopen...

Dat wil ik dus.
last.fm
marksluymers.nl
pi_36497399
over laten lopen lijkt me een veel moeilijkere klus dan van die ene banner wat meerdere kleine te maken.

bijvoorbeeld;
men neme 1 pixel breed van de banner die je nu hebt, de meest linkse pixel bijvoorbeeld. en dat 54 pixels hoog, of hoe hoog je banner ook is. Deze zet je in een div met repeat-x en width 100%. Deze loopt nu van links naar rechts. hierin zet je een center, en vervolgens de aparte menuitems elk in een eigen div (of a met background image).

dat lijkt mij de meest geschikte oplossing
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_36500300
Bedankt voor de suggestie. Ik ga gewoon even verder puzzelen.
last.fm
marksluymers.nl
pi_36507531
Ook AR heeft weer een vraagje.

Site=> http://www.jarnonieuwenhuize.nl

En ja, de kleuren worden binnenkort veranderd

Maarrrrr, wat ik eigenlijk wil is dat het menu bovenaan in een documentje staat zonder frames te gebruiken. Kan dat met css

(Oftewel, kan ik een tekstgebaseerdmenu in een externe css-sheet opnemen?)
BMW R 1100 GS
  vrijdag 31 maart 2006 @ 01:14:05 #64
62215 qu63
..de tijd drinkt..
pi_36513095
ola

ik zit met een irritant k*t probleem. mn site is helemaal door de "keuring" van w3c gekomen ( ), dat wil ik ook graag behouden natuurlijk . Het probleem is dus dat het "tekst" gedeelte van de site in Firefox gewoon tegen het menu aan staat, maar in IE niet enig idee hoe dat te doen is met css en/html iets anders?
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
  vrijdag 31 maart 2006 @ 01:46:54 #65
62215 qu63
..de tijd drinkt..
pi_36513469
het gaat dan dus om http://www.ahrenstravel.nl
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_36513519
style="table-layout:fixed;" en dan de kolommen/cells een vaste breedte geven.
  vrijdag 31 maart 2006 @ 14:47:00 #67
62215 qu63
..de tijd drinkt..
pi_36524335
thanks!

nu nog een vraagje over het euro-teken.. hoe kan ik dat gebruiken zonder dat w3c validator begint te zeuren over mn tekens?


You have used an illegal character in your text. HTML uses the standard UNICODE Consortium character repertoire, and it leaves undefined (among others) 65 character codes (0 to 31 inclusive and 127 to 159 inclusive) that are sometimes used for typographical quote marks and similar in proprietary character sets. The validator has found one of these undefined characters in your document. The character may appear on your browser as a curly quote, or a trademark symbol, or some other fancy glyph; on a different computer, however, it will likely appear as a completely different character, or nothing at all.

Your best bet is to replace the character with the nearest equivalent ASCII character, or to use an appropriate character entity. For more information on Character Encoding on the web, see Alan Flavell's excellent HTML Character Set Issues reference.

This error can also be triggered by formatting characters embedded in documents by some word processors. If you use a word processor to edit your HTML documents, be sure to use the "Save as ASCII" or similar command to save the document without formatting information.
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_36524444
gaat hij over de zeik van een &euro;?
  vrijdag 31 maart 2006 @ 14:59:11 #69
62215 qu63
..de tijd drinkt..
pi_36524712
quote:
Op vrijdag 31 maart 2006 14:50 schreef Roönaän het volgende:
gaat hij over de zeik van een €?
jup
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_36524796
je kan nog de unicode proberen. Geen idee hoe die precies loopt. Iets van
&u1234; Zou je het nummer even op moeten zoeken.
  vrijdag 31 maart 2006 @ 15:12:16 #71
62215 qu63
..de tijd drinkt..
pi_36525011
quote:
Op vrijdag 31 maart 2006 15:01 schreef Roönaän het volgende:
je kan nog de unicode proberen. Geen idee hoe die precies loopt. Iets van
&u1234; Zou je het nummer even op moeten zoeken.
U20A is dat

maar heb nergens kunnen vinden hoe ik die neer moet zetten, als ik het met &# ervoor doe wordt het *blokje*20A
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_36525151
en zonder het sharp-sign?
  vrijdag 31 maart 2006 @ 15:18:57 #73
62215 qu63
..de tijd drinkt..
pi_36525225
1& # x 2 0 a c ;


die werkt wel en wordt gepakt door de validator!
zonder de spaties dus
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
  vrijdag 31 maart 2006 @ 15:22:01 #74
62215 qu63
..de tijd drinkt..
pi_36525306
http://www.fileformat.info/info/unicode/char/20ac/index.htm
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
  vrijdag 31 maart 2006 @ 17:30:16 #75
145090 HenkBenzinetank
Toegevoegde waarde
pi_36529270
O ja, ik zit ook nog met een probleempje met mijn site (zie ). Ik wil dit plaatje als bg van mijn menu:
.
Het is heel netjes een <ul>-menu en op de een ofandere manier werkt
1
2
3
4		#navlist li
{
   background-image: url(/img/menuitembg);
}

of een code die er op lijkt, niet.
  zaterdag 1 april 2006 @ 02:32:36 #76
46275 Castor
Obey the rules, miss the fun
pi_36542790
quote:
Op vrijdag 31 maart 2006 17:30 schreef HenkBenzinetank het volgende:
O ja, ik zit ook nog met een probleempje met mijn site (zie [afbeelding]). Ik wil dit plaatje als bg van mijn menu:
[afbeelding].
Het is heel netjes een <ul>-menu en op de een ofandere manier werkt
[ code verwijderd ]

of een code die er op lijkt, niet.
Dit zou moeten werken:
1
2		#navlist li {background:url(http://www.fontanel.nl/img/menuitembg.gif) 
no-repeat top left; width:80px;}
Castor's Photostream op Flickr
  zaterdag 1 april 2006 @ 02:39:12 #77
46275 Castor
Obey the rules, miss the fun
pi_36542861
quote:
Op donderdag 30 maart 2006 22:18 schreef Autoreply het volgende:
Ook AR heeft weer een vraagje.

Site=> http://www.jarnonieuwenhuize.nl

En ja, de kleuren worden binnenkort veranderd

Maarrrrr, wat ik eigenlijk wil is dat het menu bovenaan in een documentje staat zonder frames te gebruiken. Kan dat met css

(Oftewel, kan ik een tekstgebaseerdmenu in een externe css-sheet opnemen?)
Neen, wat jij wilt kan niet met CSS. Hier zou je zgn "includes" voor kunnen gebruiken. Dat kan bijvoorbeeld met PHP, MS FrontPage of Dreamweaver (templates).
Castor's Photostream op Flickr
pi_36580451
Ik weer.

Uiteraard nog steeds dezelfde site: http://www.jarnonieuwenhuize.nl/

Hoe krijg ik de witregel onder bijvoorbeeld kopjes weg? Dit lijkt te hangen op < h2 > tekst < / h2 >

Hierna wordt automatisch een witregel toegepast
BMW R 1100 GS
pi_36580642
Dat ligt aan de margins die standaard op een H2 en P zitten.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_36582214
quote:
Op zondag 2 april 2006 16:21 schreef SuperRembo het volgende:
Dat ligt aan de margins die standaard op een H2 en P zitten.
En kan je die veranderen?
BMW R 1100 GS
pi_36594396
Hoe krijg ik van 2 divjes die left zijn gefloat de ene net zo hoog als de ander.

<div id="left"></div>
<div id="right"></div>

Met float: leftl krijg ik hem naast elkaar. Maar hoe krijg ik de right-div net zo hoog als de left div als er in de left-div meer tekst staat? (in right-div is een achtergrondskleur ingesteld)
pi_36595504
quote:
Op zondag 2 april 2006 23:17 schreef the_disheaver het volgende:
Hoe krijg ik van 2 divjes die left zijn gefloat de ene net zo hoog als de ander.

<div id="left"></div>
<div id="right"></div>

Met float: leftl krijg ik hem naast elkaar. Maar hoe krijg ik de right-div net zo hoog als de left div als er in de left-div meer tekst staat? (in right-div is een achtergrondskleur ingesteld)
gelukt, en wel hiermee: http://www.positionisever(...)uelayout/equalheight
pi_36612421
quote:
Op zondag 2 april 2006 23:52 schreef the_disheaver het volgende:

[..]

gelukt, en wel hiermee: http://www.positionisever(...)uelayout/equalheight
Werkt toch niet perfect in Opera, en totaal niet in IE

Iemand een andere oplossing?

edit: toch opgelost geloof ik.

Met wat aanpassingen, http://www.alistapart.com/articles/fauxcolumns/

[ Bericht 15% gewijzigd door the_disheaver op 03-04-2006 17:33:57 ]
  maandag 3 april 2006 @ 17:01:42 #84
145090 HenkBenzinetank
Toegevoegde waarde
pi_36612575
quote:
Op zondag 2 april 2006 17:24 schreef Autoreply het volgende:

[..]

En kan je die veranderen?
tuurlijk.
Margin: 0px;
pi_36820199
Ik ben verder wezen klooien met mijn ontwerp en kwam tot het volgende:



Nu heb ik een tweeledig probleem.

Het eerste is het donkerblauwe vlak links. Deze div wil ik door laten lopen zolang als de pagina verticaal is. Dit varieert per pagina. De 100% value werkt niet. Want dan laat de browser hem doorlopen tot het einde van het scherm, maar zodra je naar beneden scrollt, krijg je weer de background-color. Hoe kan ik dit handig oplossen?

Het tweede probleem betreft het menu boven. Omdat ik de pagina ook mooi uit wil laten komen op hogere resoluties, zijn de verschillende elementen uit het menu van onder naar boven aparte divjes.



Dus dan heb je van onder naar boven: een zwarte balk, de 'tijdlijn', de verschillende menu elementen (die ook weer per button een divje zijn) en een grijze balk. Deze wil ik door laten lopen naar rechts, zolang als de pagina wordt. Bij 1024x768 als resolutie is dit natuurlijk 1024, maar bij hogere resoluties wordt het meer. Maar ook value 100% werkt hier niet. Ze stoppen dan gewoon op een gegeven moment. Sterker nog, ik heb nu een horizontale scrollbar. Aaargh.

Ik pak iets gigantisch fout aan, maar wat?
last.fm
marksluymers.nl
  dinsdag 11 april 2006 @ 01:31:10 #86
46275 Castor
Obey the rules, miss the fun
pi_36844928
quote:
Op maandag 10 april 2006 13:26 schreef MadGuy het volgende:
Ik ben verder wezen klooien met mijn ontwerp en kwam tot het volgende:

[afbeelding]

Nu heb ik een tweeledig probleem.

Het eerste is het donkerblauwe vlak links. Deze div wil ik door laten lopen zolang als de pagina verticaal is. Dit varieert per pagina. De 100% value werkt niet. Want dan laat de browser hem doorlopen tot het einde van het scherm, maar zodra je naar beneden scrollt, krijg je weer de background-color. Hoe kan ik dit handig oplossen?
Dit kun je eenvoudig oplossen door een 1 a 2px hoog en (zo breed als je het donkerblauwe vlak wilt) brede background-image (.gif) in je body te plakken met een repeat-y

Misschien niet de mooiste oplossing, maar wel de makkelijkste.
quote:
Het tweede probleem betreft het menu boven. Omdat ik de pagina ook mooi uit wil laten komen op hogere resoluties, zijn de verschillende elementen uit het menu van onder naar boven aparte divjes.

[afbeelding]

Dus dan heb je van onder naar boven: een zwarte balk, de 'tijdlijn', de verschillende menu elementen (die ook weer per button een divje zijn) en een grijze balk. Deze wil ik door laten lopen naar rechts, zolang als de pagina wordt. Bij 1024x768 als resolutie is dit natuurlijk 1024, maar bij hogere resoluties wordt het meer. Maar ook value 100% werkt hier niet. Ze stoppen dan gewoon op een gegeven moment. Sterker nog, ik heb nu een horizontale scrollbar. Aaargh.

Ik pak iets gigantisch fout aan, maar wat?
Het zou flink helpen als je een url opgeeft waar we de HTML en CSS kunnen bekijken. Nu is het heel lastig te bepalen waar het precies misgaat...
Castor's Photostream op Flickr
pi_36848080
Dank, Castor. Maar ik snap je eerste suggestie toch niet helemaal. Bedoel je nu in mijn CSS-bestand of in mijn HTML-bestand?

CSS
HTML

Het gaat om #left voor de linker donkerblauwe div. Deze moet zo groot worden als de pagina 'hoog' is.

En de #timeline2, #blueline, #bluewhiteline2, #menuelement2, #doublewhiteline en #grayband divjes. Die lopen zoals je ziet in mijn HTML pagina door naar rechts, maar ik wil juist dat deze eindigen aan het einde van het scherm (bij een resolutie van 1024x768). Maar als iemand een grotere resolutie gebruikt, wil ik dat ze wel doorlopen, als je begrijpt wat ik bedoel.

Ik ben een ontzettende n00bie op het gebied van CSS en HTML, dus als er suggesties voor verbetering zijn hoor ik het graag. Er zullen genoeg slordigheden en fouten inzitten.
last.fm
marksluymers.nl
pi_36848252
Het linkervlak links kan je doen met een 200px blauwe border-left op je content div.

Of door een plaatje te maken waarvan de linker 200 pixels blauw zijn en die als achtergrond image te gebruiken

-r-
pi_36848623
En dan repeat-y bij jouw laatste suggestie, neem ik aan? Het rare is dat dat juist niet schijnt te werken. Ik doe denk ik iets fout.

Bedankt voor de suggesties, wel.
last.fm
marksluymers.nl
pi_36848676
Dat is omdat je background op left hebt gedefinieerd. Probeer bijvoorbeeld eens die background op de body te zetten:

body {
background: #666 url(http://members.chello.nl/msluymers/images/main/darkbluebg.gif) repeat-y;
pi_36848927
Hm ja, dat werkt inderdaad. Maar als ik rechts nu een andere kleur wil hebben? Zou ik daar dan een aparte div voor moeten creeëren?

Thanks again, btw!

[ Bericht 9% gewijzigd door MadGuy op 11-04-2006 10:54:53 ]
last.fm
marksluymers.nl
pi_36849178
quote:
Op dinsdag 11 april 2006 10:48 schreef MadGuy het volgende:
Hm ja, dat werkt inderdaad. Maar als ik rechts nu een andere kleur wil hebben? Zou ik daar dan een aparte div voor moeten creeëren?
Of de achtergrondimage danwel kleur aanpassen.
pi_36849584
Thanks. Dat moet nu wel gaan lukken, denk ik. Staat alleen het andere probleem nog.
last.fm
marksluymers.nl
pi_36850678
Hoe komt het overigens dat IE alles zo raar in elkaar drukt, terwijl Firefox het geheel perfect weergeeft? Vooral bij de grijze balk boven en de tekstballon banner boven mijn content is het goed te zien - het is net een tikkeltje verschoven...
last.fm
marksluymers.nl
pi_36920335
Toch even een kickje.

Waarom lopen de divjes bovenaan naar rechts zo afwisselend door? Ik wil juist dat deze vergroten en verkleinen naarmate de resolutie die gebruikt wordt door de gebruiker groter of kleiner is. Is hier een oplossing voor?

Het tweede probleem is Internet Explorer. In Firefox en Netscape onder andere wordt de grootte van de container perfect weergegeven. Hij valt onder de lichtblauwe banner en is er perfect mee uitgelijnd. In IE is dit echter niet het geval. Ook de grijze balk bovenaan wordt in IE overlapt door de lichtblauwe banner. Kan ik dit rechttrekken?

pagina
CSS
last.fm
marksluymers.nl
pi_36922449
Ik heb zo 1-2-3 geen antwoord, maar waarom doe je alles met absolute positionering? Daar krijg je alleen maar grijze haren van...
Ich fälle Bäume und hupf und spring, steck Blumen in die Vas
Ich schlupf in Frauenkleider, und lummel mich in Bars
  donderdag 13 april 2006 @ 15:17:04 #97
25889 Sitethief
Fulltime Flapdrol
pi_36922750
Ik ben bezig met het uitproberen van mijn layout. Alleen nu staat echt alles in HTML en ik wil toch graag een gedeelte in CSS hebben.
Hoe krijg ik het background element(niet eens legal0 uit een <td> in CSS?

Zie: http://sitethief.nl/try/
Stroek: Sitethief, die is heel groot en sterk :Y.
Faat: *zucht* zoals gewoonlijk hoor Sitethief weer in de bocht &gt;:)
pi_36922823
quote:
Op donderdag 13 april 2006 15:17 schreef Sitethief het volgende:
Ik ben bezig met het uitproberen van mijn layout. Alleen nu staat echt alles in HTML en ik wil toch graag een gedeelte in CSS hebben.
Hoe krijg ik het background element(niet eens legal0 uit een <td> in CSS?

Zie: http://sitethief.nl/try/
td {background-color: #123456;}
pi_36923459
quote:
Op donderdag 13 april 2006 15:07 schreef Berkery het volgende:
Ik heb zo 1-2-3 geen antwoord, maar waarom doe je alles met absolute positionering? Daar krijg je alleen maar grijze haren van...
Hm ja, dat klopt wel een beetje. Ik wil echter dat mijn ontwerp hetzelfde is bij iedereen.

Wat zou je anders voorstellen dan?
last.fm
marksluymers.nl
  donderdag 13 april 2006 @ 15:56:58 #100
46794 Berkery
Fat bastard
pi_36924172
quote:
Op donderdag 13 april 2006 15:38 schreef MadGuy het volgende:

[..]

Hm ja, dat klopt wel een beetje. Ik wil echter dat mijn ontwerp hetzelfde is bij iedereen.

Wat zou je anders voorstellen dan?
Je zou hier een beetje mee kunnen spelen (menu): http://www.alistapart.com/articles/taminglists/

En voor de rest is het een kwestie van netjes centreren.
Ich fälle Bäume und hupf und spring, steck Blumen in die Vas
Ich schlupf in Frauenkleider, und lummel mich in Bars
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - Deel 4
Index

» digital corner

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