lately I've started coding with some css and html and I decided to make my own first website, so I had some problems in changing the position of a div containing two buttons("s'inscrire" and "se connecter") ... Also when I hover on the header list, it starts moving upwards and downwards, I changed the padding, the margin... But nothing happens!
#import url('https://fonts.googleapis.com/css?family=Montserrat|Raleway');
*{
margin:0;
padding: 0;
font-family: Raleway;
}
body{
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url('1.jpg');
background-position: center;
background-size: cover;
height: 100vh;
}
.main ul{
float: right;
display: block;
list-style-type: none;
font-size: 15px;
margin-top: 20px;
position: sticky;
}
.main ul li{
display: inline-block;
width: 150px;
}
.main ul li i{
padding-right: 5px;
color: #eccc68;
opacity: 0.6;
}
.main ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
border-radius: 7px;
}
.main ul li a:hover{
position: relative;
display: block;
background-color: #fff;
color: #000;
transition: 0.6s ease;
}
.main ul li.active a{
background-color: #fff;
color: #000;
}
.main ul ul li{
list-style-type: none;
display: none;
}
.main ul li:hover ul li{
display: block;
}
.login ul{
float: right;
position: fixed;
list-style-type: none;
display: inline-block;
font-size: 12px;
}
.logo img{
float: left;
width: 150px;
height: auto;
margin-top: 15px;
margin-left: 0;
}
header{
background-color: rgba(202, 211, 200,0.6);
}
.main{
max-width: 1200px;
margin: auto;
}
.title img{
width: 40%;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-100%);
}
.title p{
width: 40%;
position: absolute;
top: 54%;
left: 50%;
font-size: 25px;
font-family: Montserrat;
font-weight: lighter;
transform: translate(-50%,-100%);
text-align: center;
color: #F8EFBA;
}
.button{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-100%);
}
.button a i{
padding-right: 5px;
color: #eccc68;
opacity: 0.6;
}
.btn{
border: 1px solid #eccc68;
border-radius: 15px;
padding: 10px 30px;
color: #fff;
font-size: 20px;
text-decoration: none;
}
.btn:hover{
background-color: #fff;
color: #000;
transition: 0.6s ease;
}
.footer{
width: 100%;
position: fixed;
bottom: 0;
background-color: rgba(0,0,0,0.4);
height: 60px;
}
.footer ul{
transform: translateX(1800px);
margin-right: 0px;
list-style-type: none;
font-size: 15px;
margin-top: 20px;
}
.footer ul li a i{
font-size: 20px;
padding-right: 5px;
color: #eccc68;
}
.footer ul li{
display: inline-block;
}
.footer h5{
font-size: 11px;
color: #eccc68;
text-align: center;
opacity: 0.7;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trip Buddy | Your free online travel guide</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="image/png" href="favicon.ico">
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="2.png">
</div>
<ul>
<li class="active"><i class="fas fa-home"></i>Accueil</li>
<li><i class="fas fa-city"></i>Villes dispo
<ul>
<li>Marrakech</li>
<li>Rabat</li>
<li>Tanger</li>
<li>Essaouira</li>
</ul>
</li>
<li><i class="fas fa-hand-holding"></i>Services</li>
<li><i class="fas fa-user-alt"></i>Contact</li>
</ul>
</div>
<div class="login">
<ul>
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</div>
<div class="title">
<img src="2.png">
<p>Trip Buddy est ton premier accompagnant guide en ligne. Rejoignez notre nombreuse communauté et télecharger l'application sur toutes les platformes GRATUITEMENT!</p>
</div>
<div class="button">
<i class="far fa-play-circle"></i>Regarder video
<i class="far fa-question-circle"></i>Aide
</div>
</header>
<footer>
<div class="footer">
<ul>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter-square"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-snapchat-square"></i></li>
</ul>
<h5>
©Khalil 2019
</h5>
</div>
</footer>
</body>
</html>
Please if you can fix this problem I'm gonna be so grateful for your help. Thanks.
I have Changed the following CSS code and menu now fixed.
.main ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
border-radius: 7px;
position: relative;
display: block;
transition:all 0.6s ease; /* this will be always at normal stage not at hover*/
}
.main ul li a:hover{
background-color: #fff;
color: #000;
}
Please have a look at this at codepen
#import url('https://fonts.googleapis.com/css?family=Montserrat|Raleway');
*{
margin:0;
padding: 0;
font-family: Raleway;
}
body{
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url('1.jpg');
background-position: center;
background-size: cover;
height: 100vh;
}
.main ul{
float: right;
display: block;
list-style-type: none;
font-size: 15px;
margin-top: 20px;
position: sticky;
}
.main ul li{
display: inline-block;
width: 150px;
}
.main ul li i{
padding-right: 5px;
color: #eccc68;
opacity: 0.6;
}
.main ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
border-radius: 7px;
position: relative;
display: block;
transition:all 0.6s ease; /* this will be always at normal stage not at hover*/
}
.main ul li a:hover{
background-color: #fff;
color: #000;
}
.main ul li.active a{
background-color: #fff;
color: #000;
}
.main ul ul li{
list-style-type: none;
display: none;
}
.main ul li:hover ul li{
display: block;
}
.login ul{
float: right;
position: fixed;
list-style-type: none;
display: inline-block;
font-size: 12px;
}
.logo img{
float: left;
width: 150px;
height: auto;
margin-top: 15px;
margin-left: 0;
}
header{
background-color: rgba(202, 211, 200,0.6);
}
.main{
max-width: 1200px;
margin: auto;
}
.title img{
width: 40%;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-100%);
}
.title p{
width: 40%;
position: absolute;
top: 54%;
left: 50%;
font-size: 25px;
font-family: Montserrat;
font-weight: lighter;
transform: translate(-50%,-100%);
text-align: center;
color: #F8EFBA;
}
.button{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-100%);
}
.button a i{
padding-right: 5px;
color: #eccc68;
opacity: 0.6;
}
.btn{
border: 1px solid #eccc68;
border-radius: 15px;
padding: 10px 30px;
color: #fff;
font-size: 20px;
text-decoration: none;
}
.btn:hover{
background-color: #fff;
color: #000;
transition: 0.6s ease;
}
.footer{
width: 100%;
position: fixed;
bottom: 0;
background-color: rgba(0,0,0,0.4);
height: 60px;
}
.footer ul{
transform: translateX(1800px);
margin-right: 0px;
list-style-type: none;
font-size: 15px;
margin-top: 20px;
}
.footer ul li a i{
font-size: 20px;
padding-right: 5px;
color: #eccc68;
}
.footer ul li{
display: inline-block;
}
.footer h5{
font-size: 11px;
color: #eccc68;
text-align: center;
opacity: 0.7;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trip Buddy | Your free online travel guide</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="image/png" href="favicon.ico">
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="2.png">
</div>
<ul>
<li class="active"><i class="fas fa-home"></i>Accueil</li>
<li><i class="fas fa-city"></i>Villes dispo
<ul>
<li>Marrakech</li>
<li>Rabat</li>
<li>Tanger</li>
<li>Essaouira</li>
</ul>
</li>
<li><i class="fas fa-hand-holding"></i>Services</li>
<li><i class="fas fa-user-alt"></i>Contact</li>
</ul>
</div>
<div class="login">
<ul>
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</div>
<div class="title">
<img src="2.png">
<p>Trip Buddy est ton premier accompagnant guide en ligne. Rejoignez notre nombreuse communauté et télecharger l'application sur toutes les platformes GRATUITEMENT!</p>
</div>
<div class="button">
<i class="far fa-play-circle"></i>Regarder video
<i class="far fa-question-circle"></i>Aide
</div>
</header>
<footer>
<div class="footer">
<ul>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter-square"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-snapchat-square"></i></li>
</ul>
<h5>
©Khalil 2019
</h5>
</div>
</footer>
</body>
</html>
Related
I am trying to get the 'hamburger lines' which you get when you shrink a responsive website. But the lines which I am getting is not stacked like it should be and is instead side by side:
This is the picture of the lines:
Code:
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
background-image: url(background.jpg);
background-size: cover;
background-position : center;
font-family: sans-serif;
}
.menu-bar
{
background: #273044;
text-align: center;
}
.menu-bar ul
{
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li
{
width: 120px;
place-items:center;
display: grid;
padding: 0px;
}
.menu-bar ul li a
{
text-decoration: none;
color: white;
}
.active, .menu-bar ul li:hover
{
background-color: #0b56ab;
height:auto;
height:30px;
}
.toggle-button{
position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
flex-direction: none;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width: 400px){
.toggle-button{
display:flex;
}
}
/* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<!----header---->
<body>
<div class="menu-bar">
<a href = "#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
<div class= "grid">
</div>
</body>
</html>
Could you please have a look at my code and advise what I have overlooked?
You didn't specify the flex-direction as column
+(I have modified your css code a bit)
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
background-image: url(background.jpg);
background-size: cover;
background-position : center;
font-family: sans-serif;
}
.menu-bar
{
background: #273044;
display: inline-flex;
text-align: center;
align-items:center;
}
.menu-bar ul
{
display: inline-flex;
align-items:center;
list-style: none;
color: #fff;
}
.menu-bar ul li
{
min-width: 120px;
align-self:center;
display: grid;
padding: 0px;
}
.menu-bar ul li a
{
text-decoration: none;
color: white;
}
.active, .menu-bar ul li:hover
{
background-color: #0b56ab;
height:auto;
height:30px;
}
.toggle-button{
position: absolute;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 31px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width: 400px){
.toggle-button{
display:flex;
}
}
/* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<!----header---->
<body>
<div class="menu-bar">
<a href = "#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
<div class= "grid">
</div>
</body>
</html>
You'll want to change to display block on the a tag and the spans
.toggle-button{
position: absolute;
top: 0.75rem;
right: 1rem;
display: block;
width: 31px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
display: block;
margin-bottom: 3px;
}
Its not a solution for your three lines, but you just could use a SVG:
.hamburger {
width: 12rem;
height: 12rem;
}
<svg xmlns="http://www.w3.org/2000/svg" class="hamburger" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
I have been working on a new site and when I was trying to use the navigation bar (while in mobile device mode) the navigation bar started drawing under the text. I have checked the code from my previous website and I just do not understand why it does not work. I can't even interact with the navigation bar.
Here is what happens: https://gyazo.com/91ca07c2fafd81355152f5c2379fd89d
Here is the code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<title>Landing Page</title>
</head>
<body>
<div class="main">
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbutton">
<i class="fas fa-bars"></i>
</label>
<img src="./img/logo.png" alt="Logo" />
<ul>
<li><a class="active" href="./">Home</a></li>
<li>Store</li>
<li>Download</li>
</ul>
</nav>
<main>
<div class="header"><p>Example Client</p></div>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id
pharetra metus. Nullam sit amet lorem sapien. Aliquam commodo
pretium.
</p>
</div>
<div class="footer">
<a href="https://t.me/scaldings">
<i class="d-block fab fa-telegram text-muted fa-lg mx-2"></i>
</a>
<a href="https://discord.com/channels/#me/394894093437763594">
<i class="d-block fab fa-discord text-muted fa-lg mx-2"></i>
</a>
<p>© Example Client</p>
</div>
</main>
</div>
</body>
</html>
CSS:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
::-webkit-scrollbar {
display: none;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
.main {
width: 100vw;
height: 100vh;
background: url("/img/bg.jpg") no-repeat;
background-size: cover;
}
nav {
height: 100px;
width: 100%;
background: rgba(97, 97, 97, 0.4);
}
/*Logo*/
nav img {
width: 80px;
float: left;
margin-top: 10px;
margin-left: 80px;
transition: 0.3s;
}
nav img:hover {
filter: brightness(80%);
}
/*Logo*/
/*Navigation links*/
nav ul {
float: right;
margin-right: 80px;
}
nav ul li {
display: inline-block;
line-height: 100px;
margin: 0 10px;
font-size: 20px;
}
nav ul li a {
padding: 0 10px;
color: #ffffff;
transition: 0.3s;
}
nav ul li a:hover {
color: #bdbdbd;
}
a.active {
border: 1.9px solid #ffffff;
border-radius: 1px;
}
a.active:hover {
border: 1.9px solid #bdbdbd;
}
.checkbutton {
float: right;
line-height: 100px;
margin-right: 80px;
color: #ffffff;
font-size: 30px;
transition: 0.3s;
cursor: pointer;
display: none;
}
.checkbutton:hover {
color: #bdbdbd;
}
#check {
display: none;
}
/*Navigation links*/
/*Main wrapper*/
main {
height: calc(100vh - 100px);
position: relative;
}
.header {
position: absolute;
top: 30%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 72px;
color: #ffffff;
transition: 0.3s;
}
.description {
text-align: center;
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 600px;
font-size: 18px;
color: #d8d8d8;
word-wrap: normal;
transition: 0.3s;
}
.footer {
position: absolute;
float: left;
bottom: 0;
margin-left: 10px;
color: #ffffff;
}
.footer a {
color: #ffffff;
}
.footer a:hover {
color: #bdbdbd;
}
/*Main wrapper*/
/*Responsive part*/
#media (max-width: 952px) {
nav ul li a {
font-size: 20px;
}
main h1 {
font-size: 64px;
}
}
#media (max-width: 858px) {
.checkbutton {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgba(97, 97, 97, 0.4);
top: 100px;
left: -100%;
text-align: center;
transition: all 0.8s;
}
nav ul li {
display: block;
margin: 60px 0;
}
nav ul li a {
font-size: 20px;
}
main h1 {
font-size: 60px;
}
#check:checked ~ ul {
left: 0;
}
}
/*Responsive part*/
Thank you in advance!
Increase z-index of the if the element you want to be on top.
simple example:
.below-item{
z-index:1;
}
.top-item{
z-index:2;
}
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
I'm doing clone coding of Lotte World homepage in Korea.The homepage has a layout with the float elements. I gave the logo float property to the left. and I gave the .info class float property to the right. And naturally, the .gnb class becomes a central alignment. through text-align center. The problem is that there is an undefined margin on top of .gnb class. I did some experiments and deleted the logo and the problem was solved. I want to know exactly what caused the problem.
/*no reset css*/
header{
width: 100%;
height: 46px;
border-bottom: 1px solid #e1e1e1;
background: #f8f8f8;
}
#header::after{
content:"";
display: block;
clear: both;
}
#header{
position: relative;
width: 1173px;
margin: 0 auto;
}
#header .left li a{
display: inline-block;
height: 46px;
font-size: 13px;
color:#555;
}
#header .left li{
float: left;
position: relative;
padding: 0 20px;
line-height: 46px;
}
/* 첫 번째 자식 구분선 해제 */
#header .left li:first-child{
padding-left: 0;
}
#header .left li:first-child:after{
display: none;
}
/* 로고 구분선 */
#header .left li:after{
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 14px;
width: 1px;
height: 20px;
background: #e1e1e1;
}
/* 왼쪽 로고 이미지 */
#header .left li:first-child a{
padding: 0 0 0 28px;
background: url('https://adventure.lotteworld.com/common/images/icon/header_sky_icon.png') no-repeat 0 50%;
}
#header .left li:nth-child(2) a{
padding: 0 0 0 35px;
background: url('https://adventure.lotteworld.com/common/images/icon/header_aqua_icon.png') no-repeat 0 50%;
}
#header .left li:last-child a{
padding: 0 0 0 33px;
background: url('https://adventure.lotteworld.com/common/images/icon/header_water_icon.png') no-repeat 0 50%;
}
/* 오른쪽 */
.family,
.members,
.lang{
display: inline-block;
}
#header .right{
float: right;
}
#header .right li,
a{
float: left;
position: relative;
line-height: 46px;
}
#header .family > a:last-child{
padding-right: 30px;
}
#header .family a:hover{
color: #590fe4;
}
#header .members a:hover{
color: #000;
}
#header .members a,
#header .lang a{
font-weight: bold;
}
#header .family a,
#header .members a{
padding: 0 11px;
}
#header .family a,
#header .members a,
#header .lang a{
font-size: 13px;
color: #555;
}
#header .family li:first-child:after,
#header .members li:first-child:after{
display: none;
}
#header .family li:after,
#header .members li:after{
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 14px;
width: 1px;
height: 20px;
background: #e1e1e1;
}
#header .lang a{
padding-right: 16px;
height: 46px;
background: url('img/lang_arrow.png') no-repeat right center;
}
/* 네비게이션 */
nav{
width: 100%;
height: 99px;
border-bottom: 1px solid #e1e1e1;
}
#nav{
width: 1173px;
height: 100px;
margin: 0 auto;
text-align: center;
}
/* 왼쪽 */
#nav h1{
float: left;
margin-top: 13px;
}
/* 중앙 */
#nav .gnb::before{
content:"";
display: block;
clear: both;
}
#nav .gnb{
float: left;
height: 99px;
margin-left: 176px;
}
#nav .gnb li:first-child{
padding-left: 0;
}
#nav .gnb li{
height: 99px;
padding-left: 48px;
float: left;
}
#nav .gnb li a{
display: block;
font-size: 17px;
line-height: 95px;
}
/* 오른쪽 */
#nav .info{
height: 78px;
margin-top: 21px;
float: right;
}
#nav .info .srch, .reser, .group{
position: relative;
padding-left: 32px;
float: left;
}
#nav .info .Btn span{
display: block;
}
#nav .info .Btn span:nth-child(2){
padding-top: 13px;
}
#nav .info .txt{
position: absolute;
left: 50%;
font-size: 16px;
color: #590fe4;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>롯데월드 어드벤처</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="default.css">
</head>
<body>
<header>
<div id="header">
<ul class="left">
<li>SEOUL SKY</li>
<li>롯데월드 아쿠아리움</li>
<li>김해롯데워터파크</li>
</ul>
<ul class="right">
<div class="family">
<li>민속박물관</li>
<li>아이스링크</li>
</div>
<div class="members">
<ul>
<li>Login</li>
<li>회원가입</li>
</ul>
</div>
<div class="lang">
KOR
</div>
</ul>
</div>
</header>
<nav>
<div id="nav">
<h1>
<img src="img/logo.png" alt="롯데월드 어드벤처 로고">
</h1>
<ul class="gnb">
<li>즐길거리</li>
<li>요금/우대혜택</li>
<li>참여프로그램</li>
<li>이용가이드</li>
<li>소통서비스</li>
</ul>
<ul class="info">
<p class="srch Btn">
<span>
<img src="img/header_srch_btn.png" alt="검색하기">
</span>
<span class="txt">검색</span>
</p>
<p class="reser Btn">
<span>
<img src="img/reser_btn.png" alt="예매하기">
</span>
<span class="txt">예매</span>
</p>
<p class="group Btn">
<span><img src="img/group_btn.png" alt="단체예약"></span>
<span class="txt">단체</span>
</p>
</ul>
</div>
</nav>
</body>
</html>
Most Browsers render a default margin for ordered and unordered lists. To avoid that use reset css rules (for example this)
EDIT
actually you set the margin youself here:
#nav .gnb{
float: left;
height: 99px;
margin-left: 176px; // remove this line
}
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
We are trying to get a drop down menu working but when hovering on the top level, it expands its width. How can we make sure it stays the same ?
The html code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Velocior | Accelerate your web</title>
</head>
<body class="body">
<header role="banner">
<nav role="navigation">
<ul id="top-bar">
<li class="top-icon-block">
<a href="http://ha.efficens-software.com">
<span id="top_icon_home" title="Home"></span>
</a>
</li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><span id="top_icon_register" title="Register"></span></li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><span id="top_icon_login" title="Login"></span></li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><span id="top_icon_logout" title="Logout"></span></li>
<li class="top-menu-left-edge-block"></li>
<li class="top-menu-button-block">Velocior</li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block">Technology</li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block"><span>Solutions</span></li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block"><span>Tech Center</span></li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block">
<span>Free BETA</span>
<ul class="sub-menu">
<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115">WordPress acceleration</li>
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111">Apache acceleration</li>
<li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113">IIS & SharePoint acceleration</li>
<li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114">ISPs and Cloud suppliers</li>
<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112">Developer tools</li>
<li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108">Pricing</li>
</ul>
</li>
<li class="top-menu-right-edge-block"></li>
</ul>
</nav>
</header>
<div id="page">
<div id="logo"><img src="images/velocior_logo.png"></div>
<div class="content long-content">
<div class="content-inner-left long-inner-content">
<div class="content-icon">
<img src="images/timer.png">
</div>
</div>
<div class="content-inner-right long-inner-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </div>
</div>
<div id="mailing-list-box">
<div class="mailing-list-separator"></div>
<div class="mailing-list-text">Join our mailing list : </div>
<!-- <div class="mailing-list-input">NREGEV#GMAIL.COM</div> -->
<input type="text" class="mailing-list-input">
<div class="mailing-list-submit"><img src="images/subscribe.png"></div>
</div>
<!--
<div class="content long-content">
<div class="content-inner-left long-inner-content">
some text and icon
</div>
<div class="content-inner-right long-inner-content">
some text but no icons here ..
</div>
</div>
-->
</div>
<div id="footer">
<span>Some footer text here</span>
</div>
</body>
</html>
And the CSS Code looks like this:
body {
background-color: black;
width: 950px;
margin-left: auto;
margin-right: auto;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
}
#top-bar {
position: relative;
display: block;
width: inherit;
height: 39px;
padding: 0px;
margin: 0px;
vertical-align: middle;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
}
.top-icon-block {
width: 50px;
margin: 0px;
display: table-cell;
text-align: center;
}
.top-icon-block a {
position: relative;
top: 5px;
}
.top-icon-block span {
position: relative;
left: 10px;
background-repeat: none;
width: 30px;
height: 20px;
cursor: pointer;
display: block;
}
/* .top-icon-block div:hover { cursor: pointer; } */
#top_icon_home { background-image: url("images/home.png");}
#top_icon_home:hover { background-image: url("images/home_red.png");}
#top_icon_register { background-image: url("images/register.png");}
#top_icon_register:hover { background-image: url("images/register_red.png");}
#top_icon_login { background-image: url("images/login.png");}
#top_icon_login:hover { background-image: url("images/login_red.png");}
#top_icon_logout { background-image: url("images/logout.png");}
#top_icon_logout:hover { background-image: url("images/logout_red.png");}
/*
.top-icon-block img {
padding-top: 8px;
}
.top-icon-block img:hover {
cursor: pointer;
}
*/
.top-icon-sep-block {
width: 4px;
margin: 0px;
display: table-cell;
text-align: center;
/* background-image: url("images/top_icon_separator.png"); */
}
.top-icon-sep-block img {
padding-top: 8px;
}
.top-menu-left-edge-block {
width: 7px;
margin: 0px;
background-image: url("images/buttons_left_edge.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
.top-menu-sep-block {
width: 7px;
margin: 0px;
background-image: url("images/buttons_separator.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
.top-menu-right-edge-block {
width: 7px;
margin: 0px;
background-image: url("images/buttons_right_edge.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
.top-menu-button-block {
width: 80px;
margin: 0px;
background-image: url("images/buttons_bg.png");
background-repeat: repeat-x;
display: table-cell;
}
.top-menu-button-block span, a{
font-size: 12px;
display: inline-block;
width: inherit;
text-align: center;
vertical-align: 6px;
color: white;
text-decoration: none;
}
.top-menu-button-block *:hover {
color: darkorange;
cursor: pointer;
}
#page {
position: relative;
/* background-image: url('images/background.jpg'); */
background-repeat: no-repeat;
display: inline-block;
width: inherit;
height: 564px;
z-index: 3;
/* border-style: solid;
border-color: red;
border-width: 1px;*/
}
#logo {
position: relative;
top: 25px;
left: 25px;
z-index: 2;
}
#footer {
position: relative;
background-color: #414142;
display: inline-block;
width: inherit;
height: 20px;
}
#footer span {
display: inline-block;
width: inherit;
text-align: center;
vertical-align: -2px; /*middle */
font-size: 10px;
color: white;
text-decoration: none;
}
.content {
position: absolute;
border-top: 1px solid lightgrey;
border-bottom: 1px solid grey;
border-radius: 15px 0px 15px 0px;
width: 640px;
bottom: 60px;
right: 0px;
padding: 5px;
background-color: rgba(255,255,255,0.92);
font-size: 13px;
}
.content-inner-left {
position: absolute;
border-right: 1px solid #AAAAAA;
width: 100px;
display: table-cell;
padding: 5px;
}
.content-inner-right {
position: absolute;
width: 515px;
display: table-cell;
left: 120px;
padding: 5px;
}
.content-icon {
position: relative;
width: 60px;
height: 60px;
top: 0px;
margin: auto;
}
.short-content { height: 130px; }
.long-content {height: 280px; }
.short-inner-content { height: 120px; }
.long-inner-content {height: 270px; }
#mailing-list-box {
position: absolute;
width: 350px;
height: 18px;
bottom: 42px;
right: 300px;
background-color: black;
padding: 0px;
}
.mailing-list-separator {
position: absolute;
display: table-cell;
left: 20px;
width: 3px;
height: inherit;
background-image: url("images/subscription_sep.png");
background-repeat: no-repeat;
top: 1px;
}
.mailing-list-text {
position: absolute;
display: table-cell;
left: 50px;
top: 1px;
width: 110px;
height: inherit;
color: white;
}
.mailing-list-input {
position: absolute;
display: table-cell;
left: 150px;
width: 140px;
top: 2px;
height: 13px;
vertical-align: middle;
color: red;
padding: 0px;
border: none;
font-size: 11px;
border-radius:2px;
}
.mailing-list-submit {
position: absolute;
display: table-cell;
left: 290px;
top: 2px;
width: 74px;
height: inherit;
cursor: pointer;
}
/*
nav ul:after {
content: "";
clear: both;
display: block;
}
*/
nav ul ul {
list-style-type: none;
}
nav ul li ul {display: none;}
nav ul li:hover > ul {display: inline-block;}
nav ul ul {
position: abslute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
background-color: grey;
}
/*
#top-bar li ul li {
position: relative;
z-index: 5;
background-color: rgba(0,0,0,0.6);
width: 220px;
height: 20px;
text-align: center;
border-bottom: 1px solid black;
border-radius: 4px;
display: block;
}
*/
/*
#top-bar li ul ul {
top: 0;
left: 100%;
}
#top-bar ul li:hover > ul {
border-left: 0;
display: block;
}
#top-bar li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
#top-bar li ul li a:hover {
background: #e3e3e3;
color: #444;
}
*/
The problem is that when we hover on the BETA menu, it expands to show the sub level menu. HOw can we prevent it ?
Thanks,
I've yet to find a way of doing this without using javascript.
Here's a jQuery snippet of code I use to accomplish this. The code will set explicit widths for the top level li's and the sub-menu ul's.
You'll need some css rules in place to.
The parent items nav ul > li will need to have overflow:visible; set.