I just started my first practice site and I cant seem to position the navigation bar where I want it. I want it centered in the header right above the midbody. I look on W3 but i still cant seem to grasp it. Any help would be greatly appreciated.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link type="css/text" rel="stylesheet" href="animate.css">
<title>
</title>
</head>
<body>
<div class="Header">
<div id="navbar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div class="MidBody">
<div id="leftbody"></div>
<div id="rightbody"></div>
<div id="lowerbody"></div>
</div>
<div class="footer"></div>
</body>
</html>
CSS:
.Header {
width: calc(100%-16px);
height: 100px;
border-radius: 5px;
background-color: transparent;
}
.MidBody {
background-color: #141414;
width: calc(100%-16px);
height: 850px;
margin-top: 3px;
border-radius: 5px;
position: relative;
}
.footer {
background-color: #CCCCCC;
width: calc(100%-16px);
height: 50px;
margin-top: 5px;
border-radius: 5px;
}
#leftbody {
background-color: #F1F1F1;
width: 49%;
height: 425px;
left: 0;
margin-top: 3px;
margin-left: 3px;
position: absolute;
z-index: 1;
border-radius: 5px;
opacity: .25;
}
#rightbody {
background-color: #F1F1F1;
width: 49%;
height: 425px;
right: 0;
margin-top: 3px;
margin-right: 3px;
position: absolute;
z-index: 1;
border-radius: 5px;
opacity: .25;
}
#lowerbody {
width: 99%;
height: 49%;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
margin-top: 432px;
margin-bottom: 2px;
border-radius: 5px;
background-color: #F5F5F5;
position: absolute;
}
body {
background-image: url("http://www.freewebheaders.com/wordpress/wp- content/gallery/love-emotions/i-love-you-nice-quotes-website-header.jpg");
background-repeat: repeat;
background-attachment: fixed;
}
li {
display:inline;
top: -35px;
}
#navbar {
color: #F8F8F2;
font-family: Arial Black;
margin: auto;
}
Here is a Live Demo that centers your navbar both horizontally and vertically. text-align: center is used to align it horizontally, and line-height: 100px is used to center it vertically.
If you would like it centered on only one axis or the other, remove one of those two declarations.
.Header {
width: calc(100%-16px);
height: 100px;
border-radius: 5px;
background-color: red;
}
.MidBody {
background-color: #141414;
width: calc(100%-16px);
height: 850px;
margin-top: 3px;
border-radius: 5px;
position: relative;
}
.footer {
background-color: #CCCCCC;
width: calc(100%-16px);
height: 50px;
margin-top: 5px;
border-radius: 5px;
}
#leftbody {
background-color: #F1F1F1;
width: 49%;
height: 425px;
left: 0;
margin-top: 3px;
margin-left: 3px;
position: absolute;
z-index: 1;
border-radius: 5px;
opacity: .25;
}
#rightbody {
background-color: #F1F1F1;
width: 49%;
height: 425px;
right: 0;
margin-top: 3px;
margin-right: 3px;
position: absolute;
z-index: 1;
border-radius: 5px;
opacity: .25;
}
#lowerbody {
width: 99%;
height: 49%;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
margin-top: 432px;
margin-bottom: 2px;
border-radius: 5px;
background-color: #F5F5F5;
position: absolute;
}
body {
background-image: url("http://www.freewebheaders.com/wordpress/wp-content/gallery/love-emotions/i-love-you-nice-quotes-website-header.jpg");
background-repeat: repeat;
background-attachment: fixed;
}
ul {
margin:0;
padding:0;
}
li {
display: inline;
top: -35px;
}
#navbar {
color: #F8F8F2;
font-family: Arial Black;
margin: auto;
text-align: center;
line-height: 100px;
}
<div class="Header">
<div id="navbar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div class="MidBody">
<div id="leftbody"></div>
<div id="rightbody"></div>
<div id="lowerbody"></div>
</div>
<div class="footer"></div>
Related
How do I remove the extra white space at the bottom of the page?
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0;
}
.navbar{
position: initial;
align-items: center;
background-color: black;
display: inline-block;
width: 100%;
height: 8vh;
z-index: 1;
}
.logo img{
height: 100px;
width: 100px;
margin-left: 30px;
float: left;
position: relative;
top: -28px;
}
.navbar-content{
margin-top: 0;
position: relative;
left: -430px;
overflow: hidden;
}
.navbar-content a{
float: right;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
list-style-type: none;
}
nav ul li a:hover{
color: #e11717;
}
.hover-line::after{
content: '';
width: 0;
height: 2px;
display: block;
background-color: #ff0000;
transition: width .5s;
}
.hover-line:hover:after{
width: 100%;
transition: width .5s;
}
ul{
display: flex;
justify-content: flex-end;
flex-direction: row;
}
ul li{
float: right;
align-items: center;
right: 60%;
}
.vid{
position: relative;
width: 100%;
height: 670px;
}
.vid video{
position: absolute;
width: 100%;
height: 100%;
margin-top: -12px;
object-fit: cover;
}
.vid{
display: block;
position: relative;
}
.hp{
font-size: 45px;
position: absolute;
color: white;
align-items: center;
}
.txt-2{
font-size: 25px;
z-index: 9;
position: relative;
bottom: -260px;
left: 40%;
}
.txt-1{
font-size: 35px;
position: relative;
bottom: -250px;
left: 25%;
}
.button{
width: 300px;
height: 40px;
background-color: #333;
border-radius: 30px;
position: absolute;
top: 420px;
left: 39%;
cursor: pointer;
transition: ease-out 0.5s;
}
.btn{
display: inline-block;
text-decoration: none;
cursor: pointer;
color: #f2f2f2;
font-size: 20px;
margin-top: 7px;
margin-left: 38px;
outline: none;
box-shadow: inset 0 0 0 0 #e11717;
}
.button:hover
{
box-shadow: inset 400px 0 0 0 #e11717;
}
/* featured-brands */
.small-container{
max-width: 100%;
margin: 0;
align-items: center;
float: right;
}
.col-4{
display: block;
background-color: rgba(230, 230, 250, 0);
width: 150px;
height: 200px;
}
.col-4 img{
width: 200px;
height: 120px;
}
.title{
text-align: center;
margin: 0 auto 80px;
position: relative;
line-height: 60px;
color: #555;
top: 600px;
}
.title::after{
content: '';
background: #ff523b;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
h1{
font-weight: normal;
color: #555;
}
.col-4{
font-size: 14px;
float: right;
position: relative;
top: 580px;
padding: 50px;
width: 570px;
height: 300px;
display: table-cell;
}
.row{
padding-left: 25px;
padding-right: 25px;
}
.row img{
size: 1000px*1000px;
}
/* .row:hover{
transform: translateY(-20px);
} */
text-1{
float: left;
display: table-cell;
}
.tag-1{
border: 5px solid #e11717;
border-radius: 40px;
right: 25px;
margin-bottom: 15px;
display: table-cell;
position: relative;
}
.tag-1 img{
float: left;
margin-right: 35px;
width: 100px;
height: 80px;
}
.tag-2{
border: 5px solid #e11717;
border-radius: 40px;
right: 100px;
margin-bottom: 15px;
display: table-cell;
position: relative;
}
.tag-2 img{
float: left;
margin-right: 30px;
margin-left: -10px;
width: 100px;
height: 100px;
}
.tag-3{
border: 5px solid #e11717;
border-radius: 40px;
right: 25px;
bottom: 15px;
display: table-cell;
position: relative;
margin-top: 15px;
}
.tag-3 img{
float: left;
margin-right: 35px;
height: 100px;
width: 120px;
}
.tag-4{
border: 5px solid #e11717;
border-radius: 40px;
right: 100px;
display: table-cell;
margin-top: 15px;
position: relative;
}
.tag-4 img{
float: left;
margin-right: 35px;
height: 100px;
width: 150px;
}
/* offer */
.offer{
background: radial-gradient(#ffffff,#7d7d7d);
padding: 30px 0;
position: relative;
top: 700px;
height: 50vh;
display: table-cell;
}
.col-2 .offer-img{
padding: 50px;
width: 600px;
float: left;
height: 300px;
margin-left: -50px;
animation: hand 3s infinite;
transform: translateY(50px);
}
#keyframes hand {
50% {
transform: translateY(-20px);
}
}
small{
color: #555;
top: 60px;
position: relative;
}
.button-6{
width: 300px;
height: 40px;
cursor: pointer;
background-color: #333;
border-radius: 30px;
position: absolute;
top: 280px;
left: 44%;
transition: ease-out 0.5s;
}
.button-6:hover{
box-shadow: inset 300px 0 0 0 #e11717;
}
.btn-6{
display: inline-block;
text-decoration: none;
cursor: pointer;
color: #f2f2f2;
font-size: 20px;
margin-top: 7px;
margin-left: 83px;
outline: none;
box-shadow: inset 0 0 0 0 #e11717;
}
.col-2 h1{
position: relative;
top: 60px;
}
.col-2 p{
position: relative;
top: 50px;
}
/* //brands// */
/* .col-6 img{
display: flex;
justify-content: flex-end;
flex-direction: column;
filter: grayscale(100%);
cursor: pointer;
}
.col-6 img:hover{
filter: grayscale(0);
}
.col-6{
float: left;
padding: 50px;
position: relative;
left: -150px;
align-items: center;
right: 60%;
position: relative;
top: 750px;
} */
/* footer */
.footer{
background: #000;
color: #8a8a8a;
font-size: 14px;
height: 350px;
padding: 60px 0 20px;
position: relative;
bottom: -1000px;
padding-left: 25px;
padding-right: 25px;
margin-top: -150px;
}
.ftr{
position: relative;
top: -500px;
}
.footer p{
color: #8a8a8a;
}
.footer h3{
color: #fff;
margin-bottom: 20px;
}
.footer-col-1,.footer-col-2,.footer-col-3,.footer-col-4{
min-width: 250px;
margin-bottom: 20px;
}
.footer-col-1{
flex-basis: 30%;
position: relative;
top: 500px;
}
.footer-col-2{
flex: 1;
margin-left: 450px;
position: relative;
top: 160px;
}
.footer-col-2 img{
width: 180px;
position: relative;
top: 50px;
margin-left: 100px;
}
.footer-col-3,.footer-col-4{
flex-basis: 12%;
margin-left: 1000px;
text-align: center;
}
.footer-col-3 ul{
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.footer-col-3 ul li{
float: right;
align-items: center;
right: 60%;
}
.footer-col-4 ul{
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.footer-col-4 ul li{
float: right;
align-items: center;
right: 60%;
}
ul{
list-style-type: none;
}
.app-logo{
margin-top: 20px;
}
.app-logo img{
width: 140px;
}
.footer hr{
border: none;
background: #b5b5b5;
height: 1px;
margin: 25px 0;
position: relative;
bottom: 500px;
}
.copyright{
text-align: center;
position: relative;
bottom: 500px;
}
/* // Gallery // */
.row-2{
justify-content: space-between;
margin: 100px auto 50px;
cursor: pointer;
}
.row-2:after {
content: "";
display: table;
clear: both
}
.col-5{
position: relative;
top: 100px;
right: -10px;
max-width: 2500px;
float: left;
width: 25%;
}
.col-5 img:hover{
transform: scale(1.1,1.1);
}
.col-5 img{
object-fit: cover;
}
.row-3 h2{
position: relative;
top: 100px;
}
select{
border: 1px solid #ff523b;
padding: 5px;
position: relative;
top: 100px;
}
select:focus{
outline: none;
}
.page-btn{
margin: 0 auto 80px;
margin-left: 70px;
}
.page-btn span{
display: inline-block;
border: 1px solid #ff523b;
margin-left: 10px;
height: 40px;
width: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
margin-top: 70px;
margin-right: 30px;
}
.page-btn span:hover{
background-color: #ff523b;
color: #fff;
}
/* // detail page// */
.single-product{
margin-top: 80px;
}
.single-product .col-2 img{
padding: 0;
margin-right: 280px;
float: left;
}
.single-product .col-2{
padding: 20px;
display: table-cell;
position: relative;
}
.single-product h4{
margin: 20px 0;
font-size: 22px;
font-weight: bold;
position: relative;
top: 90px;
}
.dtl h3{
position: relative;
top: 70px;
}
.dtl{
position: relative;
bottom: 380px;
left: 20px;
display: block;
padding: 10px;
margin: 20px;
}
.button-2{
position: relative;
top: 250px;
left: -0px;
}
.single-product input{
width: 50px;
height: 40px;
padding-left: 10px;
font-size: 20px;
margin-right: 20px;
border: 1px solid #ff523b;
}
input:focus{
outline: none;
}
.single-product .fa{
color: #ff523b;
margin-left: 10px;
}
.single-product .row{
text-align: left;
}
.single-product .col-2{
padding: 20px 0;
}
.single-product h1{
font-size: 26px;
line-height: 32px;
}
.row-2 h2{
position: relative;
right: 420px;
top: 200px;
}
.row-2 p{
position: relative;
right: 420px;
top: 200px;
}
/* // Warrenty table// */
.numbered-list ol {
list-style-type: none;
margin-top: 50px;
}
.numbered-list ol li {
position: relative;
left: 1px;
list-style: none;
margin: 20px 0;
padding-left: 25px;
padding-top: 10px;
text-transform: uppercase;
font-family: 'Darker Grotesque', sans-serif;
letter-spacing: 1px;
font-weight: 600;
counter-increment: listelement;
}
.numbered-list ol li:before{
content: counter(listelement);
border-radius: 50%;
background-color: #e11717;
color: #fff;
font-size: 25px;
height: 45px;
width: 45px;
position: absolute;
left: -40px;
line-height: 45px;
text-align: center;
font-family: 'Poppins', sans-serif;
bottom: -12px;
}
.numbered-list ol li:last-child {
margin-bottom: 50px;
}
.numbered-list{
position: relative;
bottom: 300px;
right: 700px;
}
.list-2{
position: relative;
left: 600px;
bottom: 370px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap" rel="stylesheet">
<title>Auto-World</title>
<link rel="shortcut icon" href="images/auto-world-logo.png">
<link rel="stylesheet" href="cars.css">
</head>
<body>
<!-- ----nav-bar------ -->
<div class="container">
<div class="navbar">
<nav>
<div class="logo">
<img src="./images/auto-world-logo.png">
</div>
<div class="navbar-content">
<ul>
<li>HOME</li>
<li>GALLERY</li>
<li>ABOUT-US</li>
<li>CONTACT-US</li>
</ul>
</div>
</div>
</nav>
<div class="vid-txt">
<div class="hp vid">
<video autoplay muted loop>
<source src="./images/ad.mp4">
</video>
</div>
<div class="txt-1 hp">
<b>Designed for living. Engineered to last.</b>
</div>
<div class="hp txt-2">
<b>A CLASS OF ITS OWN</b>
</div>
<div class="button">
EXPLORE OUR GALLERY
</div>
</div>
<!-- -----Fetured Brands----- -->
<div class="small-container">
<h2 class="title">Featured Brands</h2>
<div class="row">
<div class="col-4 tag-1">
<img src="pngwing.com (2).png">
<h1><b>HONDA</b></h1>
<p>Honda has been the world's largest motorcycle manufacturer since 1959,reaching a production of 400 million by the end of 2019,as well as the world's largest manufacturer of internal combustion engines measured by volume, producing more than 14 million internal combustion engines each year. Read More...</p>
</div>
<div class="col-4 tag-2">
<img src="pngwing.com (3).png">
<h1><b>SUZUKI</b></h1>
<p>Suzuki Motor Corporation is a Japanese multinational corporation headquartered in Minami-ku, Hamamatsu, Japan. Suzuki manufactures automobiles, motorcycles, all-terrain vehicles, outboard marine engines, wheelchairs and a variety of other small internal combustion enginesRead More...</p>
</div>
<br>
<div class="col-4 tag-3">
<img src="pngwing.com (1).png">
<h1><b>TOYOTA</b></h1>
<p>Toyota Motor Corporation is a Japanese inational automotive manufacturer headquartered in Toyota City, Aichi, Japan. It was founded by Kiichiro Toyoda and incorporated on August 28. Toyota is one of the largest automobile manufacturers in the world.Read More...</p>
</div>
<div class="col-4 tag-4">
<img src="pngwing.com (8).png">
<h1><b>KIA</b></h1>
<p>Kia Corporation, commonly known as Kia, is a South Korean multinational automobile manufacturer headquartered in Seoul, South Korea. It is South Korea's second largest automobile manufacturer after Hyundai Motor Company, with sales of over 2.8 million vehicles in 2019.Read More...</p>
</div>
</div>
<!-- offer -->
<div class="offer">
<div class=" civic small-container">
<div class="row">
<div class="col-2">
<img src="images/civic-rs-2.png" class="offer-img">
</div>
<div class="col-2">
<p> Cars Exclusively Availabe On Auto World</p>
<h1>CARS ON AUTO WORLD</h1>
<small>AutoWorld is a company that deals with all types of cars and motors. They started off with a company in collaboration with "GOOD YEAR" and then build up their own establishment. They have different showrooms for different brands at various locations in the city and because of their services they have attracted a vast number of Customers in very short duration of time.
</small>
<div class="button-6">
Book Now →
</div>
</div>
</div>
</div>
</div>
<!-- // brands // -->
<!-- <div class="brands">
<div class="small-container">
<div class="row">
<div class="col-6">
<img style="height: 130px; width: 100px;" src="pngwing.com (3).png">
</div>
<div class="col-6">
<img style="height: 130px; width: 160px;" src="pngwing.com (2).png">
</div>
<div class="col-6">
<img style="height: 160px; width: 180px;" src="pngwing.com (1).png">
</div>
<div class="col-6">
<img style="height: 160px; width: 230px; margin-top: -20px; margin-left: -80px;" src="pngwing.com (8).png">
</div>
</div>
</div>
</div> -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="ftr row">
<div class="footer-col-1">
<h3>Dowlond Our App</h3>
<p>Dowlond App FOr Andriod And Ios Phone</p>
<div class="app-logo">
<img src="images/google play.png">
<img src="images/app store.png" alt="">
</div>
</div>
<div class="footer-col-2">
<img src="images/auto-world-logo.png">
<p>Our Purpose Is To Provide You The Best Offers And Deals</p>
</div>
<div class="footer-col-3">
<h3>Services</h3>
<ul>
<li>Online Bookings</li>
<li>Spare Parts</li>
</ul>
</div>
<div class="footer-col-4">
<h3>Help & Support</h3>
<ul>
<li>Contact US</li>
<li>Location On Maps</li>
<li>Carrers</li>
</ul>
</div>
</div>
<hr>
<div class="copyright"><p>Copyright 2022 - Sahil Valecha , Waleed Imran , Umer Javed</p></div>
</div>
</div>
</body>
</html>
Maybe you can try putting this on your css. You can put !important on it too if it doesnt work. Let me know
.footer {
bottom:0 ;
right:0 ;
left:0
}
I want to position the text on top of the image, but with 40px margin. I also want to position the two buttons on each side of the li (one on the right side and one on the left side). I've tried with the code below, and various other solution, but with no luck. The closest I've come is what the picture below shows, but the buttons are not in position. I want to have the same layout for every li, so I want this to apply to every li on the page.
CSS:
.container {
width: 100%;
}
.posts {
position: absolute;
top: 200px;
bottom: 0;
right: 30px;
margin: 0;
}
.post {
background-color: #606060;
border-radius: 30px;
width: 600px;
min-height: 300px;
float: right;
margin-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
bottom: auto;
top: auto;
}
.img {
background-color: #606060;
background-repeat: no-repeat;
background-size: contain;
width: 90%;
height: 300px;
position: relative;
margin-bottom: 100px;
border-radius: 50px;
}
.content {
font-size: 15px;
text-align: left;
min-height: 120px;
position: relative;
left: 10px;
color: white;
font-weight: 700;
margin-top: 40px;
}
.comment {
background-color: #006FC4;
border: 1px solid #00508D;
font-size: 15px;
color: #FFFFFF;
padding: 5px;
border-radius: 7px;
height: 30px;
position: absolute;
bottom: 0;
float: left;
}
.like {
background-color: #006FC4;
border: 1px solid #00508D;
font-size: 15px;
color: #FFFFFF;
padding: 5px;
border-radius: 7px;
height: 30px;
position: absolute;
float: right;
}
HTML:
<div class="container">
<ul class="posts">
<li class="post">
<div class="content">Test</div>
<button class="comment" onclick="comment('posts/XiqNjxsov3hUXX1zJLk3ta7mQul2/userPosts/PkIm2NOhjOlTZk7J7Dyk')">Comment</button>
<button class="like" onclick="like('posts/XiqNjxsov3hUXX1zJLk3ta7mQul2/userPosts/PkIm2NOhjOlTZk7J7Dyk')">Like</button><img class="img" src="https://firebasestorage.googleapis.com/v0/b/mysharify-4ea69.appspot.com/o/posts%2F6.png?alt=media&token=f1881e5e-e9f4-4e90-bf0f-f211a74ccd42" onclick="openImage('https://firebasestorage.googleapis.com/v0/b/mysharify-4ea69.appspot.com/o/posts%2F6.png?alt=media&token=f1881e5e-e9f4-4e90-bf0f-f211a74ccd42')"></li><br><br>
<li class="post">
<div class="content">dasdasd</div>
<button class="comment" onclick="comment('posts/hg23gh1beGO7cpUvRSkKpqcY9O22/userPosts/TpiuWCRoZQliuhmlj1su')">Comment</button>
<button class="like" onclick="like('posts/hg23gh1beGO7cpUvRSkKpqcY9O22/userPosts/TpiuWCRoZQliuhmlj1su')">Like</button></li><br><br>
</ul>
</div>
I'm not entirely sure what you're going for based on your post (would be helpful to have a link to something similar to what you're trying to get), but here's my best guess.
HTML (I removed the second LI, since they'll all look the same anyways and that one didn't have an image)
<div class="container">
<ul class="posts">
<li class="post">
<div class="content">Test</div>
<button
class="comment"
onclick="comment('posts/XiqNjxsov3hUXX1zJLk3ta7mQul2/userPosts/PkIm2NOhjOlTZk7J7Dyk')"
>
Comment
</button>
<button
class="like"
onclick="like('posts/XiqNjxsov3hUXX1zJLk3ta7mQul2/userPosts/PkIm2NOhjOlTZk7J7Dyk')"
>
Like
</button>
<img
alt="foo"
class="img"
src="https://firebasestorage.googleapis.com/v0/b/mysharify-4ea69.appspot.com/o/posts%2F6.png?alt=media&token=f1881e5e-e9f4-4e90-bf0f-f211a74ccd42"
onclick="openImage('https://firebasestorage.googleapis.com/v0/b/mysharify-4ea69.appspot.com/o/posts%2F6.png?alt=media&token=f1881e5e-e9f4-4e90-bf0f-f211a74ccd42')"
/>
</li>
</ul>
</div>
CSS
.container {
width: 100%;
}
.posts {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
list-style: none;
}
.post {
background-color: #606060;
border-radius: 30px;
width: 100%;
float: right;
position: relative;
margin: 1rem 0;
}
.img {
position: relative;
background-color: #606060;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
border-radius: 50px;
}
.content {
font-size: 15px;
position: absolute;
z-index: 10;
color: white;
font-weight: 700;
margin: 40px;
}
.comment {
background-color: #006fc4;
border: 1px solid #00508d;
font-size: 15px;
color: #ffffff;
padding: 5px;
border-radius: 7px;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
}
.like {
background-color: #006fc4;
border: 1px solid #00508d;
font-size: 15px;
color: #ffffff;
padding: 5px;
border-radius: 7px;
position: absolute;
bottom: 0;
right: 0;
z-index: 10;
}
I am new to this. On my website, when the window is resized or is viewed on a different computer screen, the navigation bar (which is made up of rectangles and triangles) and text moves around and parts disappear. Do the sizes need to be in percentages? If so I am unsure of which parts I need to change.
To view it, please follow this link to my website on Codecademy and click on the full screen button.
body {
background-image: url('http://www.rgbstock.com/cache1u7YbL/users/x/xy/xymonau/300/nXWyMYC.jpg')
}
#background {
background-color: white;
height: 100%;
width: 75%;
position: relative;
top: 100px;
margin-left: auto;
margin-right: auto;
}
#header {
word-wrap: break-word;
border: 1px solid black;
height: 30%;
width: 60%;
position: relative;
bottom: 90px;
margin-left: auto;
margin-right: auto;
}
.photocontainer {
border: transparent;
height: 55%;
width: 65%;
position: relative;
bottom: 60px;
margin-left: auto;
margin-right: auto;
}
.photocontainer img {
width:100%;
height:100%;
}
.navcontainer {
border: 1px solid black;
height: 10%;
width: 99%;
position: relative;
bottom: 70px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.navcontainer .navbar .navigation li {
list-style: none;
display: block;
float: left;
margin: 1em;
text-align: center;
position: relative;
left: 15%;
}
.navcontainer .navbar .navigation li a {
font-family: quicksand;
text-decoration: none;
text-transform: uppercase;
display: block;
width: 110%;
color: #000000;
font-size: 20px;
vertical-align: middle;
line-height: 31px;
}
.navigation li a:hover {
margin-top: 2px;
}
.navbar {
margin: 0 auto;
width: 90%;
position: relative;
bottom: 42px;
}
.navcontainer .navbar .rectangle {
background: #f1e5cd;
height: 62px;
position: relative;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 500; /* the stack order: foreground */
margin: 3em 0;
}
.navcontainer .navbar .l-triangle-top {
border-color: #e7dbc3 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: 1px;
left: -50px;
}
.navcontainer .navbar .l-triangle-bottom {
border-color: transparent transparent #e7dbc3;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: -40px;
left: -150px;
}
.navcontainer .navbar .r-triangle-top {
border-color: #e7dbc3 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
right: -45px;
top: -107px;
}
.navcontainer .navbar .r-triangle-bottom {
border-color: transparent transparent #e7dbc3;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
top: -149px;
right: -145px;
}
<div id="background">
<div id="header"></div>
<div class="navcontainer">
<div class="navbar">
<!-- the left side of the fork effect -->
<div class="l-triangle-top"></div>
<div class="l-triangle-bottom"></div>
<!-- the ribbon body -->
<div class="rectangle">
<!-- the navigation links -->
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Order</li>
<li>Contact</li>
</ul>
<!-- end the ribbon body -->
</div>
<!-- the right side of the fork effect -->
<div class="r-triangle-top"></div>
<div class="r-triangle-bottom"></div>
<!-- end container -->
</div>
</div>
<div class="photocontainer"></div>
Read this article "http://www.w3schools.com/css/css_navbar.asp"
Your code is a bit confused.
Hope this helps.
Here you have a basic example:
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
}
li {
float: left;
}
a {
background-color: #dddddd;
display: block;
width: 60px;
}
You can find the solution in my fiddle, including absolutely positioned triangles. For simplification purposes I removed your header.
http://jsfiddle.net/L74gdm7j/2/
body {
background-image: url('http://www.rgbstock.com/cache1u7YbL/users/x/xy/xymonau/300/nXWyMYC.jpg')
}
#background {
background-color: white;
height: 100%;
width: 75%;
position: relative;
top: 100px;
margin-left: auto;
margin-right: auto;
}
.photocontainer {
border: transparent;
height: 55%;
width: 65%;
position: relative;
bottom: 60px;
margin-left: auto;
margin-right: auto;
}
.photocontainer img {
width:100%;
height:100%;
}
.navcontainer {
height: 10%;
width: 99%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.navcontainer .navbar .navigation {
text-align: center;
margin: 0;
padding: 0;
}
.navcontainer .navbar .navigation li {
list-style: none;
display: inline-block;
margin: 1em;
text-align: center;
}
.navcontainer .navbar .navigation li a {
font-family: quicksand;
text-decoration: none;
text-transform: uppercase;
color: #000;
font-size: 20px;
line-height: 31px;
transition-duration: 0.2s;
display: inline-block;
position: relative;
}
.navigation li a:hover {
transform: translateY(10px);
}
.navbar {
margin: 0 auto;
width: 90%;
position: relative;
bottom: 42px;
}
.navcontainer .navbar .rectangle {
background: #f1e5cd;
height: 62px;
position: relative;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 500;
/* the stack order: foreground */
margin: 3em 0;
}
.navcontainer .navbar .l-triangle-top {
border-color: #e7dbc3 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: absolute;
top: 0;
left: -38px;
}
.navcontainer .navbar .l-triangle-bottom {
border-color: transparent transparent #e7dbc3;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: absolute;
top: -38px;
left: -38px;
}
.navcontainer .navbar .r-triangle-top {
border-color: #e7dbc3 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: absolute;
right: -38px;
top: 0;
}
.navcontainer .navbar .r-triangle-bottom {
border-color: transparent transparent #e7dbc3;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: absolute;
top: -38px;
right: -38px;
}
<body>
<div id="background">
<div class="navcontainer">
<div class="navbar">
<!-- the left side of the fork effect -->
<div class="l-triangle-top"></div>
<div class="l-triangle-bottom"></div>
<!-- the ribbon body -->
<div class="rectangle">
<!-- the navigation links -->
<ul class="navigation">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Order
</li>
<li>Contact
</li>
</ul>
<!-- end the ribbon body -->
</div>
<!-- the right side of the fork effect -->
<div class="r-triangle-top"></div>
<div class="r-triangle-bottom"></div>
<!-- end container -->
</div>
</div>
<div class="photocontainer"></div>
</div>
</body>
I can't figure out why my elements (logo, menu, info box) are outside the light grey container. Could you help me? Many thanks
See: http://jsfiddle.net/vqoudo6d/3/
HTML:
<header class="header">
<div class="header-wrapper">
<img class="header-logo" src="http://lorempixel.com/output/fashion-q-g-284-119-5.jpg">
<nav class="header_nav">
<ul class="header_nav-wrapper">
<li class="header_nav-item"> <a id="aboutOpen" class="header_nav-item-a" href="jkk">l'Atelier</a>
</li>
<li class="header_nav-item"> <a class="header_nav-item-a header_nav-item-a--btn" href="jkjks" target="_blank">La Carte des soins</a>
</li>
<li class="header_nav-item"> <a class="header_nav-item-a header_nav-item-a--btn" href="jkjks" target="_blank">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="infos-pratiques clearfix">
<p class="info-pratiques-tag">Informations pratiques</p>
<div class="info-pratiques-content">
<p>3 rue dfdsf
<br>sdsqdssdd</p>
<p>Lundi:
<br>Mardi:
<br>Mercredi:
<br>Jeudi</p>
</div>
</div>
</header>
<div class="slider">
<ul class="slider__wrapper">
<li class="slider__item">
<div class="box" style="background-image:url(images/test.jpg);background-size: cover;
background-repeat: no-repeat; background-position: 50% 50%;"></div>
</li>
<li class="slider__item">
<div class="box" style="background-image:url(images/test2.jpg);background-size: cover;
background-repeat: no-repeat; background-position: 50% 50%;"></div>
</li>
</ul>
</div>
CSS:
.slider {
position: relative;
margin-left: auto;
margin-right: auto;
width: 90%;
height: 550px;
background: #eee;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
max-width: 1200px;
}
.slider__wrapper {
height: 100%;
list-style: none;
overflow: hidden;
*zoom: 1;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
.slider__item {
height: 100%;
float: left;
clear: none;
}
.slider__arrows-item {
position: absolute;
display: block;
margin-bottom: -20px;
padding: 20px;
}
.slider__arrows-item--right {
bottom: 50%;
right: 30px;
}
.slider__arrows-item--left {
bottom: 50%;
left: 30px;
}
.slider__nav {
position: absolute;
bottom: 30px;
}
.slider__nav-item {
width: 12px;
height: 12px;
float: left;
clear: none;
display: block;
margin: 0 5px;
background: #fff;
}
.slider__nav-item--current {
background: #ccc;
}
.slider__nav-item:hover {
background: #ccc;
}
.box {
width: 100%;
height: 100%;
}
.header {
z-index: 999;
width: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
}
.header-wrapper {
padding: 54px 60px;
}
.header-logo {
float: left;
clear: none;
}
.header_nav {
float: right;
clear: none;
font-family:'Maven Pro', sans-serif;
font-weight: normal;
}
.header_nav-wrapper {
list-style: none;
}
.header_nav-item {
margin-left: 22px;
float: left;
clear: none;
}
.header_nav-item-a {
color: #474032;
text-decoration: none;
}
.header_nav-item-a:hover {
color: #eee;
}
.header_nav-item-a--btn {
padding: 16px 18px;
border-radius: 5px;
border: 1px solid #474032;
background-color: transparent;
}
.header_nav-item-a--donate {
margin-top: -18px;
}
.header_nav-item-a--btn:hover {
border: 1px solid #eee;
}
.info-pratiques-content {
float: left;
clear: both;
margin-top: 14px;
margin-left: 4.52489%;
font-size: 13px;
line-height: 1.38;
color: #433d2b;
}
.info-pratiques-content p {
margin-bottom: 1em;
}
.info-pratiques-tag {
margin-top: 14px;
margin-right: auto;
margin-left: auto;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
background-color: #9d926a;
font-size: 13px;
font-weight: 400;
line-height: 1.38;
text-align: center;
text-transform: uppercase;
color: rgb(65, 61, 45);
}
.infos-pratiques {
position: absolute;
top: 217px;
right: 5.1984375%;
z-index: 26;
width: 221px;
height: 200px;
background-color: rgb(222, 222, 222);
opacity: 0.91;
}
The max-width and the background are on .slider, but your header is not inside of it. just add the background and max-width to body and everything should be fine.
Also keep in mind that absolutely positioned elements are always relative to the closest non-static element (position: fixed, relative, absolute).
edit: I also agree with Paulie_D's comment, try to reduce absolute positioning
I would like to have the div story at the bottom of the picture(mainMedia) but i also want the about div to be on top of the photo.
When i try do it the story div goes to the top because the mainMedia dive is position:absolute but i have to keep it that to keep the about dive on top of it... any ideas?
Could you please help?
Thanks a lot!
HTML
<html>
<head>
<title> Beta</title>
<!-- css links -->
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="gigantic">
<div class="main">
<div class="twitterProfilePicture">
<img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png">
</div>
<div class="push">
<div class="mainMedia">
<img src="http://blog.sunsafaris.com/wp-content/uploads/2013/02/dune-king-lion.jpg">
<div class="about">
<p><span>Mashable</span></br>3 Hours ago</p>
</div>
</div>
</div>
<div class="Story">
<div class="heading">
</div>
<div class="text">
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body
{
margin: 0;
background-color: rgb(233,234,237);
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}
p
{
margin: 0;
}
.gigantic
{
width: 800px;
height: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
margin-top: 40px;
/*background-color: #fff;*/
}
.main
{
width: 700px;
height: 400px;
/*background-color: #000;*/
margin-right: auto;
margin-left: auto;
padding: 30px;
}
.twitterProfilePicture
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.twitterProfilePicture img
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.mainMedia
{
width: 630px;
height: auto;
/*background-color: #fff;*/
float: right;
border-radius: 4px;
position: relative;
margin-bottom: 10px;
}
.mainMedia img
{
width: 630px;
height: auto;
position: relative;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.about
{
position: absolute;
/*background-color: #000;*/
overflow: hidden;
height: 35px;
position: absolute;
top: 7px;
left: 7px;
font-size: 12px;
color: rgb(94,118,171);
}
.about span
{
color: #385874;
font-size: 16px;
}
.story
{
width: 630px;
height: 300px;
background-color: #fff;
position: absolute;
margin-left: 70px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: static;
bottom: 0;
}
Here's my take on what you're trying to achieve:
I put a fiddle here for you.
What you need to do is stick the story div inside the mainMedia div. You also have your css referencing ".story" when it should have been ".Story".
HTML:
<div class="gigantic">
<div class="main">
<div class="twitterProfilePicture">
<img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png">
</div>
<div class="push">
<div class="mainMedia">
<img src="http://blog.sunsafaris.com/wp-content/uploads/2013/02/dune-king-lion.jpg"/>
<div class="about">
<p><span>Mashable</span></br>3 Hours ago</p>
</div>
<div class="Story">
<div class="heading">Heading</div>
<div class="text">Text Story here</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body
{
margin: 0;
background-color: rgb(233,234,237);
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}
p
{
margin: 0;
}
.gigantic
{
width: 800px;
height: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
margin-top: 40px;
/*background-color: #fff;*/
}
.main
{
width: 700px;
height: 400px;
/*background-color: #000;*/
margin-right: auto;
margin-left: auto;
padding: 30px;
}
.twitterProfilePicture
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.twitterProfilePicture img
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.mainMedia
{
width: 630px;
height: auto;
/*background-color: #fff;*/
float: right;
border-radius: 4px;
position: relative;
margin-bottom: 10px;
}
.mainMedia img
{
width: 630px;
height: auto;
position: relative;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.about
{
position: absolute;
/*background-color: #000;*/
overflow: hidden;
height: 35px;
position: absolute;
top: 7px;
left: 7px;
font-size: 12px;
color: rgb(94,118,171);
}
.about span
{
color: #385874;
font-size: 16px;
}
.Story
{
background-color: black;
opacity:0.5;
position: absolute;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
bottom: 3px;
color:white;
width:630px; /*I made this the same as your mainMedia*/
}
I hope that helps.