I created a nav which contains a list and currently when I hover on the last 3 list items, an image appears just below the list item(or tab). However, when each image appears it overlaps the bootstrap carousel just beneath the navbar. How do I make the bootstrap carousel move down so that it sits just below the image when the image appears on hover of each tab? Any answers would be helpful.
see below code
#nav{
height: 5vw;
width: 80%;
margin-left: auto;
margin-right: auto;
background: gray;
margin-top: 0;
}
#nav-ul li{
display: block;
list-style-type: none;
background: white;
border-radius: 10px;
border: 2px solid blue;
width: 16%;
position: relative;
}
#nav-ul li:not(:first-child){
margin-left: 2%;
}
#nav-ul li a {
color: black;
text-decoration: none;
font-size: 1.1vw;
}
#nav-ul{
height: 100%;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
}
#nav-ul img{
display: block;
z-index: 1;
}
#li-1 img{
margin-top: 2vw;
position: absolute;
height: 9vw;
left: 0;
width: 100%;
display: none;
cursor: pointer;
}
#li-1:hover #li-img-1{
display: block;
margin-top: 0;
}
#li-2 img{
margin-top: 2vw;
position: absolute;
height: 9vw;
left: 0;
width: 100%;
display: none;
cursor: pointer;
}
#li-2:hover #li-img-2{
display: block;
margin-top: 0;
}
#li-3 img{
margin-top: 2vw;
position: absolute;
height: 9vw;
left: 0;
width: 100%;
display: none;
cursor: pointer;
}
#li-3:hover #li-img-3{
display: block;
margin-top: 0;
}
#myCarousel{
width: 100%;
margin: auto;
background: blue;
color: white;
text-align: center;
height: 3vw;
}
.carousel-inner div{
display: flex;
align-items: center;
height: 3vw;
}
.carousel-inner div p{
line-height: 3vw;
font-size: 1.1vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" width="device-width" initial-scale="1.0">
<title>Money CV</title>
<link href="moneycv.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="nav">
<ul id="nav-ul">
<li>Home</li>
<li>-</li>
<li id="li-1">Employee's Portal
<img src="https://www.image.ie/images/no-image.png" id="li-img-1"/>
</li>
<li id="li-2">Services
<img src="https://www.image.ie/images/no-image.png" id="li-img-2"/>
</li>
<li id="li-3">Organising
<img src="https://www.image.ie/images/no-image.png" id="li-img-3"/>
</li>
</ul>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<p>Testimonial 1</p>
</div>
<div class="item">
<p>Testimonial 2</p>
</div>
<div class="item">
<p>Testimonial 3</p>
</div>
</div>
</div>
</body>
</html>
`
Related
hello I have been working on the web and the image slider displays on top of the nav bar on a small screen the following is my code
HTML code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
section{
position: relative ;
width: 100%;
min-height:100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: rgb(36, 2, 28);
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
header img {
width: 79px;
height: 79px;
border-radius: 50%;
padding: 5px;
}
header{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 90px;
padding: 20px 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: peachpuff;
}
header .logo{
position: relative;
max-width: 80px;
}
.harmbuger{
display:none;
}
header ul{
position: relative;
display: flex;
}
header ul li{
list-style: none;
}
header ul li a{
display: block;
color: #000000;
font-weight: 400;
margin-left: 40px;
text-decoration: none;
border-radius: 50px;
margin: 0 5px;
transition: 0.2s;
padding: 10px 25px;
}
header ul li a:hover{
color: red;
background: white;
}
header ul li a.active{
color: red;
background: white;
}
#media only screen and (max-width: 1320px){
header{
padding: 0 50px;
}
}
#media only screen and (max-width: 1100px){
header{
padding: 0 30px;
}
}
#media only screen and (max-width: 900px){
.harmbuger{
display: block;
cursor: pointer;
}
.harmbuger .line{
width: 30px;
height: 3px;
background: #000000;
margin: 6px 0;
}
.nav-bar.active{
height: 450px;
}
.nav-bar{
height: 0px;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: peachpuff;
transition: 0.5s;
overflow: hidden;
}
.nav-bar ul{
display: block;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul{
opacity: 1;
}
.nav-bar ul li a{
margin-bottom: 12px;
}
}
.container{
width: 100%;
height: 60vh;
background: #222;
display: flex;
align-items: center;
justify-content: center;
}
.swiper{
width: 97%;
height: fit-content;
}
.swiper-slide img{
width: 100%;
height: 55vh;
}
<!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="stylesheet" href="style2.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css"
/>
<title>Document</title>
</head>
<body>
<section>
<header>
<img src="https://picsum.photos/80/80" />
<div class="harmbuger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<nav class="nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
</nav>
</header>
<div class="container">
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="https://picsum.photos/400/400" /></div>
<div class="swiper-slide"><img src="https://picsum.photos/400/400" /></div>
<div class="swiper-slide"><img src="https://picsum.photos/400/400" /></div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</section>
<script>
harmbuger = document.querySelector(".harmbuger");
harmbuger.onclick = function () {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
};
</script>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper(".swiper", {
autoplay:{
delay: 4000,
disaleOnInteraction: false,
},
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
output
i want the slider not to show up on toggle menu
I was expecting the menu bar to display on top of the slider on toggle. The output image for this can be shown as above
I was coding my website when I realized that my Type to search button is quite high on the Website. Is there a way that I can get that to come down a bit? Here is my code For this project. Also if you see anyway that I can improve this website please tell me, also could you please help give me some tips on how I can make my code neater and more readable. Over all the type to search is the biggest problem to fix but if you see some others please let me know. Thank you!
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<link href="context/styles.css" rel="stylesheet" type="text/css">
<link href="Webfonts/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul class="navbarlist">
<li class="navbarimg"><img class="navbarlogo" src="img/LOGO.png"></li>
<li class="navbarelementL">Browse</li>
<li class="navbarelementL">Today's Deals</li>
<li class="navbarelementR">Shopping Cart</li>
</ul>
<div class="searchbox">
<input class="search-txt" type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#"></a>
<i class="fas fa-search"></i>
</div>
</div>
<div class="banner">
<img class="titleimg" src="img/TITLE.jpg">
</div>
<div class="row">
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
</div>
</div>
<div class="bottomnav">
<div class="bottomlogo">
<img class="navbarlogo2" src="img/LOGO.png">
</div>
<div class='nav'>
<div class='left'>
<ul>
<li class="bottomelement">About Us</li>
<li class="bottomelement">Affiliates</li>
</ul>
</div>
<div class='right'>
<ul>
<li class="bottomelement">TOS</li>
<li class="bottomelement">Fourth </li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
/*General*/
h2{
font-family: 'Ubuntu', sans-serif;
justify-content: center;
margin: auto;
}
body{
margin:0;
padding:0;
}
/*Navbar*/
.navbar{
float: left;
width: 100%;
background-color: rgb(248, 138, 180);
}
.navbarlogo{
width: 60px;
height: auto;
}
.navbarlist{
list-style-type:none;
font-family: 'Ubuntu', sans-serif;
}
.navbarelementL{
display: inline-block;
margin-right: 10px;
transition-property: all;
transition-duration: 1s;
float: left;
}
.navbarelementL:hover{
display: inline-block;
margin-right: 10px;
font-size: 20px;
}
.navbarelementR{
display: inline-block;
margin-right: 10px;
transition-property: all;
transition-duration: 1s;
float:right;
}
.navbarelementR:hover{
display: inline-block;
margin-right: 10px;
font-size: 20px;
}
/*end*/
.navbarimg{
display: inline-block;
margin-right: 30px;
float:left;
}
.popupnavimg{
display: inline-block;
margin-right: 30px;
float:left;
}
.popupimg{
width: 40px;
height:auto;
}
.searchbox{
position: absolute;
top: 35px;
left: 50%;
transform: translate(-50%,-50%);
background: rgb(255, 255, 255);
height: 50px;
border-radius: 40px;
padding: 5px;
}
.searchbox:hover > .search-txt{
width: 240px;
padding: 0 6px;
}
.searchbox:hover > .search-btn{
background: white;
}
.search-btn{
color: black;
float: right;
width: 50px;
height: 50px;
border-radius: 50%;
background: skyblue;
display: flex;
justify-content: center;
align-items: center;
transition: 0.7s;
}
.search-txt{
border:none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.7s;
line-height: 40px;
width: 0;
}
.fas{
position: absolute;
margin-left: 18.0px;
margin-top: 18.5px;
size: 40px;;
}
.titleimg{
width:100%;
}
/*grid1*/
/* Three image containers (use 25% for four, and 50% for two, etc) */
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 10px;
}
body {
margin:0
}
body {
margin:0
}
.bottomnav {
width: 100%;
background-color: rgb(248, 138, 180);
position: relative;
}
.navbarlogo2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 120px;
text-decoration: none;
position: absolute;
filter: brightness(10);
top: 15px;
left: calc(50% - 60px) /*center top left corner then remove half logo width (120px)*/
}
/*bottombar*/
.nav {
display: grid;
grid-gap: 120px;
grid-template-columns: 1fr 1fr;
}
.nav ul {
padding-left: 0;
}
.nav ul li {
list-style: none;
text-align: center;
padding-left: 0;
}
.left,
.right {
flex: 1;
}
.bottomelement{
font-size: 20px;
}
.bottomelement:hover{
font-size: 25px;
transition-duration: 1s;
}
Try adding margin-top to
.search-txt {
//...
margin-top: 7px;
}
Check the fiddle here
To answer your other questions, normally IDE's has formatting options included. Else you can use online sites like cleancss.com for CSS or htmlformatter.com for HTML or beautifier.io for JavaScript.
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 4 years ago.
I created a nav which contains a list and currently when I hover on the last 3 list items, an image appears just below the list item(or tab). However, when each image appears it overlaps the bootstrap carousel just beneath the navbar. How do I make the bootstrap carousel move down so that it stays below the image when the image appears on hover of each tab?
#nav{
height: 5vw;
width: 80%;
margin-left: auto;
margin-right: auto;
background: gray;
margin-top: 0;
}
#nav-ul li{
display: block;
list-style-type: none;
background: white;
border-radius: 10px;
border: 2px solid blue;
width: 16%;
position: relative;
}
#nav-ul li:not(:first-child){
margin-left: 2%;
}
#nav-ul li a {
color: black;
text-decoration: none;
font-size: 1.1vw;
}
#nav-ul{
height: 100%;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
}
#nav-ul img{
display: block;
z-index: 1;
}
#li-1 img{
margin-top: 2vw;
position: absolute;
height: 9vw;
left: 0;
width: 100%;
display: none;
cursor: pointer;
}
#li-1:hover #li-img-1{
display: block;
margin-top: 0;
}
#li-2 img{
margin-top: 2vw;
position: absolute;
height: 9vw;
left: 0;
width: 100%;
display: none;
cursor: pointer;
}
#li-2:hover #li-img-2{
display: block;
margin-top: 0;
}
#li-3 img{
margin-top: 2vw;
position: absolute;
height: 9vw;
left: 0;
width: 100%;
display: none;
cursor: pointer;
}
#li-3:hover #li-img-3{
display: block;
margin-top: 0;
}
#myCarousel{
width: 100%;
margin: auto;
background: blue;
color: white;
text-align: center;
height: 3vw;
}
.carousel-inner div{
display: flex;
align-items: center;
height: 3vw;
}
.carousel-inner div p{
line-height: 3vw;
font-size: 1.1vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" width="device-width" initial-scale="1.0">
<title>Money CV</title>
<link href="moneycv.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="nav">
<ul id="nav-ul">
<li>Home</li>
<li>-</li>
<li id="li-1">Employee's Portal
<img src="https://www.image.ie/images/no-image.png" id="li-img-1"/>
</li>
<li id="li-2">Services
<img src="https://www.image.ie/images/no-image.png" id="li-img-2"/>
</li>
<li id="li-3">Organising
<img src="https://www.image.ie/images/no-image.png" id="li-img-3"/>
</li>
</ul>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<p>Testimonial 1</p>
</div>
<div class="item">
<p>Testimonial 2</p>
</div>
<div class="item">
<p>Testimonial 3</p>
</div>
</div>
</div>
</body>
</html>
I'm not totally sure but you can move other elements when you hover certain elements likeso:
.hover {
background-color: blue;
padding: 8px;
}
.move {
background-color: red;
padding: 8px;
transition: 0.5s;
}
.hover:hover ~ .move {
margin-top: 48px;
}
<div class="hover">Hover Me</div>
<div class="move">I move</div>
You could read more about css selectors here (Such as the ~ I used in the hover example). There are also many ways to move the item besides the margin-top such as top.
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;
}
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.