I have a problem with 2 pictures staying one aboce the other. I am trying to make the plane stay above the cloud. But, even if I have set the position and z-index, they stil stay one near the other.
How can I make the plane stay above the cloud?
Thank you!
HTML:
<html>
<body>
<div id="main">
<div id="header">
<img id="logo" src="images/logo.png" />
<ul>
<li>Home</li>
<li>Oferte Turism</li>
<li>Despre noi</li>
<li>Contact</li>
</ul>
</div>
<div id="body">
<div id="leftup">
<img id="cloud" src="images/cloud.png" />
<img id="plane" src="images/plane.png" />
</div>
<div id="form"></div>
<div id="offers"></div>
</div>
<div id="body2"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
body {margin:0;
padding:0;
}
#body {height: 900px;
background-image: url('images/headerbg.png');
}
#main {width: 960px;
margin: 0px auto;
}
#header {height: 80px;
background-image: url('images/hd.png');
background-repeat: no-repeat;
}
ul { list-style-type: none;
font-family: Verdana;
font-size: 14px;
}
li { display: inline;
padding:20px;
float:left;
margin-left: 35px;
}
li a { text-decoration:none;
color:white;
font-style:bold; <!-- NO BOLD -->
}
li a:hover { text-decoration:underline;
}
#logo {margin-left: 30px;
float:left;
}
#leftup {clear:both;
float:left;
margin-top:50px;
}
#cloud {width:250px;
position:relative;
z-index:1;
}
#plane {width:250px;
position:relative;
z-index:10;
}
#form {float:right;
border: solid 1px blue;
height:200px;
width: 100px;
margin-right:30px;
}
#offers {border: solid 1px yellow;
clear:both;
margin: 100px auto;
height: 300px;
width: 500px;}![enter image description here][2]
#body2 { height:600px;
background-image: url('images/bodybg.png');
}
#footer {height: 100px;
background-image: url('images/footerbg.png');
}
Related
I am working on a personal project where I am wanting to use an HTML form to send data to 3 different Excel sheets. The "fullName" input box will go to the "Name" Excel sheet. The "tag" input box will go to the "Tag" Excel sheet. And finally, the "email" input box will go to the "Email" Excel sheet.
I then have my "Master" sheet inputting and syncing in a single cell (for admin reference use) whatever data is placed in the other 3 Excel sheets.
My issue, is that I am unsure how to send that data to the Excel sheets when "submit" is clicked. It is also very important for that data to be stored in Excel depending on date that is selected on the form using the datepicker. I am using the dates as columns.
'<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="title">Registration</div>
<div class="content">
<div id="error"></div>
<form id="form-submit" action="">
<div class="user-details">
<div class="input-box">
<span class="details">Full Name</span>
<input id="fullName" type="text" placeholder="Enter your full name" required>
</div>
<div class="input-box">
<span class="details">District Email</span>
<input id="email" type="text" placeholder="Enter your district email" pattern="^[a-zA-Z.-_]+#medford\.k12.or.us$" required>
</div>
<div class="input-box">
<span class="details">Laptop Tag Number</span>
<input id="tag" type="text" placeholder="Enter your tag number" pattern="[0-9]{6}" required>
</div>
<div class="input-box">
<span class="details">Drop Off Date</span>
<input id="datepicker" type="text" placeholder="Enter desired drop off date" required>
</div>
</div>
<div class="button">
<button id="submit">Submit</button>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
`
` *{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-sarif;
}
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(135deg,#97cc79,#336717);
}
.container{
max-width: 700px;
width: 100%;
background: #fff;
padding: 25px 30px;
border-radius: 5px;
}
.container .title{
font-size: 25px;
font-weight: 500;
position: relative;
}
.container .title::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
background: linear-gradient(135deg, #97cc79, #336717);
}
.container form .user-details{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
form .user-details .input-box{
margin: 20px 0 12px 0;
width: calc(100% / 2 - 20px);
}
.user-details .input-box .details{
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.user-details .input-box input{
height: 45px;
width: 100%;
outline: none;
border-radius: 5px;
border: 1px solid #ccc;
padding-left: 15px;
font-size: 16px;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.user-details .input-box input:focus,
.user-details .input-box input:valid{
border-color: #97cc79;
}
form .gender-details .gender-title{
font-size: 20px;
font-weight: 500;
}
form .gender-details .category{
display: flex;
width: 80%;
margin: 14px 0;
justify-content: space-between;
}
.gender-details .category label{
display: flex;
align-items: center;
}
.gender-details .category .dot{
height: 18px;
width: 18px;
background: #d9d9d9;
border-radius: 50%;
margin-right: 10px;
border: 5px solid transparent;
}
#dot-1:checked ~ .category label .one,
#dot-2:checked ~ .category label .two,
#dot-3:checked ~ .category label .three{
border-color: #d9d9d9;
background: #97cc79;
}
form input[type="radio"]{
display: none;
}
form .button{
height: 45px;
margin: 45px 0;
}
form .button button{
height: 100%;
width: 100%;
outline: none;
color: #fff;
border: none;
font-size: 18px;
font-weight: 500;
border-radius: 5px;
letter-spacing: 1px;
background: linear-gradient(135deg, #97cc79, #336717);
}
submit-form .button button:hover{
background: linear-gradient(-135deg, #97cc79,#336717);
}
`
I'm trying to put overlay on top of showcase image and putting back texts on image on top of overlay using z-index, but z-index: 1 is not working. Position absolute is added and then z-index:1 to create overlay effect but nothing is happening. Can someone check, what's going on here?
I have set position absolute and given its top ,left position for overlay
<!DOCTYPE html>
<html>
<head>
<title>My website2</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h2 > <span class="coral">Acme</span> Web Design</h2>
<nav>
<ul class="my-list">
<li >
<a class="coral" href="#"> HOME</a>
</li>
<li>
ABOUT
</li>
<li>
SERVICES
</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h2>Lorem ipsum dolor sit amet consectetur
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
</p>
</div>
</section>
</body>
</html>
.container{
width:80%;
margin: auto;
overflow: hidden;
}
header{
background-color: #35424a;
color: #fff;
min-height: 45px;
padding-top: 20px;
border-bottom: 3px solid coral;
}
header ul{
margin:0;
padding:0;
}
header li{
display: inline;
list-style: none;
padding:0 15px 0 15px ;
}
header h2{
float: left;
}
header nav{
float:right;
}
header h2{
margin: 0;
}
.coral{
color:coral;
}
#showcase{
background-image: url("images/showcase2.jpg");
background-position: center right;
min-height: 300px;
text-align: center;
color: #fff;
}
#showcase::after {
content: "";
position: absolute;
top:68px;
left:0;
width: 100%;
min-height:300px;
background-color: rgba(78, 89, 107, 0.6);
}
#showcase {
z-index:1;
}
It got solved now. Z-index need to be added on container class which contains h2 and p tags.
#showcase{
position: relative;
background-image:url("images/showcase.jpg") ;
background-size:cover;
background-repeat: no-repeat;
background-position: center right;
min-height: 300px;
text-align: center;
color: #fff;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
#showcase::after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
min-height:300px;
background-color: rgba(78, 89, 107, 0.8);
}
.container{
z-index: 10;
}
I'm a newbie.So, I tried putting CSS cards on a page that has a sidebar. I used Html & CSS flexbox. First I made them separately and they were perfectly fine and responsive. When I tried merging the both in a single page, the cards came in front of the navbar and the page overall loses its responsiveness too, as the cards lose their form. So, how can I fix this issue?
:root{
font-size: 16px;
font-family: 'Courier New', Courier, monospace;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #152238;
--bg-secondary: #141418;
--transition-speed: 600ms;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
color: black;
margin: 0;
padding: 0;
background-color: #bbff99;
background-image: linear-gradient(319deg, #bbff99 0%, #ffec99 37%, #ff9999 100%);
background-size: cover;
}
/* Used to colorize the browser scrollbar*/
body::-webkit-scrollbar{
width: 0.45rem;
}
body::-webkit-scrollbar-track{
background: #1e1e24;
}
body::-webkit-scrollbar-thumb{
background: #6649b8;
}
main{
margin-left: 5rem;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.todima{
position: relative;
top: 5rem;
text-align: center;
}
.navbar{
width: 4.5rem;
height: 100vh;
position: fixed;
background-color: var(--bg-primary);
transition: width 200ms ease;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.logo{
font-weight: bold;
text-transform: uppercase;
margin-top: 1rem;
margin-bottom: 1rem;
text-align: center;
width: 100%;
font-size: 1.5rem;
letter-spacing: 0.3ch;
}
.navbar-item{
width: 100%;
}
.navbar-item:last-child{
margin-top: auto;
}
.nav-link{
display: flex;
align-items: center;
height: 5rem;
color: var(--text-primary);
text-decoration: none;
filter: grayscale(100%) opacity(0.7);
transition: var(--transition-speed);
}
.nav-link:hover{
filter: grayscale(0%) opacity(1);
background: #0a304a;
}
.link-text{
display: none;
margin-left: 0.5rem;
}
.nav-link i{
min-width: 2rem;
margin: 0 1rem;
}
.navbar:hover{
width: 16rem;
}
.navbar:hover .link-text{
display: block;
}
.fas{
color: #F98125;
transition:var(--transition-speed);
}
.a1{
font-family: 'Major Mono Display', monospace;
}
h1{
font-family: 'Pacifico', cursive;
margin: 7px;
margin-left: 12px;
font-size: 36px;
color:#0B1354;
}
p{
margin: 7px;
margin-left: 10px;
font-size: 28px;
font-family: 'Caveat', cursive;
color: #660F56;
}
.cardcont{
background: #FFFAFA;
width: 450px;
margin: 40px;
border-radius: 7px;
perspective: 1px;
overflow: hidden;
border: 8px solid transparent;
}
.cardcont:link {
text-decoration: none;
}
.cardcont:visited {
text-decoration: none;
}
.cardcont:hover{
border-width: 8px;
border-style: outset;
border-left-color: #e975a8;
border-top-color:#e975a8 ;
border-bottom-color: #7ddff8;
border-right-color: #7ddff8;
transition: 0.5s;
}
.container{
position: relative;
top: 5rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card-image{
height: 200px;
margin-top: 7px;
margin: 6px;
}
.image-1{
background-image: url(dashboardprofile.png);
}
.image-2{
background-image: url(picks.png);
}
.image-3{
background-image: url(http://www.simpleimageresizer.com/_uploads/photos/b5f9c7fc/pexels-suzy-hazelwood-1130980_450x130.jpg);
}
.image-4{
background-image: url(contributor.png);
}
.image-5{
background-image: url(request.png);
}
.image-6{
background-image: url(logout.png);
}
<!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>Dashboard withh Cards</title>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> -->
<script src="https://kit.fontawesome.com/7d904839de.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="mergerdraft.css">
<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=Caveat:wght#600&family=Major+Mono+Display&family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Cuet Course Insights</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-home fa-2x"></i>
<span class="link-text">Home</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-user-circle fa-2x"></i>
<span class="link-text">Profile</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-file-download fa-2x"></i>
<span class="link-text">Download books</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-exclamation-triangle fa-2x"></i>
<span class="link-text">Report an issue</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-sign-out-alt fa-2x"></i>
<span class="link-text">Log Out</span>
</a>
</li>
</ul>
</nav>
<main>
<section class="todima">
<h1 class="a1">Welcome to your dashboard</h1>
<p>Glad to have you here. Hope you make the best use of your time. </p>
</section>
<section class="container">
<a href="dashboard.html" class="cardcont"><div class="card">
<div class="card-image image-1"></div>
<h1>Profile</h1>
<p>Visit your profile and all related information in this tab</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-2"></div>
<h1>Your Picks</h1>
<p>See your specially hand-picked items, without the peril of following all the steps.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-3"></div>
<h1>Course materials</h1>
<p>Find and read the Books, Previous year Questions, Notes of all the toppers from our vast library of resources. In short, GO FOR GLORY!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-4"></div>
<h1>Be a Contributor</h1>
<p>Wanna contribute to the community? No one ever regrets it, by helping others who might be in need. Go on!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-5"></div>
<h1>Request materials</h1>
<p>Click here to reach us. Request content(question papers, books) for any course of any department and we'll hear you out. Just fill up the details.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-6"></div>
<h1>Log Out</h1>
<p>All done? Then we guess there's nothing holding you back.</p>
</div></a>
</section>
</main>
</body>
</html>
The simplified rule is that elements in the HTML file will be created in the order that they appear. If elements overlap, the newer element would be drawn on top of the older element.
That's the problem here. The navigation gets created, then the main contents gets created. So the main contents gets priority when those overlap.
We can change that behaviour by overwriting the order. We do that via CSS using the z-index property. Items with a higher z-index will be drawn over items with a lower z-index. The usual method is to set the z-index very high (e.g. 10000) so that the element with that z-index would appear above everything else.
The only change is that I've added z-index: 10000; to .navbar:
:root{
font-size: 16px;
font-family: 'Courier New', Courier, monospace;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #152238;
--bg-secondary: #141418;
--transition-speed: 600ms;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
color: black;
margin: 0;
padding: 0;
background-color: #bbff99;
background-image: linear-gradient(319deg, #bbff99 0%, #ffec99 37%, #ff9999 100%);
background-size: cover;
}
/* Used to colorize the browser scrollbar*/
body::-webkit-scrollbar{
width: 0.45rem;
}
body::-webkit-scrollbar-track{
background: #1e1e24;
}
body::-webkit-scrollbar-thumb{
background: #6649b8;
}
main{
margin-left: 5rem;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.todima{
position: relative;
top: 5rem;
text-align: center;
}
.navbar{
width: 4.5rem;
height: 100vh;
position: fixed;
background-color: var(--bg-primary);
transition: width 200ms ease;
z-index: 10000;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.logo{
font-weight: bold;
text-transform: uppercase;
margin-top: 1rem;
margin-bottom: 1rem;
text-align: center;
width: 100%;
font-size: 1.5rem;
letter-spacing: 0.3ch;
}
.navbar-item{
width: 100%;
}
.navbar-item:last-child{
margin-top: auto;
}
.nav-link{
display: flex;
align-items: center;
height: 5rem;
color: var(--text-primary);
text-decoration: none;
filter: grayscale(100%) opacity(0.7);
transition: var(--transition-speed);
}
.nav-link:hover{
filter: grayscale(0%) opacity(1);
background: #0a304a;
}
.link-text{
display: none;
margin-left: 0.5rem;
}
.nav-link i{
min-width: 2rem;
margin: 0 1rem;
}
.navbar:hover{
width: 16rem;
}
.navbar:hover .link-text{
display: block;
}
.fas{
color: #F98125;
transition:var(--transition-speed);
}
.a1{
font-family: 'Major Mono Display', monospace;
}
h1{
font-family: 'Pacifico', cursive;
margin: 7px;
margin-left: 12px;
font-size: 36px;
color:#0B1354;
}
p{
margin: 7px;
margin-left: 10px;
font-size: 28px;
font-family: 'Caveat', cursive;
color: #660F56;
}
.cardcont{
background: #FFFAFA;
width: 450px;
margin: 40px;
border-radius: 7px;
perspective: 1px;
overflow: hidden;
border: 8px solid transparent;
}
.cardcont:link {
text-decoration: none;
}
.cardcont:visited {
text-decoration: none;
}
.cardcont:hover{
border-width: 8px;
border-style: outset;
border-left-color: #e975a8;
border-top-color:#e975a8 ;
border-bottom-color: #7ddff8;
border-right-color: #7ddff8;
transition: 0.5s;
}
.container{
position: relative;
top: 5rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card-image{
height: 200px;
margin-top: 7px;
margin: 6px;
}
.image-1{
background-image: url(dashboardprofile.png);
}
.image-2{
background-image: url(picks.png);
}
.image-3{
background-image: url(http://www.simpleimageresizer.com/_uploads/photos/b5f9c7fc/pexels-suzy-hazelwood-1130980_450x130.jpg);
}
.image-4{
background-image: url(contributor.png);
}
.image-5{
background-image: url(request.png);
}
.image-6{
background-image: url(logout.png);
}
<!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>Dashboard withh Cards</title>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> -->
<script src="https://kit.fontawesome.com/7d904839de.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="mergerdraft.css">
<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=Caveat:wght#600&family=Major+Mono+Display&family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Cuet Course Insights</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-home fa-2x"></i>
<span class="link-text">Home</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-user-circle fa-2x"></i>
<span class="link-text">Profile</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-file-download fa-2x"></i>
<span class="link-text">Download books</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-exclamation-triangle fa-2x"></i>
<span class="link-text">Report an issue</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-sign-out-alt fa-2x"></i>
<span class="link-text">Log Out</span>
</a>
</li>
</ul>
</nav>
<main>
<section class="todima">
<h1 class="a1">Welcome to your dashboard</h1>
<p>Glad to have you here. Hope you make the best use of your time. </p>
</section>
<section class="container">
<a href="dashboard.html" class="cardcont"><div class="card">
<div class="card-image image-1"></div>
<h1>Profile</h1>
<p>Visit your profile and all related information in this tab</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-2"></div>
<h1>Your Picks</h1>
<p>See your specially hand-picked items, without the peril of following all the steps.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-3"></div>
<h1>Course materials</h1>
<p>Find and read the Books, Previous year Questions, Notes of all the toppers from our vast library of resources. In short, GO FOR GLORY!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-4"></div>
<h1>Be a Contributor</h1>
<p>Wanna contribute to the community? No one ever regrets it, by helping others who might be in need. Go on!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-5"></div>
<h1>Request materials</h1>
<p>Click here to reach us. Request content(question papers, books) for any course of any department and we'll hear you out. Just fill up the details.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-6"></div>
<h1>Log Out</h1>
<p>All done? Then we guess there's nothing holding you back.</p>
</div></a>
</section>
</main>
</body>
</html>
The second question is about handling different screen sizes. The best way to do that is via CSS media queries. Those allow you to add a set of rules to your CSS file, which will only be processed if they match your condition(s).
For example, if you want to run some rules if the page width is 700px or narrower, you would do this:
#media (max-width: 700px) {
.cardcont {
background-color: black;
}
}
You can have multiple media queries and each one can have multiple conditions. Media queries are usually put at the end of the CSS file, because that allows you to overwrite earlier rules.
I would suggest that you use those to make changes to the page at small sizes. Examples changes would be:
Removing the margin from .cardcont.
Move the navigation to the top of the page.
I have searched endlessly for a solution to centering my drop-down navigation bar on my website.
I have tried removing the code float: left code from my CSS and added the code display: inline-block: but nothing seems to be working. I have tried several solutions but they have either moved my navigation bar from the top or removed the background I have set for the navigation bar.
If I could get some help on centering the navigation bar without removing the navigation bar's background or displacing it, that would be great.
html {
background-image: url(../images/RL_bg.gif);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
li {
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rocket League</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<header>
<ul>
<li class="dropdown">
Homepage
<div class="dropdown-content">
What is Rocket League?
Gameplay
Platforms
</div>
<li class="dropdown">
Cars
<div class="dropdown-content">
Standard
Downloadable Content
Platform Exclusive
</div>
<li class="dropdown">
Online Content
<div class="dropdown-content">
Multiplayer
Competitve
</div>
<li class="dropdown">
Maps
<div class="dropdown-content">
Standard
Experimental
</div>
<li class="dropdown">
Crates
<div class="dropdown-content">
Item Customization
Trading
</div>
<li class="dropdown">
About Me
<div class="dropdown-content">
Purpose of This Site
About The Creator
</div>
</li>
</ul>
</header>
<body>
<h1></h1>
</body>
</html>
Your going to want to make a create a id for your ul's that does this tag around your entire list. Then you can use this for css.
#navmenu {
margin: 0 auto;
width: 500px;
}
#navmenu a {
width: 100px;
text-align: center;
}
So this will work if your using an inline list. Let me know if this solution is helpful at all, because we can custom taylor it to your css/html specifically.
it has been some time since I made my last webpage and it seems that I have forgot much. I cant resolve why the last item from the #menu ul goes to the next line while the #menu div is wide enough to contain all the list elements plus the logo div, it has margin and padding set to 0.
I used to do menus in such way before but have probably forgot something.
I searched for the solution however I cant make the things working right.
The question is..why arent the li items in one line? Whats causing the 850 px overlap when they all together should be 802px wide?
html, body {margin:0; padding:0}
body {background-image: url("./gfx/background.png"); background-position: 50%; background-repeat: no-repeat;text-align:center; background-color:#fff; font-family:Arial, Helvetica;width:100%}
.main-wrap {width:1000px; margin:0 auto}
#header {height:150px;width:1000px}
#logo {
display: block;
width: 150px;
height: 150px;
overflow: hidden;
color: #424242;
float:left;
margin: 0;
padding:0;
}
#logo span {
background: url("./gfx/logo-small.png");
z-index: 5;
display: block;
width: 150px;
height: 150px;
}
.wrap::before {
content: " ";
display: table;
}
.wrap::after{
clear: both;
content: " ";
display: table;
}
/*menu*/
#menu {width:849px;margin:0 0 0 0; padding:0px 150px 0 0}
#menu ul li {list-style: none;}
#menu ul li a {
z-index: 5;
position: relative;
float:left;
display: inline;
height: 31px;
overflow: hidden;
text-decoration: none;
color:#336699;
font-size: 20px;
margin: 0;
padding:0
}
#menu li a:hover,
#menu li a:focus {
height: 31px;
margin-top: 0;
color:#fff;
}
#menu li a span {
position: absolute;
top: 0;
left: 0;
display: block;
z-index: -1;
height: 31px;
cursor: pointer;
}
#menu li a:hover span,
#menu li a:focus span {
background: url("./gfx/menu-a.png");
background-repeat: no-repeat;
color:#fff;
}
#menu-1,
#menu-1 span {
background-position: 0 0;
width:119px;
}
#menu-1:hover span,
#menu-1:focus span {
background-position: 0px 0px;
}
#menu-2,
#menu-2 span {
width: 112px;
}
#menu li a#menu-2:hover span,
#menu li a#menu-2:focus span {
background-position: -119px 0px;
}
#menu-3,
#menu-3 span {
width: 128px;
}
#menu li a#menu-3:hover span,
#menu li a#menu-3:focus span {
background-position: -231px 0px;
}
#menu-4,
#menu-4 span {
width: 184px;
}
#menu li a#menu-4:hover span,
#menu li a#menu-4:focus span {
background-position: -359px 0px;
}
#menu-5,
#menu-5 span {
width: 149px;
}
#menu li a#menu-5:hover span,
#menu li a#menu-5:focus span {
background-position: -543px 0px;
}
#menu-6,
#menu-6 span {
width: 110px;
}
#menu li a#menu-6:hover span,
#menu li a#menu-6:focus span {
background-position: -692px 0px;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New web</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="main-wrap"> <!-- hlavni -->
<div class="wrap">
<div id="header">
<div id = "logo"><a href = "new_web/">
<span> </span>
</a></div>
<div id="menu">
<ul>
<li><a id="menu-1" href="new_web/about-us.html">About Us<span></span></a></li>
<li><a id="menu-2" href="new_web/services.html">Services<span></span></a></li>
<li><a id="menu-3" href="new_web/insurance.html">Insurance<span></span></a></li>
<li><a id="menu-4" href="new_web/meet-our-team.html">Meet Our Team<span></span></a></li>
<li><a id="menu-5" href="new_web/latest-news.html">Latest News<span></span></a></li>
<li><a id="menu-6" href="new_web/contact.html">Contact<span></span></a></li>
</ul>
</div>
</div>
</div>
<div id = "slider">
</div>
<div id = "main">
<!-- first page only -->
<div class="wrapper">
<div id="smart-boxes">
<div id="smart-box-1">
<p>"Change your thoughts and you chagne your world." <span>Norman Vincent Peale</span>
</p>
</div>
<div id="smart-box-2">
<p>High quality psychological services <a>read more...</a>
</p>
</div>
<div id="smart-box-3">
<p>We are a multidisciplinary treatment center <a>read more...</a>
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="wrapper">
<div id="footer-address">
<p>
</p>
</div>
<div id = "footer-links-1">
<p>
Contact Us<br />
FAQ <br />
</p>
</div>
<div id = "footer-links-2">
<p>
Terms of use<br />
Insurance<br />
Our Team<br />
</p>
<p class="ext-links">
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Thank you for your advices.
Allright, basic mistake: when positioning two elements using float property just beside each other one must have float:left (#logo) and the other muset go to right simple adding float:right to #menu did the thing (also removed the 150px padding-right).