I've been trying to get multiple background images on my page but I couldn't get more than 2, so I started to think that I might use divs instead. But when I use divs I got like 5 white pixels left at the top and and sides of the screen, that was until I changed the position to absolute but then my navbar was stuck behind the div... If anyone could please help me fixing my issue.
My code isn't that good, but this is what I have at the moment:
#P1Tekstvlak1_1 {
background-image: url("DakB1.jpg");
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
/** — Navbar —*/
#nav {
color: FFFFFF;
opacity: 0.9;
}
#nav_wrapper {
width: auto;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
min-width: 200px;
text-align: center;
background-color: #B50B26;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
color: white;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
}
#nav ul li a,
visited {
color: #FFFFFF;
font-size: 20px;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>Over</li>
<li>Renovatie</li>
<li>Nieuwbouw</li>
<li>Vacatures</li>
<li>WKA</li>
<li>Contact</li>
</ul>
</div>
</div>
Remove the absolute positioning and then apply a CSS reset like the one here . Browsers have some styling attributes it applies by default for accessibility purposes. You should remove them. I do this before starting to build any web UI.
Note: Absolute positioning will stack elements versus applying layout to them. That is why you are seeing it behind your NAV
Related
I have 2 navs inline, and one of them is floating on the right side:
2 navs
I would like to center the text in the first nav but to the center of the screen instead of the nav itself. I thought that the easiest way to solve this would be to make the 2 navs overlap but I'm not sure. I was wondering if anyone could help me solve this problem?
header {
font-size: 10px;
letter-spacing: 1.025px;
background-color: black;
padding: 1em;
}
header>nav:nth-child(1) {
float: right;
background-color: red;
padding: 1em 1em 1em 1em;
}
header nav {
color: white;
text-align: left;
}
header nav ul {
list-style: none;
display: inline-block;
position: relative;
padding: 0;
}
header nav ul li {
display: inline;
padding-left: 1em;
padding-right: 1em;
}
<header>
<nav>
MAGYAR |
ENGLISH
</nav>
<nav>
<ul>
<li>RÓLAM</li>
<li>ZENE</li>
<li>GRAFIKA</li>
<li>JÁTÉKFEJLESZTÉS</li>
</ul>
</nav>
</header>
You want the nav items to be centered in the bar, ignoring the width of the nav element to the right?
One way would be to use absolute positioning on the red nav to remove it from the flow of the page. By removing it from the flow, it's width/height will be ignored so you can center the rest of the items in the nav based on the whole screen.
Add some positioning to the red nav and make sure you set the header to be position: relative. Finally, change the text-align to center.
Be aware: By removing the red nav from the flow, it's possible that the other nav items may overlap the red nav depending on the screen size. Make necessary adjustments with media queries or some other solution.
header {
font-size: 10px;
letter-spacing: 1.025px;
background-color: black;
padding: 1em;
position: relative;
}
header>nav:nth-child(1) {
position: absolute;
top: 1em;
right: 1em;
bottom: 1em;
background-color: red;
padding: 1em 1em 1em 1em;
}
header nav {
color: white;
text-align: center;
}
header nav ul {
list-style: none;
display: inline-block;
position: relative;
padding: 0;
}
header nav ul li {
display: inline;
padding-left: 1em;
padding-right: 1em;
}
<header>
<nav>
MAGYAR |
ENGLISH
</nav>
<nav>
<ul>
<li>RÓLAM</li>
<li>ZENE</li>
<li>GRAFIKA</li>
<li>JÁTÉKFEJLESZTÉS</li>
</ul>
</nav>
</header>
I'm probably doing something wrong here. Here's my code for it:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #000066;
z-index: 1;
}
.header {
position: fixed;
top: 0;
width: 100%;
overflow: auto;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .droptn {
background-color: #ccb3ff;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ccb3ff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block, flex;
flex-flow: column;
justify-content: space-evenly;
flex-grow: 2;
text-align: left;
z-index: 3;
}
.dropdown-content a:hover {background-color: white; color: #000066;}
.dropdown:hover .dropdown-content {display: block;}
<ul class="header">
<li>Home</li>
<li>About Us</li>
<li>Request a Quote</li>
<li>Colors</li>
<li class="dropdown">Products
<div class="dropdown-content">
Address Blocks
Balls and Finials
Columns
Coping (Wall Caps)
Custom Products
Fireplaces
Lawn Edgers and Tree Rings
Panel System
Patio Stones and Pavers
Parking Bumpers
Pier (Pillar) and Tier Caps
Quoins
Sills and Lintels
Splash Blocks
Window and Door Trim (Surrounds)
Wainscots
</div>
</li>
</ul>
When my dropdown displays, it appears in the header with a tiny scrollbar, and it doesn't drop down out of the header. I know I'm probably an idiot, and this is likely a super easy fix. A picture of what I'm talking about. I've obviously tried messing with the z-indexes of the elements. It didn't do anything. I've googled my little fingers off, and I've been trying things out. Nothing is working. I'm a dummy, I know.
The issue you are having is that the overflow is set to auto, thus causing the scroll bar to appear when hovering over the dropdown and being larger than the allocated space. To resolve this, remove overflow:auto from header and ul.
See this fiddle for the working example.
https://jsfiddle.net/tdz018ug/
I have a horizontal navigation menu using unordered lists. Under the menu there is a straight gray line which has to have 100% width of the parent container. When hovering the list elements, the part of the line has to be colored blue right under the list element. I can't find any suitable way of doing this. I got it working with position:relative and adding top:14px but it isn't really satisfying me since any changes to the font size or font face will destroy everything. I also thought about changing margins between elements to padding, increasing li's height and giving each one the same gray border and just changing it's color on hover, but I need the line to go all along the parent div's width.
How it has to look:
expected result
My current code:
#container {
width: 80%;
margin: auto;
background-color: white;
}
#container ul {
list-style-type: none;
display: inline-block;
margin: 0;
padding: 0;
margin-top: 5px;
margin-bottom: 10px;
}
#container ul li {
float: left;
margin-left: 20px;
}
#container ul li:first-child {
margin-left: 0;
}
#container ul li a {
text-decoration: none;
color: black;
}
#container ul li a:hover {
color: grey;
}
#container #slider {
display: inline-block;
height: 5px;
background-color: #f1f1f1;
width: 100%;
}
<div id="container">
<ul>
<li>INDEX</li>
<li>HELP</li>
<li>LONG LINK TEXT</li>
</ul>
<span id="slider"></span>
</div>
JSFiddle: https://jsfiddle.net/9fhvyk76/3/
You'll want to use a pseudo element so you have more control over the size/position without really needing to change much. Just add position: relative to the link itself so the pseudo's scale and positioning are associated with it. Let me know if this is what you were looking for!
https://jsfiddle.net/g00jrsqf/
#container ul li a{
position: relative;
}
#container ul li a:after{
content: '';
position: absolute;
display: block;
width: 100%;
height: 4px;
background: #01a2e8;
opacity: 0;
left: 0;
bottom: -29px;
}
#container ul li:hover a:after{
opacity: 1;
}
I'm trying to create a menu which will have an image in the middle of it. For example three links to the left & three to the right of the image, each menu item also has to list all child pages.
The parent level menu items have to dynamically update the text based on what has been entered in the CMS but the user doesn't have to be able to reorder or add / remove items from the menu.
What is the best way of going about doing the above? My initial thought was to hard code all the pages & use get_permalink() to get the URLs encase they change but this wouldn't take all the requirements listed above into account.
Here Is Ans that you want. for details follow link
In Below example logo is outside from ul class but then also you can set logo in between li class. so logo in middle of menu.
HTML
<div id="header">
<a class="logo" href="index.html"><img src="http://i48.tinypic.com/2mob6nb.png" alt="Michigan State" /></a>
<ul>
<li>Home</li>
<li>Stats</li>
<li>Schedule</li>
<li>Store</li>
<li>Gallery</li>
<li>Roster</li>
</ul>
</div><!--end header-->
CSS
body {
font-family: Helvetica, Arial, Century;
font-size: 12px;
margin: 0;
background: url('images/bluebg.jpg') repeat-x top center;
}
#header {
background-color: #ffd727;
height: 40px;
position: relative;
margin: 150px auto 0;
}
#header ul {
margin: 0 auto;
width: 800px;
padding: 0;
list-style: none;
}
#header ul li {
float: left;
width: 97px;
}
#header ul li:nth-of-type(4) {
margin-left: 217px;
}
#header ul li a {
text-transform: uppercase;
text-decoration: none;
display: block;
text-align: center;
padding: 12px 0 0 0;
height: 28px;
}
#header ul li a:hover {
background: rgb(235,200,35);
}
.logo {
position: absolute;
left: 50%;
margin: -48px 0 0 -108px;
}
#media screen and (max-width: 800px) {
.logo {
bottom: 100%;
}
#header ul li:nth-of-type(4) {
margin-left: 0;
}
#header ul {
width: 600px;
position: relative;
}
}
For JS - Refer below This Link
http://codepen.io/wolfcry911/pen/HyLdg
Method 2
you can also do it with left and right different menu..but method 1 is best for wp
http://foundation.zurb.com/forum/posts/1832-logo-centered-in-top-bar
I'm trying to make a CSS drop down menu but the problem is that child list items overlap parent list items as you can see in the picture.
I found the source of the problem to be the padding: 10px 5px; in line 12 - When removed, the problem is solved. But I need the padding for the look. I read Inline elements and padding which addresses a similar issue but even the solution provided in the article - using float: left; instead of display: inline; - does not solve my problem.
Why does this happen and what is the solution?
HTML Code
<ul id="navigation_2">
<li>Home</li>
<li>About
<ul>
<li>Who We Are</li>
<li>Our Goal</li>
</ul>
</li>
</ul>
CSS Code
ul#navigation_2
{
margin: 0;
padding: 0;
list-style: none;
font-family: "Century Gothic","HelveticaNeueLT Pro 45 Lt",sans-serif;
}
ul#navigation_2 li
{
float: left;
position: relative;
padding: 10px 5px;
font-size: 114%;
text-align: center;
width: 100px;
}
ul#navigation_2 li a
{
text-decoration: none;
}
ul#navigation_2 li a:link, a:visited, a:active
{
color: black;
}
ul#navigation_2 li:hover
{
background-color: red;
}
ul#navigation_2 li ul
{
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul#navigation_2 li ul li
{
display: block;
width: 150px;
text-align: left;
}
ul#navigation_2 li:hover ul
{
display: block;
position: absolute;
background-color: #CBD966;
}
Here, I have a working example:
http://jsfiddle.net/hzCZY/2/
Never underestimate the power of inline-block! Basically your list was colliding with the text 'About' as opposed to the red box around the text 'About'. I formatted the actual a tag to be the red block instead, an inline-block, which then collided correctly with the ul below it.
If you need any more explanation I'd be more than happy to help.