I am not sure how to make a child of a parent div visible on hover. I want the text to fade in with an ease when one of the glyph-icons is hovered over to reveal the text that corresponds to it also. I want to make each menu item slide out with an ease when hovered over but i have no idea how to set up eases within css3.
#charset "utf-8";
/* CSS Document */
html{
display: block;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
display: block;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: rgba(36,36,36,1.00);
background-image:url(../img/bg.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
#BoarLogo{
width: 30%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.7;
z-index: -1;
}
#MainNav{
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 7em;
transform: translate(-50%, -50%);
margin: 20px;
}
#MainNav ul{
position: relative;
width: auto;
height: auto;
list-style: none;
padding: 0;
margin: 10px;;
}
.placeholder{
padding: 10px;
height: 80px;
width: 250px;
overflow: hidden;
position: relative
}
.placeholder a img{
display: block;
float: left;
margin-right: 10px;
}
.placeholder a span{
width: auto;
height: auto;
position: relative;
float: left;
display: inline-block;
margin-top: 20px;
color: #FFF;
font-family: 'Fredericka the Great', serif;
font-size: 30px;
text-align: left;
}
.placeholder:hover{
}
.linkItem:hover{
padding-left: 20px;
}
.linkItem{
height: auto;
width: auto;
display: block;
position: relative;
float: left;
}
.linkItem img{
}
.linkItem span {
}
#BoarLogo img{
height: auto;
width: 100%;
}
#media screen and (max-width: 600px){
/* handles css for smart phones.*/
#BoarLogo {
width: 80%;
height: auto;
}
#MainNav{
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wild Boar Homepage</title>
<meta name="description" content="Wild Boar Cafe Restaurant is a coffeehouse in Fort Collins Colorado. ">
<meta name="keywords" content="Coffee, Fort Collins, Colorado, Restaurant, Latte, Mocha, Food, ">
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/main.js"></script>
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
</head>
<body>
<nav id="MainNav">
<ul>
<li class="placeholder"><a class="linkItem" href="#"><img style="height: 80px; width: 80px;" alt="Home icon" src="img/home.png"><span>Home</span></a></li>
<li class="placeholder"><a class="linkItem" href="#"><img alt="About icon" style="height: 80px; width: 80px;" src="img/info.png"><span>About</span></a></li>
<li class="placeholder"><a class="linkItem" href="#"><img alt="Menu icon" style="height: 80px; width: 80px;" src="img/menu.png"><span>Menu</span></a></li>
<li class="placeholder"><a class="linkItem" href="#"><img alt="Catering icon" style="height: 80px; width: 80px;" src="img/Catering_icon (1).png"><span>Catering</span></a></li>
<li class="placeholder"><a class="linkItem" href="#"><img alt="Contact icon" style="height: 80px; width: 80px;" src="img/contact.png"><span>Contact</span></a></li>
</ul>
</nav>
<div id="BoarLogo"><img alt="Wild Boar Cage Logo" src="img/BoarLogo.png" /></div><!-- End main background logo-->
</body>
</html>
To get the fade in/fade out effect you can set the opacity of the text to 0 and change it to 1 when the parent is hovered.
You'll also need to define the transition:
transition: all 1s ease;
all - means that every property change will have the transition effect
1s - the transition will take 1 second
ease - the transition timing function
If you want a different effect on hover out, you'll have to use JavaScript.
I made some changes in your HTML, use classes to style your elements, don't use inline style (style="height: 80px; width: 80px;"), it makes your code more readable and easier to maintain.
#charset "utf-8";
/* CSS Document */
html {
display: block;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
display: block;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: rgba(36, 36, 36, 1.00);
background-image: url(../img/bg.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
#BoarLogo {
width: 30%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.7;
z-index: -1;
}
#MainNav {
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 7em;
transform: translate(-50%, -50%);
margin: 20px;
}
#MainNav ul {
position: relative;
width: auto;
height: auto;
list-style: none;
padding: 0;
margin: 10px;
;
}
.placeholder {
padding: 10px;
height: 80px;
width: 250px;
overflow: hidden;
position: relative
}
.placeholder a img {
display: block;
float: left;
margin-right: 10px;
}
.placeholder a span {
width: auto;
height: auto;
position: relative;
float: left;
display: inline-block;
margin-top: 20px;
color: #FFF;
font-family: 'Fredericka the Great', serif;
font-size: 30px;
text-align: left;
}
.placeholder:hover {}
.linkItem:hover {
padding-left: 20px;
}
.linkItem {
height: auto;
width: auto;
display: block;
position: relative;
float: left;
}
.linkItem img {
height: 80px;
width: 80px;
}
.linkItem span {
opacity: 0;
transition: all 1s ease;
}
#BoarLogo img {
height: auto;
width: 100%;
}
.linkItem:hover span{
opacity: 1;
}
#media screen and (max-width: 600px) {
/* handles css for smart phones.*/
#BoarLogo {
width: 80%;
height: auto;
}
#MainNav {}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wild Boar Homepage</title>
<meta name="description" content="Wild Boar Cafe Restaurant is a coffeehouse in Fort Collins Colorado. ">
<meta name="keywords" content="Coffee, Fort Collins, Colorado, Restaurant, Latte, Mocha, Food, ">
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/main.js"></script>
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
</head>
<body>
<nav id="MainNav">
<ul>
<li class="placeholder">
<a class="linkItem" href="#">
<img alt="Home icon" src="img/home.png">
<span>Home</span>
</a>
</li>
<li class="placeholder">
<a class="linkItem" href="#">
<img alt="About icon" src="img/info.png">
<span>About</span>
</a>
</li>
<li class="placeholder">
<a class="linkItem" href="#">
<img alt="Menu icon" src="img/menu.png">
<span>Menu</span>
</a>
</li>
<li class="placeholder">
<a class="linkItem" href="#">
<img alt="Catering icon" src="img/Catering_icon (1).png">
<span>Catering</span>
</a>
</li>
<li class="placeholder">
<a class="linkItem" href="#">
<img alt="Contact icon" src="img/contact.png">
<span>Contact</span>
</a>
</li>
</ul>
</nav>
<div id="BoarLogo"><img alt="Wild Boar Cage Logo" src="img/BoarLogo.png" /></div>
<!-- End main background logo-->
</body>
</html>
the css selector should be:
.linkItem img:hover > span{
/* your animation */
}
Related
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 11 months ago.
I am newbie with html css and here is my problem.
I want to hide a block, then when I use an animation, it will show this block.
I refer a website and it tell me that I should use a CSS Pseudo Classes.
I tried it and at my 1st animation, I successfully to display the image.
Here is the code of the 1st animation
html code :
<div class="header__qr">
<img src="./assets/img/QRcode.png" alt="QR code" class="header__qr-img">
<div class="header__qr-apps">
<a href="" class="header__qr-link">
<img src="./assets/img/Googleplay.png" alt="Google play" class="header__qr-download-img">
</a>
<a href="" class="header__qr-link">
<img src="./assets/img/apple store.png" alt="App store" class="header__qr-download-img">
</a>
</div>
</div>
css code :
.header__qr {
width: 190px;
position: absolute;
left: 0;
top: 110%;
padding: 8px;
display: none;
animation: fadeIn ease-in 1s;
}
.header__qr::before {
position: absolute;
left: 0;
top: -16px;
width: 100%;
height: 20px;
content: "";
display: block;
}
and here is my 2nd animation code
<div class="header__notify">
<div class="header__img">
<img src="./assets/img/xemthongbao.png" alt="xemthongbao" class="header__notify-img">
</div>
<div class="header__notify-info">
<span class="header__notify-name">Đăng nhập để xem Thông báo</span>
</div>
<div class="register-info">
<div class="child register-register">Đăng ký</div>
<div class="child register-login">Đăng nhập</div>
</div>
</div>
css code is here
.header__notify {
background-color: white;
width: 400px;
position: absolute;
left: 0;
top: 110%;
padding: 20px;
display: none;
animation: fadeIn ease-in 1s;
}
.header__notify::before {
position: absolute;
left: 0;
top: -16px;
width: 100%;
height: 20px;
content: "";
display: block;
}
As you can see, the second code is very same as the first code, and when I delete the display:none, it display the image ? So I think that the CSS Pseudo Classes must be actived ? But it does not active as I wish.
Here is all of my code
https://github.com/anhquanjp/bai110headernotification
Could you please give me some ideas for this problem ? Thank you very much for your time.
Because that animation fadeIn set opacity 0 to 1 and header__notify has display none properity.
Add .header__navbar-item:hover .header__notify { display: block; } to your main Thong bao dropdown will work.
.header {
height: 120px;
background-image: linear-gradient(0, #fe6433, #f7482e);
}
.header__navbar {
display: flex;
justify-content: space-between;
}
.header__navbar-list {
list-style: none;
padding-left: 0;
margin-top: 14px;
}
.header__navbar-item {
margin: 0 8px;
position: relative;
min-height: 26px;
}
.header__navbar-item,
.header__navbar-item-link {
display: inline-block;
font-size: 1.3rem;
color: var(--white-color);
text-decoration: none;
font-weight: 3;
}
.header__navbar-item,
.header__navbar-item-link,
.header__navbar-icon-link {
display: inline-flex;
align-items: center;
}
.header__navbar-item:hover,
.header__navbar-icon-link:hover,
.header__navbar-item-link:hover {
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
}
.header__navbar-item--bold {
font-weight: 500;
}
.header__navbar-item--separate::after {
content: "";
display: block;
position: absolute;
border-left: 1px solid #ffffff;
height: 16px;
right: -9px;
top: 50%;
transform: translateY(-50%);
}
.header__navbar-icon-link {
color: var(--white-color);
text-decoration: none;
}
.header__navbar-icon {
font-size: 1.8rem;
margin: 0 4px;
}
.header__navbar-title--no-pointer {
cursor: text;
color: var(--white-color);
}
.header__qr {
width: 190px;
position: absolute;
left: 0;
top: 110%;
padding: 8px;
display: none;
animation: fadeIn ease-in 1s;
}
.header__qr::before {
position: absolute;
left: 0;
top: -16px;
width: 100%;
height: 20px;
content: "";
display: block;
}
.header__navbar-item--has-qr:hover .header__qr {
display: block;
}
.header__qr-img {
}
.header__qr-apps {
display: flex;
justify-content: space-between;
}
.header__qr-download-img {
height: 18px;
}
.header__notify {
background-color: white;
width: 400px;
position: absolute;
left: 0;
top: 110%;
padding: 20px;
display: none;
animation: fadeIn ease-in 1s;
}
.header__notify::before {
position: absolute;
left: 0;
top: -16px;
width: 100%;
height: 20px;
content: "";
display: block;
}
.header__navbar-item:hover .header__notify {
display: block;
}
.header__img {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
}
.header__notify-img {
width: 100px;
height: 100px;
display: block;
margin-left: auto;
margin-right: auto;
}
.header__notify-name {
color: black;
margin-top: 100px;
}
.register-info {
display: flex;
align-items: center;
justify-content: center;
}
.header__notify-info {
font-size: 14px;
font-weight: bold;
text-align: center;
}
.register-login,
.register-register {
font-size: 14px;
font-weight: bold;
background-color: rgb(248, 245, 245);
color: black;
float: left;
flex: 1;
text-align: center;
height: 30px;
width: 300px;
}
.register-login:hover,
.register-register:hover {
color: red;
background-color: rgb(238, 227, 227);
height: 30px;
}
:root {
--white-color: #fff;
--black-color: #000;
--text-color: #333;
}
* {
box-sizing: inherit;
}
html {
font-size: 100%;
line-height: 1.6rem;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
}
.grid {
width: 1200px;
max-width: 100%;
margin: 0 auto;
}
.grid__full-width {
width: 100%;
}
.grid__row {
display: flex;
flex-wrap: wrap;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeInNotify {
from {
display: none;
}
to {
display: unset;
}
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="./assets/css/base.css">
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="assets/fonts/fontawesome-free-6.1.0-web/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;1,100&display=swap" rel="stylesheet">
</head>
<body>
<!-- Block element modifier -->
<div class="app">
<header class="header">
<div class="grid">
<nav class="header__navbar">
<ul class="header__navbar-list">
<li class="header__navbar-item header__navbar-item--separate">Kênh Người Bán</li>
<li class="header__navbar-item header__navbar-item--separate">Trở thành Người bán Shopee</li>
<li class="header__navbar-item header__navbar-item--has-qr header__navbar-item--separate">Tải ứng dụng
<div class="header__qr">
<img src="./assets/img/QRcode.png" alt="QR code" class="header__qr-img">
<div class="header__qr-apps">
<a href="" class="header__qr-link">
<img src="./assets/img/Googleplay.png" alt="Google play" class="header__qr-download-img">
</a>
<a href="" class="header__qr-link">
<img src="./assets/img/apple store.png" alt="App store" class="header__qr-download-img">
</a>
</div>
</div>
</li>
<li class="header__navbar-item">
<span class="header__navbar-title--no-pointer">Kết nối</span>
<a href="" class="header__navbar-icon-link">
<i class="header__navbar-icon fa-brands fa-facebook-square"></i>
</a>
<a href="" class="header__navbar-icon-link">
<i class="header__navbar-icon fa-brands fa-instagram"></i>
</a>
</li>
</ul>
<ul class="header__navbar-list">
<li class="header__navbar-item">
<a href="" class="header__navbar-item-link">
<i class="header__navbar-icon fa-solid fa-bell"></i> Thong bao
<div class="header__notify">
<div class="header__img">
<img src="./assets/img/xemthongbao.png" alt="xemthongbao" class="header__notify-img">
</div>
<div class="header__notify-info">
<span class="header__notify-name">Đăng nhập để xem Thông báo</span>
</div>
<div class="register-info">
<div class="child register-register">Đăng ký</div>
<div class="child register-login">Đăng nhập</div>
</div>
</div>
</a>
</li>
<li class="header__navbar-item">
<a href="" class="header__navbar-item-link">
<i class="header__navbar-icon fa-solid fa-circle-question"></i> Ho tro</a>
</li>
<li class="header__navbar-item header__navbar-item--bold header__navbar-item--separate">Tro giup</li>
<li class="header__navbar-item header__navbar-item--bold">Dang nhap</li>
</ul>
</nav>
</div>
</header>
<div class="container">
</div>
<footer class="footer">
</footer>
</div>
</body>
</html>
I'm using bootstrap 3.3.7. I've adapted the navbar template provided from the bootstrap documentation and a carousel from W3. My footer's width extends all the way to the side edges but my carousel and nav do not (in fact my carousel does not even extend to the same width as my nav). How do I fix this?
Image of problem:
#charset "UTF-8";
* {
margin: 0;
}
html body {
height: 100%;
}
.nopadding {
padding: 0;
}
.navbar {
background-color: #ff8300;
border-radius: 0 0 10px 10px;
border: 0;
height: 100px;
width: 100%;
max-width: 980px;
margin: 0 auto;
}
.navspace {
right: 50px;
margin-top: 25px;
position: relative;
font-size: 18px;
color: #fff;
}
.navbar-brand {
padding: 0;
position: relative;
left: 40px;
top: 10px;
}
.thumbnails {
position: relative;
margin-top: 150px;
}
#myCarousel {
width: 980px;
max-width: 100%;
height: 654px;
bottom: 25px;
border-radius: 0 0 10px 10px;
}
.carousel-control {
height: 600px;
opacity: 0;
border-radius: 0 0 10px 10px;
}
.banner {
background: url(../images/banner1.jpg) no-repeat top center;
background-size: cover;
width: 980px;
height: 654px;
background-size: 100% auto;
}
.banner2 {
background: url(../images/banner2.jpg) no-repeat top center;
background-size: cover;
width: 980px;
height: 654px;
background-size: 100% auto;
}
.banner3 {
background: url(../images/banner3.jpg) no-repeat top center;
background-size: cover;
width: 980px;
height: 654px;
background-size: 100% auto;
}
.banner p {
position: relative;
font-size: 25px;
color: #fff;
top: 440px;
left: 20px;
}
.banner h1 {
position: relative;
font-size: 50px;
color: #fff;
left: 20px;
top: 420px;
}
.bodyimg {
max-width: 100%;
}
.bodytext1 {
color: #ff8300;
}
.bodytext2 {
color: #ff8300;
width: 160px;
margin-top: 37px;
}
.bodytext3 {
color: #ff8300;
margin-top: 60px
}
.bodytext4 {
color: #ff8300;
margin-top: 60px
}
.socialpadding {
padding: 0px 10px 0px 10px;
position: relative;
}
.centersocial {
margin: 0 auto;
text-align: center;
position: absolute;
}
.contactinfo {
color: #ff8300;
margin: 200px 0px 0px auto;
}
/* Add a background color and some padding around the form */
.formarea {
background-color: #ff8300;
border-radius: 10px;
width: 400px;
height: 484px;
margin: 50px auto 0px auto;
padding: 15px;
}
.formlabel {
color: #fff;
}
#inputMessage {
height: 200px;
}
.btn {
background-color: #fcb972;
border-color: #ff9300;
margin-top: 20px;
}
.btn:hover {
background-color: #fff;
border-color: #ff9300;
color: #ff8300;
}
.btn:onclick {
background-color: #fff;
border-color: #ff9300;
color: #ff8300;
}
.messageform {
height: 50px;
}
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.formarea2 {
background-color: #fff;
border-radius: 10px;
width: 400px;
height: 50px;
margin: 50px auto 0px auto;
padding: 15px;
display: inline;
text-align: center;
}
#inputPostal {
display: inline-block;
width: 30%;
margin-left:3%;
}
.formpostal {
color: #ff8300;
font-size: 30px;
display: inline-block;
}
.menubg {
background-color: #ff8300;
height: 100%;
width: 100%;
max-width: 980px;
border-radius: 10px;
margin: 125px;
}
.col-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
.cartbtn {
margin-top: 20px;
position: relative;
left: 96%;
}
h2 {
font-size: 24px;
color: #fff;
text-align: center;
margin-top: 30px;
}
.menubox {
background-color: #fff;
border-radius: 10px;
width: 321px;
height: 320px;
margin-top: 30px;
position: relative;
}
.menubox a {
text-decoration: none;
}
.item1 {
background: url(../images/menu1.jpg) no-repeat center;
border-radius: 10px 10px 0px 0px;
}
.menubox img {
border-radius: 10px 10px 0px 0px;
opacity: 0;
transition: .5s ease;
backface-visibility: hidden;
}
.menubox:hover .item1 {
opacity: 0.7;
transition: .5s ease;
}
.menubox:hover img {
opacity: 1;
transition: .5s ease;
}
h3 {
font-size: 16;
color: #ff8300;
}
.foot {
background-image: none;
background-color: #ff8300;
border-radius: 10px 10px 0 0;
height: 50px;
margin: 150px auto 0 auto;
position: absolute;
width: 100%;
max-width: 980px;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
footer {
position: relative;
color: #fff;
text-align: right;
margin-top: 30px;
font-size: 10px;
width: 100%;
max-width: 980px;
}
#media only screen and (max-width: 992px) {
.navbar {
background-image: none;
background-color: #ff8300;
width: 100%;
border-radius: 0px;
margin: 0;
}
.navspace {
padding: 0px 20px 0px 0px;
left: 120px;
top: 30px;
}
.navbar-collapse {
background: rgba(255, 255, 255, 0.75);
height: 300px;
}
.foot {
background-image: none;
background-color: #ff8300;
border-radius: 0;
overflow: hidden;
}
footer {
position: relative;
color: #fff;
display: block;
text-align: right;
font-size: 10px;
}
.contactinfo {
margin: 40px auto 0px auto;
text-align: center;
}
}
#media only screen and (max-width: 767px) {
#myCarousel.carousel {
max-width: 100%;
width: 100%;
max-height: 100%;
overflow: hidden;
border-radius: 0 0 10px 10px;
}
.carousel-control {
height: 600px;
opacity: 0;
}
.findus {
margin: 0 auto;
}
.centersocial {
position: relative;
}
.bodytext4 {
text-align: center;
width: 250px;
margin: 100px auto 5px auto;
}
.bodytext3 {
text-align: center;
width: 250px;
margin: 60px auto 5px auto;
}
}
#media only screen and (max-width: 576px) {
.formarea {
background-color: #ff8300;
border-radius: 10px;
width: 350px;
height: 484px;
margin: 50px auto 0px auto;
padding: 15px;
}
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
/* additional */
.row, #myCarousel, .container {
max-width: 100%;
margin: 0 auto;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Peperoni Pizzeria</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-static-top rounded-bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navspace" href="index.html">Home</a></li>
<li><a class="navspace" href="menu.html">Menu</a></li>
<li><a class="navspace" href="location.html">Locations</a></li>
<li><a class="navspace" href="contactus.html">Contact Us</a></li>
<!-- Put here your menu items -->
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class="row">
<div class="col-sm-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active banner">
<p>10% off all pizzas
<br>this weekend only</p>
<h1>LIMITED TIME<br>ONLY</h1>
</div>
<div class="item banner2">
</div>
<div class="item banner3">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="row thumbnails">
<div class="col-sm-offset-1 col-sm-3">
<img class="img-responsive center-block img-rounded" src="images/bodyimg.jpg" alt="">
</div>
<div class="col-md-offset-1 col-md-3 hidden-sm hidden-xs">
<p class="bodytext1">
Year 2004.<br><br> The warmth and comfort of wood-fired pizzas and traditional pastas over chilled drinks with friends and families became an everyday affair that started with the first Peperoni, located in Greenwood Singapore. Charming, vivacious
and full of life, Peperoni Greenwood brings together food lovers from all walks of life. Including many well known and young artists whose work adorn its walls with their expressions of love and creativity. Peperoni Greenwood inspired its owners,
the highly acclaimed Les Amis group, to spread the love and energy of Peperoni with the opening of new outlets across the sunny island of Singapore.
</p>
</div>
<div class="col-md-offset-1 col-md-3 hidden-xs">
<p class="bodytext2">
Peperoni has since evolved into a much-loved destination with its ‘Appetite for Life’ philosophy. This philosophy makes Peperoni more than just a restaurant, as it is a place with a mission - to bring people together, to bind relationships, and to savour
life in all its delightful flavours.<br><br> Share moments of fun, energy and inspiration over hot pizzas and cool conversations!
</p>
</div>
</div>
<div class="row">
<div class="col-sm-offset-1 col-sm-3">
<p class="bodytext3">
Check us out on our social media accounts or subscribe to our newsletter for the latest updates!
</p>
<div class="centersocial">
<a href="#"><img class="socialpadding" src="images/email.png" alt="">
</a>
<a href="https://www.instagram.com/peperonipizzeria/"><img class="socialpadding" src="images/insta.png" alt="">
</a>
<a href="https://www.facebook.com/peperonipizzeria/"><img class="socialpadding" src="images/fb.png" alt="">
</a>
</div>
</div>
<div class="col-sm-offset-1 col-sm-3">
<p class="bodytext4">
Feel free to come explore our outlets
</p>
<a href="locations.html"><img class="findus img-responsive" src="images/findus.png" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-12 foot img-responsive">
<footer class"navbar-fixed-bottom">
Copyright © 2017 Peperoni Pizzeria. All Rights Reserved.
</footer>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I face some problem in my html and css.
My requirement like this image:-
My code below:-
#font-face {
font-family: "OpenSans-CondLight";
src: url('fonts/OpenSans-CondLight.woff') format('woff');
}
#font-face {
font-family: "Rubik-BoldItalic";
src: url('fonts/Rubik-BoldItalic.woff') format('woff');
}
#font-face {
font-family: "RobotoSlab-Regular";
src: url('fonts/RobotoSlab-Regular.woff') format('woff');
}
/*header area */
header{
height: 350px;
background: #050000;
overflow: hidden;
display: block;
}
.container{
background: #050000;
}
.top-area{
float: left;
width: 20%;
font-family: "Rubik-BoldItalic";
font-size: 60px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
}
.logo-area {
width: 60%;
overflow: hidden;
display: block;
position: relative;
z-index: 9999;
}
.logo-area img {
width: 500px;
height: auto;
z-index: 9999;
margin-left: 35px;
}
.search-box {
width: 25%;
float: right;
margin: -300px 73px 0 0;
}
.all-events {
overflow: hidden;
background: #FF9D34;
height: 100px;
width: 80%;
margin: auto;
display: block;
position: absolute;
top: 178px;
border-radius: 10px;
z-index: 0;
}
.all-events .left-side span{
float: left;
color: #000000;
text-transform: uppercase;
font-size: 25px;
padding-left: 20px;
padding-top: 40px;
}
.all-events .left-side .glyphicon {
font-size: 45px;
color: #000;
}
.all-events .right-side span{
float: right;
color: #000000;
text-transform: uppercase;
font-size: 25px;
}
.main-content {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
background: #FF931D;
margin: auto;
}
.main-content .left-content .top-content{
float: left;
overflow: hidden;
display: block;
width: 55%;
height: 340px;
margin-top: 22px;
}
.main-content .left-content .top-content img {
width: 600px;
height: 300px;
}
.main-content .left-content .bottom-content{
float: left;
overflow: hidden;
display: block;
width: 75%;
height: 340px;
margin-top: 10px;
}
.main-content .left-content .bottom-content img {
width: 600px;
height: 300px;
}
.main-content .right-content {
float: right;
overflow: hidden;
display: block;
width: 40%;
margin: -688px 52px 0 0;
}
.main-content .right-content img {
width: 522px;
height: 648px;
}
footer{
overflow: hidden;
display: block;
height: 410px;
width: 90%;
margin: auto;
background-color: #FF931D;
}
footer .left-footer {
float: left;
width: 350px;
overflow: hidden;
display: block;
}
footer .middle-footer {
width: 350px;
overflow: hidden;
display: block;
}
.about {
height: 400px;
width: 400px;
border-radius: 50%;
background: #fff;
float: right;
position: relative;
top: -79px;
}
.about p {
position: absolute;
font-family: "OpenSans-CondLight";
font-size: 25px;
text-align: center;
top: 62px;
}
.about img {
width: 80px;
height: auto;
position: relative;
top: 240px;
left: 98px;
margin-left: 31px;
}
.button {
font-size: 15px;
color: blue;
cursor: pointer;
}
.button:active{
color: #000;
}
.caption {
background: #fff;
width: 599px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge">
<title>Spotlight</title>
<!-- style -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!-- js -->
<link rel="stylesheet" type="text/css" href="js/modernizr.js" media="all" />
</head>
<body>
<header>
<div class="container">
<div class="top-area">
<h2>24 hour event</h2>
</div>
<div class="logo-area">
<img src="images/logo.gif" alt="Logo">
</div>
<div class="search-box">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
<div class="all-events">
<div class="left-side">
<span>donate here</span>
<div class="donate_img">
<img src="images/07.tif" alt="">
</div>
</div>
<div class="right-side">
<span>all events faq</span>
</div>
</div>
</div>
</header>
<section class="main-content">
<div class="container">
<div class="left-content">
<div class="top-content">
<img src="images/damien-rice-tour-italia.jpg" alt="">
<div class="caption">
<span>Damien Rice, Kildare Culture Centre at 8pm. Ref: DMK</span>
<div class="button">
Book now
</div>
</div>
</div>
<div class="bottom-content">
<img src="images/glenhansard_100x445.jpg" alt="">
<div class="caption">
<span>Glen Hansard, Olympia Theatre Dublin at 7pm. Ref: GHO </span>
<div class="button">Book now
</div>
</div>
</div>
</div>
<div class="right-content">
<img src="images/tommytiernan.jpg" alt="">
<div class="caption">
<span>Tommy Tiernan, Cork Comedy Club at 7pm. Ref: GHO</span>
<div class="button">Book now
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="left-footer">
<span>Click on the blue <div class="button">Book now</div> now link on any
event enter your email and you will recive your
ticket via email.
Alternativly or if you have any questions not
listed on the faq tab you can book your tocket
dierectly with us qouting the event refrence
number.
</span>
</div>
<div class="middle-footer">
<span>phone:0741237451
email:24hourevent#spotlight.ie
get involved
Would you like to volunteer even one
hour of your time. Make a diffrence
contact us at:
volunteer#spotlight.ie
</span>
</div>
<div class="about">
<p>ABOUT <br>
Focas Ireland works with
people who are homeless or
who are at risk of losing there
homes across ireland.
<br> Focas Ireland website click </p>
<img src="images/d2c4efe596a6d313c1005ff33ff627ff.jpeg" alt="focus">
<img src="images/here_fixed_wm.jpg" alt="download">
</div>
<div class="social-icons">
<img src="images/youtube heart shaped free social media icon .png" alt="you tube">
<img src="images/Facebook heart shaped free social media icon.png" alt="facebook">
<img src="images/twitter heart shaped free social media icon.png" alt="twitter">
</div>
</div>
</footer>
</body>
</html>
My main problem is in my footer I can't change the color. Image bottom side. Can anyone help me?
You can try adding this line of CSS:
footer:after {
content: "";
display: table;
clear: both;
}
Below my Navigation Bar I have a picture that is covered by a gradient, which fades into the div below it. After this div I have a footer.
I am having a problem trying to embed a YouTube video over my picture div and my gradient div that will extend slightly over my main div.
Essentially, the div that holds my YouTube video needs to go on top of these divs and be positioned in the center of the screen (from left to right), and be responsive.
However, I can't seem to be successful in doing this and all of the tutorials on responsive YouTube videos isn't working.
Can anyone help me please? Thanks!
HTML Code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
<link href="images/favicon.ico" rel="icon" />
<title>Aduro Pictures</title>
</head>
<body>
<header>
<div id="logo_home">
<img id="logo" src="images/logo.jpg" alt="logo">
</div>
<nav>
<ul>
<li><a class="nav_link" id="about" href="about.html" title="About">About</a></li>
<li><a class="nav_link" id="short_films" href="short_films.html" title="Short Films">Short Films</a></li>
<li><a class="nav_link" id="cast_crew" href="cast_crew.html" title="Cast/Crew">Cast/Crew</a></li>
<li><a class="nav_link" id="gallery" href="gallery.html" title="Gallery">Gallery</a></li>
<li><a class="nav_link" id="links" href="links.html" title="Links">Links</a></li>
<li><a class="nav_link" id="contact_us" href="contact_us.html" title="Contact Us">Contact Us</a></li>
</ul>
</nav>
</header>
<div id="main_wrapper">
<div id="image_container"></div>
<div id="gradient"></div>
<div id="main_container"></div>
<div id="video_container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/EuIXJIp8f6U" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<footer>
<p class="copyright">Copyright © 2016.</p>
</footer>
</body>
</html>
CSS Code:
body {
margin: 0px;
font-size: 62.5%;
padding: 0px;
}
header {
width: 100%;
height: 90px;
background-color: #000000;
}
#logo_home {
position: relative;
float: left;
left: 5%;
width: 20%;
top: 7.5px;
}
#logo {
height: 75px;
width: 300px;
}
nav {
position: relative;
float: right;
right: 5%;
width: 35%;
height: 50px;
top: 20px;
}
ul {
margin-top: 0px;
margin-bottom: 0px;
position: relative;
top: 17.5px;
}
li {
display: inline-block;
margin-left: 2.5%;
margin-right: 2.5%;
position: relative;
list-style-type: none;
padding-top: 0px;
}
.nav_link {
font-family: 'PT-Sans', sans-serif;
color: #FFFFFF;
font-size: 1.2em;
text-transform: uppercase;
text-decoration: none;
}
.nav_link:link {
color: #ffffff;
}
.nav_link:visited {
color: #ffffff;
}
.nav_link:hover {
color: #dddddd;
}
#main_wrapper {
height: 2000px;
width: 100%;
}
#image_container {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 580px;
background: url('../images/background5.jpg') no-repeat;
}
#gradient {
position: absolute;
top: 90px;
left: 0px;
width: 100%;
height: 580px;
background: transparent linear-gradient(to bottom, rgba(29, 29, 29, 0.65) 0px, #1D1D1D 100%) repeat scroll 0% 0%;
}
#main_container {
background-color: #1d1d1d;
height: 1420px;
}
footer {
background-color: #000000;
height: 50px;
width: 100%;
margin: 0px;
top: 0px;
position: relative;
}
.copyright {
color: white;
font-family: 'PT-Sans', sans-serif;
font-size: 1.2em;
position: relative;
text-align: center;
top: 15px;
margin: 0px;
padding: 0px;
}
Also, I've probably made some mistakes, or have positioned things incorrectly, in which case I apolgize ahead of time. I am new to HTML & CSS.
Thanks!
Simply add a position: absolute to your div#video_container: https://jsfiddle.net/1aa87g9b/
I am making my own website for the branch that I'm in, I have stumbled upon a problem that I can't resolve.
I have made this code with HTML/CSS and what I want is that my advertisement div can be placed inside of my container div.
CSS:
#body {
font-family: verdana;
background-color: #4C4C4C;
}
#container {
background-color: #FFFFFF;
height: 900px;
width: 1250px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: relative;
}
#header {
background-image: url("company_banner.jpg");
background-repeat: no-repeat;
background-position: right top;
vertical-align: middle;
width: 1250px;
height: 225px;
position: relative;
}
#streep {
background-color: #FC001E;
margin-top: 0px;
width: 1250px;
height: 1px;
position: relative;
}
#nav {
margin-top: 0px;
margin-left: 0px;
width: 180px;
height: 220px;
position: absolute;
}
#advertisement{
background-image: url("advertisement.jpg");
background-position: top;
width: 200px;
height: 180px;
margin-top: opx;
position: relative
}
#content {
margin-top: 0px;
margin-left: 225px;
width: 1025px;
height: 625px;
position: relative;
}
#footer {
background-color: #FC001E;
margin-bottom: 0px;
width: 1250px;
height: 50px;
position: relative;
}
h1 {
position: absolute;
top: 65px;
left: 25px;
}
ul#menu {
padding: 10px;
list-style-type: none;
margin-top: 0px;
border-radius: 4px 4px 4px 4px;
}
ul#menu li {
padding: 10px;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
border-radius: : 4px 4px 4px 4px;
text-decoration: none;
}
ul#menu li a:hover {
background-color: #FC001E;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Nijhuis PC</title>
</head>
<body id=body>
<div id=container>
<div id=header>
<h1>
company name
</h1>
</div>
<div id=streep></div>
<div id=nav>
<ul id=menu>
<li><a href=index.html>Home</a>
</li>
<br>
<li><a href=services.html>services</a>
</li>
<br>
<li><a href=whoweare.html>who we are</a>
</li>
<br>
<li><a href=contact.html>Contact</a>
</li>
<br>
</ul>
</div>
<div id=content>
welcom to the company's main website
<br>
<br>
</div>
<div id=advertisement></div>
<div id=footer></div>
</div>
</body>
</html>
I want my advertisement div under the navigation div.
Can you guys help me?
One alternative is to put it in the #nav after the UL.