I have to make this:
I am very inexperienced in HTML so I though the best thing would be making a rectangle in a div and show only half of it, but I can't seem to make it work. Here is the screen of the current website and how I would like to display it instead:
And here's the code:
header {
font-family: Arial;
}
header nav {
color: white;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
header nav ul li {
margin: 0;
padding: 0;
float: left;
width: 200px;
height: 40px;
background-color: rgb(187, 199, 124);
line-height: 40px;
text-align: center;
}
header nav ul li a {
display: block;
text-decoration: none;
color: white;
}
header nav ul li a:hover {
background-color: rgb(163, 175, 75);
opacity: 0.5;
}
header nav ul li ul li {
display: none;
}
header nav ul li:hover ul li {
display: block;
}
.fit-picture {
max-width: 12%;
}
#rectangle {
width: 1000px;
height: 900px;
background: rgb(187, 199, 124);
border-radius: 500px;
}
<html>
<head>
<title>Accueil - Gite Naille</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
<nav>
<ul>
<li>
<a><img class="fit-picture" src="menu-icon.png" alt="Menu">ACCUEIL</a>
<ul>
<li>ACCUEIL</li>
<li><a>CABANES</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>TARIFS</a></li>
<li><a>CONTACT</a></li>
<li><a>RÉGLEMENTAIRE</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<body>
<div id="rectangle"></div>
</body>
</html>
You can use transform:translateX to achieve this
header {
font-family: Arial;
}
header nav {
color:white;
}
header nav ul {
list-style:none;
margin:0;
padding:0;
}
header nav ul li {
margin:0;
padding: 0;
float: left;
width:200px;
height:40px;
background-color: rgb(187,199,124);
line-height: 40px;
text-align: center;
}
header nav ul li a {
display: block;
text-decoration: none;
color:white;
}
header nav ul li a:hover {
background-color: rgb(163,175,75);
opacity: 0.5;
}
header nav ul li ul li {
display: none;
}
header nav ul li:hover ul li {
display: block;
}
.fit-picture {
max-width: 12%;
}
#rectangle {
width:1000px;
height:900px;
background:rgb(187,199,124);
border-radius: 500px;
transform:translateX(-250px);
}
<html>
<head>
<title>Accueil - Gite Naille</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
<nav>
<ul>
<li><a><img class="fit-picture" src="menu-icon.png" alt="Menu">ACCUEIL</a>
<ul>
<li>ACCUEIL</li>
<li><a>CABANES</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>TARIFS</a></li>
<li><a>CONTACT</a></li>
<li><a>RÉGLEMENTAIRE</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<body>
<div id="rectangle"></div>
</body>
</html>
You can use transform:translateX to achieve this
header {
font-family: Arial;
}
header nav{
color:white;
}
header nav ul{
list-style:none;
margin:0;
padding:0;
}
header nav ul li{
margin:0;
padding: 0;
float: left;
width:200px;
height:40px;
background-color: rgb(187,199,124);
line-height: 40px;
text-align: center;
}
header nav ul li a{
display: block;
text-decoration: none;
color:white;
}
header nav ul li a:hover{
background-color: rgb(163,175,75);
opacity: 0.5;
}
header nav ul li ul li{
display: none;
}
header nav ul li:hover ul li{
display: block;
}
.fit-picture{
max-width: 12%;
z-index:1;
}
#rectangle{
width:500px;
height:400px;
background:rgb(187,199,124);
border-radius: 500px;
transform:translateX(-250px);
z-index:-111;
}
<html>
<head>
<title>Accueil - Gite Naille</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
<nav>
<ul>
<li><a><img class="fit-picture"
src="menu-icon.png"
alt="Menu">ACCUEIL</a>
<ul>
<li>ACCUEIL</li>
<li><a>CABANES</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>TARIFS</a></li>
<li><a>CONTACT</a></li>
<li><a>RÉGLEMENTAIRE</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<body>
<div id="rectangle"></div>
</body>
</html>```
Related
I'm currently doing my first website for fun and I decided to make a fan website of a band I really like, just to start. This is my current website but the element that says "store" is too spaced from the right side. The only way I can find to move is by using " margin '-number' " but it will affect the webpage and increase its width. Can anyone help me?
body {
margin: 0;
background: url(images/moonspell_concert_2.jpg) no-repeat;
background-size: cover;
color: #fff;
}
header {
background-color: #000;
}
header::after {
content:'';
display: table;
clear: both;
}
.logo {
}
nav {
float: right;
font-size: 1.45rem;
font-family: "Roboto",sans-serif;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 100px;
height: 40px;
background-color: #000;
line-height: 40px;
text-align: left;
text-transform: uppercase;
font-weight: 700;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
nav ul li a {
text-decoration: none;
color: #fff;
display: block;
font-size: 0.85rem;
}
nav ul li a:hover {
color: darkgoldenrod;
-webkit-transition: 300ms ease;
transition: 300ms ease;
}
nav ul li ul li {
display: none;
width: 140px;
padding: 0 7px;
text-transform: none;
font-weight: 400;
}
nav ul li ul li a:hover {
color: #fff;
}
nav ul li:hover ul li {
display: block;
}
nav ul li ul li:hover {
background-color: darkgoldenrod;
color: #fff;
}
#news {
margin-right: -46px;
}
#band {
margin-right: -50px;
}
#tour {
margin-right: -50px;
}
#media {
margin-right: -43px;
}
#discography {
margin-right: 10px;
}
#store {
}
.default-cursor /* Cursor fica default nos elementos que não são páginas */ {
cursor: default;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moonspell - Fan Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container" alt="logo" class="logo">
<img src="images/moonspell_logo.png"/>
<nav>
<ul>
<li id="news">News</li>
<li id="band">Band
<ul>
<li>Profiles</li>
<li>History</li>
</ul>
</li>
<li id="tour">Tour
<ul>
<li>Tour Dates</li>
<li>Tour Archive</li>
</ul>
</li>
<li id="media">Media
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
<li id="discography">Discography
<ul>
<li>Releases</li>
<li>Videography</li>
</ul>
</li>
<li id="store">Store</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
You have set width: 100px on nav ul li, this is what is determining how much space there is to the right of the store element.
If you're happy with using widths for layout in this way then you could simply reduce the width of the store element like so:
#store {
width: 60px;
}
i have been trying to create a navigation bar with a drop-down menu in it. after a few hours of looking have had found the problem is that as the cursor moves down the drop-down and into the next div underneath it, it disappears.
i have been trying to but cannot figure out how to fix it.
here is the jsfiddle
the page html is :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E-book</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/button.css" rel="stylesheet" type="text/css">
<link href="../css/dropdown.css" rel="stylesheet" type="text/css">
<script src="../script/script.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header">
<span><h1>AS Level E-Book</h1></span>
</div>
<div class="nav-wrapper">
<nav class="menu-wrap">
<ul>
<li>Introduction</li>
<li>Online Services
<ul>
<li>E-Mail</li>
<li>Social Network</li>
<li>Instant Messaging</li>
</ul>
</li>
<li>Life In Info Age</li>
<li>Digital Divide</li>
<li>Conclusion</li>
</ul>
</nav>
</div>
<div class="main"><!-- TemplateBeginEditable name="next and prev" -->
<a><button class="metal radial"><=</button></a>
<a><button class="metal radial">=></button></a>
<!-- TemplateEndEditable --></div>
<div class="cont"><!-- TemplateBeginEditable name="content" -->
content
<!-- TemplateEndEditable -->
</div>
</div>
</body>
</html>
and the css is:
.nav-wrapper{
position:absolute; top: 100px; right: 0; left: 0;
background: linear-gradient(to right, #aaa , #aaa, #ddd, #ddd, #aaa,#aaa);
}
nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
nav a:hover {
background-color: #005f5f;
}
nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
nav li li {
font-size: .8em;
}
nav li {
width: 250px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
nav a {
border-bottom: none;
}
nav > ul > li {
text-align: center;
}
nav > ul > li > a {
padding-left: 0;
}
nav li ul {
position: absolute;
display: none;
width: inherit;
}
nav li:hover ul {
display: block;
}
nav li ul li {
display: block;
}
any help would be much appreciated
thanks
Add high(er) z-index to:
nav li ul {
position: absolute;
display: none;
width: inherit;
z-index:9999;
}
About z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Demo: https://jsfiddle.net/0cd16xjj/1/
I am creating ul li submenu for responsive,I dont know how to write for mobile device so far I have done this,Can any one help me to finish this menu. I have written for mobile alone if I execute in firefox and gave the ctrl+shift+m,It is not coming properly.kindly share you knowledge.below I have listed my sample code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BRIGHT BRIAN</title>
<link rel="shortcut icon" type="image/x-icon" href="css/images/faveicon1.png" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>
<body>
<div id="wrapper">
<header>
<div class="header">
<div class="container">
<div id="logo">
<span class="red">BRIGHT </span><span class="blue">BRAIN</span>
</div>
<!-- navigation -->
<nav id="navigation">
<ul>
<li class="active">Home</li>
<li>About us
<ul class="submenu">
<li>Mission</li>
<li>Vission</li>
<li>Special Features</li>
</ul>
</li>
<li> Course</li>
<li> Feedback
<ul class="submenu">
<li>From Training</li>
<li>From Student</li>
<li>From Parents</li>
</ul>
</li>
<li> Gallery</li>
<li> Franchise
<ul class="submenu">
<li>Low investment</li>
<li>Student work</li>
<li>Monthly good income</li>
</ul>
</li>
<li> Contacts</li>
</ul>
<div class="cl"> </div>
</nav>
<!-- navigation -->
</div><!--End of container-->
</div><!--End of header-->
</header><!--End of header element-->
</div><!--End of wrapper-->
</body>
</html>
For default css:
#charset "utf-8";
/* CSS Document */
#wrapper {
width: 100%;
margin: auto;
}
body {
margin: 0px;
font-size: 12px;
line-height: 16px;
font-family: arial, sans-serif;
color: #808080;
background: #efefef url(images/body.png) repeat-x 0 0;
}
.header {
background: url(images/header1%20copy.png) repeat-x 0 0;
height: 58px;
padding: 29px 0 0 0;
}
#font-face {
font-family: Comic_Sans_MS;
src: url(../font/Comic_Sans_MS.ttf);
}
#logo a {
font-family: Comic_Sans_MS;
text-decoration: none;
font-size: 40px;
font-weight: bold;
line-height: 0px;
}
#logo {
width:250px;
padding: 10px 0px 0px 0px;
float:left;
}
.red {
font-family: Comic_Sans_MS;
color: #E31C00;
}
.blue {
font-family: Comic_Sans_MS;
color: #29166F;
}
.header .container {
margin: auto;
width: 1000px;
}
#navigation {
float:left;
padding-top: 0px;
width:750px;
}
#navigation ul {
list-style: none;
list-style-position: outside;
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
}
#navigation ul li {
float: left;
padding: 0 0 0 44px;
}
#navigation ul li a {
color: #77777b;
text-decoration: none;
}
#navigation ul li a:hover, #navigation ul li.active a {
color: #2497e0;
text-decoration: none;
}
#navigation ul li:hover .submenu {
display: block;
}
#navigation ul .submenu {
position: absolute;
display: none;
width: 800px;
list-style: none;
margin-left: -200px;
}
#navigation ul .submenu li {
float: left;
margin: 0px;
height: 30px;
padding-top: 10px;
cursor: pointer;
}
For mobile css:
#charset "utf-8";
/* CSS Document (common width:260px;)*/
#media only screen and (max-width:530px)
{
.header .container {
width: 260px !important;
}
#logo {
float:left;
width:260px !important;
text-align:center;
}
#logo a {
font-size:25px !important;
}
#navigation {
float:left !important;
width:260px !important;
}
#navigation ul li{
float:left !important;
width:260px !important;
background-color:#CCCCCC;
}
}
.header .container {
width: 480px !important;
}
you have to set the container size properly 260 is small
#media only screen and (max-width:530px)
{
.header .container {
width: 260px !important;
margin:0px;
}
Okay I am making a sample of navigation bar it's all fine except whenever the nested li is hovered the background doesn't fully cover the space.
My HTML code goes as :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<title>NavBar</title>
</head>
<body>
<div id="nav">
<ul>
<li>Home</li><li>
About</li><li>
Contact
<ul>
<li>Email</li>
<li>Phone</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
My CSS code goes as :
html, body {
margin: 100px;
padding:0px;
}
#nav {
margin: 0px;
padding: 0px;
background-color: #909090;
font-familY: Courier;
font-size: 19pt;
color: #afc0ff;
}
#nav ul ul {
display: none;
background-color: #909090;
}
#nav ul li:hover > ul{
margin: 0px;
padding:0px;
display:block;
position:absolute;
top: 100%;
left: 0px;
width: 100%;
}
#nav ul li:hover {
background: #808080;
}
#nav ul li {
margin: 0px;
padding: 10px 5px 10px;
list-style: none;
display: inline-table;
position: relative;
}
#nav ul li a {
text-decoration: none;
color: #260026;
}
My problem is:
I am not being able to make my nested li's background color cover up the whole area like you can see in Email that whole area is not hovered!
JSFiddle
Add this to your CSS:
#nav ul ul li {
display:block;
}
Check JSFiddle Demo
Hi im working on a responsive website. Right now I have a problem with my navigation which i can't center in my div. Also I have a problem with my dropdown menu which destroy the otder when my navigation starts to fit the div.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Test</title>
</head>
<body>
<div id="body_wrapper">
<div id="header_wrapper" class="clearfix">
<div id="header_content" class="content_container">
<div id="language_wrapper">
<div class="language active">
<span>Deutsch</span>
</div>
<div class="language">
<a href="#">
<span>Englisch</span>
</a>
</div>
</div>
<div id="hLogo_wrapper">
<a href="#">
<img src="images/starbucks.png">
</a>
</div>
</div>
</div>
<div id="inner_content" class="content_container">
<div class="mainMenu clearfix" >
<ul class="clearfix">
<li>Home</li>
<li>Aktuelles</li>
<li>
Speisekarte ￬
<ul class="hidden">
<li>Mittagstisch</li>
<li>Frühstück</li>
</ul>
</li>
<li>Reservierung</li>
<li>Gallerie</li>
<li>Kontakt</li>
<li>Jobs</li>
</ul>
</div>
</div>
<div id="footer_wrapper"></div>
</div>
</body>
</html>
and here is my css file so far
* {
margin: 0;
padding: 0;
font-family: Trebuchet MS;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img {border: 0;}
.clearfix:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.content_container{
margin: 0 auto;
width: 62.5%;
}
#inner_content{
}
#header_wrapper{
height: 220px;
background: url('images/header.png');
}
#hLogo_wrapper img{
max-width: 100%;
}
#language_wrapper{
float: right;
}
#language_wrapper .language{
display: inline;
}
#hLogo_wrapper{
float: left;
}
.mainMenu{
height: 60px;
margin: 0 auto;
}
.mainMenu ul {
position: relative;
list-style-type:none;
margin:0;
padding:0;
left: 10%;
}
.mainMenu li {
display:inline;
float: left;
margin-right: 1px;
}
.mainMenu li a {
display:inline-block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
.mainMenu li:hover a {
background: #19c589;
}
.mainMenu li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
z-index: 120;
}
/*Hover state for dropdown links*/
.mainMenu li:hover ul a:hover {
background: #19c589;
color: #fff;
}
.mainMenu li ul {
display: none;
}
.mainMenu li ul li {
display: block;
float: none;
}
.mainMenu li ul li a {
width: auto;
min-width: 140px;
padding: 0 20px;
}
.mainMenu ul li a:hover + .hidden, .hidden:hover {
display: block;
}
You have left marked at 10% on your menu ul which is causing your drop down content to become off-centered.
.mainMenu ul {
position: relative;
list-style-type:none;
margin:0;
padding:0;
left: 10%;
Changing left to 0; will straighten this out.
.mainMenu ul {
position: relative;
list-style-type:none;
margin:0;
padding:0;
left: 0;