Problème avec Page HTML

[Cass']

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!

[Self]

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;

[Cass']

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!

[Self]

Bonjour .

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.

[Cass']

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!

[Self]

Bonsoir,

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

[Cass']

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!

[[Nihil]]

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%;

[Cass']

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