Se connecter avec
S'enregistrer | Connectez-vous

Quelques bases de CSS... Euhhhh... ???

Dernière réponse : dans Programmation

Salut à la Communauté,

J'avais quelques notions de HTML des années 1998... Eum ! Eum ! Désolé pour mon retard...

Et là je dois faire un site de 4 pages avec du CSS !
J'essaye de m'y mettre au CSS mais pas si évident que ça même si c'est quand même relativement simple et qu'il y a beaucoup d'aide sur le net, il y a 2-3 trucs que je n'arrive pas à faire.

Www.elfoulystone.com est le site que vous pouvez aller voir pour contempler mon "oeuvre" mais vous verrez que je n'arrive pas "étaler" le menu vertical, ni à le coller à l'image du haut avec logo...

D'ailleurs l'image du haut et le menu se retrouverons sur chaque page et j'arrive pas à les intégrer directement dans le CSS afin d'éviter qu'ils ne se rechargent à chaque fois...

Quant à l'image dans le texte : elle est trop collée pfffff ! J'ai presque tout essayé entre les paddings et margins mais je n'arrive à rien...

Ma page est simple : "index.html" et mon CSS aussi "style.css".

Si vous pouvez m'aider, Dieu ne vous bénira pas ! Mais moi OUI !

Autres pages sur : bases css euhhhh

Lassé par la pub ? Créez un compte
Expert Programmation

Salut,

Jon91Stew, donne ici, entre balise [code], le contenu (ou plutôt un extrait) de tes fichiers HTML et CSS. Tes questions portent sur un exemple qui va être corrigé (enfin, TU espères ;)  ) et le sujet n'aura plus de sens si on n'y voit pas l'état initial.

Tout ça pour respecter le principe de ce forum : je pose une question très bête et j'obtiens une réponse super intéressante. Comme ma question n'était pas si bête, d'autres se la posent et trouvent ici une réponse. Ainsi, toi aussi tu contribues ;) 

Okay pas de souci !

Ici mon code HTML : 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
    

  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="en" >
    

  3.    <head>
    

  4.        <title>El Fouly Stone | Welcome</title>
    

  5.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    

  6.  
  7. 		<link rel="stylesheet" type="text/css" href="style.css" 
    

  8.  
  9. 		<style type="text/css">
    

  10. 			ul
    

  11. 			{
    

  12. 			list-style-type:none;
    

  13. 			margin-top:0;
    

  14. 			margin-right: 25%; 
    

  15. 			margin-left: 25%; 
    

  16. 			padding:auto;
    

  17. 			padding-top: 139px; 
    

  18. 			padding-bottom: 0; 
    

  19. 			overflow:hidden;
    

  20. 			}
    

  21. 			li
    

  22. 			{
    

  23. 			float:center;
    

  24. 			}
    

  25. 			a:link,a:visited
    

  26. 			{
    

  27. 			display:block;
    

  28. 			width:225px;
    

  29. 			font-family: tahoma, arial, verdana; 
    

  30. 			font-size: 16px; 
    

  31. 			font-weight:bold;
    

  32. 			color:#FFCC00;
    

  33. 			background-color:#46332A;
    

  34. 			text-align:center;
    

  35. 			padding:4px;
    

  36. 			text-decoration:none;
    

  37. 			text-transform:uppercase;
    

  38. 			}
    

  39. 			a:hover,a:active
    

  40. 			{
    

  41. 			background-color:#A68870;
    

  42. 			}
    

  43. 		</style>
    

  44.  
  45. 		<style type="text/css">
    

  46. 		img 
    

  47. 		{float:right}
    

  48. 		</style>
    

  49.  
  50.    </head>
    

  51.  
  52.    <body>
    

  53.  
  54.    <ul>
    

  55. 	<li><a href="#About us">About us</a></li>
    

  56. 	<li><a href="#Marble">Marble stones</a></li>
    

  57. 	<li><a href="#Others">Services</a></li>
    

  58. 	<li><a href="#Contact us">Contact</a></li>
    

  59. 	</ul>
    

  60.  
  61.    <p class="main"> <img src="images/first-image.jpg" />We would like to introduce ourselves as a group of professional, dynamic and committed entrepreneurs involved in the quarrying, processing and exporting of Egyptian Marble and Granite in every conceivable sizes and finishes. We extract marble and granite such as Alabaster, Brescia Sinai, Fileto Hassana, Galala, Golden Cream, Golden Sinai, Khatmeya, Samah, Silvia, Sinai Pearl, Sunny, Bianco Halayeb, Ghazal Dark and Light, Royal Red. Once sawn and polished by the best Italian machines made for that purpose, we export it to our customers from all over the world, as well, our packaging with international standards and features wooden crating along with anti-abrasive and anti-scratch covering to protect the finished products. </p>
    

  62.  
  63.    <p class="main"> Progress for Marble and Granite is not merely a stone supplier but can technically interact for your specific requirement. We have a proven track record for providing materials and services for international projects and for trading and marketing. </p>
    

  64.  
  65.  
  66.    </body>
    

  67. </html>


----------------------------------------------------------------------------------------------------------------

Et là mon code CSS : 

  1. html, body, div, span, applet, object, iframe, 
    

  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
    

  3. a, abbr, acronym, address, big, cite, code, 
    

  4. del, dfn, em, font, img, ins, kbd, q, s, samp, 
    

  5. small, strike, strong, sub, sup, tt, var, 
    

  6. dl, dt, dd, ol, ul, li, 
    

  7. fieldset, form, label, legend, 
    

  8. table, caption, tbody, tfoot, thead, tr, th, td {
    

  9. 	margin-left: auto; 
    

  10. 	margin-right: auto;
    

  11. 	padding: 0; 
    

  12. 	border: 0; 
    

  13. 	outline: 0; 
    

  14. 	font-weight: inherit; 
    

  15. 	font-style: inherit; 
    

  16. 	font-size: 100%; 
    

  17. 	font-family: tahoma, arial, verdana; 
    

  18. 	vertical-align: baseline; 
    

  19. }
    

  20. body {
    

  21. 	line-height : 1; 
    

  22. 	color: black; 
    

  23. 	background: white; 
    

  24. 	background: #fff url(images/topbar-900px.jpg) no-repeat top; 
    

  25. 	width: 90%
    

  26. }
    

  27. ol, ul {
    

  28. 	list-style: none; 
    

  29. }
    

  30. table {
    

  31. 	border-collapse: separate; 
    

  32. 	border-spacing: 0; 
    

  33. }
    

  34. caption, th, td {
    

  35. 	text-align: left; 
    

  36. 	font-weight: normal; 
    

  37. }
    

  38. blockquote:before, blockquote:after, 
    

  39. q:before, after {
    

  40. 	content: ""; 
    

  41. }
    

  42. blockquote q {
    

  43. 	quotes: "" ""; 
    

  44. }
    

  45. strong {font-weight: bold; 
    

  46. }
    

  47. p.main {font-size: 13px; color: #666666; text-align: justify; line-height: 1.65em; width: 900px}

-------------------------------------------------------------------------------------------------

Si vous avez d'autres commentaires comme du code inutile ou autre n'hésitez pas à me le dire...
Expert Programmation

Eh Jon, ça va pas ? Me mettre une meilleure réponse parce que je te rappelle à l'ordre
[:coyot-rtn:1]

Tu ne veux pas plutôt nous donner ta solution ?
Je te mettrai en meilleure réponse.
;) 
Lassé par la pub ? Créez un compte

Créer un nouveau sujet