28172 sujets

CSS et mise en forme, CSS3

Mise en page (colonnage, placement des div ...)

Coucou Smiley ravi

J'ai un projet pour mon école, un site web à créer, plus particulièrement un site de voyage étudiants. J'ai donc déjà penser aux design du site, fait une petite maquette etcetc. La j'en suis à la partie structure, mon code html est fait (mais vide de contenu pour le moment) et j'ai de petit soucis pour le css.

Voici le code HTML : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Dam!</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="icon" type="image/png" href="images/icon.png" />
        <link href='https://fonts.googleapis.com/css?family=Roboto:500' rel='stylesheet' type='text/css'> <!-- Import police roboto google -->
        <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- Import jQuery google -->
        <!-- <script type="text/javascript" src="jquery.js"></script> import depuis un fichier sur le serveur de jQuery -->
    </head>

    <body>
    	<header>
    		
    		<nav>
    			<ul>
    				<li><a href="info.html">Info et actu</a></li>
    				<li><a href="media.html">Photo et média</a></li>
    				<li><a href="buy.html">Achat</a></li>
    			</ul>
    		</nav>
    	</header>

    	<section id="content">
    		<article>
    			ppppppp
    		</article>

    		<aside>
    			ppppppp
    		</aside>
    	</section>

    </body>
</html>


Et le CSS : 

html 
{ 
  margin:0px;
  padding:0px;
  background: url(images/background.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}

body
{
	margin:0px;
	padding:0px; 
	width:1000px;
}

header
{
	margin-top:0px;
	margin:0px auto;
	height:130px;
	width:100%;
	background-color:black;
}

section
{
	width:100%;
}

article
{
	position:relative;
	width:62,5%;
}

aside
{
	position:relative;
	width:37,5%;
	left:62,5;
}


Le colonnage ne se fait pas et le margin-top:0px; ne marche pas sur le header si vous auriez des pistes Smiley ohwell

J'attends vos réponses avec impatience, merci d'avance Smiley cligne
Modérateur
bonsoir,

on n'écrit pas : 37,5% mais 37.5%

left a besion d'une unité de mesure. par exemple left:62.5% (avec un point et pas une virgule)

enfin pour mettre cote a cote tes éléments dans section , tu as au choix (pour les plus simples):

1) float : left; sur les enfants
2) display:table sur section et display:table-cell sur les enfants
3) display:flex sur section]
Modifié par gcyrillus (14 Mar 2016 - 23:49)
Administrateur
Bonjour et bienvenue, Smiley smile

J'ajoute que quand la valeur est '0px', il ne faudrait pas mettre d'unité : 0rem, 0px, 0pt c'est toujours 0 quelle que soit l'unité et c'est une très très grosse habitude que de ne pas mettre d'unité.

Zoning : pas de lien retour à l'accueil ni de logo dans ton ébauche de page ; c'est un code minimal je suppose ?

Element main (qui fait partie de la RECommandation HTML 5.0 du W3C) : tu pourrais l'ajouter autour de ton contenu (autour de section ou en remplacement de section et/ou article, ça ça dépendra aussi de ton contenu réel)

Layout : tu peux regarder sur http://schnaps.it par exemple (qui n'utilise pas l'élément main, mmh ça datait d'avant je crois bien mais il y a tout de même le role ARIA role="main")
Merci pour vos réponses, j'arrive maintenant a créer le colonnage mais mon contenu n'est plus centrer sur la page Smiley ohwell
De plus je me suis rendu compte en voulant mettre ma liste en display:inline; que si je mettais cette propriété sur nav il restait une marge haute et qu'en la mettant sur ul cela se supprimait ...
Je ne vois pas ce qui a fait partir le centrage et le margin-top 0 ne semble pas fonctionner Smiley ohwell
Je viens de résoudre le problème de centrage, mais pour le margin-top je n'ai aucune idée Smiley ohwell

@Felipe : pour le zoning, un logo qui permet le retour a l'index sera integrer plus tard ^^. Pour ce qui est du main, je ne connais pas du tout la balise, je suppose que c'est une nouvelles balise pour le contenu principale de la page non ? Smiley smile
Sujet clos
Aller à