Problème avec CSS flotteurs (images) dans la mise en page.
- digitalMedia
- a.k.a. dM
- Inscription: Déc 29, 2003
- Messages: 5169
- Loc: SC-USA
- Status: Offline
Août 19th, 2009, 1:05 pm
Dans votre premier lien, tout a une hauteur fixe. La page a été conçue et construite pour contenir une quantité très précise de son contenu. La ligne dans le centre est au format JPG. Si vous voulez que la zone de l'étendre à contenir une quantité variable de contenu, vous devrez utiliser une image que les carreaux ou les répétitions.
En CSS, cela ressemble à quelque chose comme ceci:
Toutefois, la même chose pourrait aussi être atteint en utilisant la propriété des frontières, comme ceci:
Ce qui précède pourrait s'appliquer à la plus longue des deux colonnes.
Pour la question concernant le pied de page; Ma préférence est à manipuler avec des images de fond et les couleurs dans le PARE le contenant. De cette façon, le contenant lui-même ne serait pas en expansion, mais il serait logique que visuellement.
S'il est appliqué correctement, le résultat serait quelque chose comme ceci:
Encore une fois, je pense que la meilleure solution qui se passe ici comme une stratégie d'utilisation des images de fond et couleurs pour les différents pare pas et conteneurs enfants. Vous pouvez diviser votre page en différentes sections horizontales:
<body> <--Red background color
<div id="head">
<div>Header and Menu Content</div> <--width and margin:0 auto;
</div>
<div id="body"> <--Yellow background color
<div>Page Content</div> <--width and margin:0 auto;
</div>
<div id="foot"> <--Yellow background color
<div>Footer Content</div> <--width and margin:0 auto;
</div>
Son très simplifié, je sais. Mais j'espère que vous avez l'idée.
En CSS, cela ressemble à quelque chose comme ceci:
Code: [ Select ]
#my_container{background:url(images/brownish_line.jpg) repeat-y;}
Toutefois, la même chose pourrait aussi être atteint en utilisant la propriété des frontières, comme ceci:
Code: [ Select ]
#my_container{border-left:5px solid #EEE8D0;}
Ce qui précède pourrait s'appliquer à la plus longue des deux colonnes.
Pour la question concernant le pied de page; Ma préférence est à manipuler avec des images de fond et les couleurs dans le PARE le contenant. De cette façon, le contenant lui-même ne serait pas en expansion, mais il serait logique que visuellement.
Code: [ Select ]
#my_container{background:url(images/red_background.jpg) no-repeat #98000C;}
S'il est appliqué correctement, le résultat serait quelque chose comme ceci:
Attachments:
Encore une fois, je pense que la meilleure solution qui se passe ici comme une stratégie d'utilisation des images de fond et couleurs pour les différents pare pas et conteneurs enfants. Vous pouvez diviser votre page en différentes sections horizontales:
Code: [ Select ]
<body> <--Red background color
<div id="head">
<div>Header and Menu Content</div> <--width and margin:0 auto;
</div>
<div id="body"> <--Yellow background color
<div>Page Content</div> <--width and margin:0 auto;
</div>
<div id="foot"> <--Yellow background color
<div>Footer Content</div> <--width and margin:0 auto;
</div>
- <body> <--Red background color
- <div id="head">
- <div>Header and Menu Content</div> <--width and margin:0 auto;
- </div>
- <div id="body"> <--Yellow background color
- <div>Page Content</div> <--width and margin:0 auto;
- </div>
- <div id="foot"> <--Yellow background color
- <div>Footer Content</div> <--width and margin:0 auto;
- </div>
Son très simplifié, je sais. Mais j'espère que vous avez l'idée.
- dM
- Anonymous
- Bot
- Inscription: 25 Feb 2008
- Messages: ?
- Loc: Ozzuland
- Status: Online
Août 19th, 2009, 1:05 pm
- HHawk
- Novice
- Inscription: Aoû 13, 2009
- Messages: 22
- Status: Offline
Août 20th, 2009, 1:54 am
Tout d'abord, merci de prendre le temps de réponse.
1. Je me suis débarrassé des fonds blancs dans les colonnes et sur les côtés. Thats donc résolu!
2. J'ai obtenu le milieu de travail en ligne avec seulement 2 colonnes. J'ai utilisé la frontière à droite sur la colonne de gauche. Ainsi, résolu à thats!
Cependant, je ne peux pas obtenir le pied de travail, comme il convient;
a) Il devrait être complètement au fond.
ou
b) Il convient de remplir le reste de l'espace vide (sous le pied de page) avec une couleur rouge ou quelque chose.
J'ai essayé plusieurs choses, mais les résultats dans tout ce qui n'est pas acceptable.
Consultez ces captures d'écran:
-- Capture d'écran #1
-- Capture d'écran #2
-- Capture d'écran #3
Capture d'écran 3 est mon meilleur résultat, mais le fond sous le pied de page n'est pas lu.
Site est en ligne: ici . Home Contact et travaillent atm.
S'il vous plaît conseils, car je ne comprends pas ce que je fais mal. Shouldnt de ce disque, non?
Devinez, je suis tout simplement stupide.
1. Je me suis débarrassé des fonds blancs dans les colonnes et sur les côtés. Thats donc résolu!
2. J'ai obtenu le milieu de travail en ligne avec seulement 2 colonnes. J'ai utilisé la frontière à droite sur la colonne de gauche. Ainsi, résolu à thats!
Cependant, je ne peux pas obtenir le pied de travail, comme il convient;
a) Il devrait être complètement au fond.
ou
b) Il convient de remplir le reste de l'espace vide (sous le pied de page) avec une couleur rouge ou quelque chose.
J'ai essayé plusieurs choses, mais les résultats dans tout ce qui n'est pas acceptable.
Consultez ces captures d'écran:
-- Capture d'écran #1
-- Capture d'écran #2
-- Capture d'écran #3
Capture d'écran 3 est mon meilleur résultat, mais le fond sous le pied de page n'est pas lu.
Site est en ligne: ici . Home Contact et travaillent atm.
S'il vous plaît conseils, car je ne comprends pas ce que je fais mal. Shouldnt de ce disque, non?
Devinez, je suis tout simplement stupide.
1, 2
Pour répondre à ce sujet, vous devez vous connecter ou vous enregistrer. Il est gratuit.
Afficher de l'information
- Total des messages de ce sujet: 17 messages
- Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 150 invités
- Vous ne pouvez pas poster de nouveaux sujets
- Vous ne pouvez pas répondre aux sujets
- Vous ne pouvez pas éditer vos messages
- Vous ne pouvez pas supprimer vos messages
- Vous ne pouvez pas joindre des fichiers
