Lijn onder Heading zetten tot aan volgende object

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0 Henk 'm!

  • Sgrovert
  • Registratie: Mei 2004
  • Laatst online: 07:06
Ik ben bezig aan een nieuw design voor mijn website en ik zou graag een paginabrede lijn onder mijn headings willen plaatsen. Op zich niet moeilijk, maar ik loop tegen het probleem aan, dat als er in afbeelding in de pagina staat, de lijn op de huidige manier door blijft lopen. Vb, zie : www.limusic.nl.
De afbeelding aan de linkerkant is zoals ik het wil hebben. Bij de afbeeldingen aan de rechterkant is te zien dat de horizontale lijnen doorlopen tot aan de afbeelding.

Ter info, even een stukje van de relevante code :
HTML:
1
2
3
<a href ="www.link.nl"><img class="imgright" align="right" src="picture.jpg" alt="..." /></a> 
<h5>Waar U ons voor kunt boeken</h5>
<p>Lost in Music voorziet voornamelijk c......</p>


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
h3, h4, h5, h6 {
    color:#870000;
    border-bottom:1px solid #870000;
    padding-bottom:4px;
    margin:10px 0px 9px 5px;
}
.imgright {
    margin: 7px 0px 5px 3px;
    border-left: 15px solid transparent;
    border-right: 3px solid rgb(195,195,195);
    border-top: 0px solid rgb(195,195,195);
    border-bottom: 0px solid rgb(195,195,195);
}
p {
    text-align: justify;
    margin:0px 3px 0px 5px;
}


Het probleem is eigenlijk dat ik een border moet gebruiken om te zorgen dat de tekst niet te dicht op de afbeelding komt te staan, en omdat ik de achtergrond zichtbaar wil hebben, deze border transparent moet maken. Bij een Solid border, word de rode lijn op tijd afgeknipt, maar is helaas ook de achtergrond niet meer zichtbaar.
Heeft iemand een idee hoe dit netjes op te lossen is?

Lost In Music


Acties:
  • 0 Henk 'm!

  • Acid_Burn
  • Registratie: Augustus 2001
  • Laatst online: 16-07 13:45

Acid_Burn

uhuh

edit: hmmm dat is het niet :P

[ Voor 90% gewijzigd door Acid_Burn op 07-12-2012 16:06 ]

Glass Eye Photography | Zelfbouw wireless fightstick | Mijn puzzel site


Acties:
  • 0 Henk 'm!

  • m4ikel
  • Registratie: Augustus 2012
  • Laatst online: 09-09-2024
je moet even overflow:hidden op de headings zetten, dan is je probleem verholpen.

Succes!

Acties:
  • 0 Henk 'm!

  • RM-rf
  • Registratie: September 2000
  • Laatst online: 16-07 16:30

RM-rf

1 2 3 4 5 7 6 8 9

Het probleem is eigenlijk dat ik een border moet gebruiken om te zorgen dat de tekst niet te dicht op de afbeelding komt te staan
verwar je hier niet padding met een border?

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen


Acties:
  • 0 Henk 'm!

  • Tsjilp
  • Registratie: November 2002
  • Niet online

Tsjilp

RS[I]ds

Overflow hidden idd, en paddings gebruiken ipv onzichtbare borders

Raar... Is zo gek nog niet


  • Sgrovert
  • Registratie: Mei 2004
  • Laatst online: 07:06
Allemaal bedankt voor het meedenken. Overflow: hidden was het stukje css waar ik naar op zoek was.
Uiteraard is het veel logischer om padding te gebruiken dan een transparante border. De border heb ik in eerste instantie transparent gedefinieerd, daar ik niet wist hoe ik het beter kon oplossen.

Lost In Music

Pagina: 1