[CSS] borderprobleem

Pagina: 1
Acties:

  • tweaden
  • Registratie: Juni 2003
  • Niet online
Afbeeldingslocatie: http://www.tanis.nl/img/css.jpg

Het probleem zit rechtsonder aan het plaatje.
Daar loopt de zwarte lijn niet door.
De img heeft twee borders left en bottom.
En de paragraph rechts heeft een left border.
Probleem is echter dat de ene keer het plaatje langer is dan de tekst en de andere keer omgekeerd.

  • BalusC
  • Registratie: Oktober 2000
  • Niet online

BalusC

Carpe diem

Gebruik een negatieve margin voor de img of de p.

  • Thomasje
  • Registratie: Augustus 2002
  • Laatst online: 29-05-2024

Thomasje

Semacode

BalusC schreef op dinsdag 04 juli 2006 @ 20:34:
Gebruik een negatieve margin voor de img of de p.
Dan hou je toch nog steeds het zelfde probleem. Ik zou de image een right border geven en de p alleen onder.

Verwijderd

img { border: solid black; border-width: 0 1px 1px 1px; margin-right: -1px;}

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 09:44

crisp

Devver

Pixelated

Wat BalusC bedoelt is denk ik dat je de image ook een border rechts geeft en zorgt dat 'ie overlapt met de linkerborder van de paragraph; dat overlappen kan je doen mbv een negatieve margin zoals Treador hierboven illustreerd :)

Intentionally left blank


  • BalusC
  • Registratie: Oktober 2000
  • Niet online

BalusC

Carpe diem

Inderdaad :) En daarnaast:
Probleem is echter dat de ene keer het plaatje langer is dan de tekst en de andere keer omgekeerd.
dus alleen maar onderste borders voor de p's heeft geen zin.

  • Technicality
  • Registratie: Juni 2004
  • Laatst online: 19-10-2025

Technicality

Vliegt rechtsom...

Als je ook nog een omvattende div gebruikt zou je natuurlijk bottom-border daarvan kunnen gebruiken...

  • tweaden
  • Registratie: Juni 2003
  • Niet online
Ik ben er nog niet helemaal uit, maar een testversie met bovenstaande erin verwerkt lijkt het goed te doen.
Moet alleen wat css-code aanpassen nu.
Tevens heb ik nog een andere niet zo nette methode bedacht.
Ik heb de omringende div een background gegegeven met witte achtergrond en verticale lijn overlappend met de rechterborder van het plaatje.
Dat werkt ook.

Verwijderd

Geef je afbeelding nou ook gewoon een rechter border. En vervolgens trek je de rechter vakjes 1px terug dmv negatieve margin; de code zoals ik deze hierboven aangaf.

  • tweaden
  • Registratie: Juni 2003
  • Niet online
Verwijderd schreef op woensdag 05 juli 2006 @ 12:33:
Geef je afbeelding nou ook gewoon een rechter border. En vervolgens trek je de rechter vakjes 1px terug dmv negatieve margin; de code zoals ik deze hierboven aangaf.
Heb ik nu precies zo gedaan inderdaad.
Dat met die achtergrond is natuurlijk geen mooie oplossing.
Even getest in IE, Opera en Mozilla en het werkt in alledrie dus allen bedankt voor de snelle oplossing.
Pagina: 1