When you resize the browser, the site elements are superimposed on each other.
I've tried to use margin: auto and position:fixed but it doesn't work
Please, advice me, that i must to change or add to fix this problem
P.S. If you can - write in which exactly code I must add/change that i need
This is my site
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
overflow: auto !important;
}
body {
height: 100%;
margin:0px;
overflow: auto !important;
}
wrapper{
display: flex;
flex-direction: column;
height: 100%;
}
.HeaderCenter {
background-repeat: no-repeat;
background-position: top, left;
position: fixed;
vertical-align: top;
width:100%;
height:80px;
z-index: 1;
}
.HeaderLeft {
position: fixed;
background-repeat: no-repeat;
width:12.5%;
height:20.4%;
margin: 5px -4px;
z-index: 0;
}
.HeaderInt {
background-repeat: no-repeat;
position: fixed;
left: 12%;
width:7%;
height:93px;
z-index: 0;
}
.News {
color: #6a70b3;
font-family: verdana, arial, helvetica, "sans-serif";
font-size: 13.3333px;
line-height: 17px;
font-weight: 700;
text-align: left;
margin-right: 50%;
top: 150px;
}
section { /*Контент*/
font-family: Arial;
color: #000000;
font-size: 12.8px;
vertical-align: middle;
text-align: left;
width:900px;
height:300px;
position:fixed;
left:260px;
top:110px;
padding-bottom: 90px;
flex: 1 0 auto;
}
section a:visited {
color:#003399;
}
section a:hover {
color: black;
}
aside { /*Sidebar*/
padding: 50px 10px;
margin: 0% auto;
position: fixed;
float:left;
list-style-type: none;
width:190px;
background-image: url(images/side.PNG);
background-repeat:repeat-y;
background-size: 75%;
height: 69%;
}
aside li {
font-family: Verdana, Arial , "sans-serif", helvetica;
font-size: 11px;
margin-bottom: 10px;
width: 140px;
font-weight: 700;
text-align: left;
line-height: 15px;
}
/* Стиль верхней панели навигации */
.topnav {
margin:6% auto;
margin-left: 20%;
overflow: hidden;
background-color: red;
text-align:center;
}
/* Стиль ссылок навигации */
.topnav a {
margin:0 auto;
display:inline;
margin-left:3px;
line-height: 15px;
font-size: 11px;
font-weight: 700;
float:left;
font-family: verdana, "sans-serif", helvetica, arial;
display: block;
color: #f2f2f2;
text-align: center;
padding: 5px 10px;
text-decoration: none;
}
/* Изменение цвета при наведении */
.topnav a:hover {
color: orange;
}
ul {
list-style-type: none; /* Убираем маркеры */
text-decoration: none; /* Убираем подчёркивание */
margin-left: 0; /* Отступ слева в браузере IE и Opera */
padding-left: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */
}
ul a{
list-style-type: none;
text-decoration: none;
color: darkblue;
}
ul a:hover{
list-style-type: none;
text-decoration: none;
color:orange;
}
#mainText {
text-align: center;
}
.border {
color:black;
}
table, th, td {
border: 1px solid black;
}
footer { /*Подвал*/
text-align: center;
margin-right:0;
left: 0;
bottom: 0;
width: 100%;
height: 0px;
color: white;
text-align: center;
min-height: 50px;
float: none;
position: absolute;
}
footer a{
font-family: Arial;
font-size: 10.6667px;
line-height: 14px;
font-weight: 400;
position: absolute;
left: 5%;
bottom: 2px;
width: 100%;
color: white;
text-align: center;
text-decoration: none;
color:#06C;
height: 40px;
float: none;
}
.footerline {
position: absolute;
bottom: 1px;
left: 0px;
float: none;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Новости - Анонсы</title>
</head>
<body>
<div id="wrapper">
</div>
<header>
<img src="images/header.PNG" class="HeaderCenter" alt="Header">
<img src="images/header1.png" class="HeaderLeft" alt="Header">
<img src="images/header2.png" class="HeaderInt" alt="Header">
</header>
<nav>
<div class="topnav"> <!--Верхнее меню -->
Новости
О Суде
Решения КС РФ
Заседания КС РФ
Контакты
</div>
</nav>
<section> <!-- Основной текст -->
<h3 class="News">Новости - Анонсы</h3>
<br>
<br>
<p>10 ноября 2017 года Конституционный Суд РФ провозгласит Постановление по делу о проверке конституционности Федерального закона «О внесении изменений в отдельные законодательные акты РФ в части совершенствования законодательства о публичных мероприятиях»</p>
<br>
<p>( подробнее...)</p>
<br>
<p>7 ноября 2017 года Конституционный Суд РФ провозгласил Постановление по делу о проверке конституционности ряда положений Закона Республики Крым «Об особенностях регулирования имущественных и земельных отношений на территории Республики Крым»</p>
<br>
<p>( подробнее...)</p>
<br>
Посмотреть все новости
<br>
</section>
<aside> <!-- Меню слева -->
<ul>
<li>Новости</li>
<li>О Суде</li>
<li>Решения КС РФ</li>
<li>Заседания КС РФ</li>
<li>Контакты</li>
</ul>
<br>
<img src="images/gerb.gif" alt="Герб РФ" align=center>
</aside>
<br>
<br>
<footer>
<hr style="border:1px; height:1px; width: 70%; margin-left: 270px; background-color:black">
<img src="images/footer.PNG" class=footerline alt="Footer">
©Конституционный Суд Российской Федерации, 2008-2017
</footer>
</body>
</html>
Add those two meta tags in your head tag
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I should to make copy of this site, so, can anybody advice me, how can I make the same header?
Attached 2 screenshots and HTML/CSS for better understanding
This is what I want to do. Outlined 3 blocks which have this header, it's 3 different images
This my example of site. Header isn't 3 different blocks and just one image
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
overflow: auto !important;
}
body {
height: 100%;
margin:0px;
overflow: auto !important;
}
wrapper{
display: flex;
flex-direction: column;
height: 100%;
}
header { /*Шапка*/
background-image: url(images/header.PNG);
background-repeat: no-repeat;
background-position: top, left;
position: sticky;
vertical-align: top;
width:100%;
height:80px;
}
.News {
color: #6a70b3;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 13.3333px;
line-height: 17px;
font-weight: 700;
text-align: left;
}
section { /*Контент*/
font-family: Arial;
color: #000000;
font-size: 12.8px;
line-height: 16px;
font-weight: 400;
vertical-align: middle;
text-align: justify;
width:600px;
height:300px;
position:absolute;
left:300px;
top:100px;
padding-bottom: 90px;
flex: 1 0 auto;
}
section a:visited {
color:#003399;
}
section a:hover {
color: black;
}
aside { /*Sidebar*/
padding: 50px 10px;
margin: 0px auto;
position: relative;
float:left;
list-style-type: none;
width:190px;
background-image: url(images/side.PNG);
background-repeat:repeat-y;
background-size: 75%;
position: absolute;
height: 75%;
}
aside li {
font-family: Verdana, "Sans-Serif", Helvetica, Arial;
font-size: 11px;
margin-bottom: 10px;
font-weight: 700;
text-align: left;
line-height: 15px;
}
/* Стиль верхней панели навигации */
.topnav {
width:100%;
margin:0 auto;
margin-left: 20%;
overflow: hidden;
background-color: red;
text-align:center;
}
/* Стиль ссылок навигации */
.topnav a {
margin:0 auto;
display:inline;
margin-left:3px;
line-height: 15px;
font-size: 11px;
font-weight: 700;
float:left;
font-family: Verdana,"Sans-serif",Helvetica,Arial;
display: block;
color: #f2f2f2;
text-align: center;
padding: 5px 10px;
text-decoration: none;
}
/* Изменение цвета при наведении */
.topnav a:hover {
color: orange;
}
ul {
list-style-type: none; /* Убираем маркеры */
text-decoration: none; /* Убираем подчёркивание */
margin-left: 0; /* Отступ слева в браузере IE и Opera */
padding-left: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */
}
ul a{
list-style-type: none;
text-decoration: none;
color: darkblue;
}
ul a:hover{
list-style-type: none;
text-decoration: none;
color:orange;
}
#mainText {
text-align: center;
}
.border {
color:black;
}
table, th, td {
border: 1px solid black;
}
footer { /*Подвал*/
text-align: center;
margin-right:0;
position: fixed;
left: 0;
bottom: 0;
width: 50%;
height: 70px;
color: white;
text-align: center;
min-height: 50px;
}
footer a{
font-family: Arial;
font-size: 10.6667px;
line-height: 14px;
font-weight: 400;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
text-decoration: none;
color:#06C;
height: 40px;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Новости - Анонсы</title>
</head>
<body>
<header>
</header>
<nav>
<div class="topnav"> <!--Верхнее меню -->
Новости
О Суде
Решения КС РФ
Заседания КС РФ
Контакты
</div>
</nav>
<div class="wrapper">
</div>
<section> <!-- Основной текст -->
<br>
<br>
<h3 class="News">Новости - Анонсы</h3>
<br>
<br>
<p>10 ноября 2017 года Конституционный Суд РФ провозгласит Постановление по делу о проверке конституционности Федерального закона «О внесении изменений в отдельные законодательные акты РФ в части совершенствования законодательства о публичных мероприятиях»</p>
<br>
<p>( подробнее...)</p>
<br>
<p>7 ноября 2017 года Конституционный Суд РФ провозгласил Постановление по делу о проверке конституционности ряда положений Закона Республики Крым «Об особенностях регулирования имущественных и земельных отношений на территории Республики Крым»</p>
<br>
<p>( подробнее...)</p>
<br>
Посмотреть все новости
<br>
</section>
<aside> <!-- Меню слева -->
<ul>
<li>Новости</li>
<li>О Суде</li>
<li>Решения КС РФ</li>
<li>Заседания КС РФ</li>
<li>Контакты</li>
</ul>
<br>
<img src="images/gerb.gif" alt="Герб РФ">
</aside>
<br>
<br>
<footer>
<hr style="border:1px; height:1px; border-color:black;background-color:black">
©Конституционный Суд Российской Федерации, 2008-2017
</footer>
</body>
</html>
You create an image with a curve that looks like the curve on the image (red & greyish blue) and then you put it in a layer above the other div's.
Does that solve your problem?
Flexbox isn't working in Chrome or Safari but works fine in Firefox. The vertical images are expanding to not fit within their container, but in Firefox they're behaving as I want them to. Here is the code, any idea? Thanks.
body{ max-width: 1970px;
margin: 0 auto;
padding: 0 2%;
box-sizing: border-box;
padding-top: 100px;
}
a {
text-decoration: none;
font-family: 'Karla', sans-serif;
font-size: 1em;
letter-spacing: -0.03em;
}
img {
max-width: 100%;
}
/***********************************
HEADING
************************************/
header {
float: left;
position:fixed;
top:0;
width: 100%;
z-index: 99;
background-color: white;
}
h1 {
font-family: 'Giorgio Sans Web', sans-serif;
margin: 0 auto;
font-size:4.5em;
font-weight: 700;
font-style: normal;
font-stretch: normal;
}
h2 {
font-family: 'Giorgio Sans Web', sans-serif;
margin: 0 auto;
font-size:4em;
font-weight: 700;
font-style: normal;
font-stretch: normal;
line-height: 3em;
}
h3 {
font-family: 'Karla', sans-serif;
font-weight: 400;
font-size:1.3em;
margin: 0 0 1em 0;
}
h4 {
font-family: 'Giorgio Sans Web', sans-serif;
margin: 0 auto;
font-size:2.5em;
font-weight: 700;
letter-spacing:0.0625em;
font-style: normal;
font-stretch: normal;
}
h5 {
font-family: 'Karla', sans-serif;
font-weight: 700;
font-size: 0.75em;
line-height: 1.2em;
}
p {
font-family: 'Karla', sans-serif;
line-height: 1.5em;
font-size: 1.2em;
letter-spacing: -0.03em;
}
/***********************************
NAVIGATION
************************************/
nav {
/*text-align: center;
margin: 0 2%;
box-sizing: border-box;*/
background-color: white;
}
#nav-parent {
height:;
display:flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding: 10px 3%;
margin: 0 auto;
}
.nav-icon {
flex-basis:auto;
}
#logo {
flex-basis:auto;
box-sizing: border-box;
padding-left: 20px;
}
.contact-button {
flex-basis:auto;
}
nav li a {
padding:0;
}
/***********************************
SIDE NAV
************************************/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 100;
top: 0;
left: 0;
background-color: #F3F3F3;
overflow-x: hidden;
transition: 0.5s;
padding-top: 20px;
}
#sidenav-content {
margin-left: 13px;
}
.sidenav a {
text-decoration: none;
color: #000;
display: block;
transition: 0.3s;
}
.sidenav a h4 {
overflow: hidden;
white-space: nowrap;
padding: 16px 8px 0px 6px;
color: #000;
display: block;
transition: 0.1s;
}
.sidenav p {
padding: 0px 8px 8px 26px;
font-size: 16px;
color: #000;
display: block;
transition: 0.3s;
width: 250px;
}
.slide-nav-link {
margin-top: 10px;
padding: 8px 8px 8px 26px;
line-height: 2.2em;
}
.slide-nav-social {
width: 150px;
height:50px;
margin-top: 20px;
margin-left: 26px;
}
.slide-nav-social a {
width:20px;
padding: 0 15px 0 0;
display: inline-block;
}
.sidenav a:hover, .offcanvas a:focus{
color: #6B00FF;
}
.sidenav .closebtn {
padding: 15px 8px 8px 26px;
font-size: 30px;
margin-left: 0px;
}
.closebtn a:hover {
color: #000;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/***********************************
FOOTER
************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width:20px;
height: 20px;
margin: 0 5px;
}
/***********************************
PAGE: PORTFOLIO
************************************/
.gallery{
margin: 0 auto;
list-style: none;
padding-left: 0;
}
.gallery figure {
overflow: hidden;
float: left;
width: 48%;
margin: 1%;
z-index: 97;
position: relative;
float: left;
}
.gallery figcaption {
background: rgba(255,255,255,0.97);
display : flex;
align-items : center;
text-align: center;
color: white;
float: left;
position: absolute;
left: 0;
opacity: 0;
right: 0;
top: 0;
height:100%;
z-index: 98;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
transition: all 300ms;
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
transition-delay: 100ms;
}
.gallery figcaption h3 {
width:100%;
text-align: center;
color:#000;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.gallery li:hover figcaption {
opacity: 1;
}
/***********************************
PAGE: Project
************************************/
.project-gallery{
margin: 0 auto;
padding: 0 1.5%;
list-style: none;
}
.project-gallery img{
max-width: 100%;
margin: 1.5% 0;
}
.project-gallery hr {
margin: 40px 0;
border: none;
height: 3px;
background-color: #000;
}
.project-title {
max-width: 100%;
text-align: center;
padding-top: 40px;
}
.description-text {
display:inline;
}
.left-column-text {
width:30%;
margin-left: 5%;
margin-top: 8px;
display:inline-block;
vertical-align: top;
}
.left-column-text p {
margin: 10px 0 25px 0;
}
.left-column-text h5 {
margin-bottom: -5px;
}
.right-column-text {
width:50%;
margin: 0 5% 0 8%;
display:inline-block;
vertical-align: top;
}
.vertical-imgs {
display: -webkit-flex; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-flex; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display:flex;
justify-content: space-between;
margin: 1% 0;
}
.vertical-img-left {
box-sizing: border-box;
padding-right: 3%;
}
.vertical-img-right {
box-sizing: border-box;
}
.prev-next-buttons {
margin-right: -3.7%;
}
.prev-next-buttons a {
display: inline-block;
margin: 0;
box-sizing: border-box;
padding: 20px 5%;
}
.prev-button {
width:48%;
}
.next-button {
text-align: right;
width:48%;
}
/***********************************
PAGE: About
************************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/***********************************
PAGE: CONTACT
************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.mail a {
background-image: url('../img/mail.png')
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png')
}
.contact-info li.phone a {
background-image: url('../img/phone.png')
}
/***********************************
COLORS
************************************/
/* site body */
body {
background-color: #fff;
color:#000;
}
/*green header
header {
background: #6ab47b;
border-color: #599a68;
}*/
/*nav background on mobile
nav {
background: #599a68;
}*/
/*logo text */
h1 {
color: #000;
}
/*link color*/
a {
color:#000
}
/*nav link colors*/
nav a, nav a:visited {
color: #000;
}
/* selected nav link colors*/
nav a.selected, nav a:hover {
color: #5513FE
}
/* selected prev next link colors*/
a h1.selected, a h1:hover {
color: #5513FE
}
a h4.selected, a h4:hover {
color: #5513FE
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cari Sekendur - MHG Modern Classic</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="fonts/1606-HQIULX.css">
<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/main1.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<nav>
<ul id="nav-parent">
<li class="nav-icon">
<span style="cursor:pointer" onclick="openNav()"
</span>
<img src="img/nav-icon.svg" class="nav-icon">
</li>
<li id="nav-icon">
<a href="index.html" id="logo">
<h1>CARI</h1>
</a>
</li>
<li class="nav-icon">
Contact
</li>
</ul>
</nav>
</header>
<div id="mySidenav" class="sidenav">
<div id="sidenav-content">
<img src="img/nav-icon-open.svg" class="nav-icon">
<div class= "slide-nav-link">
Work
About
Contact
</div>
<div class= "slide-nav-text">
<a href="index.html" id="logo">
<h4>CARI SEKENDUR</h4>
</a>
<p>Creating visual experiences that make the complex clear and the average exceptional.</p>
</div>
<div class= "slide-nav-social">
<img src="img/WNWlogo.svg">
<img src="img/linkedin-black.svg">
<img src="img/pinterest-black.svg">
</div>
</div>
</div>
<!--Click on the element below to open the side navigation menu.-->
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "350px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<div class="wrapper">
<section class="project-gallery">
<div class="horiztonal-img">
<img src="img/mhg-zine/CARI_MHG_ZINE_1.gif" alt="">
</div>
<div class="project-title">
<h2>MORGANS HOTEL GROUP - MODERN CLASSIC ZINE</h2>
</div>
<hr>
<div class="description-text">
<div class="left-column-text">
<h5>STUDIO</h5>
<p>LMNOP Creative</p>
<h5>CREATIVE DIRECTION</h5>
<p>Leigh Nelson</p>
<h5>DESIGN</h5>
<p>Cari Sekendur, Leigh Nelson, Heidi Chisholm</p>
</div>
<div class="right-column-text">
<p> Morgans Hotel Group launched the global phenomenon of boutique hotels 20 years ago, and to celebrate their rich history they put together a campaign called The Modern Classic. Each of Morgans' properties has a design aesthetic that is unlike anything you've seen before, awe-inspiring and always over-the-top. So, to capture the essence of Morgans' brand, we concepted, designed, and printed a zine for them to distribute to hotel guests. This project was a print designer's dream, complete with gold-holographic foil, gold staples, fluorescent Pantone inks, collage, illustration, a tear-out poster, and even a little pack of temporary tattoos.
</p>
</div>
<hr>
</div>
<div class="horiztonal-img">
<img src="img/mhg-zine/CARI_MHG_ZINE_2.jpg" alt="">
</div>
<div class="vertical-imgs">
<img src="img/mhg-zine/CARI_MHG_ZINE_8.jpg" alt="" class="vertical-img-left">
<img src="img/mhg-zine/CARI_MHG_ZINE_5.jpg" alt="" class="vertical-img-right">
</div>
<div class="horiztonal-img">
<img src="img/mhg-zine/CARI_MHG_ZINE_7.jpg" alt="">
</div>
<div class="prev-next-buttons">
<a href="#" class="prev-button">
<h2>PREVIOUS</h2>
</a>
<a href="#" class="next-button">
<h2>NEXT</h2>
</a>
</div>
<hr class="bottom-hr" style="margin-top: 0px;">
</section>
<footer>
<p></p>
</footer>
</div>
</body>
</html>
use :
#nav-parent {
display:flex;
display: -webkit-flex;
-webkit-flex-flow: initial;
flex-flow: initial;
justify-content: space-between;
align-items: center;
padding: 10px 3%;
margin: 0 auto;
}
please can someone help with my website reponsiveness, at the moment when the viewport shrinks the website messes up and i dont know what i have done in the code to make it like that.
thanks in advance!
body {
background-color: #F2F2F2;
}
.body1 {
background-color: #FFFFFF;
margin-left: 10vw;
width: 79.4vw;
height: 80vw;
max-width: 1000vw;
position: absolute;
overflow: hidden;
margin-top: 0px;
font-size: 1.6vw;
padding: 5px 5px;
}
.webheadimg {
margin-left: 10vw;
width: 80vw;
max-width: 1000vw;
max-height: 150vh;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
overflow: hidden;
}
#menu {
width: 80vw;
font-size: 1vw;
max-font-size: 1.6vw;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
font-color: #FFFFFF;
font-size: 1vw;
max-font-size: 1.6vw;
text-align: center;
margin-left: 10vw;
background-color: #CA2A2A;
border-radius: 0px;
max-width: 1000vw;
}
#menu ul {
height: auto;
padding: 0.8vw 0px;
margin: 0px;
}
#menu li {
display: inline;
font-size: 1vw;
max-font-size: 16vw;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
padding: 0.8vw 0.8vw 0.8vw 0.8vw;
font-size: 1.5vw;
max-font-size: 16px;
}
#menu a:hover {
color: #000000;
background-color: #FFFFFF;
}
.webheadlogo {
position: absolute;
overflow: hidden;
margin-left: 10vw;
float: left;
height: auto;
width: 5%;
padding: 5px 5px;
}
#media (max-width: 1285px) {
body {
background-color: #F2F2F2;
}
.body1 {
background-color: #FFFFFF;
width: 72.8vw;
height: 100vw;
overflow: hidden;
font-size: 3vw;
margin-left: 23.4vw;
padding: 5px 5px;
bottom: 48.9vw;
position: relative;
}
.webheadimg {
width: 96vw;
height: auto;
max-width: auto;
max-height: auto;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
margin-left: 1vw;
}
#menu {
width: 21.4vw;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
font-size: 1vw;
text-align: left;
margin-left: 1vw;
background-color: #CA2A2A;
border-radius: 0px;
max-width: 96vw;
}
#menu ul {
height: auto;
padding: 0.5vw 0vw;
margin: 0px;
}
#menu li {
display: block;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
padding: 0.5vw 0.5vw 0.5vw 0.5vw;
font-size: 3vw;
display: block;
}
#menu a:hover {
color: #000000;
background-color: #FFFFFF;
}
.webheadlogo {
position: absolute;
overflow: hidden;
margin-left: 1vw;
float: left;
height: auto;
width: 10%;
padding: 5px 5px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Hull Daily News</title>
</head>
<<body>
<div>
<img class="webheadlogo" src="logo1.png" alt=".logo">
<img class="webheadimg" src="Webhead.jpg" alt=".Webhead" />
</div>
<div id="menu">
<ul>
<li>Home
<li>Breaking News
</li>
<li>Sport
</li>
<li>Hull Today
</li>
<li>Property
</li>
<li>Social Media
</li>
<li>Music
</li>
<li>Reviews
</li>
<li>Movies
</li>
<li>Weather
</li>
</ul>
</div>
<div class="body1">
Text Box
</div>
</body>
as you can see the 'text box' jumps around the screen and there is a random grey box at the bottom of the page, i would be so grateful if someone could find me a fix for this
example
You need add
<head>
...
<meta name="viewport" content="width=device-width"/>
...
</head>
You are missing viewport in <head> tag. You can use this for example:
<meta name="viewport" content="width=device-width"/>
For some odd reason, bottom-border works when I set the property to the "li" element, not for the defined "class" name (li-navclass). This presents a problem because I don't want the bottom border to be applied to the footer-links.
What I've tried:
-expanding the menu height
-bottom border, top-border
-different ways to write the property
Would greatly appreciate help on this. Thanks in advance!
.container {
position: absolute;
background:url('../images/bgpic.png');
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.wrapper {
position: relative;
margin: auto;
padding: auto;
height: 655px;
width: 900px;
}
.titlehdr {
margin: 0px;
padding: 0px;
display: inline-block;
width: 897px;
height: 110px;
}
.title-div {
display: inline-block;
position: relative;
height: 100%;
width: 90px;
margin: 0px;
padding: 0px;
}
.title {
position: relative;
top: 40px;
margin: 0px;
padding: 0px;
font-size: 70px;
color: white;
font-family: Mesquite Std;
letter-spacing: 1.2px;
}
.barandgrill-div {
display: inline-block;
vertical-align: bottom;
}
.barandgrill-text {
margin: 0px;
padding: 0px;
font-family: Arial;
font-weight: bold;
}
/*---------------Nav Menu----------------*/
.menu {
padding-left: 0px;
margin-left: 0px;
font-size: 15px;
}
.nav-container {
text-align: center;
display: block;
top: 100px;
margin: 0px;
padding: 0px;
width: 900px;
height: 40px;
background-color: #901423;
border-style: solid;
border-width: 1px;
border-color: #111111;
}
.menu {
display: inline-block;
text-align: center;
margin: auto;
padding: auto;
list-style-type: none;
overflow: hidden;
font-color: #000000;
}
.li-navclass {
border-bottom: 1px solid #000;
}
li {
display: inline-block;
position: relative;
padding: 0 1em;
font-size: 150%;
}
.nav-text {
color: #ffffff;
font-weight: bold;
opacity: .3;
}
.nav-container ul a {
text-decoration: none;
word-spacing: 200px;
margin: 0px;
padding: 0px;
font-size: 20px;
font-family: Segoe Script;
}
/*---------------Content----------------*/
.content {
display: block;
width: 900px;
height: 500px;
border-style: solid;
border-width: 1px;
background-color: #111111;
opacity: 0.6;
}
/*---------------Footer------------------*/
.foot {
text-decoration: none;
list-style-type: none;
display: block;
position: relative;
text-align: center;
font-size: 12px;
}
.ftr-button {
position: relative;
top: -5px;
list-style: none;
text-decoration: none;
color: rgb(147, 104, 55);
}
.ftr-links {
text-decoration: none;
list-style-type: none;
}
.vert-line {
height: 13px;
border-right: 1px solid #909090;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sticky Navigation Tutorial</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" media="screen, projection" href="css/screen.css"/>
</head>
<body>
<div class="container">
<div class="wrapper">
<!--Title-->
<div class="titlehdr">
<div class="title-div">
<p class="title">Donatelo's</p>
</div>
<div class="barandgrill-div">
<p class="barandgrill-text">Mediterranean Bar and Grill</p>
</div>
</div>
<!--Navigation Menu-->
<div class="nav-container">
<ul class="menu">
<li class="li-navclass">Story</li>
<li class="li-navclass">Menu</li>
<li class="li-navclass">Gallery</li>
<li class="li-navclass">Catering</li>
<li class="li-navclass">Contact</li>
</ul>
</div>
<!--Grey Box-->
<div class="content">
<div id="sidebar">
<div id="scroller">
</div>
</div>
</div>
<!--footer-->
<div class="foot">
<ul class="ftr-links">
<li class="vert-line">Story</li>
<li class="vert-line">Menu</li>
<li class="vert-line">Gallery</li>
<li class="vert-line">Catering</li>
<li class="vert-line">Contact</li>
</ul>
<p class="copyright">Copyright © 2015 Agabi Mediterranean Restaurant</p>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".nav-text").mouseover(function() {
$( this ).css( "opacity", ".8" );
});
$(".nav-text").mouseout(function() {
$(this).css( "opacity", ".2");
});
$(".ftr-button").mouseover(function() {
$(this).css("color", "rgb(132, 131, 129)");
});
$(".ftr-button").mouseout(function() {
$(this).css("color", "rgb(147, 104, 55)");
});
$(".nav-text").click(function() {
$(this).css("opacity", ".8");
});
});
</script>
</html>
Add style to :after
.li-navclass:after {
border-bottom: 1px solid #000;
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
}
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)