5568 sujets

Sémantique web et HTML

Header Website

Bonjour.

J'ai un problème un peux complexe à expliquer , je n'arrive pas à créer un rectangle en bordure avec du texte dessus de façon superposé et qui soit responsive comme sur l'image ci jointe. et mettre aussi sur la gauche les liens.

upload/1492636193-65276-capture-dancran-2017.jpg

voici mon début de code : 

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img/backgroundmenu.png" alt="...">
      <div class="carousel-caption">
           <div class="col-md-12 text-right">
               <h1>Consumer<br>Product<br>Consulting </h1>
              
                     <div class="object">
                     <img  class="rectangle"src="img/rectangle.png">
                      
               </div>
               
                   <a href class="readmore_menu">Read More</a>
              
                 </div>
            </div>
             </div>
              </div>
               </div>







.banner-img {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../img/backgroundmenu.png");
}


.object {
    position: relative;
    z-index: 2
    }

.carousel-caption h1 {
    
    font-size: 49px;
    position: absolute;
    margin-left: 350px;
    margin-top: 77px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;


}



.carousel-caption h1 {
    
    font-size: 49px;
    position: absolute;
    margin-left: 350px;
    margin-top: 77px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;


}


.readmore_menu {
    font-size: 20px;
    position: absolute;
    color: yellow;
    margin-left: -344;
    margin-top: -108px;
    
}

Modifié par Mikazuki31 (19 Apr 2017 - 23:10)
Salut Mikasuki31,
en partant de ton code j'ai fais ce que tu recherchais :
Le principe est de positionner un div en absolute sur l'écran où te le désire.
Tu lui met une bonne grosse bordure jaune.
Puis à l'intérieur de ce div tu ajoutes ton titre et tes liens en les positionnant aussi en absolute sans utiliser left ou top mais en utilisant un margin-left négatif pour décaler le text vers la gauche et un margin-top pour placer ton texte à la hauteur que tu veux...
Quelques détails:
-le line-height: 100% c'est pour ne pas laisser d'espace entre les lignes sinon on voie la bordure
-les 'span' qui encadrent le texte c'est pour ne pas mettre h1 avec un background à black,
ainsi ton image en arrière plan sera visible là où n'y a pas de texte même sur l'élément h1.


<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body {
                background-color: black;
            }
          .banner-img {
            width: 100%;
            height: 100%;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            /*background-image: url("../img/backgroundmenu.png");*/
          }

          .object {
              position: absolute;
              z-index: 2;
              border: solid 5px yellow;
              left: 700px;
              top: 225px;
              width: 275px;
              height: 350px;
              }

          .carousel-caption h1 {
              position: absolute;
              font-size: 49px;
              font-family: 'Montserrat', sans-serif;
              font-weight: bold;
              color: white;
              margin-left: -150px;
              text-align: right;
              line-height:100%;
          }

          .carousel-caption h1 span {
              background-color: black;
          }
          
          .readmore_menu {
              position: absolute;
              font-size: 20px;
              color: yellow;
              background-color: black;
              margin-top: 220px;
              margin-left: -50px;
          }
        </style>
    </head>
    <body>
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <!--img src="img/backgroundmenu.png" alt="..."-->
            <div class="carousel-caption">
                 <div class="col-md-12 text-right"> 

                     <div class="object">
                         <h1><span>Consumer</span><br><span>Product</span><br><span>Consulting</span><br>
                     </h1>
                     
                     <a href class="readmore_menu">Read More</a>
                           <!--img  class="rectangle" src="img/rectangle.png"-->

                     </div>

                    
                 </div>
            </div>
          </div>
        </div>
      </div>
    </body>
</html>


Bonne continuation
Meilleure solution
Salut !

Merci GJboba , le hic c'est que n'arrive pas a afficher mon texte et mon rectangle quand je l'intègre dans mon code... alors que ça fonctionne bien dans ton exemple avec mon background.
Je me demande si le problème vient pas du "body" ? et je n'arrive pas à trouver le problème

<DOCTYPE! html>
<html>
    <head>
       
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Counsel Design Website</title>
      
      
      <!--links--> 
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css">
      <link rel="stylesheet" href="css/font-awesome.css">
      
      
       <!--Fonts--> 
       <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700|Open+Sans:300,400,600,700" rel="stylesheet">
       
     
     </head>  
       
     
     
     <body>
         
         <!--NAVIGATION-->         
            
    <div class="header-area" id="home">             
    <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="img/logotype.png"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#home">About</a></li>
        <li><a href="#intro">Services</a></li>
        <li><a href="#portfolio">Why we best</a></li>
        <li><a href="#team">Testimonial</a></li>
        <li><a href="#footer">Contact</a></li>
        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
          </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
  
  <!--slide carousel-->
</nav>


 
         
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="img/backgroundmenu.png" alt="...">
            <div class="carousel-caption">
                 <div class="col-md-12 text-right"> 

                     <div class="object">
                         <h1><span>Consumer</span><br><span>Product</span><br><span>Consulting</span><br>
                     </h1>
                     
                     <a href class="readmore_menu">Read More</a>
                           <!--img  class="rectangle" src="img/rectangle.png"-->

                     </div>

                    
                 </div>
            </div>
          </div>
        </div>
      </div>




/*FONTS

 font-family: 'Montserrat', sans-serif;
font-family: 'Open Sans', sans-serif;
*/

/*NAV*/

.navbar-default {
    background-color: transparent;
    border-color: transparent;
    margin-top: 10px;
}

.navbar-default .navbar-nav>li>a {
    color: white;
}

.navbar-default .navbar-nav>li>a:hover {
    color: yellow;
    text-decoration: none;
    border-bottom: 1px solid yellow;
    border-width: 3px;
    line-height: 1em; 

    
    
}

  body {
           background-image: url(../img/backgroundmenu.png); 
            }
          .banner-img {
            width: 100%;
            height: 100%;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-image: url(../img/backgroundmenu.png); 
          }

          .object {
              position: absolute;
              z-index: 2;
              border: solid 8px yellow;
              left: 700px;
              top: 225px;
              width: 275px;
              height: 350px;
              }

          .carousel-caption h1 {
              position: absolute;
              font-size: 49px;
              font-family: 'Montserrat', sans-serif;
              font-weight: bold;
              color: white;
              margin-left: -150px;
              text-align: right;
              line-height:100%;
          }

          .carousel-caption h1 span {
background-image: url(../img/backgroundmenu.png);


}
          
          .readmore_menu {
              position: absolute;
              font-size: 20px;
              color: yellow;
              background-color: black;
              margin-top: 220px;
              margin-left: -50px;
          }
C'est possible qu'il y ai des interactions entre les différentes feuilles de styles : je n'avais pas tous tes css pour faire un test complet :
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.css">

Tu peux rechercher l'erreur en "inspectant" ta page html sur ton navigateur (sur chrome: menu contextuel: inspecter).

Bon courage
Sujet clos
Aller à