28173 sujets

CSS et mise en forme, CSS3

Positionner un logo et un menu (liste) en haut ?

Bonsoir,

J'aimerais positionné une image en logo en haut a gauche et mon menu avec une liste ul en haut a droite mais les menu en fait ce seront des images...

J'ai divisé comme ca :
- un bloc container qui comprendra tout, je fixe ainsi la largeur que je veux et je le centre !

- un bloc header qui contient le logo et le menu

- un bloc contenu et par la suite un bloc footer je pense

Déja que pensez vous de ma disposition ?
Des choses ne sont pas nécessaires ?
Comment découpez-vous vous ?

Voici le code xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titre</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">

  	<div id="header">
    
    	<img id="logo" src="images/logo.jpg" alt="Logo" width="241" height="113" />  
        
       	  <ul id="menu">
			  	<li></li>			
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
		  </ul>
	
  	</div>
  
    <div id="contenu">
    	Contenu
    </div>
</div>

</body>
</html>


Pour la feuille de style :

body
{
	margin: 0;
	padding: 0;
	text-align: center;
	background: white;	
	background-image: url("bg.jpg");
	background-repeat: repeat-x;
}

div#container
{
	width: 900px;
	margin-left: auto;
    margin-right: auto;
	padding: 0;
	text-align: left;
}

div#header
{
	width: 100%;
	height: 113px;
	margin: 0;
	padding: 0;				
}

img#logo
{
	padding: 0;
	margin: 0;
	display: block;
	float:left;
}

ul#menu
{
	float: right;
	list-style-type: none;
}

ul#menu li
{
	float: left;
	height: 55px;
	width: 55px;	
	border: 1px dotted #ffffff;
}

div#contenu
{
}


Je n'arrive pas à placer mon menu bien en haut a droite du div container... il reste un espace au dessus...

Voici ce que j'obtiens :
image

En blanc, c'est les <li>, on voit bien qu'ils ne se mettent pas contre le bord en haut ! Smiley ohwell

Quelqu'un peut m'aider svp ?

Merci

Ps : au passage, vous donnez quelle largeur pour votre site maintenant ? les 800*600 ne sont plus à l'ordre du jour ? C'est quoi le minimum maintenant en largeur ?
Modifié par italiasky (20 Dec 2007 - 21:13)
Juste en passant:

italiasky a écrit :
les 800*600 ne sont plus à l'ordre du jour ?

Non, mais les smartphones, si.
Concrètement, il est impossible de répondre à cette question avec certitude.
On estime que pour une résolution de 1024 par 768, une largeur maximale de 960 pixels semble adéquate.
Pour du 800*600, ça tournera dans les 750-770px. Pour les smartphones, quasiment la moitié.
Bref, c'est plus d'une question de point de vue personnel qu'il s'agit que d'une réponse universelle.

Au fait, ne pas oublier que les designs élastiques intelligents, c'est bien. Smiley smile
a écrit :
Ps : au passage, vous donnez quelle largeur pour votre site maintenant ? les 800*600 ne sont plus à l'ordre du jour ? C'est quoi le minimum maintenant en largeur ?

Je dirais que dans la mesure où on souhaite afficher quelque chose, le minimum de largeur devrait être autour de 1px. À zéro pixels, ça devient un peu compliqué.

Plus sérieusement: je fais des sites fluides avec largeur minimale (min-width) autour de 700px, et extensibles jusqu'à 1000 ou 1200px par exemple (ou une largeur maximale en EM, pourquoi pas). Ou bien des sites en largeur fixe en pixels, et là en gros on a deux choix:
- soit on vise la compatibilité en 800x600, et on se restreint à 760px grand maximum;
- soit on ne vise pas cette compatibilité, et on peut monter jusqu'à 980px (mais rien n'oblige à remplir toute la largeur en 1024...).

Pour le traitement des smartphones et autres appareils à petits écrans, on se penchera sur le média handheld, les media queries, voire la réalisation d'une interface dédiée.
Je partirais bien sur :
min-width: 780px;
max-width: 960px;

Vous en pensez quoi ?

760px c'est vraiment le max pour du 800*600, il me semblait que dans le temps je montais un peu plus quand même...

Bonne soirée
++
italiasky a écrit :
min-width: 780px;

Trop faible:
- la barre de défilement peut faire un peu plus (là j'en ai une de 17px, mais ça dépend de l'OS, du thème graphique, des préférences de l'utilisateur...);
- une fenêtre peut avoir des bordures;
- une fenêtre n'est pas forcément maximisée!;
- etc.

Si on a une barre de défilement inutile à cause d'un dépassement de quelques pixels (voire quelques dizaines de pixels), ça n'est pas bien problématique. Ça ne sera pas en tout cas un problème d'accessibilité... mais ça peut être un problème d'ergonomie (on transmet un message inutile, voire erroné) ou confort (on perd de la hauteur d'affichage).
Sujet clos
Aller à