Archief - CSS: Trapeffect met div's

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
F

Fr3aK

Legacy Member
Trapeffect met 2 div's boven elkaar....
Linkje
Hoe los ik da trapeffect op van die div "title" en die div "text" boven elkaar.
Kheb al me margin en padding geprobeerd maar ik krijg da trapeffect ni weg :(

Greetz
C

Cakeman

Legacy Member
De left padding van uw title is 3 en die van uw text is 12. Volgens mij helpt het als ze dezelfde waarde hebben.
F

Fr3aK

Legacy Member
Cakeman zei:
De left padding van uw title is 3 en die van uw text is 12. Volgens mij helpt het als ze dezelfde waarde hebben.
Klik om te vergroten...
En hoe maak ik dan alleen langs de linkerkant een trapeffect ?
C

Cakeman

Legacy Member
Ik snap niet echt wat ge wilt doen :)

Wilt wél of géén trap-effect? En wat je bedoel je daarmee juist? Dat tekst meer naar rechts staat dan je titel?
F

Fr3aK

Legacy Member
Ik wil geen trapeffect langs de rechterkant want dan verbreedt heel men div maar ik wil wel trapeffect langs linkerkant :|
Kheb nu fixed width ingevuld voor die div "title" en div "text" maar kzou da liever ni doen ....
F

Fr3aK

Legacy Member
Ja, liever 100% ipv een fixed width voor die div's in die content box
C

Cakeman

Legacy Member
Dit werkt:
Code: 
.top {
	width: 100%;
	border: 1px solid red;
	padding: 5px;
	text-align: justify;
}
.bottom {
	width: 100%;
	border: 1px solid blue;
	padding: 5px 5px 5px 15px;
	text-align: justify;
}

Voorbeeld: http://users.pandora.be/cakeman/cakeman/tests/trappen.html

Ik heb de text alignment op justify gezet omdat anders de bla's (:)) in de onderste div sneller afgebroken werden en dat gaf zonder border da illusie dat ze niet gelijk waren. Nu wordt de tekst mooi uitgevuld tot tegen de rand.
F

Fr3aK

Legacy Member
Mjah kijk het probleem is dat het ni komt hoe ik het wil, zelfs ni als ik fixed width's gebruik. Als ge die div's select krijgde altijd een trapeffect. Da komt nooit schoon naast elkaar langs de rechterkant. En die fixed width maakt ni veel uit want men div verbreden gewoon ....... :(

BTW de width van uwen div zal ook geen 300px zijn denk ik...
L

Lashknife

Legacy Member
als ik het goe begrijp wilt ge aan de linkerzijde trap, maar niet langs rechts...

point is dan van uw .title en .text classes de left-padding hetzelfde te zetten eh.
Code: 
.title {
  font-size: 8pt;
  width: 490px;
  padding: 5px 3px 3px 3px;
  text-align: left;
  line-height: 12pt;
}

.text {
  font-size: 8pt;
  width: 490px;
  padding: 0px 9px 5px [color=red]3[/color]px; /* volgorde: top right bottom left */
  text-align: justify;
  line-height: 12pt;
}
zo zou dit exact moeten staan zoals jij het wil, wat je doet met top/right/bottom padding is jouw zaak.
D

DarkBone

Legacy Member
Ik snap nie wat het probleem hieraan is ?

Zowel bij uw klasse 'title' als uw klasse 'text' geef je gewoon GEEN breedte op, ik zie niet in waarom dat nodig zou zijn. Een DIV neemt sowieso de maximum mogelijke breedte in.

Daarne hoef je enkel nog aan uw klasse 'text' dit mee te geven:
margin-left: 6px;

En klaar is kees.

Code: 
.title {
  font-size: 8pt;
  padding: 5px 3px 3px 3px;
  text-align: left;
  line-height: 12pt;

  border: 1px solid #000000;
}

.text {
  font-size: 8pt;
  padding: 0px 9px 5px 3px;
  text-align: justify;
  line-height: 12pt;
 
  margin-left: 10px;
  border: 1px solid #000000;
}

De borders heb ik erbij gezet zodat het zichtbaar zou worden.

Effe recapituleren:
het probleem lag hem dus enkel in het feit dat ge expliciet en breedte opgaf
- in pixels: de div houdt die breedte aan ==> steekt uiy
- in percetn (100%): die 100% wordt opgevat als de breedte van het bovenliggend element ==> steekt ook uit
F

Fr3aK

Legacy Member
Ge zijt wreed bedankt DarkBone :)
Twas da dak moest emme, nu lukt het wel ;)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan