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.
Related
I'm currently doing a bit of a redesign on my site and have run into a slight issue regarding a header div element and some child elements with a float: attribute.
My header is showing a height value of 0, and not calculating the contents itself correctly. I've done a bit of reading around and I understand that this is most likely down to floating elements within the navigation (in this case .desktoplinkitem).
My header code is as follows:
<div class="header videohead">
<div class="mobile-nav">
<div class="mobile-link-container">
<div class="mobile-links">
<li class="linkitem">Video</li>
<li class="linkitem">Stills</li>
<li class="linkitem">About</li>
<li class="linkitem">Contact</li> </div>
</div>
</div>
<div class="name logo">Name<br>Title</div>
<div class="right-nav">
<button class="mobilemenu mobilemenu--htx">
<span></span>
</button>
<div class="desktop-nav">
<ul>
<li class="desktoplinkitem">Contact</li>
<li class="desktoplinkitem">About</li>
<li class="desktoplinkitem">Stills</li>
<li class="desktoplinkitem">Video</li> </ul>
</div>
</div>
</div>
The CSS is styled like:
.header {
width: 100%;
position: absolute;
top: 0;
z-index: 600;
flex: none;
}
.videohead {
display: inline-block;
}
.desktoplinkitem {
visibility: inherit;
color: inherit;
background: none !important;
}
.linkitem {
visibility: inherit;
color: #FFFFFF;
transform: scale(2, 2) translateX(-100px);
opacity: 0;
}
.right-nav {
position: absolute;
right: 0%;
padding: 35px;
color: #000000;
text-decoration: none;
}
.right-nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
float: right;
}
.right-nav li {
display: inline;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 1em;
letter-spacing: 1px;
float: right;
}
I've tried to add a clear fix hack with no result (using the following):
.videohead:after {
content: " ";
display: table;
height: 0;
clear: both;
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}
The page can be seen here
Is there another way to approach this?
It is fixed by removing the position: absolute; from .logo.
You header stays empty because every child inside it has been positioned in a different way the either static or relative.
The floating could have been the issue if they were a direct child of .header
I have a navbar on my webpage, I have also got information on my webpage. When I remove the information (paragraph and headings) the navbar functions perfectly. However when I place the information back, the navbar doesn't work whatsoever. Why does a website do this? Thanks.
JSFiddle - With Information
JSFIDDLE - Without Information
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<title>CSGOMarble</title>
</head>
<body>
<h3 style="float: right; margin-right: 25px;">SIGN IN WITH STEAM</h3>
<div class="logo">
<img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<hr>
<div class="navbar">
<ul>
<li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li>
<li>COINFLIP</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="container">
<h2>CSGOMarble</h2>
<u><h3 style="font-size: 20px; margin-right: 750px; margin-top: 75px;">What is CSGOMarble?</h3></u>
<p style="font-size: 15px; margin-left: 478px; margin-right: 1000px; margin-top: 25px; text-align: justify;">CSGOMarble is a website which enables you to gamble your Counter-Strike skins so that you can try and turn a profit. We have many gamemodes, such as Coinflip, Roulette and Jackpot. Why not SIGN IN to test your luck?</p>
</div>
</body>
</html>
CSS:
body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
}
a {
text-decoration: none;
color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 175px;
background-color: #f1f1f1;
border: 2px solid #555;
}
li a {
display: block;
color: #000;
padding: 12px 0 12px 0;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
When you added position fixed to container , you can add z-index on both container and nav divs for fix this in your way as you want.
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
z-index: 2;
position: fixed;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
z-index: 1;
}
Change this Css Hope it helps
Do not use position:fixed unless you want the element to NOT SCROLL with the page. This css settings is great for headers (navbars) that remain fixed to the screen/window and are always visible.
The other one that is similar to position:fixed is position:absolute, except that it will scroll up as the user scrolls down the page. However, both absolute and fixed allow you to use top left right bottom to precisely position the element on the screen. (One tip: the parent element must be either position:absolute or position:relative (relative is common).
Change position:fixed to position:relative for the <div class="container">
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>
so basically I've got this code: HTML and CSS below, using bootstrap as well, and for some reason, it's not centred. It used to be, but at some point it wasn't anymore, now it pulls to the left. See image below. Any ideas?
<div class="row" id="nav-bar">
<div class="col-md-9">
<ul>
<li class="col-md-3 nav-btn" id="home">Home</li>
<li class="col-md-3 nav-btn" id="about">About</li>
<li class="col-md-3 nav-btn dropdown-toggle" id="games">
Games & Apps ▼
<div class="dropdown">
<ul>
<li>Games & Apps ▼</li>
<li id="first">Space Rodeo</li>
<li id="spaced">Boodya's Carpet Ride</li>
<li id="spaced">Ultimate Points Counter</li>
</ul>
</div>
</li>
<li class="col-md-3 nav-btn" id="blog">Blog</li>
</ul>
</div>
</div>
#nav-bar {
margin: 0px 0px 10px 0px;
height: 60px;
}
#nav-bar ul {
margin-top: 20px;
}
.col-md-3 a {
padding: 15px 40px 15px 40px;
font-size: 20px;
text-decoration: none;
text-align: center;
color: #B6B6B6;
}
#nav-bar a:hover {
color: #428bca;
}
.col-md-3 {
display: inline;
}
.col-md-9 {
float: none;
margin: auto;
left: 0;
right: 0;
}
.dropdown {
padding: 0;
margin-top: -48px;
position: absolute;
z-index: 10;
background-color: #ffffff;
box-shadow: -5px -5px 20px;
border-radius: 5px;
height: 210px;
width: 275px;
}
.dropdown ul {
padding: 0;
margin-top: 0;
}
.dropdown li {
list-style: none;
padding: 0;
width: 310px;
}
#games2 {
color: #428bca;
}
#spaced {
margin-top: 10px;
}
#first {
padding-top: 20px;
border-top: 1px solid black;
margin-top: 22px;
}
Showing result of code, the navbar is off centre
http://i.stack.imgur.com/smtTP.png
Your list items are display: inline which means they'll follow the alignment rules of text. Since you set no text-align, it defaults to the left. You can fix that by adding text-align: center to your ul so the contents will be centered.
Now the insides of the dropdown will also inherit that, you can reset that by setting text-align: left back on the dropdown ul again.
Also reset the left padding that ul has by default.
#nav-bar ul {
padding-left: 0;
text-align: center;
}
#nav-bar .dropdown ul {
text-align: left;
}
Works in this jsFiddle
I believe I have a very unique problem. I am trying to create a menu and basically I have some floated child div's inside the main menu holding div at the top of a web page. The problem is that I need to have the parent element have an automatic height because I want it to be dynamic just in-case I change the padding on the menu buttons (child DIV's). Also, the parent has a width of 100% and a child inside of it that has an automatic width with a max-width set so that I can basically have the left and right child menu buttons inside of it come together when the page is sized smaller. However all is working well until you resize the page to the point where the left right right menu portions come together, then all of the child menu buttons want to stack instead of automatically create a vertical scrollbar for the main page.
I don't know if this will pose a problem because I plan on using media queries later to automatically switch up the CSS for mobile compatibility. However, I would like to find a solution to this problem. If I need to post all of my code to get the right answer please let me know and I will do.
Thank you so much.
Oh and by the way, I have searched on a solution to this for about an hour and nothing is working. I may as well post the code below because I really want to find a solution.
The HTML:
<body>
<div id="header" class="clearfix">
<div id="wrapper">
<div id="main-nav" class="float-left">
<ul id="main-nav-menu" class="menu">
<li id="main-menu-button">
<a href="#" data-description="Since 1976">
Pardee Electric
</a>
</li>
</ul>
</div>
<div id="main-nav" class="float-right">
<ul ud="main-nav-menu" class="menu">
<li id="main-menu-button" class="float-right">
<a href="#">
Get in Touch
</a>
</li>
<li id="main-menu-button" class="float-right">
<a href="#">
Residential
</a>
</li>
<li id="main-menu-button" class="float-right">
<a href="#">
Commercial
</a>
</li>
<li id="main-menu-button" class="float-right">
<a href="#">
Industrial
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
The CSS:
/* body data */
body {
margin-top: 0px;
-webkit-font-smoothing: subpixel-antialiased;
background-color: #F0F0F0;
}
ul {
list-style: disc;
}
/* header data */
#header {
width: 100%;
height: auto;
background-color: #456DC0;
border-bottom: 1px solid #FFFFFF;
}
#wrapper {
width: auto;
max-width: 1024px;
height: auto;
background: none;
margin: 0 auto;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
margin-top: 0;
}
#main-nav-menu {
}
#main-nav {
width: auto;
height: auto;
position: relative;
}
#main-nav ul, #main-nav .menu {
margin: 0px;
}
#main-nav li {
width: auto;
list-style: none;
margin: 0px;
position: relative;
display: inline;
}
#main-nav a {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
padding: 15px 20px 15px 20px;
position: relative;
letter-spacing: 0px;
text-align: center;
text-decoration: none;
text-transform: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
display: block;
color: #F0F0F0;
z-index: 98;
-webkit-transition: background-color .2s ease, border .2s ease, color .4s ease, opacity .2s ease-in-out;
background-color: #4186D2;
}
#main-nav a:active {
background-color: #000000;
}
#main-nav a:hover {
background-color: #333333;
color: #FFFFFF;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
Demo in Jsfiddle
Hopefully the css posted OK. I am new to Stack.
Thanks again!
you need to give class="clearfix" to id="wrapper".