Centrer des images [HTML] sur in site
G4minGUnder
Messages postés
17
Statut
Membre
-
G4minGUnder Messages postés 17 Statut Membre -
G4minGUnder Messages postés 17 Statut Membre -
Bonjour,
Lien du site ( NON FINI ! ) : http://undergamingtv.livehost.fr/
Je suis entrain de créer un site internet pour ma chaine youtube mais en fonction de la taille de l'écran/résolution , les images ce décalent a gauche ! je sais qu'il existe la commandes margin: auto; a mettre dans css... mais sa ne centre jamais ! Help me <3
screenshot du code html et css si besoin :
HTML :
CSS
je débute aussi en html donc mes codes sont surement " sale "
Merci <3
Lien du site ( NON FINI ! ) : http://undergamingtv.livehost.fr/
Je suis entrain de créer un site internet pour ma chaine youtube mais en fonction de la taille de l'écran/résolution , les images ce décalent a gauche ! je sais qu'il existe la commandes margin: auto; a mettre dans css... mais sa ne centre jamais ! Help me <3
screenshot du code html et css si besoin :
HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UnderGaminG WebSite</title>
<link rel="stylesheet" type="text/css" href="styles/style.css" media="screen" />
</head>
<body>
<div>
<div>
<img src="images/bg.jpg" name="bg" width="100%" height="100%">
<img class="Logo" src="images/logo.png" alt="logo" width="150" height="150" >
<img class="contact" src="images/contact.png" alt="contact" width="300" height="80" >
<img class="don" src="images/don.png" alt="contact" width="200" height="80" >
<img class="live" src="images/live.png" alt="live" width="200" height="80" >
<img class="select" src="images/select.png" alt="select" width="1250" height="300" >
<img class="extra" src="images/extra.png" alt="extra" width="1400" height="1450" >
<img class="ombre" src="images/ombre.png" alt="ombre" width="1400" height="1450" >
<a href="http://www.youtube.com/MrGaminGUnder"><img class="youtube" src="images/youtube.png" alt="youtube" width="300" height="245" ></a>
<a href="https://www.youtube.com/playlist?list=PLr5bK4wEfbUhAvRgXWfR4Bm_lmXAQ6XzS"><img class="inedit" src="images/inedit.png" alt="inedit" width="585" height="330" ></a>
<a href="http://www.youtube.com/MrGaminGUnder"><img class="Sub" src="images/sub.png" alt="sub" width="300" height="80" ></a>
</div>
<div>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="5VNF7QRGSG57J">
<input class="paypal" alt="paypal" type="image" src="https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !">
<img alt="" border="0" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
</body>
CSS
html, * {padding:0; margin:0;}
body { width:100%; background:url(http://www.image-maps.com/m/private/0/n9g3m8k9mrnptvusshc3mkkn55_bg.jpg) no-repeat top center #ada6a0; font-family:Arial,Verdana,Helvetica,sans-serif; font-size:12px;}
a {color:#000;text-decoration:none;}
a:hover{text-decoration:underline;}
#frame {width:1600px; margin: auto;}
.Logo
{
position: absolute;
top: 10px;
left: 10px;
}
.Sub
{
position: absolute;
top: 65px;
left: 160px;
}
.contact
{
position: absolute;
top: 70px;
left: 500px;
}
.don
{
position: absolute;
top: 75px;
left: 900px;
}
.live
{
position: absolute;
top: 70px;
left: 1200px;
}
.select
{
position: absolute;
top: -10px;
left: 150px;
}
.extra
{
position: absolute;
top: 10px;
left: 10px;
}
.paypal
{
position: absolute;
top: 1050px;
left: 600px;
}
.ombre
{
position: absolute;
top: 10px;
left: 10px;
}
.youtube
{
position: absolute;
top: 503px;
left: 116px;
}
.inedit
{
position: absolute;
top: 460px;
left: 413px;
}
je débute aussi en html donc mes codes sont surement " sale "
Merci <3
A voir également:
- Centrer des images [HTML] sur in site
- Site de telechargement - Accueil - Outils
- Site pour vendre des objets d'occasion - Guide
- Site pour partager des photos - Guide
- Site comme coco - Accueil - Réseaux sociaux
- Site x - Guide
9 réponses
Test avec la balise : " <center> Ton image </center>
Nn sa marche pas :/ mais je sais qu'on peut utiliser le margin avec un truc genre display: block; mais je sais pas comment sa marche, j'ai cherché sur le web et j'ai rien trouvé :/
Nn sa marche pas :/ mais je sais qu'on peut utiliser le margin avec un truc genre display: block; mais je sais pas comment sa marche, j'ai cherché sur le web et j'ai rien trouvé :/
J'ai réussi a centrer horizontalement ( <-----------------> ) mais verticalement, c'est la merde, ( enfin sa va ) mais la page est un peu plus bas que la normale et aussi mon fond d'écran c'est doublé vers le bas :/
c'est vraiment la merde pour moi :/
c'est vraiment la merde pour moi :/
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ajoute une "class" à la division située juste au dessus des images. Tu met genre <div id="image">.
Et dans le css, tu met :
#image {
margin:0 auto;
width:70%;
}
Ca permet de centrer la division qui réunie les images.
Et dans le css, tu met :
#image {
margin:0 auto;
width:70%;
}
Ca permet de centrer la division qui réunie les images.
" Ajoute une "class" à la division située juste au dessus des images. Tu met genre <div id="image">.
Et dans le css, tu met :
#image {
margin:0 auto;
width:70%;
}
Ca permet de centrer la division qui réunie les images. "
-------------------
Quand je le fais sa centre sa c'est sur mais sa mais tout Tout en haut de la page au meme endroit et du coup sa fait tériblement moche : voir screenshot : https://prnt.sc/436i74
Et dans le css, tu met :
#image {
margin:0 auto;
width:70%;
}
Ca permet de centrer la division qui réunie les images. "
-------------------
Quand je le fais sa centre sa c'est sur mais sa mais tout Tout en haut de la page au meme endroit et du coup sa fait tériblement moche : voir screenshot : https://prnt.sc/436i74
