I am trying to setup a frame for my new website but I have a problem on some screen resolutions. It seems like my image banner-logo.png is too big at some times (regarding the users screen resolution).
I am trying to figure out a way that my whole top banner would resize so it would fit based on the user's screen resolution.
I would also like to center align my menu to the center of the div (which is 100% width).
Here is what I have to so far:
body {
background-color: #000000;
color: white;
}
img, object, embed, canvas, video, audio, picture {
max-width: 100%;
height: auto;
}
ul {
padding:0;
margin:0;
list-style-type:none;
}
li {
margin-left:0px;
float:left;
/*pour IE*/
}
ul li a {
display: inline;
color:white;
text-decoration:none;
text-align:center;
padding:15px;
}
ul li a:hover {
color: yellow;
}
div#header {
position: absolute;
background-image: url("../images/banner-bg.jpg");
background-repeat: repeat-x;
top: 0;
left: 0;
width: 100%;
}
div#top-banner {
width: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
height: 453px;
}
div#gars-gauche {
float: left;
width: 333px;
height: 100%;
background-image: url("../images/gars-gauche.png");
background-repeat: no-repeat;
display: inline;
}
div#banner-centre {
height: 453px;
max-width: 100%;
text-align: center;
vertical-align:middle;
display: inline;
}
div#gars-droite {
float: right;
width: 333px;
height: 100%;
background-image: url("../images/gars-droite.png");
background-repeat: no-repeat;
display: inline;
}
div#top-menu {
position:relative;
top: 20px;
left: 80px;
}
div#content {
width: 100%;
text-align: center;
color: white;
padding-top: 35px;
}
h1 {
color: white;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="header">
<div id="top-banner">
<div id="gars-gauche"></div>
<div id="banner-centre">
<img src="images/banner-logo.png" alt="banner" />
</div>
<div id="gars-droite"></div>
</div>
<div id="top-menu">
<ul>
<li>ACCUEIL</li>
<li>MODÈLES</li>
<li>SERVICES</li>
<li>TARIFS</li>
<li>POLITIQUE</li>
<li>PARTENAIRES</li>
<li>RECRUTEMENT</li>
<li>WEBCAM</li>
<li>CONTACT</li>
<li>FACEBOOK</li>
</ul>
</div>
<div id="content">
<h1>BIENVENUE CHEZ LES GENTLEMEN'S</h1>
<hr />
<h3>SERVICE D'ACCOMPAGNEMENT POUR HOMMES ET FEMMES DE TOUS ÂGES</h3>
<p>Les Gentlemen's sont fiers d'offrir aux hommes et femmes un service d'accompagnement de qualité supérieur dans le secteur de Montréal et ses environs.</p>
<p>Vous avez envie d'un souper romantique, d'une sortie au cinéma ou d'un moment de tendresse?</p>
<p>Nos Gentlemen's s'engagent à vous offrir un moment inoubliable!</p>
<img src="images/Banner-les-francs-tireur.jpg" alt="Les Francs Tireurs"/>
<br />
<br />
<img src="images/Banner-Osez-les-gentlemens.jpg" />
</div>
<div id="footer"></div>
</div>
</body>
</html>
If you want a fully variable height on your banner, I suggest you use the viewport width unit assigned to your font size, and then scale everything else using EM. As to your question about centering, you can center inline items with text-align: center;
The em unit is the same as your font size, so you can also size any images you would like to use with em and they will scale with the font-size: 1.3vw;.
#top-menu {
font-size: 1.3vw;
}
ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
ul li {
display: inline;
padding: 0 1em;
}
#dog {
width: 12em;
}
<div id="top-menu">
<img id="dog" src="http://images.clipartpanda.com/dog-clipart-pT5qj6ETB.png">
<ul>
<li>ACCUEIL
</li>
<li>MODÈLES
</li>
<li>SERVICES
</li>
<li>TARIFS
</li>
<li>POLITIQUE
</li>
<li>PARTENAIRES
</li>
<li>RECRUTEMENT
</li>
<li>WEBCAM
</li>
<li>CONTACT
</li>
<li>FACEBOOK
</li>
</ul>
</div>
If you would only like to resize images and not text, you can just set their width as a percentage of the screen width using width: 10vw; for 10% of the viewport width.
For centering the menu try this:
CSS:
ul {
padding:0;
list-style-type:none;
}
li {
margin-left:0px;
display:inline-block;
}
div#top-menu {
position:relative;
top: 20px;
text-align:center;
}
For making the banner full size it is hard to say without seeing it in action. I would recommend starting with using background-size:cover;
body {
background-color: #000000;
color: white;
}
img, object, embed, canvas, video, audio, picture {
max-width: 100%;
height: auto;
}
ul {
padding:0;
list-style-type:none;
}
li {
margin-left:0px;
display:inline-block;
/*pour IE*/
}
ul li a {
display: inline;
color:white;
text-decoration:none;
text-align:center;
padding:15px;
}
ul li a:hover {
color: yellow;
}
div#header {
position: absolute;
background-image: url("../images/banner-bg.jpg");
background-repeat: repeat-x;
top: 0;
left: 0;
right:0;
width: 100%;
}
div#top-banner {
width: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
height: 453px;
}
div#gars-gauche {
float: left;
width: 333px;
height: 100%;
background-image: url("../images/gars-gauche.png");
background-repeat: no-repeat;
display: inline;
}
div#banner-centre {
height: 453px;
max-width: 100%;
text-align: center;
vertical-align:middle;
display: inline;
}
div#gars-droite {
float: right;
width: 333px;
height: 100%;
background-image: url("../images/gars-droite.png");
background-repeat: no-repeat;
display: inline;
}
div#top-menu {
position:relative;
top: 20px;
text-align:center;
}
div#content {
text-align: center;
color: white;
padding-top: 35px;
}
h1 {
color: white;
}
<div id="header">
<div id="top-banner">
<div id="gars-gauche"></div>
<div id="banner-centre">
<img src="images/banner-logo.png" alt="banner" />
</div>
<div id="gars-droite"></div>
</div>
<div id="top-menu">
<ul>
<li>ACCUEIL</li>
<li>MODÈLES</li>
<li>SERVICES</li>
<li>TARIFS</li>
<li>POLITIQUE</li>
<li>PARTENAIRES</li>
<li>RECRUTEMENT</li>
<li>WEBCAM</li>
<li>CONTACT</li>
<li>FACEBOOK</li>
</ul>
</div>
<div id="content">
<h1>BIENVENUE CHEZ LES GENTLEMEN'S</h1>
<hr />
<h3>SERVICE D'ACCOMPAGNEMENT POUR HOMMES ET FEMMES DE TOUS ÂGES</h3>
<p>Les Gentlemen's sont fiers d'offrir aux hommes et femmes un service d'accompagnement de qualité supérieur dans le secteur de Montréal et ses environs.</p>
<p>Vous avez envie d'un souper romantique, d'une sortie au cinéma ou d'un moment de tendresse?</p>
<p>Nos Gentlemen's s'engagent à vous offrir un moment inoubliable!</p>
<img src="images/Banner-les-francs-tireur.jpg" alt="Les Francs Tireurs"/>
<br />
<br />
<img src="images/Banner-Osez-les-gentlemens.jpg" />
</div>
<div id="footer"></div>
</div>
DEMO
Related
I'd like to make a sticky navbar like the one in this link: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_sticky
However, when I add the position: sticky; property to the element in my code it works and the navbar sticks after scrolling but when I scroll further down it goes away.
I would like it so that the navbar is sticky just like the one in the example.
body {
margin: 0;
box-sizing: content-box;
font-family: 'Lato', sans-serif;
}
.contenedor {
width: 100%;
margin: auto;
overflow: hidden;
}
.menu-navegacion {
padding: 0;
display: flex;
height: 100px;
justify-content: space-between;
align-items: center;
background-color: rgb(75, 75, 75);
position: sticky;
top: 0;
z-index: 30;
}
.logo {
padding-right: 10%;
padding-left: 10%;
height: 50px;
width: 20%;
display: flex;
justify-content: center;
margin-left: 1%;
position: relative;
}
.contenedor-triangulo {
height: 100%;
position: absolute;
}
.triangulo {
height: 0%;
width: 0%;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 50px solid red;
display: block;
}
.menu-lista {
margin-right: 20%;
}
.menu-lista ul li {
list-style: none;
display: inline-block;
}
.menu-lista ul li a {
text-decoration: none;
color: white;
padding-left: 20px;
}
.menu-header {
height: 600px;
background-color: cornflowerblue;
}
#slider {
margin: 0 auto;
width: 80%;
max-width: 100%;
text-align: center;
}
#slider input[type=radio] {
display: none;
}
#slider label {
cursor: pointer;
text-decoration: none;
}
#slides {
padding: 10px;
border: 3px solid #ccc;
background: #fff;
position: relative;
z-index: 1;
}
#overflow {
width: 100%;
overflow: hidden;
}
#slide1:checked~#slides .inner {
margin-left: 0;
}
#slide2:checked~#slides .inner {
margin-left: -100%;
}
#slide3:checked~#slides .inner {
margin-left: -200%;
}
#slide4:checked~#slides .inner {
margin-left: -300%;
}
#slides .inner {
transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: 550px;
}
#slides .slide {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #fff;
}
#slides .slide_1 {
background: #00171F;
}
#slides .slide_2 {
background: #003459;
}
#slides .slide_3 {
background: #007EA7;
}
#slides .slide_4 {
background: #00A8E8;
}
#controls {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}
#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}
#controls label:hover {
opacity: 1;
}
#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1) {
background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
float: right;
margin: 0 -50px 0 0;
display: block;
}
#slide1:checked~#controls label:nth-child(4),
#slide2:checked~#controls label:nth-child(1),
#slide3:checked~#controls label:nth-child(2),
#slide4:checked~#controls label:nth-child(3) {
background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
float: left;
margin: 0 0 0 -50px;
display: block;
}
#bullets {
margin: 150px 0 0;
text-align: center;
}
#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}
#slide1:checked~#bullets label:nth-child(1),
#slide2:checked~#bullets label:nth-child(2),
#slide3:checked~#bullets label:nth-child(3),
#slide4:checked~#bullets label:nth-child(4) {
background: #444;
}
#media screen and (max-width: 900px) {
#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1),
#slide1:checked~#controls label:nth-child(4),
#slide2:checked~#controls label:nth-child(1),
#slide3:checked~#controls label:nth-child(2),
#slide4:checked~#controls label:nth-child(3) {
margin: 0;
}
#slides {
max-width: calc(100% - 140px);
margin: 0 auto;
}
}
#quienessomos {
margin: 0;
width: 100%;
height: 800px;
/*
background: palegoldenrod;*/
background: rgba(211, 211, 211, 0.199);
}
#grid1 {
margin: 0;
display: grid;
grid-template-columns: 10% 40% 0% 40% 10%;
grid-template-rows: 20% 20% 20% 20% 20%;
column-gap: 50px;
/*
border: 1px solid black;*/
width: 100%;
height: 100%;
}
#imagen1 {
background-image: url(../images/main1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
grid-area: 2 / 2 / 5 / 3;
}
#texto1 {
position: relative;
width: 100%;
height: 100%;
/*
background: olive;*/
grid-area: 2 / 3 / 5 / 5;
}
#contenedortexto1 {
position: absolute;
display: inline-block;
width: 50%;
height: 100%;
/*
background: red;*/
}
#contenedortexto1 h2 {
color: rgb(7, 83, 184);
font-weight: 900;
font-size: 2em;
}
#superior {
font-size: 1.4em;
line-height: 1.5em;
font-weight: 400;
}
#inferior {
font-family: 'Ubuntu', sans-serif;
font-size: 1.4em;
line-height: 1.3em;
font-weight: 300;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700;900&family=Ubuntu:wght#300&display=swap" rel="stylesheet">
<body>
<header>
<nav class="menu-navegacion contenedor">
<div class="logo">
<div class="contenedor-triangulo">
<div class="triangulo"></div>
</div>
</div>
<div class="menu-lista">
<ul>
<li><a href=#>INICIO</a></li>
<li><a href=#>PRODUCTOS</a></li>
<li><a href=#>EMPRESA</a></li>
<li><a href=#>CONTACTO</a></li>
</ul>
</div>
</nav>
<div id="slider">
<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="slide slide_1">
<div class="slide-content">
<h2>Slide 1</h2>
<p>Content for slide 1</p>
</div>
</div>
<div class="slide slide_2">
<div class="slide-content">
<h2>Slide 2</h2>
<p>Content for slide 2</p>
</div>
</div>
<div class="slide slide_3">
<div class="slide-content">
<h2>Slide 3</h2>
<p>Content for slide 3</p>
</div>
</div>
<div class="slide slide_4">
<div class="slide-content">
<h2>Slide 4</h2>
<p>Content for slide 4</p>
</div>
</div>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
<div id="bullets">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
</div>
</header>
<section id="main">
<div class="contenedor" id="quienessomos">
<div id="grid1">
<div id="imagen1"></div>
<div id="texto1">
<div id="contenedortexto1">
<h2>QUIMICA TRV</h2>
<p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
<p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
automotriz, empresas de servicios, etc.</p>
</div>
</div>
</div>
</div>
</section>
<section id="main">
<div class="contenedor" id="quienessomos">
<div id="grid1">
<div id="imagen1"></div>
<div id="texto1">
<div id="contenedortexto1">
<h2>QUIMICA TRV</h2>
<p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
<p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
automotriz, empresas de servicios, etc.</p>
</div>
</div>
</div>
</div>
</section>
</body>
Your nav is correctly acting "sticky", which means it sticks to the top of the parent element.
You can either:
Move your nav element up outside the <header>, to just below <body>; or
Make your <header> sticky as well
Your choice will depend on your ui requirements and use of screen real estate in different viewport heights.
I think I may have found your issue, your navbar is inside the <header></header> tag, which is why its disappearing after you scroll past the page header.
Try removing the header tags and see if it stays on the page.
To have you code running like the example shown in the link, i had to move the slider outside the header element. Then I had to code the header element with a fixed position and 0px on top.
I just tested and it is working as you want. :)
body {
margin: 0;
box-sizing: content-box;
font-family: 'Lato', sans-serif;
}
/* Removed slider from the Header element. Header is a fixed and independent block now*/
header {
position:fixed;
top:0;
z-index:10;
width: 100%;
display:block;
}
.contenedor {
width: 100%;
margin: auto;
overflow: hidden;
}
.menu-navegacion {
padding: 0;
display: flex;
height: 100px;
justify-content: space-between;
align-items: center;
background-color: rgb(75, 75, 75);
position: sticky;
top: 0;
z-index: 30;
}
.logo {
padding-right: 10%;
padding-left: 10%;
height: 50px;
width: 20%;
display: flex;
justify-content: center;
margin-left: 1%;
position: relative;
}
.contenedor-triangulo {
height: 100%;
position: absolute;
}
.triangulo {
height: 0%;
width: 0%;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 50px solid red;
display: block;
}
.menu-lista {
margin-right: 20%;
}
.menu-lista ul li {
list-style: none;
display: inline-block;
}
.menu-lista ul li a {
text-decoration: none;
color: white;
padding-left: 20px;
}
.menu-header {
height: 600px;
background-color: cornflowerblue;
}
/* Added margin top equal to header height, in this case 100px */
#slider {
margin: 100px auto 0 auto;
width: 80%;
max-width: 100%;
text-align: center;
}
#slider input[type=radio] {
display: none;
}
#slider label {
cursor: pointer;
text-decoration: none;
}
#slides {
padding: 10px;
border: 3px solid #ccc;
background: #fff;
position: relative;
z-index: 1;
}
#overflow {
width: 100%;
overflow: hidden;
}
#slide1:checked~#slides .inner {
margin-left: 0;
}
#slide2:checked~#slides .inner {
margin-left: -100%;
}
#slide3:checked~#slides .inner {
margin-left: -200%;
}
#slide4:checked~#slides .inner {
margin-left: -300%;
}
#slides .inner {
transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: 550px;
}
#slides .slide {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #fff;
}
#slides .slide_1 {
background: #00171F;
}
#slides .slide_2 {
background: #003459;
}
#slides .slide_3 {
background: #007EA7;
}
#slides .slide_4 {
background: #00A8E8;
}
#controls {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}
#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}
#controls label:hover {
opacity: 1;
}
#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1) {
background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
float: right;
margin: 0 -50px 0 0;
display: block;
}
#slide1:checked~#controls label:nth-child(4),
#slide2:checked~#controls label:nth-child(1),
#slide3:checked~#controls label:nth-child(2),
#slide4:checked~#controls label:nth-child(3) {
background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
float: left;
margin: 0 0 0 -50px;
display: block;
}
#bullets {
margin: 150px 0 0;
text-align: center;
}
#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}
#slide1:checked~#bullets label:nth-child(1),
#slide2:checked~#bullets label:nth-child(2),
#slide3:checked~#bullets label:nth-child(3),
#slide4:checked~#bullets label:nth-child(4) {
background: #444;
}
#media screen and (max-width: 900px) {
#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1),
#slide1:checked~#controls label:nth-child(4),
#slide2:checked~#controls label:nth-child(1),
#slide3:checked~#controls label:nth-child(2),
#slide4:checked~#controls label:nth-child(3) {
margin: 0;
}
#slides {
max-width: calc(100% - 140px);
margin: 0 auto;
}
}
#quienessomos {
margin: 0;
width: 100%;
height: 800px;
/*
background: palegoldenrod;*/
background: rgba(211, 211, 211, 0.199);
}
#grid1 {
margin: 0;
display: grid;
grid-template-columns: 10% 40% 0% 40% 10%;
grid-template-rows: 20% 20% 20% 20% 20%;
column-gap: 50px;
/*
border: 1px solid black;*/
width: 100%;
height: 100%;
}
#imagen1 {
background-image: url(../images/main1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
grid-area: 2 / 2 / 5 / 3;
}
#texto1 {
position: relative;
width: 100%;
height: 100%;
/*
background: olive;*/
grid-area: 2 / 3 / 5 / 5;
}
#contenedortexto1 {
position: absolute;
display: inline-block;
width: 50%;
height: 100%;
/*
background: red;*/
}
#contenedortexto1 h2 {
color: rgb(7, 83, 184);
font-weight: 900;
font-size: 2em;
}
#superior {
font-size: 1.4em;
line-height: 1.5em;
font-weight: 400;
}
#inferior {
font-family: 'Ubuntu', sans-serif;
font-size: 1.4em;
line-height: 1.3em;
font-weight: 300;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700;900&family=Ubuntu:wght#300&display=swap" rel="stylesheet">
<body>
<header>
<nav class="menu-navegacion contenedor">
<div class="logo">
<div class="contenedor-triangulo">
<div class="triangulo"></div>
</div>
</div>
<div class="menu-lista">
<ul>
<li><a href=#>INICIO</a></li>
<li><a href=#>PRODUCTOS</a></li>
<li><a href=#>EMPRESA</a></li>
<li><a href=#>CONTACTO</a></li>
</ul>
</div>
</nav>
</header>
<!-- Slider Is outside the header element -->
<div id="slider">
<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="slide slide_1">
<div class="slide-content">
<h2>Slide 1</h2>
<p>Content for slide 1</p>
</div>
</div>
<div class="slide slide_2">
<div class="slide-content">
<h2>Slide 2</h2>
<p>Content for slide 2</p>
</div>
</div>
<div class="slide slide_3">
<div class="slide-content">
<h2>Slide 3</h2>
<p>Content for slide 3</p>
</div>
</div>
<div class="slide slide_4">
<div class="slide-content">
<h2>Slide 4</h2>
<p>Content for slide 4</p>
</div>
</div>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
<div id="bullets">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
</div>
<section id="main">
<div class="contenedor" id="quienessomos">
<div id="grid1">
<div id="imagen1"></div>
<div id="texto1">
<div id="contenedortexto1">
<h2>QUIMICA TRV</h2>
<p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
<p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
automotriz, empresas de servicios, etc.</p>
</div>
</div>
</div>
</div>
</section>
<section id="main">
<div class="contenedor" id="quienessomos">
<div id="grid1">
<div id="imagen1"></div>
<div id="texto1">
<div id="contenedortexto1">
<h2>QUIMICA TRV</h2>
<p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
<p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
automotriz, empresas de servicios, etc.</p>
</div>
</div>
</div>
</div>
</section>
</body>
I have made a header and below that a sticky navigation bar with a drop down menu.
When I activate the drop down menu it fits perfectly with the navigation bar. But if I scroll down on the website it no longer fits, I get a distance between the navigation bar and the drop down menu equal to the height of my header.
Is the header pushing down my drop down menu when scrolling down? Or is it the distance from the top of the website down to the drop down menu that keeps existing when scrolling down on the website?
I have tried to fix it for days but I can't get it to work.
/* THIS IS FROM MY topnavigation.css*/
.topnav {
position: sticky;
top: 0px;
overflow: hidden;
background-color: rgb(2, 31, 70);
}
.topnav a {
float: left;
display: block;
border-right:1px solid #bbb;
width: 125px;
font-size: 1.0em !important;
font-family: 'verdana';
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
border-right:1px solid #bbb;
}
.dropdown .dropbtn {
width: 125px;
font-size: 17px;
border: 0;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: fixed;
background-color: rgb(79, 111, 150);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
float: none;
color: #f2f2f2;
border-right:0px;
border-bottom:1px solid #bbb;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: rgb(53, 76, 105);
color: white;
}
.dropdown-content a:hover {
background-color: rgb(79, 111, 150);
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
width: auto;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
text-align: left;
}
}
/* THIS IS FROM MY style.css */
* {
box-sizing: border-box;
}
body {
margin: 0px;
background-color: rgb(3, 19, 34);
}
.header {
top: 0px;
padding: 40px;
margin: auto;
background-color: rgb(17, 54, 102);
text-align: center;
color: #ffffff;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
min-height: calc(100vh - 157.88px - 70px);
}
/* Left and right column */
.column.side {
width: 20%;
margin-top: 1%;
}
.front.leftside.columns.content {
width: 100%;
}
.front.rightside.columns.content {
width: 95%;
margin-left: auto;
margin-right: auto;
}
/* Middle column */
.column.middle {
width: 60%;
}
.front.column.middle {
width: 100%;
}
/* Artikel på forsiden */
.front.article {
background-color: #ffffff;
border-radius: 10px;
padding-top: 10px;
padding-left: 10%;
padding-right: 10%;
font-family: Georgia, 'Times New Roman', Times, serif;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 781px) {
.column.side, .column.middle {
width: 100%;
}
}
.sixteen.px {
font-size: 16px;
}
.eighteen.px {
font-size: 18px;
}
/* Billed INDSTILLINGER */
/* img border-radius AFRUNDER BILLEDERS KANTER */
img {
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
/* Style the footer */
.footer {
left: 0;
bottom: 0;
position: relative;
width: 100%;
padding: 10px;
background-color: rgb(2, 31, 70);
text-align: center;
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/topnavigation.css">
</head>
<body>
<header class="header">Mads Ottobrøker</header>
<div class="topnav" id="myTopnav">
<i class="fa fa-fw fa-home"></i> Forsiden
<i class="fa fa-fw fa-user"></i> Om mig
<i class="fa fa-fw fa-file-alt"></i> CV
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-fw fa-book-open"></i> Portfolio
</button>
<div class="dropdown-content">
Webdesign
3D Grafik
</div>
</div>
<i class="fa fa-fw fa-envelope"></i> Kontakt
<a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>
<div class="row">
<div class="column side">
<div class="front leftside columns content">
<img src="images/.jpg" alt="Mads Ottobrøker" width="95%" height="95%">
</div>
</div>
<div class="column middle">
<div class="front column middle">
<div class="front article">
<h1>Voksenelevplads søges!</h1>
<p>
<h2>Kontorelev med speciale i administration søger elevplads.</h2>
</p>
<p><i><h5>Dec 15, 2020</h5></i></p>
<hr>
<h3 class="eighteen px">Mit navn er Mads Ottobrøker, jeg er 38 år og bosat i Hadsund.</h3>
<p class="sixteen px">
Jeg søger job som kontorelev med speciale i administration. Jeg brænder for at opnå en god og alsidig,
kontoruddannelse med speciale i administration, da den giver en solid erfaring samt mulighed, for at
netværke og videreudvikle sig i et professionelt miljø. Jeg ønsker at arbejde med administration, fordi det
er et godt og spændende arbejde.
</p>
<p class="sixteen px">
Jeg har gennemført HF samt 5 ugers EUS-forløb. Jeg er tilskudsberettiget voksenelev.
</p>
<h3 class="eighteen px">Hvad jeg tilbyder:</h3>
<p class="sixteen px">
Jeg har en god forståelse for administration, og kan tilrettelægge mit arbejde således, at mine opgaver
udføres rettidig og med omhu. Jeg er mødestabil, engageret, og god til at samarbejde. Jeg tager ansvar for
mit arbejde og kan arbejde både selvstændigt og i teams. Jeg nyder at lære nyt, og har intet problem med
skiftende arbejdsfunktioner.
</p>
<p class="sixteen px">
Fra detailhandlen er jeg vant til kontakt med borgere, jeg er glad for kontakten og har altid sat en ære i,
at yde dem den bedst mulige service. Jeg har erfaring med administrering af egne områder i butik, hvor jeg
bl.a. har håndteret varelager, indkøb, salg og bestillinger.
</p>
<p class="sixteen px">
Jeg har erfaring med: Windows, Word, Excel, PowerPoint, Adobe Photoshop, WordPress og HTML.
</p>
<p class="sixteen px">
Jeg kan tale og skrive på dansk og engelsk, har kørekort B og truckcertifikat
</p>
<br>
<br>
<br>
</div>
</div>
</div>
<div class="column side">
<div class="front rightside columns content">
<a class="twitter-timeline" data-lang="da" data-width="100%" data-height="400" data-theme="light"
href="https://twitter.com/MadsOttobroker?ref_src=twsrc%5Etfw">Tweets by MadsOttobroker</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="footer">
<p>Copyright © 2020 Mads Ottobrøker All Right Reserved.</p>
</div>
</body>
</html>
Drop down menu looks good
Drop down menu is no longer connected to navigation bar after scrolling
The position: fixed; on .dropdown-content causes that element to be relative to the browser window and disregards any parent or grandparent it is in, which is why it's staying in the same place the entire time. If your page had a lot of content making the page taller, you would scroll and that element would stay in the same place.
Switching it to position: absolute; will position it relative to it's parent.
Then, remove overflow: hidden; from .topnav and .dropdown as this cut's it off.
Then on .topnav, add width: 100%; and float: left;.
/* THIS IS FROM MY topnavigation.css*/
.topnav {
position: sticky;
top: 0px;
/* overflow: hidden; */
background-color: rgb(2, 31, 70);
float: left;
width: 100%;
}
.topnav a {
float: left;
display: block;
border-right:1px solid #bbb;
width: 125px;
font-size: 1.0em !important;
font-family: 'verdana';
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
/* overflow: hidden; */
border-right:1px solid #bbb;
}
.dropdown .dropbtn {
width: 125px;
font-size: 17px;
border: 0;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(79, 111, 150);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
float: none;
color: #f2f2f2;
border-right:0px;
border-bottom:1px solid #bbb;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: rgb(53, 76, 105);
color: white;
}
.dropdown-content a:hover {
background-color: rgb(79, 111, 150);
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
width: auto;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
text-align: left;
}
}
/* THIS IS FROM MY style.css */
* {
box-sizing: border-box;
}
body {
margin: 0px;
background-color: rgb(3, 19, 34);
}
.header {
top: 0px;
padding: 40px;
margin: auto;
background-color: rgb(17, 54, 102);
text-align: center;
color: #ffffff;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
min-height: calc(100vh - 157.88px - 70px);
}
/* Left and right column */
.column.side {
width: 20%;
margin-top: 1%;
}
.front.leftside.columns.content {
width: 100%;
}
.front.rightside.columns.content {
width: 95%;
margin-left: auto;
margin-right: auto;
}
/* Middle column */
.column.middle {
width: 60%;
}
.front.column.middle {
width: 100%;
}
/* Artikel på forsiden */
.front.article {
background-color: #ffffff;
border-radius: 10px;
padding-top: 10px;
padding-left: 10%;
padding-right: 10%;
font-family: Georgia, 'Times New Roman', Times, serif;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 781px) {
.column.side, .column.middle {
width: 100%;
}
}
.sixteen.px {
font-size: 16px;
}
.eighteen.px {
font-size: 18px;
}
/* Billed INDSTILLINGER */
/* img border-radius AFRUNDER BILLEDERS KANTER */
img {
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
/* Style the footer */
.footer {
left: 0;
bottom: 0;
position: relative;
width: 100%;
padding: 10px;
background-color: rgb(2, 31, 70);
text-align: center;
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/topnavigation.css">
</head>
<body>
<header class="header">Mads Ottobrøker</header>
<div class="topnav" id="myTopnav">
<i class="fa fa-fw fa-home"></i> Forsiden
<i class="fa fa-fw fa-user"></i> Om mig
<i class="fa fa-fw fa-file-alt"></i> CV
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-fw fa-book-open"></i> Portfolio
</button>
<div class="dropdown-content">
Webdesign
3D Grafik
</div>
</div>
<i class="fa fa-fw fa-envelope"></i> Kontakt
<a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>
<div class="row">
<div class="column side">
<div class="front leftside columns content">
<img src="images/.jpg" alt="Mads Ottobrøker" width="95%" height="95%">
</div>
</div>
<div class="column middle">
<div class="front column middle">
<div class="front article">
<h1>Voksenelevplads søges!</h1>
<p>
<h2>Kontorelev med speciale i administration søger elevplads.</h2>
</p>
<p><i><h5>Dec 15, 2020</h5></i></p>
<hr>
<h3 class="eighteen px">Mit navn er Mads Ottobrøker, jeg er 38 år og bosat i Hadsund.</h3>
<p class="sixteen px">
Jeg søger job som kontorelev med speciale i administration. Jeg brænder for at opnå en god og alsidig,
kontoruddannelse med speciale i administration, da den giver en solid erfaring samt mulighed, for at
netværke og videreudvikle sig i et professionelt miljø. Jeg ønsker at arbejde med administration, fordi det
er et godt og spændende arbejde.
</p>
<p class="sixteen px">
Jeg har gennemført HF samt 5 ugers EUS-forløb. Jeg er tilskudsberettiget voksenelev.
</p>
<h3 class="eighteen px">Hvad jeg tilbyder:</h3>
<p class="sixteen px">
Jeg har en god forståelse for administration, og kan tilrettelægge mit arbejde således, at mine opgaver
udføres rettidig og med omhu. Jeg er mødestabil, engageret, og god til at samarbejde. Jeg tager ansvar for
mit arbejde og kan arbejde både selvstændigt og i teams. Jeg nyder at lære nyt, og har intet problem med
skiftende arbejdsfunktioner.
</p>
<p class="sixteen px">
Fra detailhandlen er jeg vant til kontakt med borgere, jeg er glad for kontakten og har altid sat en ære i,
at yde dem den bedst mulige service. Jeg har erfaring med administrering af egne områder i butik, hvor jeg
bl.a. har håndteret varelager, indkøb, salg og bestillinger.
</p>
<p class="sixteen px">
Jeg har erfaring med: Windows, Word, Excel, PowerPoint, Adobe Photoshop, WordPress og HTML.
</p>
<p class="sixteen px">
Jeg kan tale og skrive på dansk og engelsk, har kørekort B og truckcertifikat
</p>
<br>
<br>
<br>
</div>
</div>
</div>
<div class="column side">
<div class="front rightside columns content">
<a class="twitter-timeline" data-lang="da" data-width="100%" data-height="400" data-theme="light"
href="https://twitter.com/MadsOttobroker?ref_src=twsrc%5Etfw">Tweets by MadsOttobroker</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="footer">
<p>Copyright © 2020 Mads Ottobrøker All Right Reserved.</p>
</div>
</body>
</html>
There are two problem's in your code. Fix those two CSS and your will get your expected behavior.
First, position: fixed in .dropdown-content. Since position: fixed element is positioned relative to the browser window.
Change it to position: absolute.
.dropdown-content {
display: none;
//position: fixed;
position: absolute;
background-color: rgb(79, 111, 150);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
Second, overflow: hidden in .topnav. I guess you are using this for creating Block-level formatting context. So instead of using overflow: hidden for Block-level formatting add display: flow-root in .topnav css.
.topnav {
position: sticky;
top: 0px;
//overflow: hidden;
background-color: rgb(2, 31, 70);
display: floot-root;
}
I'm trying to make a div full-width which is in a smaller wrapper.
It's an extension on this question:
The problem is that my div is now too big. The height is to high and I can't find a way to change it.
website: http://ndvibes.com it's the purple one on the bottom.
Code:
.feedback {
background-color: #8904B1;
margin: 0 auto;
color: #ffffff;
position: relative;
z-index: 2;
padding: 10px 0;
}
.feedback-wrapper {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.feedback-wrapper:before,
.feedback-wrapper:after {
content: "";
position: absolute;
height: 100%;
width: 100vw;
background-color: #8904B1;
top: 0;
z-index: 1;
}
.feedback-wrapper:before {
left: -100%;
}
.feedback-wrapper:after {
right: -100%;
}
.feedback span {
text-align: center;
display: block;
}
<div class="outer-space">
<div class="wrapper">
<!--MORE CODE FOR WEBSITE--->
<div class="feedback-wrapper colorChange purple" id="test">
<div class="feedback">
<span>"Nooit zo een snelle service gehad"</span>
<span>"Mijn klanten kunnen mij nu eindelijk altijd en overal vanaf elk device bereiken"</span>
<span>"Eindelijk mijn online website gemoderniseerd"</span>
<span>"Mijn vorige website werd gehacked, nu kan ik weer gerust slapen"</span>
</div>
</div>
</div>
</div>
Here a JSFiddle of the full webpage because the problem doesn't occur in the Stackoverflow code-snippet: https://jsfiddle.net/v0x6g29c/
This should work:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/general.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- include Google's AJAX API loader -->
<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>
<script src="/js/general.js"></script>
<link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/index.css">
<title>NDVibes - Webdeveloper</title>
</head>
<body>
<div class="outer-space">
<div class="wrapper">
<div class="header">
<div class="myNavbar-wrapper">
<div class="myNavbar">
<ul>
<li><a class=active href="/">Home</a></li>
<li>Uw website</li>
<li>Over</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="image-wrapper">
<img src="/images/big_image.png" />
</div>
<h1 class="bigTitle">
Webdeveloper since 2017
</h1>
<div class="positives">
<div class="point">
<img src="/images/fast.png" />
</div>
<div class="point">
<img src="/images/responsive.png" />
</div>
<div class="point">
<img src="/images/secure.png" />
</div>
</div>
<div class="btn-wrapper">
<a href="/panel">
<div class="btn colorChange purple">
Geef mij die website!
</div>
</a>
<br>
<span>
Geen enkel probleem! klik gewoon op de knop en ik zal zo snel mogelijk reageren.
</span>
</div>
<div class="feedback-wrapper colorChange purple" id="test">
<div class="feedback">
<span>"Nooit zo een snelle service gehad"</span>
<span>"Mijn klanten kunnen mij nu eindelijk altijd en overal vanaf elk device bereiken"</span>
<span>"Eindelijk mijn online website gemoderniseerd"</span>
<span>"Mijn vorige website werd gehacked, nu kan ik weer gerust slapen"</span>
</div>
</div>
<div class="footer">
Copyright © 2017 - <span id="year">2017</span> Niel Duysters
</div>
</div>
</div>
<!---------------GOOGLE ANALYTICS----------------->
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-46774773-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
CSS
.image-wrapper img {
display: inline-block;
width: 80%;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
.bigTitle {
text-align: center;
margin-top: -0.5%;
margin-bottom: 5%;
color: #766F82;
font-family: "ValeraRound";
}
.positives {
margin-top: 100px;
}
.positives .point {
width: 30%;
float: left;
margin-left: 3%;
}
.positives .point img {
width: 50%;
display: block;
margin: auto;
}
.btn-wrapper {
clear: both;
float: left;
width: 100%;
margin-top: 140px;
text-align: center;
}
.btn-wrapper .btn {
padding: 20px;
padding-right: 50px;
padding-left: 50px;
display: inline-block;
border-radius: 10px;
border: solid 1px #1D1846;
/*color: #746982;*/
color: #FFFFFF;
font-style: italic;
font-size: 22px;
}
.btn-wrapper span {
display: block;
margin-top: 15px;
font-style: italic;
color: #746982;
}
.outer-space {
overflow: hidden;
}
/*
.feedback {
clear: both;
float: left;
width: 1000%;
position: relative;
margin-top: 0;
padding-bottom: 40px;
}
.feedback-wrapper {
position: relative;
width:100%;
max-width: 600px;
margin:0 auto;
}
.feedback:before, .feedback:after {
content:"";
position: absolute;
height:20%;
width:100vw;
background-color: #8904B1;
top: 0;
z-index: 1;
}
.feedback:before {
left:-100%;
}
.feedback:after {
right:-100%;
}
.feedback-wrapper span {
font-size: 22px;
font-family: "Droid Serif";
font-style: italic;
color: #E3DBFF;
display: block;
margin-top: 20px;
text-align: center;
}
*/
.feedback {
background-color: #8904B1;
margin: 0 auto;
color: #ffffff;
position: relative;
z-index: 2;
padding: 10px 0;
left:0 !important;
}
.feedback-wrapper {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
display: flex;
}
.feedback-wrapper:before,
.feedback-wrapper:after {
content: "";
position: absolute;
height: 100%;
width: 100vw;
background-color: #8904B1;
top: 0;
z-index: 1;
}
.feedback-wrapper:before {
left: -100%;
}
.feedback-wrapper:after {
right: -100%;
}
.feedback span {
text-align: center;
width:100%;
display: block;
z-index: 5;
}
/***Responsive***/
#media screen and (max-width: 801px) {
.bigTitle {
font-size: 120%;
}
.positives {
margin-top: 50px;
}
.positives .point {
float: none;
width: 60%;
max-width: 225px;
min-width: 180px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10%;
}
.btn-wrapper {
margin-top: 40px;
}
.feedback {
width: 112%;
left: -6%;
}
.feedback-wrapper {
width: 90%;
position: relative;
left: 50%;
top: 0;
transform: translate(-50%, 0);
}
.feedback-wrapper span {
font-size: 14px;
display: block;
font-size: 100%;
}
}
https://jsfiddle.net/8ohnsf28/
Check this, and let me know.
.image-wrapper img {
display: inline-block;
width: 80%;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
.bigTitle {
text-align: center;
margin-top: -0.5%;
margin-bottom: 5%;
color: #766F82;
font-family: "ValeraRound";
}
.positives {
margin-top: 100px;
}
.positives .point {
width: 30%;
float: left;
margin-left: 3%;
}
.positives .point img {
width: 50%;
display: block;
margin: auto;
}
.btn-wrapper {
clear: both;
float: left;
width: 100%;
margin-top: 140px;
text-align: center;
}
.btn-wrapper .btn {
padding: 20px;
padding-right: 50px;
padding-left: 50px;
display: inline-block;
border-radius: 10px;
border: solid 1px #1D1846;
/*color: #746982;*/
color: #FFFFFF;
font-style: italic;
font-size: 22px;
}
.btn-wrapper span {
display: block;
margin-top: 15px;
font-style: italic;
color: #746982;
}
.outer-space {
overflow: hidden;
}
/*
.feedback {
clear: both;
float: left;
width: 1000%;
position: relative;
left: -500%;
margin-top: 0;
padding-bottom: 40px;
}
.feedback-wrapper {
position: relative;
width:100%;
max-width: 600px;
margin:0 auto;
}
.feedback:before, .feedback:after {
content:"";
position: absolute;
height:20%;
width:100vw;
background-color: #8904B1;
top: 0;
z-index: 1;
}
.feedback:before {
left:-100%;
}
.feedback:after {
right:-100%;
}
.feedback-wrapper span {
font-size: 22px;
font-family: "Droid Serif";
font-style: italic;
color: #E3DBFF;
display: block;
margin-top: 20px;
text-align: center;
}
*/
.feedback {
background-color: #8904B1;
margin: 0 auto;
color: #ffffff;
position: relative;
z-index: 2;
padding: 10px 0;
left:0 !important
}
.feedback-wrapper {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
display: flex;
}
.feedback-wrapper:before,
.feedback-wrapper:after {
content: "";
position: absolute;
height: 100%;
width: 100vw;
background-color: #8904B1;
top: 0;
z-index: 1;
}
.feedback-wrapper:before {
left: -100%;
}
.feedback-wrapper:after {
right: -100%;
}
.feedback span {
text-align: center;
display: block;
}
/***Responsive***/
#media screen and (max-width: 801px) {
.bigTitle {
font-size: 120%;
}
.positives {
margin-top: 50px;
}
.positives .point {
float: none;
width: 60%;
max-width: 225px;
min-width: 180px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10%;
}
.btn-wrapper {
margin-top: 40px;
}
.feedback {
width: 112%;
left: -6%;
}
.feedback-wrapper {
width: 90%;
position: relative;
left: 50%;
top: 0;
transform: translate(-50%, 0);
}
.feedback-wrapper span {
font-size: 14px;
display: block;
font-size: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/general.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- include Google's AJAX API loader -->
<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>
<script src="/js/general.js"></script>
<link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/index.css">
<title>NDVibes - Webdeveloper</title>
</head>
<body>
<div class="outer-space">
<div class="wrapper">
<div class="header">
<div class="myNavbar-wrapper">
<div class="myNavbar">
<ul>
<li><a class=active href="/">Home</a></li>
<li>Uw website</li>
<li>Over</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="image-wrapper">
<img src="/images/big_image.png" />
</div>
<h1 class="bigTitle">
Webdeveloper since 2017
</h1>
<div class="positives">
<div class="point">
<img src="/images/fast.png" />
</div>
<div class="point">
<img src="/images/responsive.png" />
</div>
<div class="point">
<img src="/images/secure.png" />
</div>
</div>
<div class="btn-wrapper">
<a href="/panel">
<div class="btn colorChange purple">
Geef mij die website!
</div>
</a>
<br>
<span>
Geen enkel probleem! klik gewoon op de knop en ik zal zo snel mogelijk reageren.
</span>
</div>
<div class="feedback-wrapper colorChange purple" id="test">
<div class="feedback">
<span>"Nooit zo een snelle service gehad"</span>
<span>"Mijn klanten kunnen mij nu eindelijk altijd en overal vanaf elk device bereiken"</span>
<span>"Eindelijk mijn online website gemoderniseerd"</span>
<span>"Mijn vorige website werd gehacked, nu kan ik weer gerust slapen"</span>
</div>
</div>
<div class="footer">
Copyright © 2017 - <span id="year">2017</span> Niel Duysters
</div>
</div>
</div>
<!---------------GOOGLE ANALYTICS----------------->
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-46774773-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
I want the bar to remain such as this, but the three menu options (along with the drop-down ) pass be at the center of the page.
The page have some img's (including de menu bar) that is not included.
header, footer, aside, nav, article {
display: block;
}
header h1{
color: #670C15;
text-align: center;
}
body {
margin: 0 auto;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f5f5f1;
}
h1 {
font-size: 28px;
line-height: 30px;
padding: 10px 0;
}
h2 {
font-size: 23px;
line-height: 25px;
padding: 10px 0;
}
h3 {
font-size: 18px;
line-height: 20px;
padding: 11px 0;
}
p {
padding-bottom: 22px;
}
nav {
display: block;
position: absolute;
left: 0;
width: 100%;
background: url("nav_background.png");
}
nav ul {
padding: 0;
margin: 0;
}
nav ul:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/********************************/
nav li {
position: relative;
float: left;
list-style-type: none;
margin: 0 auto;
}
nav li a {
display: block;
padding: 10px 20px;
border-left: 1px solid #999;
border-right: 1px solid #222;
color: #777;
text-decoration: none;
}
nav li a:focus {
outline: none;
text-decoration: underline;
}
nav li:first-child a {
border-left: none;
}
nav li:hover ul {
display:block;
}
nav a span {
display: block;
float: right;
margin-left: 5px;
}
nav ul ul {
display: none;
width: 100%;
position: absolute;
left: 0;
background: #670C15;
}
/******************************/
nav ul ul li {
float: none;
}
nav ul ul a {
padding: 5px 10px;
border-left: none;
border-right: none;
font-size: 14px;
}
nav ul ul a:hover {
color: #fff;
}
nav ul li a:hover {
color: #fff;
}
nav ul a span {
-moz-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
transform: rotate(-180deg);
}
#intro {
position: relative;
margin-top: 66px;
padding: 44px;
background: #467612 url("intro_background.png") repeat-x;
border-radius: 170px 50px;
}
#intro img {
position: absolute;
top: 0;
right: 0;
width: 470px;
height: 100%;
border-radius: 170px 50px;
}
#intro h2 {
position: relative;
z-index: 9999;
width: 600px;
padding: 0 0 0 0;
font-weight: bold;
}
#intro p {
position: absolute;
top: 0;
right: 0;
padding: 3% 0 0 0;
width: 400px;
z-index: 9999;
font-weight: bold;
}
#contenido {
display: table;
}
#contenidoPrincipal {
display: table-cell;
width: 620px;
padding-right: 22px;
}
aside {
display: table-cell;
width: 300px;
}
.blogPost div {
column-count: 2;
column-gap: 22px;
-moz-column-count: 2;
-moz-column-gap: 22px;
-webkit-column-count: 2;
-webkit-column-gap: 22px;
}
.blogPost img {
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
width: 100%;
}
#comentarios {
margin-top: 21px;
padding-top: 22px;
border-top: 1px solid #d7d7d7;
}
#comentarios article {
display: table;
padding: 22px;
}
section#comentarios article:nth-child(2n+1) {
padding: 21px;
background: #E3E3E3;
border: 1px solid #d7d7d7;
border-radius: 11px;
}
#comentarios article header {
display: table-cell;
width: 220px;
padding-right: 22px;
}
#comentarios article header a {
display: block;
font-weight: bold;
color: #000;
}
#comentarios article header a:hover {
text-decoration: none;
}
#comentarios article p {
padding: 0;
}
form {
margin-top: 21px;
padding-top: 22px;
border-top: 1px solid #d7d7d7;
}
form p {
display: table;
margin-bottom: 22px;
padding: 0 22px;
}
form label {
display: table-cell;
width: 140px;
padding-right: 20px;
text-align: right;
font-weight: bold;
vertical-align: top;
}
form input[type="text"], form input[type="email"], form input[type="url"] {
display: table-cell;
width: 300px;
height: 20px;
border: 1px solid #d7d7d7;
}
form textarea {
width: 300px;
height: 100px;
border: 1px solid #d7d7d7;
}
form input[type="submit"] {
margin-left: 162px;
}
aside section {
margin: 22px 0 0 22px;
padding: 11px 22px;
background: url("sidebar_section_background.png") repeat-x;
}
aside section ul {
margin: 0 0 0 22px;
list-style: none;
}
aside section ul li a {
display: block;
text-decoration: none;
color: #000;
}
aside section ul li a: hover {
text-decoration: underline;
}
footer {
position: absolute;
left: 0;
width: 100%;
background: #681E1E;
}
footer div {
display: table;
margin: 0 auto;
padding: 44px 0;
width: 940px;
color: #777;
}
footer div section {
display: table-cell;
width: 300px;
}
footer div #acerca, footer div #otrosBlogs {
padding-right: 20px;
}
footer h3 {
color: #FFF;
}
footer a {
color: #999;
}
footer a:hover {
color: #FFF;
text-decoration: none;
}
footer ul {
margin: 0 0 0 40px;
list-style: square;
color: #565656;
}
footer ul li a {
display: block;
}
form p label{
color: #914F56;
}
<!doctype html>
<html>
<head id="titulo">
<title>Título de Página</title>
<link rel="stylesheet" href="estiloexpe.css" type="text/css" media="screen" />
</head>
<body>
<header>
<h1>Título de Página</h1>
</header>
<nav>
<ul>
<li>Inicio</li>
<li>
Archivo<span>^</span>
<ul>
<li> Submenú 1 </li>
<li> Submenú 2 </li>
<li> Submenú 3 </li>
</ul>
</li>
<li>Contacto</li>
</ul>
</nav>
<br><br><br><br>
<section id="intro">
<h2>Esta es una introducción de prueba.</h2>
<img src="intro_pebbles.png" alt="Image: Felixco, Inc. / FreeDigitalPhotos.net" />
<p>Cuando todo va mal te imagino sonriendo y se me pasa. <br> Ese es mi truco y esa es tu magia.</p>
</section>
<div id="contenido">
<div id="contenidoPrincipal">
<section>
<article class="blogPost">
<header>
<h2>Título del post.</h2>
<p> Escrito el <time datetime= "2016-02-08T09:20:45-06:00">23 de febrero de 2016
</time> por Genessis - Sin comentarios
</p>
</header>
<div>
<p>Para comprender el valor de un año, habla con el alumno que reprobó.
Para comprender el valor de un mes, habla con la madre de un bebé prematuro.
Para comprender el valor de una semana, habla con el redector de un semanario.
Para comprender el valor de un día, habla con el obrero que debe alimentar seis hijos.
</p>
<img src="DianaDardos.jpg" alt="Image: renjith krishnan / FreeDigitalPhotos.net" />
<p>Para comprender el valor de una hora, habla con los amantes que ansían verse.
Para comprender el valor de un minuto, habla con la persona que no alcanzo el tren.
Para comprender el valor de un segundo, habla con quien sobrevivió a un accidente.
Para comprender el valor de una milesima de segundo, habla con quien gano medalla de plata en las olimpiadas.
</p>
</div>
</article>
</section>
<section id="comentarios">
<header>
<h3>Comentarios</H3>
</header>
<article>
<header>
Juan Peacute el <time datetime= "2016-02-09T03:35:20-06:00">
23 de febrero del 2016 a las 12:50 am </time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut.
</p>
</article>
<article>
<header>
Mafer Castillo el <time datetime="2012-02-09T11:40:09-06:00">
23 de febrero de 2016 a las 3:00 pm</time>
</header>
<p>Digamos que hoy me levante otoñal, pero hable contigo y ya tengo los bolsillos
llenos de veranos.
<p>Cuando quieras/puedas, ven a buscarlos.</b>
</p>
</article>
</section>
<form action="#" method="post">
<h3>Agregar comentario</h3>
<p>
<label for="Nombre">Nombre</label>
<input name="nombre" id="nombre" type="text" required />
</p>
<p>
<label for="email">Correo</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Sitio Web</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comentario">Comentario</label>
<textarea name="comentario" id="comentario" required></textarea>
</p>
<p>
<input type="submit" value="Agregar Comentario" />
</p>
</form>
</div>
<aside>
<section>
<header>
<h3>Categorias</h3>
</header>
<ul>
<li> Lorem ipsum dolor. </li>
<li> Sit amet consectetur. </li>
<li> Adipisicing elit sed. </li>
<li> Do eiusmod tempor. </li>
<li> Incididunt ut labore. </li>
</ul>
</section>
<section>
<header>
<h3>Archivos</h3>
</header>
<ul>
<li> Enero 2012 </li>
<li> Diciembre 2011 </li>
<li> Noviembre 2011 </li>
<li> Octubre 2011 </li>
</ul>
</section>
</aside>
</div>
<footer>
<div>
<section id="Acerca">
<header>
<h3>Acerca de...</h3>
</header>
<p>
¿Que gano yo, si obtengo lo que ansío?
Un sueño, un aliento, una chispa de goce fugaz.
¿Quien cambiaria un momento de jubilo por una semana de llanto vacio?
¿O quien venderia la eternidad para tener un juguete y solaz?
¿O por una dulce uva, destruiria la vid y su haz?
</p>
</section>
<section id="otrosBlogs">
<header>
<h3>Otros Blogs</h3>
</header>
<ul>
<li> HTML5Tutoriales </li>
<li> HTML5tuto </li>
<li> HTML </li>
</ul>
</section>
<section id="popular">
<header>
<h3>Lo más popular</h3>
</header>
<ul>
<li> Ten confianza en ti mismo, y en todos los que te rodean </li>
<li> Fija metas que puedas alcanzar. </li>
<li> Habla con tus actos y no con tus palabras. </li>
</ul>
</section>
</div>
</footer>
</body>
</html>
Just a few minor CSS changes:
nav {
// remove position:absolute;
// remove left:0;
display: block;
width:auto;
background: url("nav_background.png");
}
nav ul{
padding:0;
margin: 0 auto;
width:24em; // ( or however many li elements you have at 8em width)
}
nav li {
width:8em; // (for example. Could be larger or smaller or px or %)
}
I have three social media images in a div at the bottom of the page. I have them placed center of the div but when i add the link to the image it pushes the other images away and the area around the image is linked as well.
On other sites I have not had this issues so I am not sure what is going on
Thanks
<head>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link href="assets/hover.css" rel="stylesheet" media="all">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NolanD</title>
</head>
<body>
<div id="nav">
<header>
<div class="logo">NolanD</div>
<div id="logo">
</div>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
</div>
<body>
<div class="rowone">
</div>
<div class="rowtwo">
<p>
</p>
</div>
<div class="rowthree">
</div>
</div>
<div class="rowfour">
</div>
<div class="rowfive">
</div>
<div class="rowsix">
<img src="assets/images/linkedin.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
<img src="assets/images/github-2.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
</div>
</body>
And the CSS, where I think the issues is coming from.
html, body {
margin:0;
padding:0;
}
* {
margin: 0;
padding:0;
}
#nav {position:absolute;
width:100%;
height: 60px;
background:#F4F2F2 ;
text-align: right; left: 0; top: 0; }
#nav a { font-size:26px; padding: 3px; margin-right: 1rem; font-family: Roboto;
font-weight:100; }
#nav li { display: inline-block; }
#nav h1 { text-align: left; }
a { color:#1D7090; text-decoration: none; padding: 10rem; transition: .4s; }
.logo {
float: left;
color: #1D7090;
font-size: 26px;
font-family: Roboto;
font-weight:100;
line-height: 31px;
display: inline-block;
margin-left: 1rem;
}
body {
background-color:#6A6262;
}
.rowone {
background-color:#7DB3BF;
width: 100%;
height: 600px; }
.rowtwo {
text-align: center;
font-size:72px;
color:#000000;
padding-top: 1rem;
background-color:#F9F2F2;
width: 100%;
height: 540px;
}
.rowthree {
background-color:#B34042;
width: 100%;
height: 500px;
}
.rowfour {
background-color:#FF5700;
width: 100%;
height: 500px;
}
.rowfive {
background-color:#DDD39B;
width: 100%;
height: 500px;
}
.rowsix{
background-color:#3E3E3E;
width: 100%;
height: 175px;
text-align:center;
}
.rowsix img { display: block;
padding-top: 5rem;
text-align:center;
display:inline-block;
margin:5px 15px;
}
#media all and (max-width:600px) {
.logo { display:none; }
#nav {text-align: center; }
}
Try remove padding attribute you added for link at line :
a { color:#1D7090; text-decoration: none; padding: 10rem; transition: .4s; }
Btw : please reformat your code. It's to bad :(