Quel serait le meilleur moyen de créer ma navigation?

  • SharkShark
  • Guru
  • Guru
  • Avatar de l’utilisateur
  • Inscription: Avr 24, 2004
  • Messages: 1013
  • Loc: Living In Today
  • Status: Offline

Message Mai 27th, 2004, 2:15 pm

LOL RTM, vous avez vraiment me baiser jusqu'à maintenant. J'ai eu firefox, et j'ai vu la différence dans la façon dont il a montré la page. Alors, que dois-je faire? Je vais modifier la page de sorte qu'il semble bien dans firefox, mais maintenant il ressemble à ça dans IE. LOL im so vissé. Est-ce que la meilleure chose à faire maintenant est de refaire le site en utilisant divs à la place de tables? serait clair que la majorité des problèmes? apprécions l'aide.
Yesterday is history.Tomorrow is mystery.Today is a gift.
Car Audio Sytems
LED Emergency Lights
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Mai 27th, 2004, 2:15 pm

  • rtm223
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Mar 24, 2004
  • Messages: 1855
  • Loc: Uk
  • Status: Offline

Message Mai 27th, 2004, 2:37 pm

La première étape consiste toujours le code valide. En particulier le doctype. Utiliser du HTML 4.01:

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.   "http://www.w3.org/TR/html4/loose.dtd">


La raison pour laquelle je this cela, c'est que IE6 a un "quirks mode". Si vous ne mettez pas dans un doctype il passe en mode quirks et commence à jouer en place. Si vous mettez dans un doctype valide ensuite il commence à se comporter davantage comme Mozilla.

Si vous êtes chanceux, cela pourrait régler le problème.


Quote:
Est la meilleure chose à faire maintenant c'est de refaire le site en utilisant divs en place de tableaux

Si vous commencez tout juste à apprendre CSS alors vous aurez besoin d'une semaine ou deux pour savoir comment procéder. Im deviner qui n'est pas une option avec ce projet??
CSS website design tutorials
  • gsv2com
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Jan 25, 2004
  • Messages: 776
  • Loc: Nippon
  • Status: Offline

Message Mai 28th, 2004, 12:59 am

Le meilleur moyen serait d'utiliser uls et Lis pour vos liens depuis une barre de navigation n'est rien mais une liste de pages.

Faire de vos liens comme

Code: [ Select ]
<a>link</a> <a>link</a>


pourrait fonctionner, mais situés en dehors itd disgracieuse sur les navigateurs supportant CSS ou très peu. La meilleure façon de faire aurait été de:

Code: [ Select ]
<ul id="nav">
   <li><a href="page.htm">1</a></li>
   <li><a href="page2.htm">2</a></li>
   <li><a href="page3.htm">3</a></li>
   <li><a href="page4.htm">4</a></li>
   <li><a href="page5.htm">5</a></li>
</ul>
  1. <ul id="nav">
  2.    <li><a href="page.htm">1</a></li>
  3.    <li><a href="page2.htm">2</a></li>
  4.    <li><a href="page3.htm">3</a></li>
  5.    <li><a href="page4.htm">4</a></li>
  6.    <li><a href="page5.htm">5</a></li>
  7. </ul>

Dans votre CSS, vous avez seulement besoin d'un peu de code pour démarrer. N'hésitez pas à expérimenter the heck out of ceci.
Code: [ Select ]
<style type="text/css">
ul#nav{margin:0; list-style-type:none;}
ul#nav li{display:inline;} // don't do that if you want links to be vertical.
</style>
  1. <style type="text/css">
  2. ul#nav{margin:0; list-style-type:none;}
  3. ul#nav li{display:inline;} // don't do that if you want links to be vertical.
  4. </style>

Cela devrait marcher pour vous. Mess with vos marges, rembourrage, les couleurs et origines à obtenir cette question ressemble exactement comme vous le souhaitez. Pas besoin de tableaux ou de divs ce que-si-jamais. Just Frugale droite html avec un peu de css sur le côté.

Un bon site web pour en apprendre plus sur la liste de navigation de style: http://css.maxdesign.com.au/

Découvrez la listamatics.
  • gsv2com
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Jan 25, 2004
  • Messages: 776
  • Loc: Nippon
  • Status: Offline

Message Mai 28th, 2004, 1:04 am

On pouvait vraiment faire tout votre design sans l'utilisation d'une seule table. Ce serait un plaisir d'équipe projet. Tout ce qu'il vous faut est un peu "float: right" s jetés là-bas et vous êtes bon à faire.
  • rtm223
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Mar 24, 2004
  • Messages: 1855
  • Loc: Uk
  • Status: Offline

Message Mai 28th, 2004, 1:14 am

Une liste de liens est toujours <i> </ i> le meilleur moyen, mais j'ai essayé d'éviter de dire cela. Pour quelqu'un qui ne dispose que d'une petite connaissance de CSS, apprivoiser les listes est une douleur dans le cul lol

Quote:
On pouvait vraiment faire tout votre design sans l'utilisation d'une seule table

Sauf si vous avez une grille, vous <i> jamais </ i> besoin d'utiliser un table.Im pas encore un expert, mais je défie quiconque de me montrer une non-mise en page sous forme de tableau tableau que je ne peux pas reproduire avec CSS.
CSS website design tutorials
  • gsv2com
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Jan 25, 2004
  • Messages: 776
  • Loc: Nippon
  • Status: Offline

Message Mai 28th, 2004, 1:23 am

Im vais passer les deux prochaines semaines à ce sujet. :) Vous prêt à relever un défi RTM? Im va produire la plus laide freakin table layout youve jamais vu juste pour que je puisse vous donner le défi de vos rêves!

LOL.

Just kidding. Je n'ai pas le temps. You're absolutely right, et déjà je le sais. :)
  • gsv2com
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Jan 25, 2004
  • Messages: 776
  • Loc: Nippon
  • Status: Offline

Message Mai 28th, 2004, 1:25 am

rtm223 a écrit:
Une liste de liens est toujours <i> </ i> le meilleur moyen, mais j'ai essayé d'éviter de dire cela. Pour quelqu'un qui ne dispose que d'une petite connaissance de CSS, apprivoiser les listes est une douleur dans le cul lol

Eh bien, la première fois, au moins. Après avoir fait un peu de temps et faire connaissance avec le css, il est moins douloureux que de le faire avec des tableaux IMHO. De plus, pas de meilleur sentiment que, après la création de code élégant.

Note: Je me sens comme un hypocrite puisque la navbar sur GrooveSeeker ( http://www.gsv2.com ) Est toujours fondée sur la table. :oops: Ill faire que peu. J'ai pensé à un moyen d'éliminer complètement tous les tableaux de ce site. Eh bien, peut-être...
  • rtm223
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Mar 24, 2004
  • Messages: 1855
  • Loc: Uk
  • Status: Offline

Message Mai 28th, 2004, 1:36 am

sur groveseeker: Eh bien, leur flotteur gauche et supprimer le texte zoom disabler. si vous faites l'UL de largeur fixe, l'utilisation de fixer le rembourrage des largeurs et des hauteurs de la LIS et de flotter, ils iront sur deux lignes de texte si l'on utilise un zoom. Qui est aussi élégant que vous pouvez l'accessibilité possibley d'espoir pour :)

Sur les requins, vous voulez wouldnt float: right car cela place les liens ci-dessus «le contenu (en termes html), de sorte que le flotteur gauche au lieu de contenu

Encore mieux, utiliser le positionnement absolu, comme il n'y a pas de pied de page et vous puis éliminer la possibilité de rencontrer un ou l'autre de l'IE Float Bugs
CSS website design tutorials
  • gsv2com
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Jan 25, 2004
  • Messages: 776
  • Loc: Nippon
  • Status: Offline

Message Mai 28th, 2004, 1:41 am

Croyez-moi, Im assez au courant de ce qui doit être fait sur gsv2, j'ai juste besoin de le faire. :) Je viens d'emménager dans un nouvel appartement hier et il a trouvé un nouvel emploi, il ya deux mois, donc les choses ont été un peu trop agitée pour travailler sur mon propre merde.........

...l'un de ces jours...:) Merci bien.
  • SharkShark
  • Guru
  • Guru
  • Avatar de l’utilisateur
  • Inscription: Avr 24, 2004
  • Messages: 1013
  • Loc: Living In Today
  • Status: Offline

Message Mai 28th, 2004, 5:31 am

LOL wow merci les gars pour l'entrée! en réponse à votre première question, la RTM, je avons 4 mois pour mener à bien ce projet. Son essentiellement en ligne de données, la société a actuellement un site Web, mais ils cherchent à présenter une mise à jour à l'automne.

Donc, s'il vous plaît me donner tous les conseils vous a man! Mon intention est d'avoir plus du site en CSS et de l'utilisation de PHP un peu. I PHP peut manipuler, plus ou moins, c'est le CSS im des problèmes avec.

Alors Im vais essayer les codes que vous et gsv2 suggéré, et être de retour mauvais quand j'ai besoin de plus d'aide :D
Yesterday is history.Tomorrow is mystery.Today is a gift.
Car Audio Sytems
LED Emergency Lights
  • rtm223
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Mar 24, 2004
  • Messages: 1855
  • Loc: Uk
  • Status: Offline

Message Mai 28th, 2004, 6:56 am

Quatre mois dites-vous? Eh bien, première étape est de s'habituer à la syntaxe CSS, vous aurez besoin de connaître:

tag de sélection de base

la sélection des balises spécifiques par classe et id:
Code: [ Select ]
.classname{
  /*styles for this class here*/
}
#id{
  /*styles for this id here*/
}
  1. .classname{
  2.   /*styles for this class here*/
  3. }
  4. #id{
  5.   /*styles for this id here*/
  6. }


sélection des éléments imbriqués:
Code: [ Select ]
div a{
  /*these styles will apply to the and &lt;a> tags that
  are INSIDE a div. a's not inside a div will not be affected*/
}
  1. div a{
  2.   /*these styles will apply to the and &lt;a> tags that
  3.   are INSIDE a div. a's not inside a div will not be affected*/
  4. }


pseudo classes pour les liens:
Code: [ Select ]
a{
  /*these are the styles for a link*/
}
a:hover{
  /*these are the styles for link when you hover
  the mouse over it*/
}
a:visited{
  /*these are the styles for links that have already
  been visited*/
}
  1. a{
  2.   /*these are the styles for a link*/
  3. }
  4. a:hover{
  5.   /*these are the styles for link when you hover
  6.   the mouse over it*/
  7. }
  8. a:visited{
  9.   /*these are the styles for links that have already
  10.   been visited*/
  11. }


Thats-il vraiment de la syntaxe, puis lancez simplement l'apprentissage propriétés - jouer avec la position: absolute; sur certains divs, utilisant les flèches gauche, droite, haut, bas, la largeur et la hauteur des propriétés avec elle.

Espérons que d'ici ce <a point href="http://www.caffeinefuelled.net"> caffiene alimentée </ a> sera installé et fonctionnel, sinon commencer googler mises en page CSS.

Essayez également de googler apprivoiser des listes ou des listes de stylisme
CSS website design tutorials
  • SharkShark
  • Guru
  • Guru
  • Avatar de l’utilisateur
  • Inscription: Avr 24, 2004
  • Messages: 1013
  • Loc: Living In Today
  • Status: Offline

Message Mai 28th, 2004, 7:10 am

:D u da man RTM! LOL. ici est la chose même si, peu importe ce que je fais, firefox et IE il suffit de ne pas afficher la page de même. Look @ cette page:

http://ww.playersnmotion.com/main_site/index2.html

si vous le voir dans les deux navigateurs, vous pouvez voir une différence énorme. par exemple regarder un subnav, dans firefox, les liens sont tous soigneusement rangés dans son IE comme ils sont centrés, le sont même pas sur le côté gauche. Quelle serait la cause? J'ai fait cette page pour aller à l'essentiel im déchirer le code et le réécrire. Ainsi, dans le fil de ma pensée ce faire un peu long :D
Yesterday is history.Tomorrow is mystery.Today is a gift.
Car Audio Sytems
LED Emergency Lights
  • rtm223
  • Mastermind
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Mar 24, 2004
  • Messages: 1855
  • Loc: Uk
  • Status: Offline

Message Mai 28th, 2004, 7:29 am

SharkShark a écrit:
Quelle serait la cause?


Internet Explorer étant un peu inférieur....

J'ai vu une fois un site qui répertorie tous les bugs connus et CSS pour les navigateurs. Les navigateurs Gecko eu 3 (bien que je trouve une nouvelle semaine dernière, donc quatre) Internet Explorer 6 a des charges, il pourrait y avoir n'importe quel nombre de choses à l'origine du problème. Lorsque vous ajoutez sur elle que vous utilisez les attributs HTML, ainsi, elle pourrait être l'une des mille choses.

Tandis que vous apprenez CSS, vous pouvez tout aussi bien de commencer à utiliser XHTML, en même temps - que Wil prendre toutes les 20 minutes pour l'apprendre lol.


La seule autre chose que je peux dire, c'est de garder à l'esprit le modèle de boîte. À un certain point, vous n'aurez besoin d'apprendre le modèle de boîte de Tantek Celic hack, qui est une douleur, mais infinately utile. Soit lorsque vous spécifiez la largeur d'un élément, c'est la largeur du contenu, les rembourrages et les frontières sont en sus.
Code: [ Select ]
div{
  width:200px;
  padding:40px;
  border:10px;
}
  1. div{
  2.   width:200px;
  3.   padding:40px;
  4.   border:10px;
  5. }


donne 200px contenu + (40px 10 px) * 2
Total 300px frontière à l'autre.

CECI EST IMPORTANT
CSS website design tutorials
  • SharkShark
  • Guru
  • Guru
  • Avatar de l’utilisateur
  • Inscription: Avr 24, 2004
  • Messages: 1013
  • Loc: Living In Today
  • Status: Offline

Message Mai 28th, 2004, 8:25 am

LOL i mai à vous payer une partie de ma commission, à ce taux de RTM. :D J'apprécie l'aide. OK, i think i got XTHML bas. Je viens de supprimé tous les tableaux de la page Web et je procéder pour commencer à travailler avec div. * soupir * je n'ai jamais eu de problèmes jusqu'à ce que j'ai commencé à essayer d'obtenir professionnel. :P Il suffit de garder un oeil sur ce fil cause Im gonna ont un million de question que nous progressons. :)
Yesterday is history.Tomorrow is mystery.Today is a gift.
Car Audio Sytems
LED Emergency Lights
  • SharkShark
  • Guru
  • Guru
  • Avatar de l’utilisateur
  • Inscription: Avr 24, 2004
  • Messages: 1013
  • Loc: Living In Today
  • Status: Offline

Message Mai 28th, 2004, 4:46 pm

OK prob prochaine :P

Je cherche à obtenir l'image bg haut (les lignes à travers le haut) pour s'étendre à travers le haut. Elle travaillera dans IE (allez comprendre), mais il ne sera pas dans Firefox (go figure à nouveau) voici le code sur la page:

Code: [ Select ]
<img class="x" src="images/top_bg.jpg" width="100%" height="209">


Et c'est le code sur la feuille de style.

Code: [ Select ]
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
  1. img.x
  2. {
  3. position:absolute;
  4. left:0px;
  5. top:0px;
  6. z-index:-1
  7. }


Comment dois-je changer et / ou modifier ce que c'est? Merci
Yesterday is history.Tomorrow is mystery.Today is a gift.
Car Audio Sytems
LED Emergency Lights
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Mai 28th, 2004, 4:46 pm

Afficher de l'information

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