-2

Tengo este código en html para maquetar un upperheader en la página de inicio. Mi problemática radica más que nada al momento de estilizar el profile.

.body {
  margin: 0;
  background-color: lightgray;
}

.upperheader {
  float: right;
  background-color: lightgray;
  width: 100%;
  height: 30px;
}

.Contact-Buttons {
  float: right;
}

.btn {
  background-color: #5baaeb;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
}

.dropbtn {
  background-color: white;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  list-style: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  float: right;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-style: solid;
  border-width: 1px;
  border-color: #2449eb;
  width: 50px;
}

.dropdown-content li {
  color: black;
  padding: 10px 10px;
  text-decoration: none;
  display: block;
  list-style: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.profile-circle {
  width: 40px;
  height: 39px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-border-radius: 99em;
  -moz-border-radius: 99em;
  border-radius: 99em;
  border: 2px solid #2449eb;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
}

.dropdown .badge {
  position: relative;
  top: -10px;
  left: -60px;
  padding: 3px 8px;
  border-radius: 50%;
  background: lightsalmon;
  color: white;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

#notification {
  color: orange;
  font-style: bold;
  background: #ffd9b3
}

.notifications {
  background-color: #fff2e6;
  font-style: bold;
}

.imgbell {
  padding: 10px, 0, 0, 10px;
}

.lower {
  background-color: white;
}

.Navbar {
  overflow: hidden;
  background-color: white;
}

.Navbar ul li {
  float: left;
  color: #070707;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  list-style: none;
}

.Navbar li:hover {
  background-color: #ddd;
  color: rgb(46, 44, 44);
}

.Navbar li.active {
  color: rgb(0, 102, 204);
}
<header>
  <div class=upperheader>
    <div class="Contact-Buttons">
      <button class="btn" href=#>Contact us</button>
      <button class="btn" href=#>FAQ</button>
      <span class=label-ntf>You have notifications</span>
    </div>
    <div class="dropdown">
      <button class="dropbtn">                       
        <div class=clearfix>
          <img  src="https://cdn3.iconfinder.com/data/icons/social-messaging-productivity-6/128/profile-male-circle2-512.png" class="profile-circle"/>
          <span class="badge">3</span>
        </div>
      </button>
      <div class="dropdown-content" style="left:0; ">
        <ul>
          <li>MY PROFILE</li>
          <li>CHANGE PASSWORD</li>
          <li>CHANGE SECURITY QUESTIONS</li>
          <li>RATES/FEES INFORMATION</li>
          <li>BANK INFORMATION</li>
          <li id="notification"> <img class="imgbell" src=bell.png width="20" height="20"> Notifications</li>
          <li class="notifications">PASSWORD EXPIRE SOON </li>
          <li class="notifications">NEW CHARGEBACKS ARE ON FILE </li>
          <li class="notifications">NEW FUNDING ACTIVITIES ON YOUR ACCOUNT </li>
        </ul>

      </div>
    </div>
  </div>
  <div class="lower">
    <img src="payments.png" alt="logo de oltiva" width=400px height=150px>
    <div class="Navbar">
      <ul>
        <li class="active" href=#>HOME</li>
        <li>TRANSACTIONS</li>
        <li>CHARGEBACKS</li>
        <li>STATEMENTS</li>
        <li>EQUIPMENT/SUPPLIES</li>
        <li>DOCUMENTS</li>
        <li>REPORTS</li>
        <li>TICKET CENTER</li>
        <li>ADMINISTRATION</li>
      </ul>
    </div>
  </div>
</header>

Necesito algo como esto:

Imagen de referencia

Sin embargo, el resultado más cercano al que llegué fue a esto:

Resultado

¿Alguna idea o consejo sobre qué podría modificar en mi código CSS para que quede lo mas parecido a la imagen de referencia?

2 respuestas 2

0

Hola podrías utilizar Bootstrap para ordenar un poco el código (yo lo usé para ordenar tus divs), te dejo el link a la Documentación para que puedas revisarlo. No llegué a resolver algunos problemas del menú desplegable que tiene el icono pero te puede servir de base para continuar.

    .body{
    margin: 0;
    background-color:lightgray;
}

.upperheader{
    float:right;
    background-color: lightgray;
    width: 100%;
    height: 30px;

}
.Contact-Buttons{
    background: #e3dfdf;
}

.btn{
    background-color: #5baaeb;
    color: white;
    padding: 5px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
}
.dropbtn {
    background-color:white;
    color:black;
    padding: 5px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    list-style: none;
    height: 100px;

  }

.dropdown {
    position: relative;
    display: inline-block;
    float: right;

  }
  .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-style: solid;
    border-width: 1px;
    border-color:  #2449eb;
    width: 50px;
    font-size: 12px;


  }

  .dropdown-content li{
    color: black;
    padding: 10px 10px;
    text-decoration: none;
    display: block;
    list-style:none;
  }
.dropdown:hover .dropdown-content {display: block;}
.dropdown-content a:hover {background-color: #f1f1f1;}

.profile-circle{
    width: 40px;
    height: 39px;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-border-radius: 99em;
    -moz-border-radius: 99em;
    border-radius: 99em;
    border: 2px solid #2449eb;
    box-shadow: 0 3px 2px rgba(0,0,0,0.3);
    vertical-align: middle;
}
 .dropdown .badge {
    position: relative;
    top: -10px;
    left: -60px;
    padding: 3px 8px;
    border-radius: 50%;
    background:lightsalmon;
    color: white;

  }
.clearfix{

}
#notification{
    color:orange;
    font-style: bold;
    background: #ffd9b3

}
.notifications{
    background-color: #fff2e6;
    font-style: bold;
}

.imgbell{
    padding: 10px,0, 0,10px;
}
.lower{

   background-color:white;
}

.Navbar{
    overflow:hidden;
    background-color:white;
}

.Navbar ul li {
    float: left;
    color: #070707;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 12px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    list-style: none;
}

.Navbar li:hover{
    background-color: #ddd;
  color: rgb(46, 44, 44);
}

.Navbar li.active{
    color:  rgb(0, 102, 204);


}
.logo-imagen{
}

.label-ntf{
	background: #eeca79;
	height: 25px;
	padding: 2px 10px;
	margin: 5px 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">
</head>
<body>

	<div class="container container-fluid">
		<div class="row">
			<div class="col-lg-12 Contact-Buttons d-flex justify-content-between">
				<span class="label-ntf">You have notifications</span>
				<div class="botones">
					<button class="btn" href=#>Contact us</button>
	                <button class="btn" href=#>FAQ</button>	
				</div>
			</div>

			<div class="col-lg-12 dropdown d-flex justify-content-between">
				<img src="payments.png" alt="logo de oltiva" width=400px height=150px class="logo-imagen">
				<button class="dropbtn">
                    <div class=clearfix>
                        <img  src="https://cdn3.iconfinder.com/data/icons/social-messaging-productivity-6/128/profile-male-circle2-512.png" class="profile-circle"/>
                        <span class="badge">3</span>
                    </div>
                    <div class="dropdown"  >  
	                    <div class="dropdown-content" style="left:0; ">
		                     <ul>
			                    <li>MY PROFILE</li>
			                    <li>CHANGE PASSWORD</li>
			                    <li>CHANGE SECURITY QUESTIONS</li>
			                    <li>RATES/FEES INFORMATION</li>
			                    <li>BANK INFORMATION</li>
			                    <li id="notification"> <img  class="imgbell"src=bell.png width="20" height="20">  Notifications</li>
			                    <li class="notifications">PASSWORD EXPIRE SOON </li>
			                    <li class="notifications">NEW CHARGEBACKS ARE ON FILE </li>
			                    <li class="notifications">NEW FUNDING ACTIVITIES ON YOUR ACCOUNT </li>
		                	</ul>
	                    </div>
                	</div>
                </button>
			</div>

			<div class="col-lg-12 lower">
				
                    <div class="Navbar">
                      	<ul>
                            <li class="active" href=#>HOME</li>
                            <li>TRANSACTIONS</li>
                            <li>CHARGEBACKS</li>
                            <li >STATEMENTS</li>
                            <li>EQUIPMENT/SUPPLIES</li>
                            <li>DOCUMENTS</li>
                            <li>REPORTS</li>
                            <li>TICKET CENTER</li>
                            <li>ADMINISTRATION</li>
                        </ul>
                    </div>
			</div>
		</div>
	</div>
	


</body>
</html>

-2

Espero sea de ayuda.

¿No has probado la clase de bootsTrap .col-md-? Te dejo la documentación para que puedas leerla y puedas entenderla un poco más: https://getbootstrap.com/docs/4.0/layout/grid/

Lo que yo haría para éste caso sería:

<section class="container">
   <section class="row">
      <section class="col-md-10"
         <!-- Pega aquí tú código del perfil. -->
      <section>
      <section class="col-md-2"
         <!-- Pega aquí tú código del perfil donde está la foto. -->
      <section>
   <section>
<section>

Recuerda que en total tiene que sumar 12, entonces si en uno le colocas 10 en el otro le colocarás 2; por ende coloqué un col-md-10 y el otro col-md-2.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.