i'm trying to creat a side menue.
and im not sure what is the best way to do this.
my question is how to pin the menu to the upper part of the screen?
thank you :)
this is the HTML
<!--menu-->
<div class="menu">
<div class="option" align="center">
<ul>
<li>דף הבית</li>
<li>צור קשר</li>
<li>בלוג</li>
<li>מי את גברת?</li>
</ul>
</div>
</div>
<!--endmenue-->
the CSS
div.menu{
position: fixed;
width: 20%;
height: 100%;
background: black;
right: 0;
}
div.option{
padding-top: 50%;
padding-bottom: 50%;
}
div.option a{
text-decoration: none;
}
div.option ul{
list-style-type: none;
text-align: center;
font-family: alef;
font-weight: 700;
color: white;
line-height: 400%;
margin: 0;
padding: 0;
}
Try this:
div.menu{
position: fixed;
width: 20%;
height: 100%;
background: black;
right: 0;
top: 0; // added this
}
I added top:0 which attaches the element to the top of it's parent
In your CSS I would add
*{
margin: 0px;
padding: 0px;
}
This will help with pesky unwanted margin and padding
I guess you need this?
div.menu{
position: fixed;
width: 100%;
background: black;
right: 0;
}
div li{
display: inline-block;
margin-right: 10%;
}
div.option a{
text-decoration: none;
}
div.option ul{
list-style-type: none;
text-align: center;
font-family: alef;
color: white;
line-height: 200%;
margin: 0;
padding: 0;
}
See here JsFiddle
Related
I'm having two problems with this CSS code, and I'm needing a second set of eyes to help me look at it.
1.I'm trying to move my text up a bit while not moving the image inside of my navbar. Everything should look centered in the navbar, but the text seems to be offset and I'm not sure how to fix it. My only understanding of fixing vertical alignment is through padding, but that would also impact the image.
I'm trying to make the hover-over effect dynamic and resize according to window height, but I seem to be having trouble accomplishing this.
Codepin: https://codepen.io/dansbyt/pen/ZEWvZwJ
CSS in question:
.navbar{
top: 0;
left: 0;
width: 100%;
height: 56px;
z-index: 10;
position: fixed;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
.navbar_links{
margin-left: 22%;
position: absolute;
width: 78%}
.navbar_links a{
padding: 2%;
display: block;
float: left;
font-family: 'Archivo', sans-serif;
font-size: x-large;
text-decoration: none;
color: white;}
.navbar_links a:hover {background-color: #3F5328}
How about this:
.navbar {
top: 0;
left: 0;
width: 100%;
height: 56px;
z-index: 10;
position: fixed;
background-color: #5B7042;
border-bottom: 4px solid #3F5328;
}
.navbar_links {
margin-left: 22%;
position: absolute;
width: 78%;
}
.navbar_links a {
line-height: 56px;
display: flex;
float: left;
font-family: 'Archivo', sans-serif;
font-size: x-large;
text-decoration: none;
color: white;
}
.navbar_links a:hover {
transform: scale(1.05);
}
p {
margin-block-start: 0;
margin-block-end: 0;
}
<div class="navbar">
<div id="computer" class="navbar_links">
<img src="http://mrdansby.com/projects/dash_icon.png"> Dash
</div>
</div>
add span to text and style to it and use rem instead % for navbar_links a padding
.navbar{
top: 0;
left: 0;
width: 100%;
height: 56px;
z-index: 10;
position: fixed;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
.navbar_links{
margin-left: 22%;
position: absolute;
width: 78%}
.navbar_links a{
padding: 1.2rem;
display: block;
float: left;
font-family: 'Archivo', sans-serif;
font-size: x-large;
text-decoration: none;
color: white;}
.navbar_links span{ position:relative; bottom:5px; }
.navbar_links a:hover {background-color: #3F5328}
<div class="navbar">
<div id="computer" class="navbar_links">
<img style="width:30%" src="http://mrdansby.com/projects/dash_icon.png"> <span>Dash</span>
this time I hope i'll be able to format the question better and I apologize if the latter is trivial, but I'm a beginner in html and css. I'd need help with a header, which needs to be as in the picture: made of a background image cut into two halves by a white bar where the navigation bar(right) and the title (left) stand. The title has another background image shaped as a half-moon.Since I couldn't find an acceptable way to make the half-moon appear as a background-image of the div where I put the title, I made another div with the half-moon as a background-image and I gave this div a relative position, working on top, right and left so to make it fit in the right place. However, I don't know how make the text show up in front of everything. Also if I make the browser window smaller the halfmoon moves around the page. Is there something I can do to make things better?
my try is below. Thanks in advance for any help.
html, body *{margin: 0; box-sizing: border-box}
h1, h2, h3, h4, h5 {
font-family: 'Play', sans-serif;
color: #c76161;
}
#header {
background: url("http://i65.tinypic.com/t8vzp2.jpg") 100% no-repeat;
background-position: center center;
position: fixed;
right: 0;
left: 0;
top:0;
display: block;
width: 100%;
height: 14.37em;
}
#testo-header{
background-color: white;
height: 70px;
width: 50%;
position: absolute;
top: 80px;
left: 0;
text-align: center;
line-height: 70px;
z-index: 2;
}
#mezzaluna{
background-image: url(http://i63.tinypic.com/w72ag6.png);
background-repeat: no-repeat;
height:90px;
position: relative;
bottom: 67px;
left: 180px;
z-index: 1;
}
ul#nav {
background-color: white;
height: 70px;
width: 50%;
position: absolute;
top: 80px;
right: 0;
font-family: sans-serif;
font-size: 1em;
font-weight: bold;
list-style-type: none;
line-height: 35px;
display: block;
}
ul#nav li {
float: left;
text-align: center;
vertical-align: text-top;
padding: 20px;
}
ul#nav li a {
text-decoration: none;
color: #3a7777;
}
ul#nav a:hover {
color: #f5af33
}
bodybody>
<div id="header">
<div class="wrap">
<div id="testo-header">
<h1>Rosso Pomodoro</h1>
<div id="mezzaluna"></div>
</div>
<ul id="nav">
<li>Home</li>
<li class="active">Ricette</li>
<li>Categorie</li>
<li>Blog</li>
<li>Contatti</li></li>
</ul>
</div>
Not sure what you are planning on doing with that but you could do this. It would be better if you tell us what you expect to get! But so far this is what you are trying to do!
html, body *{margin: 0; box-sizing: border-box}
h1, h2, h3, h4, h5 {
font-family: 'Play', sans-serif;
color: #c76161;
}
#header {
background: url("http://i65.tinypic.com/t8vzp2.jpg") 100% no-repeat;
background-position: center center;
position: fixed;
right: 0;
left: 0;
top:0;
display: block;
width: 100%;
height: 14.37em;
}
#testo-header{
background-color: white;
height: 70px;
width: 50%;
position: absolute;
top: 80px;
left: 0;
text-align: center;
line-height: 70px;
z-index: 2;
}
#testo-header h1:before{
content: '\0020';
background-image: url(http://i63.tinypic.com/w72ag6.png);
background-repeat: no-repeat;
background-color: #ff0000;
width: 75%;
height:100%;
display: block;
position: absolute;
top: 50%;
left: 12.5%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
z-index: -1;
}
ul#nav {
background-color: white;
height: 70px;
width: 50%;
position: absolute;
top: 80px;
right: 0;
font-family: sans-serif;
font-size: 1em;
font-weight: bold;
list-style-type: none;
line-height: 35px;
display: block;
z-index: 5;
}
ul#nav li {
float: left;
text-align: center;
vertical-align: text-top;
padding: 20px;
}
ul#nav li a {
text-decoration: none;
color: #3a7777;
}
ul#nav a:hover {
color: #f5af33
}
bodybody>
<div id="header">
<div class="wrap">
<div id="testo-header">
<h1>Rosso Pomodoro</h1>
</div>
<ul id="nav">
<li>Home</li>
<li class="active">Ricette</li>
<li>Categorie</li>
<li>Blog</li>
<li>Contatti</li></li>
</ul>
</div>
As part of a school project I am trying to create my first webpage. I am however stuck on this issue where my navigation bar moves down the page when I place a logo in the top bar and center it. I wonder if anyone could help?
JS Fiddle: https://jsfiddle.net/3k65c20u/
Here is my code:
#header {
height: 200px;
width: 100%;
background-color: black;
}
#top-bar {
background-repeat: repeat-x;
position: absolute;
left: 0;
width: 100%;
height: 200px;
padding: 0px;
margin: 0px;
}
//Top Navigation Bar//
.navigation-bar {
background-color: black;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 250px;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.navigation-bar ul {
padding: 210px;
margin: 0px;
text-align: center;
}
.navigation-bar li {
list-style-type: none;
padding: 8px;
height: 24px;
margin-top: 30px;
margin-bottom: 4px;
display: inline;
}
.navigation-bar li a {
color: gray;
background-color: black;
font-size: 13px;
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
box-shadow: 0px;
border-radius: 3px;
padding-right: 1em;
padding-left: 1em;
line-height: 2em;
margin-right: 16px;
}
.navigation-bar li:first-child {
margin-left: 20px;
border: #C00;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="feistybite.css">
<div id="header">
<div id="top-bar"></div>
<div class="navigation-bar">
<img src="strikerlogo.png" class="center">
<div id="navigation-container" class="cf">
<ul>
<li>Miten se toimii
</li>
<li>Osta
</li>
<li>Tarina
</li>
<li>Meistä
</li>
<li>Uutisia
</li>
</ul>
</div>
</div>
</head>
<body>
</body>
</html>
not sure what design you want achieve, but i just changed the navigation bar position to relative, and the image to absolute, so... set left to 50% and using the CSS property transform: translateX(-50%); the image is finally centered
https://jsfiddle.net/3k65c20u/1/
Remove the padding: 210px at the .navigation-bar ul rule!
change css in ul to, removing padding:210px;
.navigation-bar ul {
margin: 0px;
text-align:center;
}
I'm trying to design my nav (4 items in total) to be in circles each spaced about 20 px apart, located on the top right of my screen. I got everything to "work" design wise, however, now that every nav item appears how I want it (in its own a circle), when I go to have them all positioned on the upper right the first 3 nav items have disappeared and only the 4th nav item is visible. Please help!
HTML:
<div id="nav">
<ul>
<li> The Story </li>
<li> Design </li>
<li> Specs </li>
<li> Gallery </li>
</ul>
</div>
CSS:
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
position: absolute;
top: 50px;
right: 100px;}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 20%;
margin: 15%;
}
What about this:
#nav{
position: absolute;
top: 50px;
right: 100px;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
}
ul {
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 120px;
float: left;
}
<div id="nav">
<ul>
<li> The Story </li>
<li> Design </li>
<li> Specs </li>
<li> Gallery </li>
</ul>
</div>
Try:
#nav{
position: absolute;
top: 50px;
right: 100px;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 20%;
margin: 15%;
}
It's because your navbutton elements have position: absolute so they overlap each other, i.e. only the last one is visible.
Try this snippet:
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
position: relative; /* ADDED */
}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 20%;
margin: 20px;
}
<div id="nav">
<ul>
<li> The Story </li>
<li> Design </li>
<li> Specs </li>
<li> Gallery </li>
</ul>
</div>
If you want the navigation to be in the top right corner of the page use this CSS:
#nav {
position: absolute;
top: 0;
right: 0;
}
#nav li {
display: inline-block;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
position: relative; /* ADDED */
}
ul {
width: 50x;
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
width: 100px;
margin: 20px;
}
#nav{
position:absolute;
top: 50px;
right: 100px;
}
.navbutton {
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 14px;
color: #ffffff;
line-height: 108px;
text-align: center;
background: #4FA5B1;
}
ul {
padding: 0;
margin: 0;
overflow: auto;
list-style-type: none;
}
li {
margin: 20px;
float:left;
}
I am trying to move an LI Nav bar to the top right of a page, however when I position: absolute; and top: 0; on my <li> I get my list which is also display: inline; all stacked on top of each other. They go to the part of the screen I want because I'm also float: right; but they won't stay in a line.
Any ideas?
HTML(html and doctype and link tags left out, they're there):
<div id="search">Google Search</div>
<div id="lucky">I'm feeling lucky</div>
<form>
<input id="search_box" type="text" name="">
</form>
<ul>
<li class='nav'>+You</li>
<li class='nav'>Gmail</li>
<li class='nav'>Images</li>
</ul>
CSS:
#search {
font-family: Arial;
font-size: 10;
font-weight: bold;
border: 1px solid black;
width: 7.2em;
white-space: nowrap;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
margin: 240px 14px 100px 225px;
display: inline-block; }
#lucky {
font-family: Arial;
font-size: 10;
font-weight: bold;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
border: 1px solid black;
display: inline-block; }
#search_box {
width: 600px;
position: absolute;
left: 65px;
top: 212px; }
ul {
list-style-type: none;
margin: 0;
padding: 0; }
.nav {
display: inline-block;
float: left;
padding: 20px;
position: absolute; }
The li's are stacked on top of each other because you are absolute positioning them to the same place. You want to make the ul absolute positioned instead. Include the code below in your css and for good measure you should also tell include something that it is positioned relative to.
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
}
.nav {
display: inline-block;
/* float: left;*/
padding: 20px;
/*position: absolute;*/ }
body{position: relative;}
Try this http://jsfiddle.net/csdtesting/oe55maf0/2/
Added #header :
#header{
float:right;
}
and removed position:absolute; from .nav class .Also added #content :
#content{
position:absolute;
}
to contain the form .
Now the structure is clear.
Hope this helps!