2010-02-09 20 views
5

Je suis assez nouveau pour CSS et je voulais savoir comment peut y parvenir:HTML & CSS fond

Je vous écris une page qui affiche une forme au milieu (représenté par la boîte noire). Je veux qu'il ait un fond blanc qui recouvrira l'arrière-plan du corps (représenté par les lignes rouges).

Consultez ce site pour l'image d'exemple. (Désolé, je ne pouvais pas le poster en ligne)

http://www.freeimagehosting.net/uploads/bf2d71f238.png

Merci beaucoup!

+0

Probablement pas l'accueil que vous recherchez pour à SO, cependant Frank a un point. La communauté réagira beaucoup mieux si vous ne lui demandez pas de faire tout le travail pour vous. Essayez de poster ce que vous avez jusqu'ici, aussi mauvais que vous le pensiez. –

+1

+1 bonne question pour débutant –

+2

@Mike - Dessiner une image est mieux que la plupart! À partir de ce que vous savez n'est pas une mauvaise idée IMO –

Répondre

3

Vous pouvez donner à vos éléments quelques styles, arrière-plan peut être de couleur, des images, etc.

CSS:

body { /* Red Lines Here */ 
    background: #990000; 
} 
#outer { /* White box Here */ 
    background: #ffffff; /* White */ 
    width: 900px; /* Total width will be 1000px once you include padding */ 
    padding: 50px; /* White border around black box, this is padding on all sides */ 
    margin: 0 auto; /* Centering it */ 
} 
#inner { /*Black Box Here */ 
    background: #000000; /* Black */  
    color: #ffffff; /* White Text so you can see it */ 
} 

Html:

<html> 
    <head> 
    <title>My Page! Step off!</title> 
    </head> 
    <body> 
    <div id="outer"> 
     <div id="inner"> 
     Content! 
     </div> 
    </div> 
    </body> 
</html> 
+0

+1 - me battre: P –

+0

L'utilisation de deux divs semble un peu exagérée. Quel est le problème avec "border: 50px solid #FFF;"? – kloffy

+0

@kloffy - Si c'était moi, je voudrais une image dans cet espace, en commençant par cette option plus tard :) –

0

Allez lire un livre comme 'CSS Mastery'. Une fois que vous connaissez quelques notions de base et que vous pouvez expliquer ce que vous avez essayé et avoir une base pour poser une question en premier lieu, demandez de l'aide.

+0

Je ne suis pas d'accord - j'ai appris TOUS mes css de l'expérimentation et de la lecture d'articles sur le Web. Cela ne me dérange pas de donner aux utilisateurs un coup de pouce rapide pour les faire fonctionner. Une fois qu'ils auront vu suffisamment d'exemples, ils découvriront comment les généralités fonctionnent et expérimentent par elles-mêmes. –

+1

@Frank - pourquoi se donner la peine de répondre si ce que vous écrivez est inutile? – AlexBrand

+0

Je ne suis pas d'accord avec le downvote. Une recommandation de livre ajoute à la discussion. Maintenant, cela ne va peut-être pas aider le gars avec sa question immédiate, mais même si ce n'est pas la meilleure réponse, il peut être utile que l'affiche s'intéresse à creuser plus profondément. Mon seul commentaire est que si vous allez poster une recommandation de livre, mettez un lien. Et yuval: Si vous n'avez pas lu tout un livre sur CSS, il y a de fortes chances que vous manquiez beaucoup d'informations sur CSS. J'ai essayé d'apprendre par coeur moi-même pour les 5 dernières années, et finalement pris un livre et l'ai lu pour couvrir. –