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.
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
here is a screenshot of my website i want to adjust the image to be on the right of the page as indicated by the arrow below(float:right; didn't work).Also, as for (float:left;) i want on the left side to add some text as shown in the image below at the left side.Lastly for the circled part on the photo it is not clickable for some reason :(((
i want the picture to stick to the right side of the page as the arrow showing below::
the css code ::
*{
padding: 0;
margin: 0;
}
.header{
height: 80px;
width: 100%;
background: url(images/header.jpeg);
position: fixed;
}
.bar{
width: 100%;
height: 43px;
background: url(images/menu-boarder.jpeg);
flex-flow: row wrap;
align-items: center;
}
.hp_div{
background-color: pink;
}
.hp_div section#hpimg{
float: left;
}
.hp_div section#hptext{
float: right;
}
.menu{
float: left;
list-style: none;
margin-top: 10px;
}
.menu li{
display: inline-block;
}
.menu li a{
color: #fff;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
font-size: 24px;
}
.menu li a:hover{
background: #fff;
color: #333;
padding: 43px;
font-weight: bold;
}
.search {
display: flex;
float: right;
padding-top: 7px;
position: relative;
right:80px;
}
.searchTerm {
width: 400%;
border: 3px solid #000000;
color: #000000;
border: 3px solid #000000;
padding-bottom: 10px;
padding-top: 20px;
padding-right: 25px;
padding-left: 15px;
height: 20px;
}
.searchTerm:focus{
color: #000000;
}
.searchButton {
width: 100px;
border: 1px solid #000000;
background: #000000;
padding-right: 8px;
padding-left: 10px;
color: #FFFFFF;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fa-shopping-cart, .glyphicon-user{
color: #000000;
}
.form-inline {
display: flex;
}
.homeage_but {
width: 100%;
height: auto;
}
.mark_colour{
background-color: pink;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
background-color: pink;
}
.Hsection{margin-top:0px!important;margin-bottom:0px!important}
.Hcontent{max-width:980px;margin-left:auto;margin-right:auto}
.centered-element{text-align:center;}
.footer{
width: 100%;
height: 100px;
background: url(images/footer.jpeg);
bottom: 0px;
left: 0px;
right: 0px;
position: fixed;
margin-bottom: 0px;
}
the html code::
<!DOCTYPE html>
<!--F04 :moudhi al.gowiez-->
<html>
<head>
<meta charset= "utf-8">
<title>Cookie|Bakery shop</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="header">
</div>
<br><br><br><br>
<div class="bar">
<ul class="menu">
<li>Home</li>
<li>Contact us</li>
<li>About us</li>
<li>Product</li>
</ul>
<div class="search">
<form class="form-inline">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton"><i class="fa fa-search"></i></button>
</form>
<div class="icons">
<a herf=""><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;"></i></a>
<a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
</div>
</div>
</div>
<div class="footer">
</div>
<div class="hp_div">
<!-- Slide Show -->
<section id="#hpimg">
<img class="mySlides" src="pink-velvet-cake-thumb_1_660x660.jpg" style="width:660; height: 660;">
<img class="mySlides" src="snicker-chocolate-cake-A_660x660.jpg" style="width:660; height: 660;">
<img class="mySlides" src="torta-unicorn.jpg" style="width:660; height: 660;">
</section>
<script>
// Automatic Slideshow - change image every 3 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000);
}
</script>
<section id="#hptext">
<h5>welocome</h5>
<p>fkld;flfk;sk</p>
</section>
</div>
</body>
</html>
Two things I notice right away:
<section id="#hpimg"> & <section id="#hptext">
You'll need to remove the '#' from these id declarations in order for your CSS to affect them.
And the reason your links aren't working:
<a herf="">...</a>
'herf' isn't the same as 'href'. Always check for typos ;)
EDIT: It seemed like one of your edits indicated you wanted the image moved to the left instead of the right. I've updated the little fiddle I made, basically just changing float:left to float:right.
Why don't you use bootstrap the col-md for the text and image
For example
<div class="container">
<div class="row">
<div class="col-md-7">
<p> Text </p>
</div>
<div class="5">
<img href="cake img">
</div>
</div>
</div>
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.
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>
`
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.