This is my image-button for my website. http://puu.sh/cK7Sf/6309c39cdb.jpg When I re-size my browser it goes over here http://puu.sh/cK7VU/f17dafcc41.jpg
Here is my code
HTML
<div class="Nav">
<div id="buttons">
<div id="home_button"></div>
CSS
#home_button {
background-image: url("home.png");
background-repeat:no-repeat;
background-size: 100%;
width: 150px;
height: 60px;
position: absolute;
top: 196px;
left: 502px;
z-index: 10;
}
Keep in mind i am new to css and html, please dont hate
You should not use absolute position for this. Change it to position: relative; or position: static; The absolute positioning is causing the button to shift by the coordinates (top: 196px; left: 502px;) from the edge of the browser window.
I suggest researching the float property as well, because it's very useful in positioning things so that they flow nicely, especially for navigation like this.
You really should try to use lists for navigation. Here I made a quick-hand example. Further, you could easily recreate your button with CSS. So no need to use background-image
.nav-container {
background: #CCC;
width: 80%;
position: relative;
margin-left: auto;
margin-right: auto;
}
.nav {
padding: 10px;
}
.nav-item {
display: inline-block;
padding: 10px;
background: linear-gradient(#68B6E7,#3349D3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#68B6E7,endColorstr=#3349D3);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#68B6E7,endColorstr=#3349D3)";
font-family: Verdana, sans-serif;
border: 2px solid #000;
border-radius: 4px;
}
.nav-item a {
text-decoration: none;
color: #000;
}
<div class="nav-container">
<ul class="nav">
<li class="nav-item">Item 1
</li>
<li class="nav-item">Item 1
</li>
<li class="nav-item">Item 1
</li>
<li class="nav-item">Item 1
</li>
</ul>
</div>
Related
This question already has an answer here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Closed 1 year ago.
I'm new to HTML/CSS and am building a simple test site. Currently, I am trying to get sticky positioning to work. Specifically, I have a title/logo area with a toolbar underneath. As you scroll down, I want the title to scroll away, but the toolbar to scroll until it reaches the top of the page, where it'll remain.
I've tried removing all size adjustments, padding, and margins. I read that height adjustments can cause problems, so I thought I'd try all of those. I don't have any overflow either. I also tried putting the sticky position on all of the different elements. It's still not working and I don't understand why.
Any advice would be greatly appreciated. Thanks!
My code:
h1 {
background-color: lightblue;
text-align: center;
}
.toolbar {
border: 3px double black;
background-color: coral;
padding: 5px;
text-align: center;
width: 80%;
max-width: 650px;
margin: auto;
position: sticky;
top: 0px;
margin: auto;
}
main {
height: 200vh;
}
a {
display: inline-block;
color: black;
background-color: lightblue;
list-style-type: none;
border: 1px solid black;
width: 100px;
font-size: 20px position:sticky;
}
a:link {
text-decoration: none;
color: red;
}
<header>
<h1>Title Area</h1>
<h2>"Awesome Tagline!"</h2>
<hr>
</header>
<nav>
<ul class="toolbar">
<a href="">
<li>Home</li>
</a>
<a href="">
<li>About</li>
</a>
<a href="">
<li>Menu</li>
</a>
<a href="">
<li>Other</li>
</a>
</ul>
</nav>
<main></main>
position: sticky; will scroll for the parents height, so for you it will be for as long as nav is present on the screen. So in your case you need to put the position: sticky; on the <nav class="some-class">...</nav>.
Not sure if that was your correct html but you are missing the <body> element.
This doesnt work because the .toolbar is a child element of the <nav> tag. A sticky element it must stay within its parent. if the parent leaves the screen, so does the child element (.toolbar). Move the sticky property to the <nav> tag:
Delete this line:
.toolbar { position: sticky; top: 0; }
Add this line:
nav { position: sticky; top: 0; }
h1 {
background-color: lightblue;
text-align: center;
}
.toolbar {
border: 3px double black;
background-color: coral;
padding: 5px;
text-align: center;
width: 80%;
max-width: 650px;
margin: auto;
margin: auto;
}
nav {
position: sticky;
top: 0px;
}
main {
height: 200vh;
}
a {
display: inline-block;
color: black;
background-color: lightblue;
list-style-type: none;
border: 1px solid black;
width: 100px;
font-size: 20px position:sticky;
}
a:link {
text-decoration: none;
color: red;
}
<header>
<h1>Title Area</h1>
<h2>"Awesome Tagline!"</h2>
<hr>
</header>
<nav>
<ul class="toolbar">
<a href="">
<li>Home</li>
</a>
<a href="">
<li>About</li>
</a>
<a href="">
<li>Menu</li>
</a>
<a href="">
<li>Other</li>
</a>
</ul>
</nav>
<main></main>
I want to code a navigation bar for my website. It should support a mobile and a desktop view. Now I want to add a div in nav and it doesn't work, but when I analyse it with inspecting element in firefox and refresh the site it works. Can anyone help me?
Here is a code-snippet of the nav:
/* Here is the css declaration of the drop class: */
.drop {
width: 50px;
height: 50px;
background-color: #FFFFFF;
cursor: pointer;
display: block;
position: absolute;
right: 0;
top: 0;
}
<nav class="nav" id='navigation'>
<ul style="font: normal 14px Tauri, serif ">
<li style="float: left; border: none ">
<a href='index.php'>test</a>
</li>
<button class="drop"></button>
Actually there is a "nav" but it got no height.
I did a Fiddle where I added some height and a background color, also removing margin to the body, check this out!
https://jsfiddle.net/tu9rh3sg/
This for the HTML (I've just closed the nav):
<nav class="nav" id='navigation'>
<ul style="font: normal 14px Tauri, serif ">
<li style="float: left; border: none ">
<a href='index.php'>test</a>
</li>
<button class="drop"></button>
</nav>
And this for the CSS (height + background-color+margin);
.drop {
width: 50px;
height: 50px;
background-color: #FFFFFF;
cursor: pointer;
display: block;
position: absolute;
right: 0;
top: 0;
}
.nav {
background-color: black;
height: 50px;
}
body {
margin: 0 auto;
margin-top: -14px;
}
Tell me if it help ! ☻
This is my html code below:-
.header {
background-color: #b6b4b4;
padding: 5px;
}
.logo {
border-radius: 30px;
float: left;
}
#social {
width: 50px;
border-radius: 100%;
float: right;
}
.navigatbar {
margin-top: -16px;
}
#navigat {
display: inline;
color: #b6b4b4;
font-size: 21px;
font-family: 'Poppins', sans-serif;
margin: 0 10px;
padding: 0 3px 0 3px;
}
.topnav {
background: #ffffff;
}
a {
color: #2ad2c9;
}
.active {
background-color: #e8e8e8;
}
.droplinks {
position: absolute;
background-color: #ffffff;
min-width: 140px;
display: none;
}
.droplinks a {
padding: 10px;
display: block;
}
.dropbutton:hover .droplinks {
display: block;
}
<body link="#008080" vlink="#66b2b2">
<div class="header">
<img src="images/logo.jpg" class="logo">
<img src="slike/yt.png" id="social">
<img src="slike/ig.png" id="social">
<img src="slike/fb.png" id="social">
</div>
<div class="navigatbar">
<ul class="topnav">
<li class="active" id="navigat">Početna</li>
<li class="dropbutton" id="navigat">Fitnes
<div class="droplinks">
Treninzi
Dijagnostika
</div>
</li>
<li id="navigat">Školica sporta</li>
<li id="navigat">Boks</li>
<li id="navigat">Personalni treninzi</li>
<li id="navigat">Ishrana i zdravlje</li>
<li class="dropbutton" id="navigat">Prevencija i rehabilitacija
<div class="droplinks">
Prevencija
Rehabilitacija
Kiropraktika
Kinezitejping
</div>
</li>
<li id="navigat">Kontakt</li>
</ul>
</div>
</body>
Now, here is the problem: my dropdown menus work, but both of them open on the left side of the navigation bar, under the first element. Where have I gone wrong?
I've tried to add some margin-left and it works, butthe problem is that it moves both of them for the same amount of pixels, and they're still opening on the same place. I could give different classes to them and add them a different margin-left, but I'm kind of sure that that is not the only possible solution.
Can anyone help me, please?
Change your CSS in 2 places:
#navigat {
display: inline;
color: #b6b4b4;
font-size: 21px;
font-family: 'Poppins', sans-serif;
margin: 0 10px;
padding: 0 3px 0 3px;
position: relative; /* add this line */
}
.droplinks {
position: absolute;
background-color: #ffffff;
min-width: 140px;
display: none;
left: 0; /* add this line */
z-index: 1; /* add this line */
}
Add this to your css
.dropbutton { position: relative; }
Absolutely positioned elements are positioned relative to their first ancestor that have a non-static position. position: static is the default for all elements, unless otherwise supplied.
That means in your case, the drop down menus are both positioned relative to the body of the document. What you want, is to position them relative to the button that triggers them. The above suggestion should take care of that.
Also, use left, top, right and bottom instead of margin to position your dropdowns.
I am trying to capture a layout that I have seen a few different places. The layout has a fixed header with an image centered, and then a horizontal UL that is split around the logo. Attached is the image that I feel represents this.
I need a suggestion to achieve splitting the UL around logo. Right now the UL is always under and not split.
http://jsfiddle.net/jgac8/1/
Here is some markup that I have been attempting:
HTML
<header>
<h1 id="logo"></h1>
<nav>
<ul>
<li>about</li>
<li>services</li>
<li>location</li>
<li>contact</li>
</ul>
</nav>
</header>
CSS
header {
width: 100%;
height: 150px;
text-align:center;
position: fixed;
top: 0;
left: 0;
background:#FF7D0D;
border-bottom: 1px solid #CCC;
z-index:100;
}
#logo {
display: inline-block;
padding:5px 0 0 0;
width: 80px;
height: 150px;
background: url(../img/PP_Logo_Vert_White.png) center no-repeat;
}
nav {
padding: 0px;
margin: 0px;
font-size:16px;
font-weight: 100;
clear:left;
}
nav ul {
padding: 0px;
margin: 0px;
list-style: none;
}
nav li {
display: inline-block;
padding: 0 50px;
}
You might have to do a bit of tweaking but I believe it is what you want.
HTML
<header>
<h1 id="logo"></h1>
<nav id="left">
<a href="#" ></a>
<ul>
<li>about</li>
<li>services</li>
</ul>
</nav>
<nav id="right">
<a href="#" ></a>
<ul>
<li>about</li>
<li>services</li>
</ul>
</nav>
</header>
CSS
header {
width: 100%;
height: 150px;
text-align:center;
position: fixed;
top: 0;
left: 0;
background:#FF7D0D;
border-bottom: 1px solid #CCC;
z-index:100;
}
#logo {
display: inline-block;
padding:5px 0 0 0;
width: 80px;
height: 150px;
background: url(http://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png) center no-repeat;
}
#left{position:absolute; left:10%; top:5px; list-style:none}
#right{position:absolute; right:10%; top:5px; list-style:none}
li{list-style:none}
There are many ways to go about this. Depending on how dynamic your site will be. If you are creating it with static html and css I would simply create a container, put three divs inside the container splitting it up how you want. In the first and third div create two separate menus. In the center put the logo. Something like the code below. At a certain width you can create some css media queries to bring it down and make it one navigation.
The very basic idea:
Example of html:
<div class="container">
<div class="left-nav">
</div>
<div class="logo">
</div>
<div class="right-nav">
</div>
</div>
Example CSS:
.container {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.left-nav {
float: left;
width: 400px;
}
.right-nav {
float: left;
width: 400px;
}
.logo {
float: left;
width: 200px;
}
Today I am wondering how to align text horizontally. us.mineplex.com The forums, shop, title, etc are aligned perfectly and horizontal. How do they do that? I tried to figure it out my self and need some help, Thanks.
CSS:
.header_container{
width: 100%;
height: 185px;
background-color: black;
}
.navtabscontainer{
background-color: #6ED16E;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
border: solid;
border-color: blue;
position: relative;
top: 180px;
height: 75px;
text-align: center;
list-style: none;
}
.headerlogo{
background-image: url('logo.png');
}
.divider{
height: 49;
width: 3px;
background-color: white;
position: absolute;
left: 109px;
top: -16px;
}
.navtabs{
color: white;
text-decoration: none;
font-size: 20px;
position: absolute;
left: 50px;
top: 30px;
list-style-type: none;
text-align: center;
}
* {
margin: 0;
}
.textip{
border: solid;
border-color: blue;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
color: red;
font-size: 20px;
position: absolute;
right: 300px;
top: 100px;
}
HTML:
<html>
<head><title>Minetage</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header_container">
<h3 class="textip">Server IP: Minetage.com</h3>
<div class="header_logo">
<div class="navtabscontainer">
<ul class="navtabs">
<li href="Games">Games</i>
<li class="divider"></li>
<li href="Games">Forums</i>
<li class="divider"></li>
<li href="Games">Home</i>
<li class="divider"></li>
<li href="Games">Leaderboards</i>
<li class="divider"></li>
<li href="Games">Contact</li>
</ul>
</body>
</html>
You can make your list appear inline like this:
.navtabs li {
display:inline;
}
This way you won't need the empty list items as dividers.
If you want to space them out, add left/right padding or margins to the anchor inside (which you'll need anyway if it's a menu).
<ul class="navtabs">
<li>Games</i>
<li>Stuff</i>
</ul>
then
ul.navtabs li a {
display:block;
padding: 0 2em;
}
Assigning display:inline; to the list item, then display:block; to the anchor within allows styling the link without needing 'display:inline-block', which causes issues with older versions of IE
Also, 'href' is an attribute for anchors <a>, not list items <li>. If you click a <li>; with a href attribute, it won't do anything.
You need to display the list inline. The following should work:
.navtabs li {
display:inline-block;
}
Your problem is that li are by default set to display: block;
This style makes the width as wide as its parent element.
To fix this, give all the li tags the style display: inline-block.
Example jsfiddle
Add this to your CSS
.navtabs li
{
float:left;
display:inline-block;
padding-left:5px;
}
Float:left this floats the li element to the left
display:inline-block; Click here to know about Display properties
Fiddle
Output: