[CSS] div binnen div rechts onderin uitlijnen* - Softwareontwikkeling

donderdag 23 februari 2006 00:27

Acties:

0 Henk 'm!

Anoniem: 169287

Topicstarter

sorry, ik ben niet goed in het onderscheid tussen links en rechts , Helaas kan ik de titel niet meer aanpassen

Ik probeer rechts onderin een div een plaatje te tonen. Ik slaag hier helaas niet in.
Op http://nergens.org/projects/wa/ kan men de site bekijken. Verder is het volgende plaatje de afbeelding van hoe het er nu uitziet: http://nergens.org/projects/wa/screenshot.png en als alles goed werkt dan zou ik het volgende willen zien: http://nergens.org/projects/wa/wanted.png

Ik heb de volgende html code gebruikt:

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="media/wa.css" />
</head>
<body>

<div class="canvas">
<div class="header">

<div class="header-lefttop">
[img]"media/header-lefttop.gif"[/img]
</div>
<div class="header-logo">
[img]"media/header-logo.gif"[/img]
</div>
<div class="header-rightbottom">
[img]"media/header-rightbottom.gif"[/img]
</div>

</div>
<div class="seperator">
<div>
</div>
</body>
</html>
toon volledige bericht

en de volgende css:

body {
background-color: #9db4ba;
}
.canvas {
background-color: #eef2f3;
margin-left: 200px;
margin-right: 200px;
margin-top: 50px;
font-family: "impact";
}
.header {
background-repeat: repeat-x;
background-image: url(header-background.jpg);
height: 255px;
width: 100%;
background-color: #ffffff;
}
.header-lefttop {
position: absolute;
margin-top: 0px;
margin-left: 0px;
}
.header-logo {
position: absolute;
margin-left: 50px;
margin-top: 50px;
}
.header-rightbottom {
/* border-style: solid;*/
position: relative;
text-align: right;
height: 100%;
/*vertical-align: bottom;*/
}
.seperator {
background-repeat: repeat-x;
background-image: url(seperator-background.gif);
height: 12px;
width: 100%;
}
toon volledige bericht

Eventuele andere opmerkingen zijn ook altijd welkom, want ik ben nog een n00b op css gebied

[ Voor 13% gewijzigd door Anoniem: 169287 op 23-02-2006 00:28 ]

donderdag 23 februari 2006 01:01

Acties:

0 Henk 'm!

Boelie-Boelie

Waarom zitten dat linkerbovenhoekje en dat logo niet in de afbeelding? Beetje veel div'jes nu, daar zijn ze niet echt voor bedoeld. Anywayz, je zou het kunnen oplossen door - jawel - een div om die twee plaatjes heen te plaatsen, ter grootte van .header, en dat rechteronderhoekje dan als background-image van die nieuwe div te plaatsen met de waarden no-repeat bottom right.

[ Voor 5% gewijzigd door Boelie-Boelie op 23-02-2006 01:01 ]

Cogito ergo dubito

donderdag 23 februari 2006 08:53

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

sorry, ik ben niet goed in het onderscheid tussen links en rechts , Helaas kan ik de titel niet meer aanpassen

Daar kan je ook de Afbeeldingslocatie: http://gathering.tweakers.net/global/templates/tweakers/images/icons/icon_hand.gif

voor gebruiken

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 23 februari 2006 09:14

Acties:

0 Henk 'm!

Vinzzz243

of je maakt de buitenste div { position: relative; } en de binnenste { position: absolute; right: 0; bottom: 0; }

donderdag 23 februari 2006 10:57

Acties:

0 Henk 'm!

Anoniem: 169287

Topicstarter

Vinzzz schreef op donderdag 23 februari 2006 @ 09:14:
of je maakt de buitenste div { position: relative; } en de binnenste { position: absolute; right: 0; bottom: 0; }

Ik heb jouw aanpassingen doorgevoerd (en er nog een kader omheen gezet). Dit valt te bekijken op: http://nergens.org/projects/wa/vinzzz/
Misschien ben ik nog wat vergeten? want hij doet het nog niet

donderdag 23 februari 2006 03:12

Acties:

0 Henk 'm!

Sappie

De Parasitaire Capaciteit!

Waarom neem je, zoals Boelie-Boelie ook al aangeeft, het een en ander niet in één en dezelfde image op?

Het rechterplaatje staat nu nog altijd bovenaan omdat je de div waarin dat plaatje zich bevindt een hoogte van 100% hebt pgegeven.

Verder bestaat er ook zoiets al het id-attribuut van een element (je gebruikt nu alleen maar classes).
_{Ook kun je je misschien beter eerst eens wat verdiepen in CSS, aangezien je, zoals je zelf al aangeeft, noob bent op dit gebied.}

edit:
wtf 03:12.. zet die klok eens goed

[ Voor 6% gewijzigd door Sappie op 23-02-2006 11:08 ]

Specs | Audioscrobbler

donderdag 23 februari 2006 11:14

Acties:

0 Henk 'm!

Anoniem: 169287

Topicstarter

Boelie-Boelie schreef op donderdag 23 februari 2006 @ 01:01:
Waarom zitten dat linkerbovenhoekje en dat logo niet in de afbeelding? Beetje veel div'jes nu, daar zijn ze niet echt voor bedoeld.

Ik wil dat mijn pagina geresized kan worden (liquid flow), verder zat ik nog te denken om de achergrond te laten scrollen...

Anywayz, je zou het kunnen oplossen door - jawel - een div om die twee plaatjes heen te plaatsen, ter grootte van .header, en dat rechteronderhoekje dan als background-image van die nieuwe div te plaatsen met de waarden no-repeat bottom right.

Wel een paar div'jes meer of minder

Het werkt iig wel!
(http://nergens.org/projects/wa/Boelie-Boelie/, dus ik ben blij

)

Is dit nu de meest elegante oplossing (met behoud van resizen van de pagina), of is er een elegantere manier?

donderdag 23 februari 2006 11:22

Acties:

0 Henk 'm!

Anoniem: 169287

Topicstarter

Sappie schreef op donderdag 23 februari 2006 @ 03:12:
Waarom neem je, zoals Boelie-Boelie ook al aangeeft, het een en ander niet in één en dezelfde image op?

Omdat de pagina resizable moet zijn

Het rechterplaatje staat nu nog altijd bovenaan omdat je de div waarin dat plaatje zich bevindt een hoogte van 100% hebt pgegeven.

Als de hoogte van de div 100% is, wil dit toch niet zeggen dat het plaatje per definitie tegen de bovenkant van deze div aanstaat?

Verder bestaat er ook zoiets al het id-attribuut van een element (je gebruikt nu alleen maar classes).
_{Ook kun je je misschien beter eerst eens wat verdiepen in CSS, aangezien je, zoals je zelf al aangeeft, noob bent op dit gebied.}

Ik gebruik classes omdat ik in dhtml dan geen conflicten krijg met mijn naamgeving,.. misschien niet zo netjes omdat in de specificaties staat dat je classes voor meer dan 1 moet gebruiken, maar dit is wel de reden dat ik hier dus classes gebuik

Verder heb ik de nodige informatie gezocht over liquid design en kom dus uiteindelijk hier terecht,.. mocht je nog een goed stukje info -hierover- hebben, dan zou ik dit graag van je vernemen.
Persoonlijk wordt ik helemaal gek van al die verschillende manieren, welke de "aanbevolen" manier zijn, om dit soort problemen op te lossen

donderdag 23 februari 2006 11:34

Acties:

0 Henk 'm!

Sappie

De Parasitaire Capaciteit!

Anoniem: 169287 schreef op donderdag 23 februari 2006 @ 11:22:
Als de hoogte van de div 100% is, wil dit toch niet zeggen dat het plaatje per definitie tegen de bovenkant van deze div aanstaat?

Zoals ik al zei zou je je beter eens wat verder kunnen verdiepen in CSS

Wanneer je geen vertical-align icm line-height specificeert voor de image of padding voor het block level element komt de inline image bovenaan te staan in je block level element.

Ik gebruik classes omdat ik in dhtml dan geen conflicten krijg met mijn naamgeving,.. misschien niet zo netjes omdat in de specificaties staat dat je classes voor meer dan 1 moet gebruiken, maar dit is wel de reden dat ik hier dus classes gebuik

Geen conflicten met naamgeving omdat je geen gebruik maakt van het id element? Helaas bestaat er in javascript juist niet zoiets als getElementByClass (zijn overigens wel genoeg implementaties van derden van), maar wel zoiets als getElementById. Dus ik volg je ff niet, maargoed je zal er je redenen wel voor hebben

Verder heb ik de nodige informatie gezocht over liquid design en kom dus uiteindelijk hier terecht,.. mocht je nog een goed stukje info -hierover- hebben, dan zou ik dit graag van je vernemen.
Persoonlijk wordt ik helemaal gek van al die verschillende manieren, welke de "aanbevolen" manier zijn, om dit soort problemen op te lossen

In welke mate moet je layout liquid zijn? Zoals het nu ongeveer is? Vaste maximale breedte en vaste minimale breedte en daartussen moet ie meeschalen?

edit:

hier ff een redelijk eenvoudig voorbeeld wat ik even snel in elkaar heb geflanst waar je wellicht wat aan hebt. Dit voorbeeld werkt slechts in fatsoenlijke browsers out of the box. In IE werkt het dus niet, vanwege gebrek aan ondersteuning voor min- en max-width. Daar is echter wel omheen te werken, maar daar heb ik nu geen tijd voor.

ajb: http://tienstra4.flatnet....rein-got/EduardWitteveen/

edit:
url weer ff valid gemaakt

[ Voor 19% gewijzigd door Sappie op 06-03-2006 20:41 ]

Specs | Audioscrobbler

donderdag 23 februari 2006 21:45

Acties:

0 Henk 'm!

Anoniem: 169287

Topicstarter

Sappie schreef op donderdag 23 februari 2006 @ 11:34:
Zoals ik al zei zou je je beter eens wat verder kunnen verdiepen in CSS

Wanneer je geen vertical-align icm line-height specificeert voor de image of padding voor het block level element komt de inline image bovenaan te staan in je block level element.

Bedankt voor de opmerking, graag zou ik van je wat linkjes ontvangen, omdat de documentatie zich op verschillden punten tegenspreek.
Ik was in de veronderstelling, dat om een div dezelfde hoogte tegeven als zijn parent element, ik de hoogte op 100% moest zetten. Hierna met een vertical-align het plaatje aan de bodem te plakken.(alleen het laatste werkte niet)

Geen conflicten met naamgeving omdat je geen gebruik maakt van het id element? Helaas bestaat er in javascript juist niet zoiets als getElementByClass (zijn overigens wel genoeg implementaties van derden van), maar wel zoiets als getElementById. Dus ik volg je ff niet, maargoed je zal er je redenen wel voor hebben

Wanneer ik later id's aan de pagina toevoeg tbv javascript, wil ik niet dat er allemaal id's al bezet zijn door de style. Hier heb ik een paar keer last van gehad en daarom gebruik ik class-es

In welke mate moet je layout liquid zijn? Zoals het nu ongeveer is? Vaste maximale breedte en vaste minimale breedte en daartussen moet ie meeschalen?

Ik denk dat het offtopic om dat volledig te behandelen, het gaat mij erom dat ik mijn plaatje rechtsonderin kan plaatsen. De oplossing van BoelieBoeliehttp://nergens.org/projects/wa/Boelie-Boelie/ werkt, alleen vind ik hem nog niet zo elegant

hier ff een redelijk eenvoudig voorbeeld wat ik even snel in elkaar heb geflanst waar je wellicht wat aan hebt. Dit voorbeeld werkt slechts in fatsoenlijke browsers out of the box. In IE werkt het dus niet, vanwege gebrek aan ondersteuning voor min- en max-width. Daar is echter wel omheen te werken, maar daar heb ik nu geen tijd voor.

ajb: http://tienstra4.flatnet.tudelft.nl/~tom/EduardWitteveen/

Bedankt voor je voorbeeld!
Ik snap allen niet waar ik naar moet kijken. Ik kan niets vinden wat verticaal aan de bodem is uitgelijnd.

donderdag 23 februari 2006 23:00

Acties:

0 Henk 'm!

Sappie

De Parasitaire Capaciteit!

Anoniem: 169287 schreef op donderdag 23 februari 2006 @ 21:45:
Bedankt voor de opmerking, graag zou ik van je wat linkjes ontvangen, omdat de documentatie zich op verschillden punten tegenspreek.
Ik was in de veronderstelling, dat om een div dezelfde hoogte tegeven als zijn parent element, ik de hoogte op 100% moest zetten. Hierna met een vertical-align het plaatje aan de bodem te plakken.(alleen het laatste werkte niet)

Vertical-align heeft betrekking op inline-elementen en bepaalt de positie waarop een element uitgelijnd wordt op de zgn line-box (zie ook: http://www.w3.org/TR/CSS2...ml#propdef-vertical-align). Volgens mij spreekt de documentatie zich niet tegen hoor

Heb het een en ander even in een simpel voorbeeldje gegoten. In een fatsoenlijke browser zie je hier als het goed is 3 maal (visueel) hetzelfde. Het is echter op 3 verschillende manieren bewerkstelligd. Hoop dat je het met behulp van dit wat beter begrijpt:

http://tienstra4.flatnet....dWitteveen/voorbeeld.html

Bedankt voor je voorbeeld!
Ik snap allen niet waar ik naar moet kijken. Ik kan niets vinden wat verticaal aan de bodem is uitgelijnd.

Ik heb het voorbeeld een heel klein beetje aangepast zodat er daadwerkelijk iets aan de bodem van de header wordt uitgelijnd. Verder reik ik in het voorbeeld, als ik je goed begrijp, een nettere manier om de liquid layout te bewerkstelligen aan.

edit:
url weer ff valid gemaakt

[ Voor 4% gewijzigd door Sappie op 06-03-2006 20:42 ]

Specs | Audioscrobbler

Pagina: 1

Reageer