Comment faire CSS - angles-image + arrière-plan? Et la hauteur - 100% ou automatique?

Je l'ai déjà fait CSS beaucoup de fois, mais n'a pas fonctionné et beaucoup de pépins ...
Je vais montrer l'image - pépin:
Voir l'image - http://beta.areku-developstudio.org.ua/new.png
Comment faire CSS - angles-image + arrière-plan? Et la hauteur - 100% ou automatique?

Voir image (cela est nécessaire, comme une meilleure qualité):
Voir photo2 - http://beta.areku-developstudio.org.ua/new2.png

Comment faire CSS - angles image + arrière-plan? Et la hauteur - 100% ou automatique?
Exemple HTML:

<div id="conteiner" class="main"> 
    <div class="top_left_corner"> 
     <div class="top_right_corner"> 
      <div class="bottom_left_corner"> 
       <div class="bottom_right_corner"> 
        <div id="content"> 
         <br/><br/> 
         Hello Areku<br/> 
         Hello Areku<br/> 
        </div> 
        <br/><br/> 
       </div> 
      </div> 
     </div> 
    </div>  
</div>

Choisissez d'autres façons de faire CSS + HTML. Peut jQuery? J'attends une réponse ...
Sincèrement, Areku!

Source

2010-09-08 areku

Questions sur la mise en page de page Web doivent être posées sur doctype. Voir http://stackoverflow.com/faq –

Vous pouvez le faire avec certaines utilisations créatives de la propriété de base sur vos différents éléments:

<html> 
    <body> 
    <div id="content"> 
     Your content 
    </div> 
    <div class="corner right"></div> 
    <div class="corner left"></div> 
    </body> 
</html>

Ensuite, le CSS serait comme suit:

/* Following 2 rules create min-height 100% for your content and body */ 
html, 
body { 
    height: 100%; 
} 

#content { 
    min-height: 100%; 
} 

/* html and body create the fixed position bottom right/left corners */ 
html { 
    background: url(bottom-right.png) no-repeat fixed 100% 0; 
} 

body { 
    background: url(bottom-left.png) no-repeat fixed 0 0; 
} 

/* top right/left corners are handled by 2 divs */ 
.corner { 
    position: fixed; 
    top: 0; 

    width: 50px; /* width of your background image corner */ 
    height: 50px; /* height of your background image corner */  
} 

.left { 
    left: 0; 
    background: url(top-left.png) no-repeat 100% 0; 
} 

.right { 
    right: 0; 
    background: url(top-right.png) no-repeat 100% 0; 
}

Source

2010-09-08 13:17:28 Pat

Comment faire CSS - angles-image + arrière-plan? Et la hauteur - 100% ou automatique?

Répondre

Questions connexes