[CSS] voor dummies #16

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_92962840
Uhm, dacht dat ik dat al gezegd had. Niet dus :D

Als er geen position:absolute wordt meegegeven is de achtergrond maar 10px hoog of iets.
De hoogte is auto, 100% maken van de hoogte van de div maakt ook niets uit.
pi_92962873
overflow:hidden ofzo geprobeerd?
zcflevo.nl
  vrijdag 18 februari 2011 @ 13:53:31 #4
334357 Emery
Heavy Metal King!
pi_92962877
Je kunt toch een min-height meegeven en alsnog de hoogte op auto houden?
"My name is Emery and primarily I make noises - and ideas".
pi_92962904
quote:
7s.gif Op vrijdag 18 februari 2011 13:53 schreef Emery het volgende:
Je kunt toch een min-height meegeven en alsnog de hoogte op auto houden?
Kan niet, aangezien de hoogte in een andere pagina anders is.

@Komttijd, even zien!
pi_92962927
Dankje Komttijd O+
  zondag 20 februari 2011 @ 00:19:16 #7
63192 ursel
"Het Is Hier Fantastisch!
pi_93036865
Iemand die me nog even kan helpen waarom mijn div "wrapper" niet meegroeit?
Heb momenteel zijn height vast gezet. Maar als ik hem een height 100% of een min-height 100% geef, dan ben ik mijn gehele witte vlak kwijt.

Linkje
Dat is de langste pagina.

Overigens schijnt er nog een bug op de index.php pagina te zitten (volgens mij in IE7, want in IE8 zie ik hem niet :') )
Menu bovenaan schijnt eruit te lopen. Iemand idee hoe dat te fixen?

Alvast erg bedankt. :*
pi_93046432
quote:
1s.gif Op zondag 20 februari 2011 00:19 schreef ursel het volgende:
Iemand die me nog even kan helpen waarom mijn div "wrapper" niet meegroeit?
Heb momenteel zijn height vast gezet. Maar als ik hem een height 100% of een min-height 100% geef, dan ben ik mijn gehele witte vlak kwijt.

Linkje
Dat is de langste pagina.
Kan je niet gewoon background-color: #FFF op #middle zetten? Of de min-height er van af halen. Lost in beide gevallen het probleem op.

quote:
Overigens schijnt er nog een bug op de index.php pagina te zitten (volgens mij in IE7, want in IE8 zie ik hem niet :') )
Menu bovenaan schijnt eruit te lopen. Iemand idee hoe dat te fixen?
Homepage zit sowieso een beetje vreemd in elkaar als je het mij vraagt.

De wrapper is absoluut gepositioneerd, terwijl het mij beter lijkt om het te doen op deze manier.

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		#wrapper {
   position: relative;
   width: 980px;
   margin: 0 auto;
   text-align: left;
}

#headerMenu {
    float: right;
    margin-left: 20px;
    position: absolute;
    width: 470px;
}

#leftMenu {
    position: absolute;
    left: 7px;
    top: 195px;
    width: 80px;
}

#content {
    height: 308px;
    margin-left: 360px;
    margin-top: 230px;
    padding: 0 10px;
    width: 430px;
}

#lowerText {
    clear: both;
    color: white;
    height: 100px;
    margin: 0 0 0 25px;
    width: 200px;
}

Volgens mij kom je dan al aardig in de buurt van de oplossing.
Elite
Feyenoordsupporters gaan naar de hemel, als er in de hel geen plaats meer is
Tegen TTIP
  zondag 20 februari 2011 @ 10:57:55 #9
63192 ursel
"Het Is Hier Fantastisch!
pi_93047399
bedankt. ga vanmiddag even kijken. ben een programmeur, geen stijler, maar moest even doen dit.
  zondag 20 februari 2011 @ 14:46:20 #10
63192 ursel
"Het Is Hier Fantastisch!
pi_93056851
quote:
14s.gif Op zondag 20 februari 2011 10:12 schreef Happel het volgende:

[..]

Kan je niet gewoon background-color: #FFF op #middle zetten? Of de min-height er van af halen. Lost in beide gevallen het probleem op.

[..]
Helpt niet. Om een of andere reden lijkt zowel #wrapper als #middle geen hoogte te hebben. :?
quote:
Homepage zit sowieso een beetje vreemd in elkaar als je het mij vraagt.

De wrapper is absoluut gepositioneerd, terwijl het mij beter lijkt om het te doen op deze manier.

[ code verwijderd ]

Volgens mij kom je dan al aardig in de buurt van de oplossing.
Hmm.. geprobeerd, dan ziet het geheel er zo uit.

pi_93057485
Als je alles absoluut positioneert, is het onmogelijk je layout mee te laten groeien met je tekst.
zcflevo.nl
pi_93058307
Zo zie je maar weer dat CSS (lees: front-end development) echt een vak apart is, en niet iets dat je er 'even' naast doet ;)
Nee.
  zondag 20 februari 2011 @ 16:37:14 #13
163768 Happel
Je Suis Roi
pi_93062579
quote:
1s.gif Op zondag 20 februari 2011 14:46 schreef ursel het volgende:

[..]

Helpt niet. Om een of andere reden lijkt zowel #wrapper als #middle geen hoogte te hebben. :?

[..]

Hmm.. geprobeerd, dan ziet het geheel er zo uit.

[ afbeelding ]
Mens, volgens mij lag ik nog half te slapen vanmorgen. :')

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		#wrapper{
    position: relative;
    margin: 0 auto;
    height: 704px;
}

#headerMenu{
float: right;
width: 470px; }

#leftMenu{
    position: absolute;
        left: 7px;
        top: 195px;
}

#content{
    float: left; 
    margin: 190px 0 0 360px;
    padding: 0 10px;
    width: 430px;
}

#lowerText{
    bottom: 5px;
    left: 36px;    
    color: white;
    height: 122px;
    position: absolute;
    width: 200px;
}

Dit zou zeker moeten werken. Getest op IE (7, 8 en 9), FF, Chrome en Safari. Anders kan ik maar beter een andere baan zoeken. :')

Persoonlijk zou ik de site anders opzetten, maar daar zal ik je verder niet mee vermoeien.
Elite
Feyenoordsupporters gaan naar de hemel, als er in de hel geen plaats meer is
Tegen TTIP
  zondag 20 februari 2011 @ 17:22:14 #14
63192 ursel
"Het Is Hier Fantastisch!
pi_93064545
quote:
14s.gif Op zondag 20 februari 2011 16:37 schreef Happel het volgende:

[..]

Mens, volgens mij lag ik nog half te slapen vanmorgen. :')

[ code verwijderd ]

Dit zou zeker moeten werken. Getest op IE (7, 8 en 9), FF, Chrome en Safari. Anders kan ik maar beter een andere baan zoeken. :')

Persoonlijk zou ik de site anders opzetten, maar daar zal ik je verder niet mee vermoeien.
Je hebt geluk :+
Kleine aanpassingen nog moeten doen, maar dat viel wel mee. _O_ :* O+

quote:
1s.gif Op zondag 20 februari 2011 15:13 schreef PimD het volgende:
Zo zie je maar weer dat CSS (lees: front-end development) echt een vak apart is, en niet iets dat je er 'even' naast doet ;)
I know. :') Soms ontkom je er helaas niet aan als je andere bronnen het laten afweten en de klant toch doorwil. :'(
Tis in ieder geval niet mijn favoriete bezigheid.
pi_93102638
klik op de afbeelding voor grotere weergave


Ik ben bezig met het positioneren van een contactforum met behulp van een div binnenin een andere div.
In FF ziet het alles eruit zoals het hoort, maar in IE (en opera) blijft het form tegen de linkerkant van de contentdiv plakken.
Voor de duidelijkheid heb ik de divs een achtergrond kleur gegeven. Grijs is dus de contentdiv en paars is de formdiv.
Ik heb met margin instellingen zitten spelen maar het probleem blijft bestaan: IE en FF laten niet hetzelfde zien. (ook de paarse achtergrond van de formdiv wordt niet meegenomen in IE)
Op de afbeelding is ook te zien dat de footer (lijn van 1px hoog) verder naar beneden is geschoven in IE terwijl deze in FF, zoals het hoort, onder tegen de contentdiv aan zit.
De text 'Contact' met het witte vlak is een .png verwerkt in een andere div.

De code staat in de onderstaande spoiler. Het is veel scrollwerk omdat ik de code niet fatsoenlijk in de code tags kreeg..

SPOILER
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.


[ Bericht 47% gewijzigd door karton op 21-02-2011 19:20:57 ]
pi_93114744
Werk je wel in standards-mode?

En als je in het vervolg gewoon alleen de relevante code post, hoeven we niet te scrollen en is het nog minder zoekwerk ook.
zcflevo.nl
pi_93114887
Of zet gewoon een testcase online.
Nee.
pi_93115838
quote:
5s.gif Op maandag 21 februari 2011 19:09 schreef KomtTijd... het volgende:
Werk je wel in standards-mode?

En als je in het vervolg gewoon alleen de relevante code post, hoeven we niet te scrollen en is het nog minder zoekwerk ook.
Hij staat in standard mode.

De code uit m'n eerdere post heb ik aangepast

[ Bericht 40% gewijzigd door karton op 21-02-2011 20:18:57 ]
pi_93116091
Jaeuh. Gebruik een text-editor met fatsoenlijke syntax-highlighting ofzo }:|

Of als je het dan nog niet ziet, haal 'm door de W3 validator.
zcflevo.nl
pi_93117181
quote:
1s.gif Op maandag 21 februari 2011 19:34 schreef KomtTijd... het volgende:
Jaeuh. Gebruik een text-editor met fatsoenlijke syntax-highlighting ofzo }:|
dreamweaver kleurt er anders stevig op los en geeft geen errors, ook niet op compatibility.
quote:
Of als je het dan nog niet ziet, haal 'm door de W3 validator.
Die kende ik nog niet ^O^, daar eens even naar kijken.

edit/
Hij doet het nu. Een niet afgesloten div was de fout blijkbaar, dankzij die validator gevonden.

[ Bericht 1% gewijzigd door karton op 21-02-2011 20:18:48 ]
pi_93617648
ik vind css nog steeds rottig maar toch stug door blijven zetten...:

SPOILER: css
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
ik krijg de #right niet zo dat hij de hele breedte beslaat tussen de margins.. hij heeft nu de grootte van de tekst (test) wat er in staat, is dit op te lossen? of hoort dat erbij?

SPOILER: html
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.


[ Bericht 8% gewijzigd door mschol op 03-03-2011 22:57:04 ]
pi_93617993
Bij mij in Firefox op de Mac is ie gewoon breed, en volgens mij is je code ook correct. Ik zie tenminste zo 1-2-3 geen opvallende fouten (afgezien van de class/id naamgeving).
Nee.
pi_93618506
quote:
1s.gif Op donderdag 3 maart 2011 22:48 schreef PimD het volgende:
Bij mij in Firefox op de Mac is ie gewoon breed, en volgens mij is je code ook correct. Ik zie tenminste zo 1-2-3 geen opvallende fouten (afgezien van de class/id naamgeving).
:D *schaam*
klopt, er staat nog een width in right van 80%
dan kan ik em aardig positioneren, maar kan ik de rechterrand niet gelijk trekken met de top en de footer... (dat het dus 1 rechte lijn naar beneden is)
(hij wijkt dan net een aantal pixels af).
ik pas de code even aan...
pi_93618646
Moet je 'm ook float:right geven i.p.v. float:left he :)
Nee.
pi_93618931
quote:
1s.gif Op donderdag 3 maart 2011 22:59 schreef PimD het volgende:
Moet je 'm ook float:right geven i.p.v. float:left he :)
:@ , juist... :|W |:(

oke, hoe kan ik (indien mogelijk) em zo flexibel houden dat er tussen de linker en de rechter float een kleine ruimte blijft zonder dat de rechterfloat onder de linker wordt gepositioneerd of dat het gat tussen die 2 enorm groot wordt? :P
als je nu de width op b.v. 84% zet dan ziet hij er bij scherm formaat X goed uit, maar ga ik in b.v. een kleiner window werken dan issie verrot..
ik ga nog even kijken of ik iets kan met em als unitformaat..
pi_93619085
Door je paddings en margins ook met percentages te doen en te zorgen dat dit in totaal op 100% uit komt. Zul je wel afrondingsproblemen krijgen in IE, maar ja.
Nee.
pi_93619387
quote:
1s.gif Op donderdag 3 maart 2011 23:07 schreef PimD het volgende:
Door je paddings en margins ook met percentages te doen en te zorgen dat dit in totaal op 100% uit komt. Zul je wel afrondingsproblemen krijgen in IE, maar ja.
oke, thnx.. ik ga weer eens knutselen
pi_93735193
Hoi CSS-ers.

Vraagje; is het mogelijk je css zo te bouwen dat je lay-out in elke resolutie klopt? Neem aan dat je niet met pixels moet positioneren maar met procenten, maar zelfs dat lukt niet helemaal bij mij. :(
  zondag 6 maart 2011 @ 18:41:49 #29
230788 n8n
Pragmatisch
pi_93735250
quote:
1s.gif Op zondag 6 maart 2011 18:40 schreef SJanoski het volgende:
Hoi CSS-ers.

Vraagje; is het mogelijk je css zo te bouwen dat je lay-out in elke resolutie klopt? Neem aan dat je niet met pixels moet positioneren maar met procenten, maar zelfs dat lukt niet helemaal bij mij. :(
ja dat heet fluid, hou er rekening mee dat er schermresoluties op desktops variëren van 1000 tot 2500 pixels. Schets van de bedoeling?
“Specialization is for insects”.—Robert Heinlein
pi_93735466
Gaat hier om het aanpassen van een webshop waarbij ik de productpagina indeel in 3 'kolommen'. De laatste kolom (waar de buttons add to cart en dergelijke staan) geef ik een vaste positie. Maar moet ik er gewoon vanuit gaan dat als ik alles binnen de 1000 pixels houdt (ivm 1024x***) dat het geen grote problemen gaat geven?
  zondag 6 maart 2011 @ 18:50:42 #31
230788 n8n
Pragmatisch
pi_93735546
yes, of 960px is dat makkelijk met rekenen, kan je die 40 eventueel als marge gebruiken. Ga zelf eigenlijk nooit boven de 980 tenzij deels fluid
“Specialization is for insects”.—Robert Heinlein
pi_93736036
Maar is het dus zo dat ik alles absoluut kan positioneren met pixels, zolang ik maar onder de 960 breedte kom, en dat dat geen problemen gaat opleveren met resoluties? (uitgezonderd 800x***).
  zondag 6 maart 2011 @ 19:07:17 #33
230788 n8n
Pragmatisch
pi_93736117
quote:
1s.gif Op zondag 6 maart 2011 19:04 schreef SJanoski het volgende:
Maar is het dus zo dat ik alles absoluut kan positioneren met pixels, zolang ik maar onder de 960 breedte kom, en dat dat geen problemen gaat opleveren met resoluties? (uitgezonderd 800x***).
Als je het goed doet en dat de beste manier is wel ja
“Specialization is for insects”.—Robert Heinlein
pi_93736407
Laatste vraag: Hoe kan ik mijn productinfo indelen in 3 vaste kolommen?

Iets als:

Foto's | Productomschrijving | Knoppen.

Werk verder met PHP.
pi_93740624
quote:
1s.gif Op zondag 6 maart 2011 19:15 schreef SJanoski het volgende:
Laatste vraag: Hoe kan ik mijn productinfo indelen in 3 vaste kolommen?

Iets als:

Foto's | Productomschrijving | Knoppen.

Werk verder met PHP.
...Door de eerste de beste "hoe maak ik een website" tutorial door te lezen en gewoon te proberen.
zcflevo.nl
pi_93750176
Gebruik gewoon een tabel joh :')
Nee.
  zondag 6 maart 2011 @ 23:58:33 #37
230788 n8n
Pragmatisch
pi_93752918
quote:
1s.gif Op zondag 6 maart 2011 22:59 schreef PimD het volgende:
Gebruik gewoon een tabel joh :')
:')
“Specialization is for insects”.—Robert Heinlein
pi_93754305
quote:
1s.gif Op zondag 6 maart 2011 22:59 schreef PimD het volgende:
Gebruik gewoon een tabel joh :')
precies, waarom moeilijk doen als et makkelijk kan..
pi_93923763
Heb een vraagje.
In Chrome krijg ik een blok precies waar ik wil maar in FF staat ie iets van 45px lager. Hoe kan dat?

CSS:
#highlight{
background-color:#f2f2f2;
position: absolute;
margin: 45px 0px 0px -900px;
height: 16px;
width: 960px;
}
pi_93923889
Margin van een parent of sibling?
pi_93924187
quote:
1s.gif Op donderdag 10 maart 2011 20:47 schreef Tegan het volgende:
Margin van een parent of sibling?
uhm....sorry...ook hier een hobby-ist...een wat?
pi_93924310
1
2
3
4
5		<div class="a">
     <div class="1"></div>
     <div class="2"></div>
     <div class="3"></div>
</div>
a is parent van children 1, 2 en 3. 1, 2 en 3 zijn siblings :).
pi_93924666
quote:
1s.gif Op donderdag 10 maart 2011 20:52 schreef Tegan het volgende:

[ code verwijderd ]

a is parent van children 1, 2 en 3. 1, 2 en 3 zijn siblings :).
aha..ok..dan denk ik een sibling

dit staat in mijn pagina
1
2
3
4		<body>
<div id="container">
<?php include("php/navbox.php"); ?>
</div>

in de navbox staat onderaan de highlight
1
2
3
4		vanalleshierboven
<div id="highlight">
</div>
</div>
pi_93925002
Hier kan ik ook niets mee... Gewoon zelf even spelen met de margin-settings van al je elementen.
pi_93925194
quote:
1s.gif Op donderdag 10 maart 2011 21:02 schreef Tegan het volgende:
Hier kan ik ook niets mee... Gewoon zelf even spelen met de margin-settings van al je elementen.
maar waar moet ik dan ergens beginnen?
want margins voor chrome en moz zouden hetzelfde moeten zijn?
of moet ik voor 1vd2 een fix maken (en dan ook voor IE)
pi_93925363
quote:
1s.gif Op donderdag 10 maart 2011 21:04 schreef MrNiles het volgende:

[..]

maar waar moet ik dan ergens beginnen?
want margins voor chrome en moz zouden hetzelfde moeten zijn?
of moet ik voor 1vd2 een fix maken (en dan ook voor IE)
Browsers hebben overal eigen standaarden voor.

http://css-class.com/test(...)e-sheet-defaults.htm

Dus beter kan je alles vastzetten op een waarde ipv een standaard waarde gebruiken. Wat waarschijnlijk de oorzaak van je probleem is :).
pi_93927201
quote:
1s.gif Op donderdag 10 maart 2011 20:46 schreef MrNiles het volgende:
Heb een vraagje.
In Chrome krijg ik een blok precies waar ik wil maar in FF staat ie iets van 45px lager. Hoe kan dat?

CSS:
#highlight{
background-color:#f2f2f2;
position: absolute;
margin: 45px 0px 0px -900px;
height: 16px;
width: 960px;
}
Ik zou sowieso geen margin gebruiken voor het positioneren als je position:absolute gebruikt. Dan kun je beter positioneren met left/right en top/bottom.
fokstok.nl
pi_93928323
quote:
1s.gif Op donderdag 10 maart 2011 21:28 schreef Light het volgende:

[..]

Ik zou sowieso geen margin gebruiken voor het positioneren als je position:absolute gebruikt. Dan kun je beter positioneren met left/right en top/bottom.
dat lijkt m te zijn, FF en Chrome zijn nu hetzelfde.....ff IE installeren en dan checken...zal wel hopeloos zijn :)
pi_94012126
Bij het ontwikkelen ben ik erachter gekomen dat Internet Explorer 7 weer roet in het eten gooit. Waar alle andere moderne browsers het normaal doen, heeft IE7 de volgende 'quirk', en ik heb het tot nu toe nog niet kunnen oplossen. Helaas zijn er nog genoeg IE7 gebruikers dus wil ik het graag oplossen.

Op deze pagina is te zien dat in alle moderne browsers de grijze vakken met inhoud netjes worden uitgelijnd.

http://www.vanzoelen.nl/zoekwoord/verbouw/

In IE7 is dat niet zo, de linkerrij is steevast verticaal verschoven:



Code voor de grijze DIV:

1
2
3
4
5
6
7
8
9
10		.projectthumb
{ 
padding: 5px 5px 5px 5px; 
background:#eceff1;width:170px;
float:left;
margin:5px 5px 5px 0px;
height: 170px; 
overflow: hidden; 
display: inline-block!important;
}
url
pi_94013210
Probeer eens vertical-align:top toe te voegen en voor IE6 en IE7 display:inline ipv inline block.
Nee.
pi_94014554
Werkt niet.. nog steeds precies hetzelfde.
url
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies #16
Index

» digital corner

» development

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