[CSS] voor dummies - deel 12

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_71221537
Wat dacht je van een paar linkjes naar IE8 of Firefox? Doe ik ook We kunnen niet voor eeuwig IE6 ondersteunen omdat sommigen nog in 2001 leven en te lui zijn om te updaten. Ik heb net voor het eerst een "nieuwe generatie" theme gemaakt voor Wordpress en het is heerlijk om niet constant IE6 in je achterhoofd te hoeven houden en achteraf PNG hacks, ie6fixes.css e.d. te moeten implementeren
シ
pi_71221789
quote:
Op woensdag 22 juli 2009 17:33 schreef Chanty87 het volgende:
Wat dacht je van een paar linkjes naar IE8 of Firefox? Doe ik ook We kunnen niet voor eeuwig IE6 ondersteunen omdat sommigen nog in 2001 leven en te lui zijn om te updaten. Ik heb net voor het eerst een "nieuwe generatie" theme gemaakt voor Wordpress en het is heerlijk om niet constant IE6 in je achterhoofd te hoeven houden en achteraf PNG hacks, ie6fixes.css e.d. te moeten implementeren
De klant is koning, en als de koning lui is, dan moet ik me als winkelier daar maar op aanpassen
Trotse poster van het 37000000ste bericht ^O^
pi_71222239
Youtube, Digg en 37signals dachten er ook zo over Maar prima hoor, jouw keuze Ik verspil mijn tijd niet meer aan IE6 (tenzij de klant echt zeker weten IE6 support wil voor een extra bedrag). Zeker niet nu de grote sites er ook mee kappen. Hoe meer designers/developers de ondersteuning laten vallen des te sneller we van die kutbrowser af zijn.
シ
pi_71240695
quote:
Op woensdag 22 juli 2009 17:13 schreef daReaper het volgende:

Voor mijn eigen site wil ik best IE6 bannen, maar dit is voor een klant die een webshop in rusland wil draaien, en daar is internet nog niet overal zo ver ontwikkeld, dus zijn er nog een hoop IE6-gebruikers, die dan dus geen klant zullen zijn.
Er zit een verschil tussen een site niet laten werken in IE6 en er iets anders uit laten zien in IE6. Nu is jouw geval wellicht anders, maar standaard zorg ik ervoor dat een site werkt in IE6. Ik vertel mijn klant vantevoren dat de site er misschien in details anders uit ziet (door het gebrek aan :last-child krijgt de laatste rij in een tabel tóch een randje eronder, etc). Wil je het pixel perfect in IE6: prima. Maar dan gaan we daar wel eerst een begroting voor maken
pi_71240779
quote:
Op woensdag 22 juli 2009 17:33 schreef Chanty87 het volgende:
Wat dacht je van een paar linkjes naar IE8 of Firefox? Doe ik ook We kunnen niet voor eeuwig IE6 ondersteunen omdat sommigen nog in 2001 leven en te lui zijn om te updaten.
Da's niet echt waar, recent onderzoek toont aan dat van de IE6 gebruikers slechts ongeveer 14% thuisgebruikers zijn. De overige 86% zijn mensen die het op hun werk moeten gebruiken, en die kunnen niet upgraden. Dat die bedrijven niet upgraden, daar hebben ze een goede reden voor: ze hebben 8 jaar geleden web apps laten bouwen door prutsers, die alleen in IE6 werken. Als ze moeten kiezen tussen YouTube goed tonen, of hun app die een ton gekost heeft laten werken, dan is de keuze snel gemaakt. Zolang de pruts apps niet uitgefaseerd zijn blijft een groot deel van werkend Nederland IE6 gebruiken.
pi_71242335
quote:
Op donderdag 23 juli 2009 09:19 schreef Roy_T het volgende:

[..]

Er zit een verschil tussen een site niet laten werken in IE6 en er iets anders uit laten zien in IE6. Nu is jouw geval wellicht anders, maar standaard zorg ik ervoor dat een site werkt in IE6. Ik vertel mijn klant vantevoren dat de site er misschien in details anders uit ziet (door het gebrek aan :last-child krijgt de laatste rij in een tabel tóch een randje eronder, etc). Wil je het pixel perfect in IE6: prima. Maar dan gaan we daar wel eerst een begroting voor maken
Ahja, zoals het er nu uit ziet in IE6 ben ik op zich tevreden, hoewel het inderdaad niet perfect is. en :last-child werkt door dat script dus wèl
Trotse poster van het 37000000ste bericht ^O^
pi_71246137
quote:
Op donderdag 23 juli 2009 10:27 schreef daReaper het volgende:

Ahja, zoals het er nu uit ziet in IE6 ben ik op zich tevreden, hoewel het inderdaad niet perfect is. en :last-child werkt door dat script dus wèl
Nee, :last-child werkt niet, maar dat zie je niet omdat dat script het gedrag van :last-child nadoet Maar dan ben je nu opeens afhankelijk van JavaScript, of dat nou echt een beter alternatief is, daar kun je over discussiëren
pi_71246833
quote:
Op donderdag 23 juli 2009 09:19 schreef Roy_T het volgende:

(door het gebrek aan :last-child krijgt de laatste rij in een tabel tóch een randje eronder, etc). Wil je het pixel perfect in IE6: prima. Maar dan gaan we daar wel eerst een begroting voor maken
:last-child werkt ook niet in IE7, voor zover ik weet. En meeestal kun je het met :first-child ook wel oplossen (maar ook die werkt niet in IE6).
fokstok.nl
pi_71247094
quote:
Op donderdag 23 juli 2009 09:23 schreef Roy_T het volgende:

[..]

Da's niet echt waar, recent onderzoek toont aan dat van de IE6 gebruikers slechts ongeveer 14% thuisgebruikers zijn. De overige 86% zijn mensen die het op hun werk moeten gebruiken, en die kunnen niet upgraden. Dat die bedrijven niet upgraden, daar hebben ze een goede reden voor: ze hebben 8 jaar geleden web apps laten bouwen door prutsers, die alleen in IE6 werken. Als ze moeten kiezen tussen YouTube goed tonen, of hun app die een ton gekost heeft laten werken, dan is de keuze snel gemaakt. Zolang de pruts apps niet uitgefaseerd zijn blijft een groot deel van werkend Nederland IE6 gebruiken.
Ik heb het ook niet alleen over thuisgebruikers Door die bedrijven blijft het web constant steken. Het is de hoogste tijd om na 8 jaar IE6 met de volgende generatie te gaan werken ipv vernieuwing in de weg te blijven zitten omdat ze hun prutsapps niet willen updaten. Zolang iedere designer/developer IE6 blijft ondersteunen zal er nooit geupgradet worden omdat die noodzaak er niet is en dus sluit ik me maar al te graag aan bij YT, Digg en 37signals
シ
pi_71255332
quote:
Op donderdag 23 juli 2009 12:40 schreef Light het volgende:

:last-child werkt ook niet in IE7, voor zover ik weet
Jawel hoor :nth-child niet.
pi_71255538
quote:
Op donderdag 23 juli 2009 12:47 schreef Chanty87 het volgende:

Ik heb het ook niet alleen over thuisgebruikers Door die bedrijven blijft het web constant steken. Het is de hoogste tijd om na 8 jaar IE6 met de volgende generatie te gaan werken ipv vernieuwing in de weg te blijven zitten omdat ze hun prutsapps niet willen updaten. Zolang iedere designer/developer IE6 blijft ondersteunen zal er nooit geupgradet worden omdat die noodzaak er niet is en dus sluit ik me maar al te graag aan bij YT, Digg en 37signals
Van de bedrijven die je noemt is 37signals de enige die winst boekt uit verkopen van een dienst, en die hebben echt andere klanten dan de bedrijven die een paar ton aan een web app uitgeven. Dat is iets anders dan max 99$ voor Basecamp.

Ik ben het helemaal met je eens dat IE6 er zo snel mogelijk uit moet, en dat iedereen (ook bedrijven) zou moeten upgraden. Maar dat neemt niet weg dat ik heel goed begrijp waarom een TNT of een Rabobank dat niet doen. Een groot deel van hun processen valt stil als ze upgraden naar een browser waar hun apps niet mee werken. Het is, zeker nu, een stuk voordeliger om dan maar IE6 te houden ipv veel geld uit te geven aan nieuwe apps.
pi_71256172
quote:
Op donderdag 23 juli 2009 16:52 schreef Roy_T het volgende:

[..]

Jawel hoor :) :nth-child niet.
:last-child ook niet. Is trouwens een css3 ding, net als :nth-child.

Ik heb het getest met onderstaande html/css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css">
#test {
   color: red;
}
#test :last-child {
   color: green;
}
</style>
</head>
<body>
<div id="test">
   <p>Child 1</p>
   <p>Child 2</p>
   <p>Child 3</p>
</div>
</body>
</html>
fokstok.nl
pi_71266026
quote:
Op donderdag 23 juli 2009 17:14 schreef Light het volgende:

:last-child ook niet. Is trouwens een css3 ding, net als :nth-child.
Je hebt gelijk. Ik was in de war met :first-child (wat weer CSS 2.1 is en wél werkt in IE7).
  zondag 26 juli 2009 @ 22:22:43 #239
85919 Likkende_Lassie
Doe eens wat aan je ondertitel
pi_71350942
Ik kom niet uit het volgende:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		<div class="topsteden">
   <div class="cities">
      <div class="city" id="1">
         <div class="image"><img src="/images/amsterdam.jpg" alt="Amsterdam" width="80" /></div>
         <div class="title"><a href="#">Amsterdam</a></div>
         <div class="rating"><img src="/images/star.png" alt="nvt" /></div>
         <div class="text">Amsterdam is de hoofdstad van Nederland en mag aanspraak maken op de titel "Wereldstad". Vele verschillende kanten van Nederland zie je hier in een stad. Oude gebouwen, moderne architectuur, natuur, musea en nog veel meer. <a href="#" style="font-size: 10px;" class="border"><i>(lees verder...)</i></a></div>
      </div>
      <div class="city" id="2">
         <div class="image"><img src="/images/den_haag.jpg" alt="Den Haag" width="80" /></div>
         <div class="title"><a href="#">Den Haag</a></div>
         <div class="rating"><img src="/images/star.png" alt="nvt" /></div>
         <div class="text">bsdfgh fdfg dsfgvbsdasdf lablabla</div>
      </div>
</div>


CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		/* topsteden */
.topsteden {}
.topsteden .menu { text-align: center;}
.topsteden .cities {position: relative; top: 15px;}
.topsteden .cities .city {position: relative; top: 10px; padding: 10px; height: 95px;}
.topsteden .cities .city .image {
   position: relative;
   float: left;
   width: 85px;
   height: 85px;
   border:1px solid gray;
   padding-left: 5px;
   padding-top: 5px;
   left: 5px;
}
.topsteden .cities .city .title {position: relative; left: 13px; float:left; font-weight: bold;}
.topsteden .cities .city .rating {position: relative; left: 130px;}
.topsteden .cities .city .text {position: absolute; left: 110px; top: 20px;font-size: 10px;}


Is mijn opbouw (css) goed zo? want ik heb het idee als ik in .topsteden .cities { } padding: 5px; doe, dat die voor alle andere ook geldt?
pi_71351252
Voor welke anderen?

Je HTML is verder redelijk ruk overigens Divitis is net zo erg als tabellen Waarom .text ipv <p>, waarom .title ipv <hn>?
pi_71351448
tvp
  zondag 26 juli 2009 @ 22:43:19 #242
85919 Likkende_Lassie
Doe eens wat aan je ondertitel
pi_71351633
quote:
Op zondag 26 juli 2009 22:33 schreef Roy_T het volgende:
Voor welke anderen?

Je HTML is verder redelijk ruk overigens Divitis is net zo erg als tabellen Waarom .text ipv <p>, waarom .title ipv <hn>?
Voor topsteden .cities .city en topsteden .cities .city .images etc. bijvoorbeeld
Je hebt idd gelijkt betreffende die .text en .title :0
pi_71352767
quote:
Op zondag 26 juli 2009 22:43 schreef Likkende_Lassie het volgende:

[..]

Voor topsteden .cities .city en topsteden .cities .city .images etc. bijvoorbeeld
Je hebt idd gelijkt betreffende die .text en .title :0
Je bedoelt dat .cities een lijst met steden is en .city een losse stad? Waarom dan niet <ul> en <li> gebruiken? Die zijn speciaal voor lijsten gemaakt
fokstok.nl
pi_71357965
Als je in ".topsteden .cities {position: relative; top: 15px;}" padding toevoegt, dan heeft dat alleen effect op de div met class="cities".
  maandag 27 juli 2009 @ 10:41:48 #245
85919 Likkende_Lassie
Doe eens wat aan je ondertitel
pi_71358713
quote:
Op maandag 27 juli 2009 10:03 schreef Roy_T het volgende:
Als je in ".topsteden .cities {position: relative; top: 15px;}" padding toevoegt, dan heeft dat alleen effect op de div met class="cities".
En niet op de gehele div .topsteden?
pi_71359193
quote:
Op maandag 27 juli 2009 10:41 schreef Likkende_Lassie het volgende:

[..]

En niet op de gehele div .topsteden?
Nee. Alleen op de div .cities in de div .topsteden.
fokstok.nl
pi_71359338
quote:
Op maandag 27 juli 2009 10:41 schreef Likkende_Lassie het volgende:

En niet op de gehele div .topsteden?
Nee. Je bent niet in de war met margin ofzo? Niet dat het daarvoor wel geldt, maar dan is het op het eerste gezicht moeilijker om te zien of de ruimte door padding op de ouder of margin op het kind komt.
  dinsdag 28 juli 2009 @ 16:05:35 #248
241594 iBolt
Lighting
pi_71399196
Ander dingetje... Ik heb zeg maar zo'n collapse/expand gevalletje wat er ongeveer zo uitziet...

1
2
3
4		<a href="#" onclick"toggle('id1')">Collapse 1</a><div id="id1" style="display:none;">Blaat 1</div>
<a href="#" onclick"toggle('id2')">Collapse 2</a><div id="id2" style="display:none;">Blaat 2</div>
<a href="#" onclick"toggle('id3')">Collapse 3</a><div id="id3" style="display:none;">Blaat 3</div>
<a href="#" onclick"toggle('id4')">Collapse 3</a><div id="id4" style="display:none;">Blaat 4</div>

Nu werkt het allemaal fijn alleen zit er zeg maar nu zo'n lelijke ruimte ruimte, witregel, tussen me links... en die wil ik weghebben... padding en margin veranderen helpt niet (als div weg is is witregel ook weg ofcourse)
pi_71399822
quote:
Op dinsdag 28 juli 2009 16:05 schreef iBolt het volgende:
Ander dingetje... Ik heb zeg maar zo'n collapse/expand gevalletje wat er ongeveer zo uitziet...
[ code verwijderd ]

Nu werkt het allemaal fijn alleen zit er zeg maar nu zo'n lelijke ruimte ruimte, witregel, tussen me links... en die wil ik weghebben... padding en margin veranderen helpt niet (als div weg is is witregel ook weg ofcourse)
Lineheight aanpassen?
pi_71400882
quote:
Op dinsdag 28 juli 2009 16:05 schreef iBolt het volgende:
Ander dingetje... Ik heb zeg maar zo'n collapse/expand gevalletje wat er ongeveer zo uitziet...
[ code verwijderd ]

Nu werkt het allemaal fijn alleen zit er zeg maar nu zo'n lelijke ruimte ruimte, witregel, tussen me links... en die wil ik weghebben... padding en margin veranderen helpt niet (als div weg is is witregel ook weg ofcourse)
Wat wil je bereiken? Op het moment dat er geen div aan staat, is er ook geen witruimte en staan ze gewoon achter elkaar. Als er een div aan staat, dan staat er ook inhoud in neem ik aan?
pi_71536908
Hallo Fokkertjes,

Ik ben hier bezig met een simpele website voor een radioprogramma, en zoals altijd gooit IE roet in het eten. De bedoeling is om een plaatje te floaten naar left en een menubalk daarnaast te laten zien. Daaronder dan weer een blokje met playlist en de gewone tekst.

Firefox laat het vrolijk zien, IE8 ook, IE7 waagt zich er niet aan. Het menu wordt naar beneden gedrukt, waardoor de hele layout naar de kloten gaat.Het is vast een heel dom foutje ergens die heel simpel is op te lossen, maar ik kan er niet opkomen.

De pagina staat op http://www.marktreffer.nl. Het ballonnenmannetje moet dus floaten, de rest ernaast.

Help
I'm sorry, you must be confusing me with someone who gives a shit.
pi_71537096
Ik zou bij het menu ook float: left; zetten.
fokstok.nl
pi_71537466
Dan verneukt Firefox hem ook, komt de tekst naast de ballon te staan en het menu onder de ballon.

Heb het nu opgelost door alle content behalve die ballon in een float:left te zetten en dan wat correctie met margins, dan werkt 'ie wel weer.
I'm sorry, you must be confusing me with someone who gives a shit.
pi_71563381
Ik heb ook weer eens een probleempje. Ik wil iets te maken met rounded corners. Dat is op zich goed mogelijk, er zijn 1001 manieren om dat te doen. Probleem is alleen dat het vlak met de rounded corners half over een foto en/of flashanimatie komt, en ik dus geen vaste achtergrondkleur aan de buitenkant kan gebruiken.

Het moet ook werken in IE7, dus het zal iets moeten worden met plaatjes. Iemand een idee hoe ik dat het beste kan aanpakken, zonder dat er 10.000 div's nodig zijn?
fokstok.nl
pi_71565062
Dat kan simpelweg niet, tenzij je hele rare dingen gaat doen met tig div's inderdaad. Screw IE, of pas het ontwerp aan. Sommige zaken kunnen nu eenmaal niet op een zinnige manier.
pi_71565407
Ik was er al bang voor. Dat wordt dus veel div's gebruiken. Ontwerp aanpassen is geen optie en IE laten vallen ook niet. Daar vindt de klant niet goed. Helaas.
fokstok.nl
pi_71568015
quote:
Op maandag 3 augustus 2009 15:13 schreef Light het volgende:
Ik was er al bang voor. Dat wordt dus veel div's gebruiken. Ontwerp aanpassen is geen optie en IE laten vallen ook niet. Daar vindt de klant niet goed. Helaas.
Je kunt ook als internetprofessional zeggen dat er geen (fatsoenlijke) oplossing is
pi_71568301
quote:
Op maandag 3 augustus 2009 16:50 schreef Roy_T het volgende:

[..]

Je kunt ook als internetprofessional zeggen dat er geen (fatsoenlijke) oplossing is
Als er geen oplossing is, dan zeggen we dat ook wel
fokstok.nl
pi_71568474
quote:
Op maandag 3 augustus 2009 17:01 schreef Light het volgende:

Als er geen oplossing is, dan zeggen we dat ook wel
Dit is een mooie kandidaat ervoor Het is alleen te doen door te prutsen
pi_71622756
Kun je het niet gewoon doen met PNG's met transparante achtergrond?
I'm sorry, you must be confusing me with someone who gives a shit.
pi_71623073
quote:
Op woensdag 5 augustus 2009 14:07 schreef Tunafish het volgende:
Kun je het niet gewoon doen met PNG's met transparante achtergrond?
Ja, met de buitenrand transparant. Dat kan inderdaad, en zo heb ik het ook opgelost. Nadeel is dat ik dan 8 div's nodig heb waar ik normaal met 1 had toegekund.
fokstok.nl
pi_71623121
quote:
Op maandag 3 augustus 2009 17:09 schreef Roy_T het volgende:

[..]

Dit is een mooie kandidaat ervoor Het is alleen te doen door te prutsen
Nee. Het is te doen, dus gaan we de klant niet lastig vallen met het feit dat het wat ingewikkelder is dan normaal.
fokstok.nl
pi_71640620
quote:
Op woensdag 5 augustus 2009 14:20 schreef Light het volgende:

Nee. Het is te doen, dus gaan we de klant niet lastig vallen met het feit dat het wat ingewikkelder is dan normaal.
Ik zou iig een klant geen oplossing verkopen die 8 extra div's omvat. Wij doen het gewoon niet. maar ieder zijn werkwijze
  donderdag 20 augustus 2009 @ 19:55:26 #264
258901 Stockton
Billy Barracuda
pi_72051109
Vraag: Ik ben met de header bezig in een container:
quote:
#container {
width: 941px;
background: #FFF url(images/repeat.png) repeat-y;
text-align: left;
margin: 0 auto;
}

#headerleft{
width: 452px;
background-image: url(images/header.png);
height: 273px;
float: left;
}

#headerright{
float: right;
height: 273px;
width: 489px;
}
Headerright en HEaderleft zijn samen de gehele header, maar dit is apart langs elkaar omdat Headerleft één grote afbeelding bevat, en headerright aparte afbeeldingen die samen het menu vormen.
Nu is het eigenlijk simpel gezegt dat header right breder moet worden, breder dan de container. Een paar afbeeldingen steken er namelijk uit (mooi effect), en daarom moet breder.

Moet ik nu de container later laten beginnen, of kan ik het door enig of andere manier dat een afbeelding over de toegestaande breedte kan?

Ben zelf niet zo met CSS, daarom deze vraag. Via google krijg je wel honderden sites, maar niet echt een goede.

Alvast bedankt!
GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS
pi_72054816
quote:
Op donderdag 20 augustus 2009 19:55 schreef Stockton het volgende:
Vraag: Ik ben met de header bezig in een container:
[..]

Headerright en HEaderleft zijn samen de gehele header, maar dit is apart langs elkaar omdat Headerleft één grote afbeelding bevat, en headerright aparte afbeeldingen die samen het menu vormen.
Nu is het eigenlijk simpel gezegt dat header right breder moet worden, breder dan de container. Een paar afbeeldingen steken er namelijk uit (mooi effect), en daarom moet breder.

Moet ik nu de container later laten beginnen, of kan ik het door enig of andere manier dat een afbeelding over de toegestaande breedte kan?

Ben zelf niet zo met CSS, daarom deze vraag. Via google krijg je wel honderden sites, maar niet echt een goede.

Alvast bedankt!
Is het geen oplossing de container breder te maken? Anders kun je ook nog #headerleft een negatieve margin-left geven, en #headerright een negatieve margin-right.
fokstok.nl
pi_72066000
De container breder maken inderdaad, en de header ook.

Eventuele content daaronder zou je in een tweede smallere container kunnen zetten.
pi_72122375
Ik heb in de loop der jaren een aantal standaard dingen geleerd, een div in het midden uitlijnen kan dmv margin: 0 auto, maar hoe krijg ik een footer ook alweer minimaal tot de onderkant van de pagina?
  maandag 24 augustus 2009 @ 21:05:55 #268
87680 Mirel
Mirel wil een bongophone.
pi_72122476
asdsawqeasdfe

[ Bericht 63% gewijzigd door Mirel op 24-08-2009 21:22:17 ]
When all else fails, you always have delusion.
  maandag 24 augustus 2009 @ 21:34:51 #269
267127 de_DDoSwachter
F5 F5 F5 F5 F5 F5 F5 F5 F5 F5
pi_72123417
quote:
Op maandag 24 augustus 2009 @ 21:02 schreef Flaccid het volgende:
Ik heb in de loop der jaren een aantal standaard dingen geleerd, een div in het midden uitlijnen kan dmv margin: 0 auto, maar hoe krijg ik een footer ook alweer minimaal tot de onderkant van de pagina?
Da's voor meerder uitleg vatbaar...

Wil je een fixed footer onderaan? zoja: position:fixex, en wat hacks voor IE.
Wil je een layout met 100% hoogte? min-height:100%, evt. wat combi's met faux columns, en de nodige IE-hacks.

http://www.google.nl/search?q=css+100%25+height
http://www.google.nl/search?q=css+fixed+footer
pi_72133354
Heb nu 4 floats, maar die blijven niet binnen 1 div. Hoe kan ik dat toch goed hebben?
pi_72134751
quote:
Op dinsdag 25 augustus 2009 10:23 schreef Flaccid het volgende:
Heb nu 4 floats, maar die blijven niet binnen 1 div. Hoe kan ik dat toch goed hebben?
Wat wil je, dat de parent mee schaalt met de div's die erin gefloat worden, of bedoel je iets anders?
  dinsdag 25 augustus 2009 @ 11:42:21 #272
267127 de_DDoSwachter
F5 F5 F5 F5 F5 F5 F5 F5 F5 F5
pi_72135262
quote:
Op dinsdag 25 augustus 2009 10:23 schreef Flaccid het volgende:
Heb nu 4 floats, maar die blijven niet binnen 1 div. Hoe kan ik dat toch goed hebben?
90% kans dat je er een element met clear:both onder moet gooien. Zo niet dan zul je toch wat meer moeite moeten doen om je probleem uit te leggen.
pi_72137426
quote:
Op dinsdag 25 augustus 2009 11:42 schreef de_DDoSwachter het volgende:

90% kans dat je er een element met clear:both onder moet gooien
Of gewoon de parent div overflow:auto geven, en geen overbodige elementen toevoegen
pi_72137484
Clear:both heeft gewerkt thanks
  woensdag 26 augustus 2009 @ 20:31:49 #275
258901 Stockton
Billy Barracuda
pi_72181864
quote:
Op donderdag 20 augustus 2009 21:28 schreef Light het volgende:

[..]

Is het geen oplossing de container breder te maken? Anders kun je ook nog #headerleft een negatieve margin-left geven, en #headerright een negatieve margin-right.
De container breder maken was niet echt een optie, omdat me gehele layout dan weer moest veranderen.
Ik heb het uitstekende gedeelte van de afbeelding afgeknipt, en die in een Div gezet en de div de plek van links boven gegeven. De afbeelding lijkt nu één, maar is eigenlijk uit twee delen.

Toch iedereen bedankt voor de hulp
GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS GS
pi_72246880
quote:
Op donderdag 27 augustus 2009 22:33 schreef raaavi het volgende:
[ afbeelding ]

hier staat dus hoe ik een background img toevoeg.
maar wat nou als ik hem

1. niet herhalend
2. links midden uitgelijnd wil hebben

Hoe moet dat ?
  vrijdag 28 augustus 2009 @ 23:16:22 #277
82814 BBQ-kip
never say no to panda!
pi_72247116
quote:
Op vrijdag 28 augustus 2009 23:09 schreef raaavi het volgende:

[..]


Je "moet" nog even wat foto's neerplempen in je studentenkamer-topic
Kip, het meest veelzijjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdige stukje kaas, panda!
pi_72247156
quote:
Op vrijdag 28 augustus 2009 23:16 schreef BBQ-kip het volgende:

[..]

Je "moet" nog even wat foto's neerplempen in je studentenkamer-topic
was net me camera aan het aansluiten
  vrijdag 28 augustus 2009 @ 23:18:23 #279
82814 BBQ-kip
never say no to panda!
pi_72247189
quote:
Op vrijdag 28 augustus 2009 23:17 schreef raaavi het volgende:

[..]

was net me camera aan het aansluiten
Ah top
Kip, het meest veelzijjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdige stukje kaas, panda!
pi_72247377
quote:
Op vrijdag 28 augustus 2009 23:09 schreef raaavi het volgende:

[..]
Het is niet zo moeilijk als het misschien lijkt.

Er staat nu:
1background: url(/wp/wp-content/themes/atahualpa342/images/backgr.gif) repeat top left;


Als je dat verandert in
1background: url(/wp/wp-content/themes/atahualpa342/images/backgr.gif) no-repeat center left;

dan ben je er al. Moet je nog wel zorgen dat je het goede plaatje selecteert natuurlijk.
fokstok.nl
pi_72248178
quote:
Op vrijdag 28 augustus 2009 23:24 schreef Light het volgende:

[..]

Het is niet zo moeilijk als het misschien lijkt.

Er staat nu:
[ code verwijderd ]

Als je dat verandert in
[ code verwijderd ]

dan ben je er al. Moet je nog wel zorgen dat je het goede plaatje selecteert natuurlijk.
Ah geweldig, ik denk dat ik me toch maar moet gaan verdiepen in CSS. altijd handig bij die CMS's als je wilt editen

  FOK!-Schrikkelbaas maandag 31 augustus 2009 @ 21:48:36 #282
1972 Swetsenegger
Egocentrische Narcist
pi_72323199
1
2
3
4
5
6
7
8
9
10
11		<span style="display:block;text-align:right;height:30px;line-height:30px;">
Naam
<form style="padding:0;margin:0;" action="inloggen" method="post"> 
<input type="hidden" name="location" value=/klantGegevens.php />
<input type="submit" name="uitloggen" value="Uitloggen" />
</form>
<a href="cart" style="text-decoration:none;color:black">0 artikelen: <img src="image/cart.png" alt="winkelwagen" height="30px" width="20px" style="border:0;padding:0;vertical-align:middle" /></a>
    
<input type="text" size="20" style="background:url(image/searchbg.png) repeat-x;padding:0;border:1px solid #888" value="zoeken" />
<img src="image/search.png" alt="zoeken" height="30px" width="30px" style="padding:0;vertical-align:middle" />
</span>

Na de </form> krijg ik een newline waardoor de rest een regel eronder gepositioneerd wordt terwijl ik het naast elkaar wil. Iemand een simpele tip?
 | FOK! Schrikkelbaasch
pi_72323583
</form> ergens anders neerzetten?
—o—
  FOK!-Schrikkelbaas maandag 31 augustus 2009 @ 21:59:44 #284
1972 Swetsenegger
Egocentrische Narcist
pi_72323753


display:inline; in de form style does the trick.
 | FOK! Schrikkelbaasch
pi_72484804
Ben ik weer


Ik ben even een simpel html sitetje in elkaar aan het zetten voor mn school.
Vind het intranet van de HU maar moeilijk,, dus wil ik voor mn klas een beveiligde site in elkaar zetten.

http://i26.tinypic.com/adj51v.jpg

Hoe kan ik ervoor zorgen dat het middelste stuk zich automatisch uitrekt tot 100%, zelfs als er geen tekst in staat?

Dus dan heb je standaard, ongeacht de inhoud een witte balk in het midden:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16		<div id="container">
  <div id="header">
    <h1>Communicatie Management - D12 <a name="Atop"></a></h1>
  <!-- end #header --></div>
  <div id="mainContent">
    <h1> <a href="#sites">Sites</a> - <a href="#bestanden">Bestanden</a> </h1>
    <br />
<em>(Nieuwste bovenaan)</em>
    
   <!-- end #mainContent --></div>
  <div id="footer">
    <p><a href="#top">Top</a></p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>


1
2
3
4
5
6		<?php
.oneColElsCtrHdr #mainContent {
    padding: 0 20px; 
    background: #FFFFFF;
}
?>


[ Bericht 21% gewijzigd door raaavi op 06-09-2009 14:03:37 ]
pi_72485334
quote:
Op zondag 6 september 2009 13:53 schreef raaavi het volgende:

Hoe kan ik ervoor zorgen dat het middelste stuk zich automatisch uitrekt tot 100%, zelfs als er geen tekst in staat?
min-height: 100%; ook al wil je eigenlijk helemaal niet dat die balk 100% hoog is
pi_72485701
quote:
Op zondag 6 september 2009 14:11 schreef Roy_T het volgende:

[..]

min-height: 100%; ook al wil je eigenlijk helemaal niet dat die balk 100% hoog is
werkt niet


**ik los het wel anders op

Nevermind
pi_72519602
Weet iemand een oplossing voor het probleem dat hier beschreven staat? http://www.codingforums.com/showthread.php?t=151562

Ik zit namelijk met precies hetzelfde probleem. In IE staan ze netjes naast elkaar, maar in FF3, Opera en Chrome staat de submit-button ongeveer 3 pixels hoger dan het text-veld.
Trotse poster van het 37000000ste bericht ^O^
pi_72615260
Weet iemand hoe ik een container tot onder kan laten doorlopen? Wat voor height moet ik deze meegeven? En wat moet ik met de heights doen van de divs die er in staan?

Dank alvast .
pi_72615411
Als je eerst eens uitlegt wat je wil? "container tot onder laten doorlopen" is nou niet echt een industrieterm ofzo
pi_72636781
Opbouw:

menu
div1 div3
div2 div3
footer

Alles staat in een container. De footer staat al vast onderaan. Als div2 óf heel div3 (contentdiv) veel tekst heeft moet de container automatisch meegaan. Deze moet dus géén vaste height krijgen. Hoe kan ik dit realiseren? Heb de html, body op 100% staan en de container ook 100% gegeven.. Maar als er dan meer tekst in staat dan in het beeld past loopt de container niet mee door. Footer overigens ook niet.

edit: hier de code, wel net zo makkelijk:
CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66		html, body {
background: url(images/achtergrond.jpg) center repeat-x;
background-color: #4a4a4a;
margin: 0px;
padding: 0px;
font: 12px Arial, Helvetica, sans-serif;
height: 100%;
}

.menubalk {
background: #2e3235;
width: 100%;
height: 50px;
float: left;
color: #fff;
font: 13px Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
}

.container {
background: url(images/achtergrond_content.png) repeat-y;
margin: 0 auto;
width: 976px;
height: 100%;
}

.links {
width: 303px;
float: left;
}

.plaatje {
background: url(images/foto.jpg);
width: 303px;
height: 239px;
float: left;
margin-left: 17px;
}

.logo {
background: url(images/logo.jpg);
width: 303px;
height: 143px;
float: left;
margin-left: 17px;
}

.tekst {
width: 303px;
float: left;
margin-left: 17px;
}

.content {
width: 673px;
}

.footer {
background: #2e3235;
float: left;
width: 945px;
height: 44px;
margin-left: 16px;
position: absolute;
bottom: 0;
}


HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		<div class="menubalk">
   <div class="menu">
   <ul>
    <li><a href="#">Een</a></li>
    <li><a href="#">Twee</a></li>
    </ul>
    </div>
</div>
<div class="container">
    <div class="links">
       <div class="plaatje"></div>
        <div class="logo"></div>
        <div class="tekst">asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />
    <div class="content">
    </div>
</div>
<div class="footer"></div>


[ Bericht 42% gewijzigd door Nashje op 11-09-2009 11:21:31 ]
  maandag 14 september 2009 @ 02:48:52 #292
134533 donroyco
dus niet Donroyco
pi_72720953
-edit-

[ Bericht 96% gewijzigd door donroyco op 14-09-2009 03:38:23 ]
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_72800900
quote:
Op vrijdag 11 september 2009 10:36 schreef Nashje het volgende:
Opbouw:

menu
div1 div3
div2 div3
footer

Alles staat in een container. De footer staat al vast onderaan. Als div2 óf heel div3 (contentdiv) veel tekst heeft moet de container automatisch meegaan. Deze moet dus géén vaste height krijgen. Hoe kan ik dit realiseren? Heb de html, body op 100% staan en de container ook 100% gegeven.. Maar als er dan meer tekst in staat dan in het beeld past loopt de container niet mee door. Footer overigens ook niet.

edit: hier de code, wel net zo makkelijk:
CSS
[ code verwijderd ]

HTML
[ code verwijderd ]
Zou niet wetn hoe 't moet :P maar misschien heb je hier wat aan... staat wat css code voor verschillende type layouts. http://matthewjamestaylor(...)olumn-liquid-layouts

Een vraagje van mij kant...

1
2
3
4
5
6
7
8
9
10
11
12
13
14		tr:hover.tblhover {
   background-color: #ccc
}

<table>
   <tr class="tblhover">
      <td>cell 1</td>
      <td>cell 2</td>
   </tr>
   <tr class="tblhover">
      <td>cell 3</td>
      <td>cell 4</td>
   </tr>
</table>


Ik vroeg me af kan ik me css zo veranderen dat ik in feite i.p.v. 't bovenstaande ook dit zou kunnen doen

1
2
3
4
5
6
7
8
9
10		<table class="tblhover">
   <tr>
      <td>cell 1</td>
      <td>cell 2</td>
   </tr>
   <tr>
      <td>cell 3</td>
      <td>cell 4</td>
   </tr>
</table>
pi_72803451
Zelfs áls je CSS werkt, dan is dit netter:

1
2
3		tr.tblhover:hover {
   background-color: #ccc
}


En als je het wilt zoals je aangeeft:

1
2
3		table.tblhover tr:hover {
   background-color: #ccc
}
pi_73019769
Ik heb een pagina met 2 kolommen:

kolom HOOFD en kolom RECHTS

in kolom hoofd zitten óók twee kolommen, maar alléén op de voorpagina van de site. op alle andere pagina's is er maar 1 kolom. Kolom CONTENT en kolom FRONTPAGE

De hele pagina is 960px breed. Kolom RECHTS is 200px breed met 20px margin. Kolom FRONTPAGE is 430px breed.

Hoe zorg ik er nou voor dat kolom CONTENT de restruimte opvult. Oftewel, als er wel een frontpage is, is de breedte (automatisch) 310px en als er geen frontpage is, is de breedte 740px breed?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		<div id="RECHTS"></div>
<div id="HOOFD">
  <div id="FRONTPAGE"></div>
  <div id="CONTENT"></div>
</div>

[code]
#HOOFD {
  width: 740px;
}
#RECHTS {
  float: right;
  width: 200px;
  margin-left: 20px;
}
#CONTENT {
  ???
}
#FRONTPAGE {
  float: right;
  width: 430px;
}
Trotse poster van het 37000000ste bericht ^O^
pi_73020666
quote:
Op dinsdag 22 september 2009 @ 21:25 schreef daReaper het volgende:


Hoe zorg ik er nou voor dat kolom CONTENT de restruimte opvult. Oftewel, als er wel een frontpage is, is de breedte (automatisch) 310px en als er geen frontpage is, is de breedte 740px breed?
[ code verwijderd ]
Waarom zou je in hemelsnaam die div #frontpage gebruiken op pagina's waar je hem niet nodig hebt
—o—
pi_73021042
quote:
Op dinsdag 22 september 2009 21:25 schreef daReaper het volgende:
Ik heb een pagina met 2 kolommen:

kolom HOOFD en kolom RECHTS

in kolom hoofd zitten óók twee kolommen, maar alléén op de voorpagina van de site. op alle andere pagina's is er maar 1 kolom. Kolom CONTENT en kolom FRONTPAGE

De hele pagina is 960px breed. Kolom RECHTS is 200px breed met 20px margin. Kolom FRONTPAGE is 430px breed.

Hoe zorg ik er nou voor dat kolom CONTENT de restruimte opvult. Oftewel, als er wel een frontpage is, is de breedte (automatisch) 310px en als er geen frontpage is, is de breedte 740px breed?
[ code verwijderd ]
Gewoon in je stylesheet zetten dat die div #content 740px breed moet zijn. En bij de frontpage een extra stylesheet laden (na de gewone stylesheet) met daarin de breedte van #frontpage (430px) en #content (310px).
fokstok.nl
pi_73021246
quote:
Op dinsdag 22 september 2009 21:46 schreef doppendoosch het volgende:

[..]

Waarom zou je in hemelsnaam die div #frontpage gebruiken op pagina's waar je hem niet nodig hebt
nja die div wordt ook niet geladen bij andere pags dan de frontpage, was ik er even vergeten bij te zetten
Trotse poster van het 37000000ste bericht ^O^
pi_73021962
quote:
Op dinsdag 22 september 2009 21:54 schreef Light het volgende:

[..]

Gewoon in je stylesheet zetten dat die div #content 740px breed moet zijn. En bij de frontpage een extra stylesheet laden (na de gewone stylesheet) met daarin de breedte van #frontpage (430px) en #content (310px).
Heb het maar zo opgelost. Hoopte eigenlijk dat er een echte css oplossing zou zijn, maar zo werkt het ook
Trotse poster van het 37000000ste bericht ^O^
pi_73024935
quote:
Op dinsdag 22 september 2009 21:54 schreef Light het volgende:

En bij de frontpage een extra stylesheet laden (na de gewone stylesheet) met daarin de breedte van #frontpage (430px) en #content (310px).
Beetje overkill om daar een extra HTTP-request voor te doen. Dat kan prima in 1 stylesheet.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 12
Index

» digital corner

» development

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