I am having some issues with z-index that I can't seem to be able to iron out. I've made sure that the relavant position atributes are set to relative, but my elements just won't play nicely.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="container" id="top">
<h1>Top</h1>
<div class="slideshow">
<ul class="nav">
<li class="prev">Previous</li>
<li class="next">Next</li>
</ul>
<ul class="slides" id="slides">
<li><img src="images/top_blue.gif" alt="Harley Davidson Sportster" /></li>
<li><img src="images/top_brown.gif" alt="Harley Davidson Sportster" /></li>
<li><img src="images/top_vanilla.gif" alt="Harley Davidson Sportster" /></li>
</ul>
</div>
</div>
</body>
</html>
And here my CSS:
body, h1, ul, li {
margin: 0; padding: 0; border: 0;
}
.container {
width: 800px; margin: auto;
position: relative;
}
.slideshow {
width: 800px; height: 50px;
position: relative;
}
.slideshow ul.nav {
list-style: none;
position: relative;
z-index: 100;
}
.slideshow ul.nav li.prev {
float: left;
}
.slideshow ul.nav li.next {
float: right;
}
.slideshow ul.nav li a {
display: block; width: 32px; height: 48px; text-indent: -9999px;
}
.slideshow ul.nav li.prev a {
background: url(images/arrow_prev.gif);
}
.slideshow ul.nav li.next a {
background: url(images/arrow_next.gif);
}
.slideshow ul.slides {
list-style: none;
position: relative;
top:0px;
height:50px;
}
Here my JSFiddle: http://jsfiddle.net/XPsn7/1/
Basically, the main images under have z-index of 5, and the arrow image should position in front of the slides, with z-index of 15. However, the navigation arrows cause the slides images to move right to make room for them.
What's going on?
The problem is your relative positioning. If you create a relative container with child elements that are absolutely positioned, you should be able to float the images as intended.
Related
i have athis code it is toggle the name after click on icon, i want to open drop down menu when click on this icon, i must to enter 2 times one to open the icon name and second to dropdown menu
`
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.dropbtn {
background-color: #3498db;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980b9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
</style>
<link rel="stylesheet" href="./inside.css">
</head>
<body>
<div class="positioner">
<div class="menu">
<div class="menu_item">
<input
class="toggle"
name="menu_group"
id="sneaky_toggle"
type="radio"
/>
<div class="expander">
<label for="sneaky_toggle"
><i class="menu_icon fa fa-user"></i>
<span class="menu_text">المفتش</span>
</label>
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"></button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches(".dropbtn")) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains("show")) {
openDropdown.classList.remove("show");
}
}
}
};
</script>
</body>
</html>
`
I JUST can add an select menu but i must click 2 times
i need to belick this picture when click on iconenter image description here
I have searched endlessly for a solution to centering my drop-down navigation bar on my website.
I have tried removing the code float: left code from my CSS and added the code display: inline-block: but nothing seems to be working. I have tried several solutions but they have either moved my navigation bar from the top or removed the background I have set for the navigation bar.
If I could get some help on centering the navigation bar without removing the navigation bar's background or displacing it, that would be great.
html {
background-image: url(../images/RL_bg.gif);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
li {
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rocket League</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<header>
<ul>
<li class="dropdown">
Homepage
<div class="dropdown-content">
What is Rocket League?
Gameplay
Platforms
</div>
<li class="dropdown">
Cars
<div class="dropdown-content">
Standard
Downloadable Content
Platform Exclusive
</div>
<li class="dropdown">
Online Content
<div class="dropdown-content">
Multiplayer
Competitve
</div>
<li class="dropdown">
Maps
<div class="dropdown-content">
Standard
Experimental
</div>
<li class="dropdown">
Crates
<div class="dropdown-content">
Item Customization
Trading
</div>
<li class="dropdown">
About Me
<div class="dropdown-content">
Purpose of This Site
About The Creator
</div>
</li>
</ul>
</header>
<body>
<h1></h1>
</body>
</html>
Your going to want to make a create a id for your ul's that does this tag around your entire list. Then you can use this for css.
#navmenu {
margin: 0 auto;
width: 500px;
}
#navmenu a {
width: 100px;
text-align: center;
}
So this will work if your using an inline list. Let me know if this solution is helpful at all, because we can custom taylor it to your css/html specifically.
it has been some time since I made my last webpage and it seems that I have forgot much. I cant resolve why the last item from the #menu ul goes to the next line while the #menu div is wide enough to contain all the list elements plus the logo div, it has margin and padding set to 0.
I used to do menus in such way before but have probably forgot something.
I searched for the solution however I cant make the things working right.
The question is..why arent the li items in one line? Whats causing the 850 px overlap when they all together should be 802px wide?
html, body {margin:0; padding:0}
body {background-image: url("./gfx/background.png"); background-position: 50%; background-repeat: no-repeat;text-align:center; background-color:#fff; font-family:Arial, Helvetica;width:100%}
.main-wrap {width:1000px; margin:0 auto}
#header {height:150px;width:1000px}
#logo {
display: block;
width: 150px;
height: 150px;
overflow: hidden;
color: #424242;
float:left;
margin: 0;
padding:0;
}
#logo span {
background: url("./gfx/logo-small.png");
z-index: 5;
display: block;
width: 150px;
height: 150px;
}
.wrap::before {
content: " ";
display: table;
}
.wrap::after{
clear: both;
content: " ";
display: table;
}
/*menu*/
#menu {width:849px;margin:0 0 0 0; padding:0px 150px 0 0}
#menu ul li {list-style: none;}
#menu ul li a {
z-index: 5;
position: relative;
float:left;
display: inline;
height: 31px;
overflow: hidden;
text-decoration: none;
color:#336699;
font-size: 20px;
margin: 0;
padding:0
}
#menu li a:hover,
#menu li a:focus {
height: 31px;
margin-top: 0;
color:#fff;
}
#menu li a span {
position: absolute;
top: 0;
left: 0;
display: block;
z-index: -1;
height: 31px;
cursor: pointer;
}
#menu li a:hover span,
#menu li a:focus span {
background: url("./gfx/menu-a.png");
background-repeat: no-repeat;
color:#fff;
}
#menu-1,
#menu-1 span {
background-position: 0 0;
width:119px;
}
#menu-1:hover span,
#menu-1:focus span {
background-position: 0px 0px;
}
#menu-2,
#menu-2 span {
width: 112px;
}
#menu li a#menu-2:hover span,
#menu li a#menu-2:focus span {
background-position: -119px 0px;
}
#menu-3,
#menu-3 span {
width: 128px;
}
#menu li a#menu-3:hover span,
#menu li a#menu-3:focus span {
background-position: -231px 0px;
}
#menu-4,
#menu-4 span {
width: 184px;
}
#menu li a#menu-4:hover span,
#menu li a#menu-4:focus span {
background-position: -359px 0px;
}
#menu-5,
#menu-5 span {
width: 149px;
}
#menu li a#menu-5:hover span,
#menu li a#menu-5:focus span {
background-position: -543px 0px;
}
#menu-6,
#menu-6 span {
width: 110px;
}
#menu li a#menu-6:hover span,
#menu li a#menu-6:focus span {
background-position: -692px 0px;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New web</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="main-wrap"> <!-- hlavni -->
<div class="wrap">
<div id="header">
<div id = "logo"><a href = "new_web/">
<span> </span>
</a></div>
<div id="menu">
<ul>
<li><a id="menu-1" href="new_web/about-us.html">About Us<span></span></a></li>
<li><a id="menu-2" href="new_web/services.html">Services<span></span></a></li>
<li><a id="menu-3" href="new_web/insurance.html">Insurance<span></span></a></li>
<li><a id="menu-4" href="new_web/meet-our-team.html">Meet Our Team<span></span></a></li>
<li><a id="menu-5" href="new_web/latest-news.html">Latest News<span></span></a></li>
<li><a id="menu-6" href="new_web/contact.html">Contact<span></span></a></li>
</ul>
</div>
</div>
</div>
<div id = "slider">
</div>
<div id = "main">
<!-- first page only -->
<div class="wrapper">
<div id="smart-boxes">
<div id="smart-box-1">
<p>"Change your thoughts and you chagne your world." <span>Norman Vincent Peale</span>
</p>
</div>
<div id="smart-box-2">
<p>High quality psychological services <a>read more...</a>
</p>
</div>
<div id="smart-box-3">
<p>We are a multidisciplinary treatment center <a>read more...</a>
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="wrapper">
<div id="footer-address">
<p>
</p>
</div>
<div id = "footer-links-1">
<p>
Contact Us<br />
FAQ <br />
</p>
</div>
<div id = "footer-links-2">
<p>
Terms of use<br />
Insurance<br />
Our Team<br />
</p>
<p class="ext-links">
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Thank you for your advices.
Allright, basic mistake: when positioning two elements using float property just beside each other one must have float:left (#logo) and the other muset go to right simple adding float:right to #menu did the thing (also removed the 150px padding-right).
I'm hoping someone can point me the right way. When I view my site in Dreamweaver, all of my divs line up correctly. That is to say, the text sits on the background next to the menu div. However, when I test in a browser, the text sits at the bottom, below the background image.
http://jsfiddle.net/sodisarmingdarling/Pr5AQ/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
html, body, .container {
width: 100%;
height: 100%;
margin: 0;
padding:0;
background-image:url(Background.gif);
background-repeat:no-repeat;
}
.menu {
padding: 70px 10px;
float: left;
}
li{
padding: 10px 20px;
margin: 0px 0;
list-style-type: none;
border: 0px;
}
.content{
padding: 130px 10px;
float: left;
font-family: "Letter Gothic Std Bold";
font-size: 16 pt;
color: #99CCFF;
}
</style>
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<li><a href = "#" ><img src="images/DarkLayout_03.gif" width="166" height="66" /></a></li>
<li><img src="images/DarkLayout_06.gif" width="166" height="66" /></li>
<li><img src="images/DarkLayout_08.gif" width="164" height="66" /></li>
<li><img src="images/DarkLayout_11.gif" width="164" height="66" /></li>
<li> <img src="images/DarkLayout_13.gif" width="166" height="66" /></li>
</ul>
</div>
<div class="content">
text text text
</div>
</div>
</body>
</html>
What I see in Dreamweaver:
What I get in the browser (tested in Safari, Chrome, and Mozilla):
In the CSS for the .content, change the float from left, to none.
Current CSS:
.content{
padding: 130px 10px;
float: left;
font-family: "Letter Gothic Std Bold";
font-size: 16 pt;
color: #99CCFF;
}
New CSS:
.content{
padding: 130px 10px;
float: none;
font-family: "Letter Gothic Std Bold";
font-size: 16 pt;
color: #99CCFF;
}
Here is a jsFiddle of it (using random images in the html), http://jsfiddle.net/FvAW4/
Whilst the current CSS works for small text, with larger text it forces the text to go underneath everything. Changing it to none will solve this.
Design view is intended as a viewport for you to work in, and not as a browser to test in (even though most content is displayed the same in browsers). Dreamweaver has an option to enable the Design view to render it as though it were a browser, however. This option is called the "Live" view, and it is the tab next to the Design view tab.
I would suggest you get used to using Live view, as it's quick and easy to display the page. But remember, sometimes Dreamweaver renders the page contents differently to that of browsers.
please help!
I cannot get it working, and i dont understand why.
It a simple code, but it just not working.
I want folder_image.png appear beneath folder.png thats all!
Thanks a lot!!!
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 136px;
height: 201px;
background: url(http://s-ola.me/img/folder.png) no-repeat;
z-index: 2;
position:relative;
}
.folder {
width: 136px;
height: 101px;
background: url(http://s-ola.me/img/folder_image.png) no-repeat;
z-index: 1;
position:relative;
}
.text {
}
</style>
</head>
<body>
<div class="container">
<div class="folder"></div>
<div class="text">text</div>
</div>
</body>
</html>
put this
<div class="folder" style="{z-index: 2};">
and take it out of the CSS
I made this solution but i dont like it. It didnt answered on my question.
<html>
<head>
<style>
#test{z-index:-10; position:relative;}
.container {
width: 136px;
height: 201px;
background: url(http://s-ola.me/img/folder.png) no-repeat;
position: relative;
margin:0 auto;
}
.folder {
width: 136px;
height: 101px;
background: url(http://s-ola.me/img/folder_image.png) no-repeat;
z-index:-1;
position:relative;
}
.text {
margin:0 auto;
position:relative;
margin-left:40px;
}
</style>
</head>
<body>
<div id="test">
<div class="container">
<div class="folder"></div>
<div class="text">text</div>
</div>
</div>
</body>
</html>