Bonjour à tous les amis!

Mon nom est William et j'aimerai savoir comment réaliser une page d'un site web sans scroll horizontal.

A partir du langage Html et Css. Je suis ultra débutant une aide serait la bienvenue!

Bonjour,

il va nous falloir beaucoup plus d'informations sur ton besoin. Par défaut, une page HTML est "sans scroll horizontal", et ce scroll n'apparaît que si on force des largeurs non-pertinentes en CSS.

header
{
	background-color: #000;
	width: 1920px;
	height: 48px;
}
html, body
{
	
	height: 100%;
	margin: 0;
	padding: 0;
	
	
}
.container
{
	height: auto;
}
.dool_logo
{
	width: 100px;
	height: 37px;
	position: absolute;
	top: 8px;
	left: 35px;
}

.wt
{
	width: 500px;
	height: 100px;
	top: 113px;
	left: 300px;
	position: relative;
	z-index: 89;
	
}



.circle_dool_al
{
	width:650px;
	height:550px;
	position:absolute;
	top:105px;
	z-index:80;
	
	
}
body {
	display : table;
	width: 100%;
	background-color: #EEEEEE;
	
}
h1
{ 
    display: block;
	position: relative;
	top:200px;
	left:369px;
	z-index:99;
	font-family: roboto;
	color: #FFFFFF;
}



footer 
{
	
	
}

Merci de ton retour Lamecarlate.

Je suis en train de réaliser une page, dont le header est de 1920px.

Je souhaite concevoir cette page dans cette largeur. Mais étrangement

ma page va au delà de cette dimension en terme de largeur. Je sais pas si je suis clair.

Si ça peut aider voila le code Css que j'ai produit:

header
{
    background-color: #000;
    width: 1920px;
    height: 48px;
}
html, body
{
   
    height: 100%;
    margin: 0;
    padding: 0;
   
   
}
.container
{
    height: auto;
}
.dool_logo
{
    width: 100px;
    height: 37px;
    position: absolute;
    top: 8px;
    left: 35px;
}

.wt
{
    width: 500px;
    height: 100px;
    top: 113px;
    left: 300px;
    position: relative;
    z-index: 89;
   
}



.circle_dool_al
{
    width:650px;
    height:550px;
    position:absolute;
    top:105px;
    z-index:80;
   
   
}
body {
    display : table;
    width: 100%;
    background-color: #EEEEEE;
   
}
h1
{
    display: block;
    position: relative;
    top:200px;
    left:369px;
    z-index:99;
    font-family: roboto;
    color: #FFFFFF;
}



footer
{
   
   
}

Je viens de débuter, j'ai lu un livre sur le sujet il y a une semaine. S'il vous plaît ne vous moquez pas trop.

-
Edité par WkgatesKom 19 juin 2018 à 14:14:19

C'est parce que body a des marges par défaut. Mets-les à 0.

Et oublie tout de suite position: relative et absolute pour la mise en page (tant que c'est frais dans ta tête) : une page web n'est pas une feuille de papier, on ne "place" pas les éléments comme ça.

Je te suggère de lire tranquillement le cours HTML/CSS d'OpenClassrooms, il donne les bases : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3  (par curiosité, de quel livre parles-tu ?).

(oh, et peux-tu éditer ton précédent message pour colorer le code en utilisant le bouton </> de la barre d'outils ? Merci)

-
Edité par Lamecarlate 19 juin 2018 à 14:07:54

Merci de ta réponse, le livre que j'ai lu c'est celui de Michel Martin. Html5, CSS3 & Jquery.

Je suis un peu confus, il faut que dans body je mette la propriété margin: 0; c'est bien ça ?

D'accord , je prend note du conseil, mais du coup pour positionner une image quelle est la propriété et la valeur que l'on doit utiliser

si l'on souhaite qu'elle se situe à un endroit précis? 

-
Edité par WkgatesKom 19 juin 2018 à 14:33:22

> celui de Michel Martin. Html5, CSS3 & Jquery

Ok, je ne connaissais pas, merci.

> il faut que dans body je mette la propriété margin: 0;

Exactement

> du coup pour positionner une image quelle est la propriété et la valeur que l'on doit utiliser

On ne "positionne" pas. C'est un peu compliqué à expliquer comme ça… Enfin, maintenant avec le module Grid on doit probablement pouvoir parler de "positionnement", mais j'avoue ne pas assez le connaître.

Tu peux montrer ta maquette, ou bien un schéma de ce que tu attends ?

C'est la maquette que j'aimerai réaliser.

-
Edité par WkgatesKom 19 juin 2018 à 14:58:28