Gå til innhold

Problemer med avrundede kanter i boks


Anbefalte innlegg

Jeg har i det siste jobbet med en koselig liten side for en clan jeg og en venn driver bare på vås og morro (:!:). Nå har jeg litt problemer med å få tilpassa en innholdsboks som du kan se på dette bildet.

 

Problemet er altså den lille kanten som titter fram under det nederste hjørnet til venstre. Hvordan kan jeg få fikset dette? Her er for øvrig koden:

(Har brukt ALA sitt eksempel på custom corners)

 

HTML:

      <div class="Article"> 
       <h2>Velkommen til de rosa kaninene!</h2>
       <div class="ArticleBody"> 
         <p> Lorem dolor sit amet, consectetuer adipiscing elit. Nunc hendrerit 
           pulvinar ante. Quisque eu diam eget lectus mollis interdum. Nunc imperdiet 
           massa ac metus. Aliquam tempus, turpis ut facilisis iaculis, enim 
           erat mollis purus, at fermentum nunc sem cursus tellus. Donec egestas 
           laoreet dolor. Vivamus mauris elit, adipiscing ut, vestibulum eu, 
           interdum placerat, enim. Nulla facilisi. Mauris congue dictum lorem. 
           Mauris varius vulputate odio. Mauris faucibus. Nam placerat dignissim 
           ligula. Vivamus lobortis consectetuer orci. Aenean mi tellus, vulputate 
           quis, molestie in, ultricies eget, neque. Ut sed velit ac sem ullamcorper 
           vestibulum. Duis sed sapien. </p>
 	
         <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc hendrerit 
           pulvinar ante. Quisque eu diam eget lectus mollis interdum. Nunc imperdiet 
           massa ac metus. Aliquam tempus, turpis ut facilisis iaculis, enim 
           erat mollis purus, at fermentum nunc sem cursus tellus. Donec egestas 
           laoreet dolor. Vivamus mauris elit, adipiscing ut, vestibulum eu, 
           interdum placerat, enim. Nulla facilisi. Mauris congue dictum lorem. 
           Mauris varius vulputate odio. Mauris faucibus. Nam placerat dignissim 
           ligula. Vivamus lobortis consectetuer orci. Aenean mi tellus, vulputate 
           quis, molestie in, ultricies eget, neque. Ut sed velit ac sem ullamcorper 
           vestibulum. Duis sed sapien. </p>
       </div>
       <div class="ArticleFooter"> 
         <p>
         Skrevet av <a href="#">provekanin</a>, 22. November 2004.
         </p>
       </div>
     </div>

 

CSS:

/*Classes*/

div.Article {
background: url(images/corner_top_left.gif) top left no-repeat;
width: 796px;
margin: 20px 0 0 20px;
} 
div.Article h2 {
background: url(images/corner_top_right.gif) top right no-repeat;
font-size: 1.3em;
position: relative;
right: -11px;
}
div.ArticleBody {
background: url(images/corner_border_right.gif) top right repeat-y;
position: relative;
right: -11px;
}
div.ArticleFooter {
background: url(images/corner_bottom_left.gif) bottom left no-repeat;
position: relative;
}
div.ArticleFooter p {
background: url(images/corner_bottom_right.gif) bottom right no-repeat;	
display: block;
position: relative;
right: -11px;
}

Lenke til kommentar
Videoannonse
Annonse

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...