Problème avec Page HTML

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème avec Page HTML

Message par Cass' Lun 25 Aoû 2014 - 19:35

Bonsoir!

Je suis en train de coder une PA en onglet via une page HTML et j'ai un problème de marges. Je sais comment déplacer les éléments, etc. Mais actuellement, 2 marges sur le côtés (impossibles à trouver dans mon css) m'empêchent de coder proprement les éléments en les plaçant. Voici une screen avec encadré en rouge, les marges gênantes. https://i.imgur.com/jV7pFPV.png

Et voici mon CSS :
Code:
#s-m-t-tooltip {
    padding: 3px 6px;
    margin: 20px 14px 7px 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 999;
    color: #fff; /** change the text color **/
    background-color: #000; /** background color **/
    font-size: 8px; /** font size **/
}
 
body {
    background-color: #fff;
    background-size: cover;
    background-attachment: fixed;
    margin: 0;
    word-wrap: break-word;
}
a { text-decoration:none; }
 
 

 
#main {
    margin-top: 90px;
    width: 600px;
    height: 500px;
    padding: 5px;
    background-color: rgba(255,255,255,0.3); /** 0.3 is the opacity for the main window background **/
    border: 1px solid rgba(255,255,255,0.4); /** 0.4 is the opacity for the main window border **/
}
 

 
.navi  {
    background-color: #fff; /**background colour of the page nav**/
    padding: 20px 20px 20px 30px;
    border-left: 50px solid #b6ebf4; /**the originally pink box with the cake in it**/
    width: 490px;
    font-size: 9px;
    text-align: left;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: pix;
    height: 8px;
}
 
.navi a  {
    color: #ccc;/**text colour of the page nav**/
    margin-right: 8px;
    width: 73px;
    display: block;
    float: left;
    text-align: center;
  font-family: 'Lato', sans-serif;
}
 
.cadet {
    color: #f5a1a5;
    position: absolute;
    font-size: 20px;
    margin: 0px 0px;
}
 
.favi {
    width: 50px;
    float: left;
    margin: 15px 20px 10px 18px;
}
 

 
.stepcarousel{
    position:relative;
    width:550px;
    height: 315px;
}
 
.stepcarousel .belt{
    position:absolute;
    left:0px;
    top:0px;
}
 
.stepcarousel .panel{
    float:left;
    overflow:hidden;
    width:550px;
}
 
#mygallery-paginate {
    position: absolute;
    width: 550px;
    opacity: 0.5;
    margin: -10px;
}
 
 
 
#mcontent  {
    background-color: #ffffff;/**main background colour**/
    padding: 10px;
    height: 400px;
    width: 700px;
    overflow: hidden;
    border: 1px solid #b6ebf4;
}
 
 
 

Et mon HTML :
Code:

<center>
 
 
<div id="main">
 
  <img class="favi" src="http://i.imgur.com/RXzCHuD.png">
 
 
<div class="navi">
<a href="/">ONE</a>
<a href="/">TWO</a>
<a href="/">THREE</a>
<a href="/">FOUR</a>
 

 <div align="left"><p id="mygallery-paginate">
<img src="https://31.media.tumblr.com/71a9bf10018404a1fd79b2a1a416749f/tumblr_inline_n9b9c06WFk1rshr70.png" data-over="https://31.media.tumblr.com/7b8a56e2d611190692a2c1663cb31d5e/tumblr_inline_n9b9boeGms1rshr70.png" data-select="https://31.media.tumblr.com/7b8a56e2d611190692a2c1663cb31d5e/tumblr_inline_n9b9boeGms1rshr70.png" data-moveby="1" /></p></div>
 
</div>
 
 
<div id="mcontent">
 
<div id="mygallery" class="stepcarousel">
<div class="belt">
 
 
<!---------------------------- A B O U T -------------------------------->
  <div class="panel">
   
<table><tr><td><table><tr><td><img src="http://i.imgur.com/gCOMEv8.gif" alt=""></td><td><div style="font-family: 'Lato', sans-serif; color:#9d9d9d; height: 100px; width: 200px; font-size: 10px; line-height: 15px; letter-spacing: 1px; text-align: justify; padding-right: 10px; padding-left: 0px; padding-bottom: 3px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + MORE</td></tr></table></div></td>
  <td><div style="font-family: 'Lato', sans-serif; height: 300px; witdh: 400px; color:#9d9d9d; font-size: 10px; line-height: 15px; letter-spacing: 1px; text-align: justify; padding-right: 5px; padding-left: 10px; padding-bottom: 0px;">+ NEWS AND OTHERS<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></td></tr></table>
   
   
    </div>
 
 
 
 <!---------------------------- A B O U T -------------------------------->
  <div class="panel"><div style="font-family: Verdana; font-size: 11px;">u.c</div></div>
 
 
<!---------------------------- A B O U T -------------------------------->
  <div class="panel"><div style="font-family: Verdana; font-size: 11px;">u.c</div></div>
 
<!---------------------------- A B O U T -------------------------------->
  <div class="panel"><div style="font-family: Verdana; font-size: 11px;">u.c</div></div>
</div>

 
</body>
</html>

Si vous avez besoin d'autres éléments pour pouvoir vous repérer, n'hésitez pas! Merci d'avance!


Dernière édition par Cass' le Mar 26 Aoû 2014 - 0:47, édité 1 fois
Cass'

Cass'
****

Féminin
Messages : 236
Inscrit(e) le : 01/06/2011

http://golden-fool.bb-fr.com/
Cass' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec Page HTML

Message par Self Lun 25 Aoû 2014 - 19:50

Bonsoir,

Vous avez au début du code HTML de votre message une balise <center> qui n'est pas fermée d’ailleurs.
C'est pour cette cause que votre élément est centré, enlevez cette balise ou ajoutez la ligne suivante au bloc CSS .stepcarousel devrait résoudre le problème :
Code:
float: left;
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec Page HTML

Message par Cass' Mar 26 Aoû 2014 - 0:32

Merci beaucoup pour l'aide et la réponse rapide!

EDIT : Ça marchait. Mais maintenant il y a toujours une barre qui demeure et cache le texte : https://i.imgur.com/AuTJktT.png Merci d'avance!
Cass'

Cass'
****

Féminin
Messages : 236
Inscrit(e) le : 01/06/2011

http://golden-fool.bb-fr.com/
Cass' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec Page HTML

Message par Self Mar 26 Aoû 2014 - 14:05

Bonjour Smile .

Vous avez mis au container du texte à droite de votre image "width: 300px;" que vous n'aviez pas avant.
Le tableau contenant l'image et le texte prend de ce fait 523px de la largeur de son parent (.stepcarousel .panel) que vous avez fixé à 550px.
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec Page HTML

Message par Cass' Mar 26 Aoû 2014 - 21:05

Merci! Mais il y a quand même une marge qui demeure toujours. J'ai mis pour la partie "+ New & Others" un width de 200px et celle-ci est coupée, là est le problème.

Merci d'avance!
Cass'

Cass'
****

Féminin
Messages : 236
Inscrit(e) le : 01/06/2011

http://golden-fool.bb-fr.com/
Cass' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec Page HTML

Message par Self Mar 26 Aoû 2014 - 21:13

Bonsoir,

C'est dû au overflow: hidden; mis à #mygallery et .stepcarousel .panel qui ont une largeur de 550px.
Self

Self
Membre actif

Masculin
Messages : 3853
Inscrit(e) le : 13/06/2013

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec Page HTML

Message par Cass' Mar 26 Aoû 2014 - 23:59

Effectivement, merci! Cependant il doit rester un margin ou un jenesaisquoi qui coupe le texte et l'image, en bas. https://i.imgur.com/dYFcqPw.png

Merci d'avance!
Cass'

Cass'
****

Féminin
Messages : 236
Inscrit(e) le : 01/06/2011

http://golden-fool.bb-fr.com/
Cass' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec Page HTML

Message par [Nihil] Mer 27 Aoû 2014 - 0:14

Coupé en hauteur, c'est ça ?

Dans le css de .stepcarousel on peut voir height: 315px;
Code:
.stepcarousel{
    position:relative;
    width: 690px;
    height: 315px;
  float: left;
}

Il faut tout simplement mettre une valeur plus grande en pixels, ou bien height: 100%;
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec Page HTML

Message par Cass' Mer 27 Aoû 2014 - 1:41

Merci pour l'aide et les réponses rapides aux questions parfois évidentes!
Cass'

Cass'
****

Féminin
Messages : 236
Inscrit(e) le : 01/06/2011

http://golden-fool.bb-fr.com/
Cass' a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum