2010-12-03 3 views
1

alt textJe veux concevoir ces 2 boîtes en utilisant css [image]?

Je veux créer cet effet en utilisant css, pouvez-vous voir la grande boîte avec le titre et le billet de blog, et petite boîte avec la date et le nombre de commentaires à ce sujet. il m'a été énigmatique, un exemple serait grand merci les gars :))

+0

pourquoi ne pas vous venez d'installer Firefox et regardez le css l'exemple? Ou au moins, fournissez-nous un lien pour que nous puissions le faire. – joni

+0

L'exemple est juste là devant vous, allez à la page cliquez sur View> Source et vous aurez tout ce dont vous avez besoin. – Kyle

+0

Je peux; t voir :(:( –

Répondre

1

Dans le HTML, il suffit de créer deux div séparés, l'un pour les détails et l'autre pour le contenu. Avec le CSS, vous pouvez les faire flotter à gauche ou à l'infini, positionner la boîte de détails sur le côté.

.post   { clear:both; width:600px; } 
.post_details { float:left; width:53px; height:93px; background:#fff; } 
.post_date { width:48px; background:#ddd; } 
.post_month { width:48px; background:#666; } 
.post_text { float:left; width:545px; background:#fff; } 
+2

Alors que vous êtes à cela, vous pourriez lui donner un peu d'amour HTML5. –

+0

acclame votre un génie, je l'aime juste quand les gens comprennent ma question vive + upvote de moi :)) – getaway

+1

Pas de problème. Pour le dépannage CSS, j'essaie toujours d'imaginer des boîtes autour des objets que je veux positionner, puis j'ai créé la structure de la boîte et mis le contenu à l'intérieur. – ow3n

0

L'astuce principale serait d'utiliser la propriété CSS3 border-radius. Cela rend les boîtes rondes. Vous devrez utiliser les préfixes de fournisseurs pour obtenir ce travail dans les navigateurs actuels:

-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
-khtml-border-radius: 10px; 
border-radius: 10px; 
+0

merci pour l'info, je sais faire des boîtes de rayon rond, im parler de la postioning de la petite boîte avec la grande boîte à droite aligné comme dans l'image, merci pour l'aide si :)) – getaway

+1

juste 'position d'utilisation: les marges absolute' et négatives. – joni

+0

Eh bien, il serait bon de préciser ce que vous posez à propos de la question ... –

1

ne comprennent pas tout à fait ce qui se puzzleling donc, mais si elle est comment les divs sont disposés il y a 100 façons il pourrait être fait d'une façon serait quelque chose comme

http://img715.imageshack.us/img715/1650/exampleai.png

si elle est sur la façon d'obtenir des coins arrondis, il serait comme jakub mentionné ici est un exemple

http://www.jsfiddle.net/KKpPQ/3/

+0

merci, l'image que vous avez montré est un peu différente, je parle des deux divs étant alignés dans la façon dont l'image est affichée, si ce n'est pas énigmatique, alors pourquoi ne pas l'essayer. :)) – getaway

+1

http://www.jsfiddle.net/KKpPQ/ n'ont pas de style ou entré dans les détails – Breezer

+0

acclamations upvote de moi :)) – getaway

Questions connexes