Problème avec CSS flotteurs (images) dans la mise en page.

Eh bien, je vais avoir de sérieux problèmes avec CSS flotteurs.

J'ai créé un dessin sous Photoshop, tranché et tout importé dans Dreamweaver. Jusqu'ici, tout va bien. Toutefois, lorsque vous tranche avec Photoshop, vous obtenez un CSS avec "position: absolute", dont je cherche à éviter.

Mais j'ai réussi à obtenir la tête en partie correctement l'eau, mais pour une raison quelconque, il ne s'affiche pas correctement dans Firefox et IE8.

Est ce que quelqu'un peut jeter un coup d'œil et voir ce que je fais mal? Et si possible de corriger les erreurs ou me dire ce que je fais de mal?

Parce que je suis vraiment frapper un mur de briques à l'heure actuelle.

Voici la page: lien

Merci d'avance.

Hey HHawk,
Bienvenue à Ozzu. Je pense que la tête dans FF3.5 ok sur OSX, sauf l'image de droite, qui a juste besoin d'un pad ou ajouté à la marge sur le côté droit. Aussi il ya des choses étranges espacement passe dans IE6. Vous voudrez peut-être exécuter une css réinitialiser les premiers à tous les navigateurs à la même place. Yahoo a une fort belle i utiliser ici . Avez-vous l'esprit si je vous demander pourquoi l'image se scinde en autant de sections?

Aussi pourquoi êtes-vous en essayant d'éviter la position est-elle absolue?

Merci pour l'accueil.

Oui, tout semble ok, sauf pour la partie droite-ish.
J'ai tout essayé; padding / margin / etc Mais tout ce que je lui donner l'air bien dans Firefox, il est en ruine dans Internet Explorer et vice-versa. : S

Eh bien, pas cette partie (en-tête), mais la main (du corps) partie du site sera extensible en utilisant des colonnes, mais quand j'utilise "position: absolute" les colonnes ne s'étendent pas et le pied de page est en cours de route. Ne sais pas comment l'expliquer mieux, mais j'ai été très occupé avec ce design pour le passé plusieurs jours et je suis nulle part. : S

J'ai déjà re-tranches de l'ensemble de chose, pour qu'il fonctionne correctement.

Bon ce n'est le coupable, je ne peux pas obtenir ce corrigé: lien

Quiconque a une idée?

Im pas sûr de ce que vous essayez de construire ici. Les méthodes que je vois dans le lien que vous avez affiché ci-dessus sont analogues à des idées qui ont été déposés pour des mises en page. Je pense que vous avez besoin d'une toute nouvelle approche. Youve essentiellement eu un grand graphique, juste coupé en morceaux.

Si la zone rouge de la tête a été l'un DIV avec une image d'arrière-plan, vous pouvez simplement flotter un conteneur à l'image de l'axe vers la droite et de la marge, il ne pare conteneur. Thats DIVs un ou deux et deux contre graphique quel que soit le nombre que vous utilisez ici. Sans oublier qu'il serait aussi dans tous les navigateurs.

Ensuite, la prochaine ligne - votre menu. Cela peut être simplement un UL 1px de large avec une image de répéter dans l'arrière-plan.

Aussi, vous utilisez le mauvais format d'image. PNG est très bien (woohoo.), et tous, lorsqu'il est utilisé dans le bon contexte. Cependant, il n'ya pas de bonnes raisons de les utiliser universellement dogmatique. Theres juste aucun avantage ici.

La meilleure chose à nous montrer pour obtenir de l'aide est votre conception d'ensemble. Malheureusement, l'approche que vous utilisez ce qui est juste incroyablement difficile que ce qu'il a à être.

Tout d'abord merci pour la réponse, je suis en train d'utiliser, comparativement à cause png gif et jpg, png est le plus petit.

Les cercles verts partie aura un script PHP qui affiche des images au hasard, thats la raison pour laquelle j'ai tranché il comme ça en premier lieu. Toujours en vertu de la partie texte, il y aura du texte cite au hasard de nos clients. Encore un script php.

Et j'ai toujours pensé que le chargement 1 grande image au lieu de 10 petites images qui vous charge de site plus lent et prend donc plus de temps à s'afficher? Ou du moins c'est mon expérience.

Pour créer votre menu correctement, vous avez seulement besoin d'un 1 x 15 pixel graphique de la pente à la base. En tant que fichier GIF que 94 octets, comme un PNG, il serait de 210 octets. Actuellement, vous utilisez des graphiques 11 je crois.

Votre utilisation de scripts côté serveur ne devrait pas affecter votre balisage ici. Même si le contenu à insérer dynamiquement est de durée variable ou variation de dimensions en pixels. En fin de compte, le résultat sera encore HTML.

Qui dans le monde vous a dit ça? La différence entre un et dix 100kb graphique 10kb voyages est de 9 sur le serveur.

Par votre ton, je suppose que vous vous approchez mes conseils avec une certaine incrédulité.

Tout d'abord, je ne veut pas dire aucune infraction, l'anglais n'est pas ma langue maternelle, à cet effet quelques mots mai sons différents (hostile) à vous, alors qu'ils ne sont pas des comme ça. Par exemple, je ne comprends même pas "l'incrédulité", mais j'imagine que son dissbelieve? Et tel ne saurait être le cas, parce que je ne le prendre à l'examen.




Uhm...Je voulais dire ça comme ça, la cause Internet Explorer ou Firefox utiliser plusieurs connexions http anyways de se connecter à un site Web, ce qui signifie que chaque connexion de charger de multiples images / texte / flash / etc à partir d'un site Web. Ou suis-je mal ici.



Bon, maintenant, je comprends ce que tu veux dire avec le menu. Didnt comprendre au début, mon code HTML / CSS compétences ne sont pas les plus grands. En ce qui concerne les images, je n'ai utiliser le haut pour les deux paramètres GIF / PNG (Photoshop), peut-être la raison pour laquelle thats GIF est plus grande pour moi que PNG.



Ok merci, je n'étais pas sûr de cela. Cela me rappelle un autre problème, dans la conception des tranches précédentes, j'ai été avec 1 image de fond de toute la hauteur. Bien sûr, cela fonctionne très bien lorsque le contenu du site ne se développe pas. Mais quand il ne l'expansion (plus de texte), il se développer, mais l'image de fond a une hauteur fixe, de sorte que le contenu n'a pas aligner plus à l'arrière-plan (en espérant que vous comprenez ce que je veux dire, en essayant de mon mieux pour expliquer ici).

Encore une fois, je ne veut pas dire tout type d'infraction. : S

Juste essayer de comprendre tout cela, j'ai utilisé pour créer des sites web avec HTML et des tables. Puis s'installe à CSS, les tableaux sont pour cause de données, mais je trouve encore difficile CSS à utiliser, même difficile, j'ai lu beaucoup de tutoriels sur le (même htmldog).

Je vais essayer de télécharger l'intégralité de conception que je suis en train de réaliser plus tard. Doivent sortir pour une heure ou deux. Il vous permet d'obtenir une meilleure idée de ce que je cherche à atteindre et peut-être même donner quelques indications et conseils.

De même, de ma faute sur le ton de la poste. Ses vraiment difficile de le dire parfois. Ive je sais lire mes propres messages, de temps à autre et je pensais que je ressemble au son d'un âne sarcastique.

Je pense vraiment que nous pouvions travailler à une meilleure stratégie pour l'ensemble de votre présentation. Je pense aussi que, ce faisant, vous permettra d'avoir une meilleure idée de l'ensemble de la conception et la construction qui peut intégrer toutes vos envies.

J'espère que vous continuerez poster ici et de nous donner une chance de vous aider. Peut-être que vous devrez prendre en compte, également, à la recherche par l'intermédiaire de mon tutoriel sur la lancée des mises en page. ( html-tutorials/tutorial-multi-column-layout-using-css-float-part-t85704.html )

Pax!

Pas de problème, sa difficile parfois de trouver les bons mots, parce que je ne suis pas anglais, ce qui entraîne de mauvais choix de mots, qui sont mal compris.

Bon je n'ai pas la pleine mise en page des sites prêt, alors je vais poster un lien vers sa "soeur" du site, qui a aussi les mêmes problèmes (DOH). Ce site a été créé quand j'ai tranché tout la première fois (et utilise position: absolute BEAUCOUP).

Site

Sur la page d'index, je ne vais pas courir dans un lot de problèmes avec la hauteur fixe, la cause ne se développe réellement le contenu...Ainsi, il ne sera pas gâcher la mise en page.

Les véritables problèmes de ce début page , Je suis très limité à la taille des zones de contenu texte, et si je le type de bien, la colonne ne se développe pas. Et si je fou autour de la colonne et de faire plus grand, je suis confronté à un problème avec l'image de fond et / ou le pied de page reste fixe et ne se déplacent pas le long.

Je vais aussi vérifier votre tutoriel sur la lancée des mises en page. J'ai déjà vérifié pour une minute ou deux, mais j'ai besoin de plus de temps pour le lire plus attentivement et à le rendre compréhensible pour moi.

/ / mise à jour #1

En passant, je cherche à obtenir la présentation de travail comme dans votre tutoriel, je vais vous tenir à jour.

/ / mise à jour #2

Il semble que je fais bien, je comprends que je vous rencontrez des problèmes. Mais actuellement, son cours normal. Je vais continuer le lundi, sera parti pour le week-end.

Merci à ce jour pour votre aide à ce jour! Très apprécié et votre tutoriel est de meilleure qualité et plus détaillées pour comparé à celui sur htmldog. Si je cours vers de nouveaux problèmes sur le lundi, je post dans le forum.

Les conseils ou des avis? Par exemple, comment puis-je obtenir l'historique de la colonne complètement jaune / brun clair?

Bon après le week-end, j'ai commencé avec la mise en page.

Elle va très bien jusqu'à présent, vérifier son ici .

Cependant j'ai quelques questions / problèmes;

Question 1 = SOLVED!

Question 2
Comment puis-je obtenir de l'arrière-plan de travail, comme dans cet exemple comme ici

Cause avec ce "vieux" tout tracé a été fixé, ce qui signifie qu'il ne serait pas l'expansion. Avec la nouvelle mise en page, la conception "peut" expand (probablement ne va pas se produire, mais on ne sait jamais) et quand cela se produit, l'image de fond serait probablement chercher foiré, car il a une taille fixe.

Question 3 = SOLVED!
Question 4 = SOLVED!

S'il vous plaît conseils. En attendant, je continue mon travail.
Merci pour l'instant!

/ / edit

Enlevée questions qui ont été résolus. Le seul problème est l'arrière-plan.
Mise à jour des liens.

Il semble que j'ai résolu tous les problèmes!
Validé le HTML et CSS sans erreur!

Et le design se développe maintenant. Super!

Merci de l'aide. Si je rencontre de nouveaux problèmes, je serai de retour!

Awesome! Désolé, je n'ai pas plus d'aide. Ive été inondé cette semaine.

Pas de problème, grâce à vous j'ai réussi à refaire correctement.
Et bien sûr, grâce à votre awasome tutorial. Même compréhensible pour un noob comme moi.

Merci encore une fois.

J'ai une nouvelle question.
Comment faites-vous développer une ligne verticale (ou la ligne d'image) pour votre contenu?

Jetez un oeil à cet exemple: ici

Voir milieu brunâtre ligne? Si le contenu de chaque côté se développe, comment puis-je faire de la ligne (auto) élargir ainsi? Puis-je utiliser un 2-colonnes, ou devrais-je avoir à utiliser un 3-colonnes pour réaliser cet objectif et comment?

Je voudrais l'utiliser ici par exemple: ici

Un autre problème que j'ai rencontré, est le pied de page. Bien qu'il ressemble et fonctionne très bien sur les grandes pages de contenu, il ne semble pas à court de grandes pages de contenu (par exemple, page de contact). Aussi je tiens à rester le pied de page (stick vers le bas). Est-ce possible, en utilisant des flotteurs?

C'est également le cas pour le reste des pages lors de l'affichage dans une résolution comme 1920x1440. Vous obtenez une partie blanche sous le pied de page. S'il est possible de coller le pied au fond, il fixe un lot de problèmes.

Et en dernier, mais non le moindre, je suis d'avoir plusieurs espaces entre les deux sans raison. : S

S'il vous plaît conseils.

Observe,
HHawk