[CSS] 2 inline divs even hoog - Softwareontwikkeling

donderdag 12 juli 2007 17:18

Acties:

Topicstarter

Hoi,

Ik heb 2 inline-divs naast elkaar, en nu wil ik dat de hoogte van beide even hoog is. Dus op het moment dat de rechts div meer inhoud krijgt, moet de linkse mee groeien.

Hoe krijg ik dat voor elkaar?

Dit is de CSS code die ik heb:

code:

div.links {
   display: table-cell !important;
   display: inline;
   width: 300px;
}

div.rechts {
   display: table-cell !important;
   display: inline;
   width: 700px;
   min-height: 350px;
}

Ik heb al geprobeerd er een container omheen te zetten en dan de hoogte van de 2 div's op 100% maar dat werkt ook niet...

Alvast Bedankt

donderdag 12 juli 2007 17:21

Acties:

TeeDee

CQB 241

Als jij geen achtergond afbeelding/kleur e.d. dan zou het toch niet uit moeten maken of de kleinere div meeschaalt?

Als je wel een achtergrond afbeelding/kleur hebt, zou je eens naar Faux Columns kunnen kijken.

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 12 juli 2007 17:22

Acties:

RickyHeijnen

Topicstarter

Ik heb alle overige CSS eruit gehaald. Het menu heeft inderdaad een achtergrond die uitgelijnd is op bottom. Vandaar...

Ik zal eens verder zoeken...

donderdag 12 juli 2007 20:36

Acties:

Fuzzillogic

Cool

Zoek eens naar 'faux columns'. Wat jij hier wilt, met display: table-cell werkt sowieso niet in IE. Maar ik hoop dat je dat niets kan interesseren

donderdag 12 juli 2007 22:18

Acties:

Cartman!

Een inline element kun je ook geen hoogte of breedte geven, deze wordt bepaald door de inhoud erin. Een div is niet voor niets een blocklevel element

donderdag 12 juli 2007 22:24

Acties:

Fuzzillogic

Cool

Cartman! schreef op donderdag 12 juli 2007 @ 22:18:
Een inline element kun je ook geen hoogte of breedte geven, deze wordt bepaald door de inhoud erin. Een div is niet voor niets een blocklevel element

Daarvoor is inline-block dan weer. En raad eens: dat werkt niet in Firefox!

(Wel in IE, Opera, Safari...)

vrijdag 13 juli 2007 11:34

Acties:

Cadezo

Fuzzillogic schreef op donderdag 12 juli 2007 @ 22:24:
[...]

Daarvoor is inline-block dan weer. En raad eens: dat werkt niet in Firefox! (Wel in IE, Opera, Safari...)

Anders gebruik je toch twee stylesheets: 1 voor IE en 1 voor de overige browsers...

vrijdag 13 juli 2007 11:39

Acties:

Arjan90

Waarom moeten ze beide even hoog zijn? Op mijn eigen site bijv. heb ik een background op repeat-x staan, waar ook 2 divs naast elkaar staan die eruit moeten zien alsof ze even lang zijn. Door deze background op repeat-x te zetten, met een plaatje van bijvoorbeeld 300px, zet ik de min-height op 300px bij beiden en zet ik er een container omheen met als achtergrondkleur dezelfde kleur als het plaatje onderaan heeft.

Voorbeeld

Ik weet alleen niet of dit voor jou ook op gaat? Dit leek mij de simpelste oplossing

"Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid."

vrijdag 13 juli 2007 12:19

Acties:

Verwijderd

Fuzzillogic schreef op donderdag 12 juli 2007 @ 20:36:
Zoek eens naar 'faux columns'. Wat jij hier wilt, met display: table-cell werkt sowieso niet in IE. Maar ik hoop dat je dat niets kan interesseren

Hoezo?
Het doel is toch om uiteindelijk een website te maken die gebruikers met verschillende browsers kunnen bekijken?

Dat je wat tegen microsoft of IE hebt moet er verder niks toe doen.

[ Voor 10% gewijzigd door Verwijderd op 13-07-2007 12:19 ]

vrijdag 13 juli 2007 13:03

Acties:

Fuzzillogic

Cool

Sp!tF!re schreef op vrijdag 13 juli 2007 @ 11:39:
Waarom moeten ze beide even hoog zijn? Op mijn eigen site bijv. heb ik een background op repeat-x staan, waar ook 2 divs naast elkaar staan die eruit moeten zien alsof ze even lang zijn. Door deze background op repeat-x te zetten, met een plaatje van bijvoorbeeld 300px, zet ik de min-height op 300px bij beiden en zet ik er een container omheen met als achtergrondkleur dezelfde kleur als het plaatje onderaan heeft.

Ja, dat is dus faux columns

Het idee is idd dat je met een achtergrondplaatje in de kolomcontainer doet alsof er afzonderlijke kolommen zijn. Heel simpel eigenlijk, en heel elegant.

Verwijderd schreef op vrijdag 13 juli 2007 @ 12:19:
[...]
Hoezo?
Het doel is toch om uiteindelijk een website te maken die gebruikers met verschillende browsers kunnen bekijken?

Dat je wat tegen microsoft of IE hebt moet er verder niks toe doen.

En wat als je site niet blijkt te werken in Firefix 1.0? Ga je daar ook een work-around voor maken? IE7 is al ruim een half jaar uit. Move on people. Ligt natuurlijk wel aan je doelgroep. Voor mijn prive-site heb ik IE-support al jaren geleden opgegeven.

[ Voor 6% gewijzigd door Fuzzillogic op 13-07-2007 13:05 ]

vrijdag 13 juli 2007 13:26

Acties:

Verwijderd

Fuzzillogic schreef op vrijdag 13 juli 2007 @ 13:03:
[...]

Ja, dat is dus faux columns Het idee is idd dat je met een achtergrondplaatje in de kolomcontainer doet alsof er afzonderlijke kolommen zijn. Heel simpel eigenlijk, en heel elegant.

[...]

En wat als je site niet blijkt te werken in Firefix 1.0? Ga je daar ook een work-around voor maken? IE7 is al ruim een half jaar uit. Move on people. Ligt natuurlijk wel aan je doelgroep. Voor mijn prive-site heb ik IE-support al jaren geleden opgegeven.

Als de klant daarom zou vragen, dan zou ik wel moeten.

Verder geef ik je gelijk dat je niet met alle versies rekening kan houden, maar nu doel je wel op een specifieke versie (ff 1.0) maar je opmerking was over IE in het algemeen.

vrijdag 13 juli 2007 13:30

Acties:

Arjan90

Fuzzillogic schreef op vrijdag 13 juli 2007 @ 13:03:
[...]

Ja, dat is dus faux columns Het idee is idd dat je met een achtergrondplaatje in de kolomcontainer doet alsof er afzonderlijke kolommen zijn. Heel simpel eigenlijk, en heel elegant.

Ach zo, weer wat geleerd

En dat heb ik nog wel zelf bedacht, haha!

Voor de TS: Ik zou inderdaad gewoon faux columns doen indien mogelijk, dit werkt sowieso in FF2, IE6 (met kleine workaround voor min-height; zie onderstaand) en IE7, voor mij zijn dit de belangrijkste browsers

Cascading Stylesheet:

1
2
3

  min-height: 420px;
  height:auto !important;
  height: 420px;

De workaround voor IE6

Je kunt deze gewoon in het 'algemene' css bestand zetten, aangezien FireFox uitgaat van de min-height (evenals IE7 als ik mij niet vergis, maar dit weet ik niet zeker, min-height werkt namelijk wel op IE7, maar mogelijk lees IE7 nu de IE6 fix, maar werkt deze eveneens voor IE7

)

"Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid."

vrijdag 13 juli 2007 13:32

Acties:

Tjolk

Kijk gewoon in je statistieken welke browsers gebruikt worden door je bezoekers en hoeveel. Bij mij gebruikt nog 53% van de bezoekers IE6 dus daar heb ik gewoon rekening mee te houden (hoe vervelend ook).

On topic: Kun je niet een div om beide divs heenzetten?

Tjolk is lekker. overal en altijd.

vrijdag 13 juli 2007 13:45

Acties:

TeeDee

CQB 241

Sp!tF!re schreef op vrijdag 13 juli 2007 @ 13:30:
De workaround voor IE6 Je kunt deze gewoon in het 'algemene' css bestand zetten, aangezien FireFox uitgaat van de min-height (evenals IE7 als ik mij niet vergis, maar dit weet ik niet zeker, min-height werkt namelijk wel op IE7, maar mogelijk lees IE7 nu de IE6 fix, maar werkt deze eveneens voor IE7 )

offtopic:
Nog makkelijker: kijk eens naar conditional statements voor CSS. Browserspecifiek CSS aanbieden.

Edit: Fuzzillogic: is dat niet enorme overkill voor zoiets triviaals als een paar css hacks?

[ Voor 8% gewijzigd door TeeDee op 13-07-2007 14:15 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

vrijdag 13 juli 2007 14:07

Acties:

Fuzzillogic

Cool

TeeDee schreef op vrijdag 13 juli 2007 @ 13:45:
[...]

Nog makkelijker: kijk eens naar conditional statements voor CSS. Browserspecifiek CSS aanbieden.

Nog makkelijker: Dean Edwards' IE7 script.

En natuurlijk maak ik als professional sites goedwerkend voor IE6 & IE7. Maar voor m'n eigen site, neuh, ik ga mezelf niet kwellen. Ik hoop dat meer lui dat zouden doen. Hoe eerder we van IE6 verlost zijn, hoe beter. IE7 is een stap vooruit, maar nog steeds te beperkt.

[ Voor 14% gewijzigd door Fuzzillogic op 13-07-2007 14:08 ]

vrijdag 13 juli 2007 15:17

Acties:

Verwijderd

De gemakkelijkste manier (volgens mij) om een onderscheid te maken tussen IE en de andere browserst staat hier uitgelegd. Werkt altijd en valideert ook nog...

code:

1
2
3

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

En de oplossing voor je probleem is inderdaad faux columns

vrijdag 13 juli 2007 17:20

Acties:

Verwijderd

Verwijderd schreef op vrijdag 13 juli 2007 @ 15:17:
De gemakkelijkste manier (volgens mij) om een onderscheid te maken tussen IE en de andere browserst staat hier uitgelegd. Werkt altijd en valideert ook nog...
code:
1
2
3

Nou, ik ga ervanuit dat iedereen hier toch wel van op de hoogte is

vrijdag 13 juli 2007 18:26

Acties:

Verwijderd

Ik zie anders nog genoeg "professionele" sites met de meest onmogelijke css-hacks in dezelfde stylesheet gepleurd hebben om het ding toch maar werkende te krijgen...

Je bent zelf actief genoeg op [Gathering of Tweakers] Gilde van Front-Enders om te weten hoe zeer er vraag is naar dingen die iedereen al lang weet. Waarmee ik niet wil zeggen of/dat ik voor- of tegenstander ben van dit initiatief.

[ Voor 50% gewijzigd door Verwijderd op 13-07-2007 21:28 . Reden: [Gathering of Tweakers] Gilde van Front-Enders ]