Retour à Forum de site web

Question Div flottant

  • PolishHurricane
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Fév 17, 2005
  • Messages: 1585
  • Status: Offline

Message Juillet 12th, 2010, 12:19 pm

Bonjour, sur cette page...http://blog.html.it/layoutgala/LayoutGala13.html

Lorsque vous effectuez la fenêtre du navigateur petits, comment voulez-vous arrêter la navigation droite / colonne de chevauchement le contenu au centre et à gauche?
There's no place like 127.0.0.1, badass part is now it's ::1
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Juillet 12th, 2010, 12:19 pm

  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Inscription: Mar 28, 2009
  • Messages: 305
  • Loc: AFK
  • Status: Offline

Message Juillet 12th, 2010, 2:33 pm

C'est bizarre. Je copier / coller votre code sur mon propre site et il ne le fait pas. J'ai rien changé.

http://decklocker.com/ozzuhelp.html


EDIT:

Je retire ma déclaration précédente. Quand il devient plus petit, il se rétracte la colonne du milieu jusqu'à ce qu'il ne peut plus alors il commence à se chevaucher si vous gardez le redimensionnement.

Quel effet vous envie de voir le redimensionner?
Custom Web Design
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Inscription: Mar 28, 2009
  • Messages: 305
  • Loc: AFK
  • Status: Offline

Message Juillet 12th, 2010, 2:59 pm

OK, je me suis débarrassé de tous les appels de marge fixé comme PX et les changer à des pourcentages. Puis j'ai changé les 3 divs (NAV, le contenu et en sus) à float: left. Puis-je réarrangé le balisage de sorte que le «contenu» div apparaît entre la "navigation" et "extra".

Vérifiez-le maintenant et voir si thats ce que vous essayez d'accomplir.
Custom Web Design
  • Howdy_McGee
  • Novice
  • Novice
  • No Avatar
  • Inscription: Juin 22, 2010
  • Messages: 16
  • Status: Offline

Message Juillet 14th, 2010, 8:16 am

Ne pas les changer en pourcentages. Les pourcentages de rendre le texte / div petites / grandes selon la taille de la fenêtre. Pixels lui donner une sorte de tout absolu.

Ce que vous devez faire est de faire des DIV contenant une largeur, et tout changement de pourcentages de pixels.
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Inscription: Mar 28, 2009
  • Messages: 305
  • Loc: AFK
  • Status: Offline

Message Juillet 14th, 2010, 8:19 am

Howdy_McGee a écrit:
Ne pas les changer en pourcentages. Les pourcentages de rendre le texte / div petites / grandes selon la taille de la fenêtre. Pixels lui donner une sorte de tout absolu.

Ce que vous devez faire est de faire des DIV contenant une largeur, et tout changement de pourcentages de pixels.


Ils étaient à l'origine pixels et elle a causé un chevauchement. Thats ce que nous essayons de régler. J'attends simplement d'entendre que si la solution je suis venu avec ce qu'il cherche.
Custom Web Design
  • PolishHurricane
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Fév 17, 2005
  • Messages: 1585
  • Status: Offline

Message Juillet 14th, 2010, 8:06 pm

J'apprécie vraiment l'aide, désolé pour le retard d'affichage.

Quoi qu'il en soit, ce site n'est pas le mien, mais ses exactement ce dont j'ai besoin presque. J'ai besoin côtés px statique, mais un centre de fluide. Quel est ce qu'est cette chose, sauf que je ne peux pas faire face à la valeur liquidative droit chevauchement lorsque le navigateur est de taille raisonnable.

Ceci est une version très simplifiée de ce que j'ai utilisé jusqu'à présent...

Code: [ Select ]
div#contentwrapper {float:left; width:100%; }
div#content { margin: 0 200px; padding: 0px 10px 0px 10px; }
div#nav1 {float:left; width:200px; margin-left:-100%; }
div#nav2 {float:left; width:200px; margin-left:-200px; }
  1. div#contentwrapper {float:left; width:100%; }
  2. div#content { margin: 0 200px; padding: 0px 10px 0px 10px; }
  3. div#nav1 {float:left; width:200px; margin-left:-100%; }
  4. div#nav2 {float:left; width:200px; margin-left:-200px; }


Code: [ Select ]
<div id="contentwrapper">
<div id="content">
  More stuff is in here...
</div>
</div>
<div id="nav1">
<!-- LEFT NAV -->
</div>
<div id="nav2">
<!-- RIGHT NAV -->
</div>
  1. <div id="contentwrapper">
  2. <div id="content">
  3.   More stuff is in here...
  4. </div>
  5. </div>
  6. <div id="nav1">
  7. <!-- LEFT NAV -->
  8. </div>
  9. <div id="nav2">
  10. <!-- RIGHT NAV -->
  11. </div>


Et ce genre de choses est dans un grand nombre de divs autres. Je ne peux pas montrer mon site à ce que son pas atm en ligne.

Merci.
There's no place like 127.0.0.1, badass part is now it's ::1
  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8211
  • Loc: USA
  • Status: Offline

Message Juillet 17th, 2010, 9:37 am

Hé, ne font rien fou...que le code est bon comme ça.

Vous n'avez besoin que l' min-width bien sur la #div conteneur.

Ci-dessous est la seule chose que j'ai ajouté à la CSS (je n'ai pas changé quoi que ce soit)
CSS Code: [ Select ]
div#container{min-width: 600px}

Cela a fonctionné très bien.

Le code complet est:
Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 13</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}

div#wrapper{float:left;width:100%}
div#content{margin: 0 200px}
div#navigation{float:left;width:200px;margin-left:-100%}
div#extra{float:left;width:200px;margin-left:-200px}
div#footer{clear:left;width:100%}

div#container{min-width: 600px}
</style>
<script type="text/javascript" src="filler.js"></script>
</head>
<body>
<div id="container">
<div id="header"><h1>Header</h1><a href="http://blog.html.it/layoutgala/layout13.zip">download this layout</a></div>

<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
<p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>
<p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>

</div>
<div id="extra">
<p><strong>3) More stuff here.</strong> very text make long column make filler fill make column column silly filler text silly column fill silly fill column text filler make text silly filler make filler very silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
</div>
<div id="footer"><p>The footer. You can go to the <a href="http://blog.html.it/layoutgala/">index page</a>.</p></div>
</div>
<script type="text/javascript">AddFillerLink("content","navigation","extra")</script>
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Layout 13</title>
  5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  6. <meta name="generator" content="HAPedit 3.1">
  7. <style type="text/css">
  8. html,body{margin:0;padding:0}
  9. body{font: 76% arial,sans-serif}
  10. p{margin:0 10px 10px}
  11. a{display:block;color: #006;padding:10px}
  12. div#header{position:relative}
  13. div#header h1{height:80px;line-height:80px;margin:0;
  14. padding-left:10px;background: #EEE;color: #79B30B}
  15. div#header a{position:absolute;right:0;top:23px}
  16. div#content p{line-height:1.4}
  17. div#navigation{background:#B9CAFF}
  18. div#extra{background:#FF8539}
  19. div#footer{background: #333;color: #FFF}
  20. div#footer p{margin:0;padding:5px 10px}
  21. div#footer a{display:inline;padding:0;color: #C6D5FD}
  23. div#wrapper{float:left;width:100%}
  24. div#content{margin: 0 200px}
  25. div#navigation{float:left;width:200px;margin-left:-100%}
  26. div#extra{float:left;width:200px;margin-left:-200px}
  27. div#footer{clear:left;width:100%}
  29. div#container{min-width: 600px}
  30. </style>
  31. <script type="text/javascript" src="filler.js"></script>
  32. </head>
  33. <body>
  34. <div id="container">
  35. <div id="header"><h1>Header</h1><a href="http://blog.html.it/layoutgala/layout13.zip">download this layout</a></div>
  37. <div id="wrapper">
  38. <div id="content">
  39. <p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
  40. <p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
  41. <p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>
  42. <p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>
  43. </div>
  44. </div>
  45. <div id="navigation">
  46. <p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
  48. </div>
  49. <div id="extra">
  50. <p><strong>3) More stuff here.</strong> very text make long column make filler fill make column column silly filler text silly column fill silly fill column text filler make text silly filler make filler very silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
  51. </div>
  52. <div id="footer"><p>The footer. You can go to the <a href="http://blog.html.it/layoutgala/">index page</a>.</p></div>
  53. </div>
  54. <script type="text/javascript">AddFillerLink("content","navigation","extra")</script>
  55. </body>
  56. </html>
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • PolishHurricane
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Fév 17, 2005
  • Messages: 1585
  • Status: Offline

Message Juillet 18th, 2010, 10:48 pm

Ah oui, Im un imbécile. Im tellement habitués à ne pas utiliser cette propriété, car lorsque le premier est sorti, il était à peu près non pris en charge. J'ai fini par tout jeter un min-width: 750px sur la div principale de mon site tout entier. Espérons thats pas trop grand. Il a ses problèmes, mais f * ck...Je ne peux pas croire que je ne pense pas que de cela.

Merci
There's no place like 127.0.0.1, badass part is now it's ::1
  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8211
  • Loc: USA
  • Status: Offline

Message Juillet 19th, 2010, 9:16 pm

Pas de problème. Je ne pense pas que 750px est trop grand...les moniteurs de résolution 600px sont à peu près disparu de toute façon.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • PolishHurricane
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Fév 17, 2005
  • Messages: 1585
  • Status: Offline

Message Juillet 19th, 2010, 9:22 pm

Ouais je fait visé à http://www.w3schools.com/browsers/browsers_display.asp et a fini par rendre 1000px. Avec chaque jour la résolution minimale augmente de toute façon.
There's no place like 127.0.0.1, badass part is now it's ::1
  • whogoes
  • Novice
  • Novice
  • No Avatar
  • Inscription: Juil 07, 2010
  • Messages: 18
  • Status: Offline

Message Juillet 25th, 2010, 10:45 pm

Utilisation 1000px est une taille décente. Sa population quant aux temps de commencer à changer leurs résolutions pour les grands formats.

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 11 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 146 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
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC