Please help me to solve my problem.
I need to make head menu with pictures.
Now i have:
What i need to do:
My HTML code here:
<div id="head">
<div class="site_info">
<div id="tabs">
<ul id="tabMenu">
<li class="dropdown">
<div><a class="tab1">поиск по производителю</a></div>
</li>
<li class="dropdown">
<div><a class="tab2">поиск по назначению</a></div>
</li>
<li class="dropdown">
<div>
<span id="more_search"></span>
<a class="tab4" href="/emarket/cart/">покупки</a>
</div>
</li>
<li class="dropdown">
<div><a class="tab3">сравнение</a></div>
</li>
<li class="dropdown">
<div><a class="tab3">кабинет</a></div>
</li>
</ul>
</div>
</div>
<div class="work" umi:element-id="40">
<div umi:field-name="order_info_top"></div>
</div>
</div>
CSS:
#main #head div.site_info {
padding-top: 45px;
}
#main #head div.site_info ul {
width: 50%;
margin: 0 auto;
min-width: 1024px;
}
#main #head div.site_info ul li {
display: inline;
margin-right: 18px;
}
#main #head div.site_info ul li a.tab1 a.tab2 a.tab3 a.tab4 {
float: left;
margin-left: 89px;
}
Give a height and width to the individual menu. Then add a style with your image as its background. Position the backgruond image top center.
HTML
<div>
<ul>
<li class="dropdown"><div><a class="tab1">Menu 1</a></div></li>
<li class="dropdown"><div><a class="tab2">Menu 2</a></div></li>
</li>
</ul>
</div>
CSS
li
{
list-style: none;
float: left;
width :100px;
}
.dropdown .tab1
{
background : url('http://www.indievisionmusic.com/wp-content/themes/indievisionmusic/images/at_symbol_10x10.gif') no-repeat top center;
padding-top: 10px;
}
.dropdown .tab2
{
background : url('http://www.gigabyte.us/images/icon_blue.png') no-repeat top center;
padding-top: 10px;
}
DEMO
Just change your text for <img src="images/image.jpg">
And if you want it to be a link: <img src="images/image.jpg" width="100" height="100"/>
you could just use images instead of text and add in the image using the CSS backgroundd feature
li a.tab1 { background: url(); width:XXpx; height: XXpx }
li a.tab2 { background: url(); width:XXpx; height: XXpx }
li a.tab3 { background: url(); width:XXpx; height: XXpx }
Related
I am creating a menu using an unordered list that mixes list items of different sizes, some are half the height and width of others. They all float left. What I'm getting is this:
If I add clear:left to the third small item I get this:
What I want is for the second and fourth (or third and forth) small items to float below the other two, like this:
Is there a way to do this with css? The menu is created dynamically so forcing a particular position won't work, it needs to be able to flow into the proper position.
Would having multiple <ul/> work for you ? If so, the following Codepen would work : https://codepen.io/anon/pen/qPaVar
Same code as an embedded code snippet :
ul {
list-style : none;
padding: 0;
margin: 0;
text-align: center
}
li {
margin: 0
}
li.left {
float: left
}
div.small {
background-color: blue;
width: 20px;
height: 20px
}
div.large {
background-color: yellow;
width: 40px;
height: 40px;
}
<ul>
<li class="left">
<div class="large">A</div>
</li>
<li class="left">
<ul>
<li class="left">
<div class="small">1</div>
</li>
<li class="left">
<div class="small">2</div>
</li>
</ul>
<ul>
<li class="left">
<div class="small">3</div>
</li>
<li class="left">
<div class="small">4</div>
</li>
</ul>
</li>
<li class="left">
<div class="large">B</div>
</li>
</ul>
Hope this helps!
Try the grid-auto-flow: dense
https://developer.mozilla.org/ru/docs/Web/CSS/grid-auto-flow
try this
.main li {
display: inline-block;
vertical-align: middle !important;
width: 200px;
height: 200px;
border: 1px solid;
}
.inner-div li {
width: 99px;
height: 89px;
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
float: left;
text-align: center;
}
ul.inner-div {
list-style: none;
padding: 0;
}
<div class="container">
<ul class="main">
<li>div 1</li>
<li>div 2
<ul class="inner-div">
<li>div 21</li>
<li>div 21</li>
<li>div 21</li>
<li>div 21</li>
</ul>
</li>
<li>div 3</li>
</ul>
</div>
I'm trying to create a header hero but my problem is that my background image goes on all my contents. Actually it has lower z-index than content but I don't know why doesn't it go on background.
.header
{
width: 100vw;
background-color: blue;
position: relative;
}
.headerbakground
{
position: absolute;
width: 100%;
z-index: 1;
}
.header ul li img,.header ul li
{
width: 2vw;
float: right;
}
.header .container
{
z-index: 2;
}
<div class="header">
<!--background image-->
<img src="https://www.renonation.sg/wp-content/uploads/2015/01/title-header-hero-01.jpg" class="headerbakground">
<!--header top-->
<div class="container">
<ul>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
</ul>
</div>
</div>
Only a positioned element can use z-index. According to MDN:
The z-index property specifies the z-order of a positioned (that is, one with any position other than static) element and
its descendants.
The .container doesn't have a position, so the z-index: 2 is ignored. Add position: relative to it:
.header .container {
position: relative;
z-index: 2;
}
.header {
width: 100vw;
background-color: blue;
position: relative;
}
.headerbakground {
position: absolute;
width: 100%;
z-index: 1;
}
.header ul li img,
.header ul li {
width: 10vw;
float: right;
}
.header .container {
position: relative;
z-index: 2;
}
<div class="header">
<!--background image-->
<img src="https://www.renonation.sg/wp-content/uploads/2015/01/title-header-hero-01.jpg" class="headerbakground">
<!--header top-->
<div class="container">
<ul>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
</ul>
</div>
</div>
You can also use a negative z-index: -1 on the element you want to push back:
.headerbakground {
position: absolute;
width: 100%;
z-index: -1;
}
.header {
position: relative;
width: 100vw;
background-color: blue;
}
.headerbakground {
position: absolute;
width: 100%;
z-index: -1;
}
.header ul li img,
.header ul li {
width: 10vw;
float: right;
}
<div class="header">
<!--background image-->
<img src="https://www.renonation.sg/wp-content/uploads/2015/01/title-header-hero-01.jpg" class="headerbakground">
<!--header top-->
<div class="container">
<ul>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
</ul>
</div>
</div>
The picture below shows what I would like to get.
It is a menu within a container, where the menu may wrap to multiple lines when the window/screen gets too narrow for all menu items to fit in. At the same time I would like the menu to have a background which expands to full screen in width, while expanding in height with the menu when it gets wrapped to multiple lines. Currently I think this is not possible with CSS, but I am also just a CSS amateur. My current solution involves #media queries to set the height of the menu background for resolutions where wrapping appears. This does not take into account that font-size could change, thus making each line of menu higher.
Here is a jsFiddle with a basic setup, which does NOT what I want:
https://jsfiddle.net/n3jmyq2f/3/ (Edited, was not the final version)
Here is the code:
<div class="container">
<div class="menu_wrap">
<div class="menu_bg"></div>
<div class="menu">
<ul>
<li>item 1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</div>
<div class="content">It's me, Mario!</div>
CSS:
.container {
width:50%;
margin: 0 auto;
background:lightgreen;
height:300px;
}
.menu_bg{
position: absolute;
background: #afafaf;
width: 100%;
left:0;
height:30px;
z-index: -1;
}
ul {
height:30px;
background: #afafaf;
}
li {
display:inline-block;
}
The first option is the simplest.
Stop thinking of the .container as something that must contain everything. It's just a class that can be reused as and when required.
If you take the menu div out of the "container" but put a .container div inside you get the effect you are looking for.
JSfiddle Demo
*,
body {
padding: 0;
margin: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
}
.menu {
background: #afafaf;
}
ul {
border: 1px solid green;
}
li {
display: inline-block;
}
.content {
height: 300px;
}
<div class="menu">
<div class="container">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">It's me, Mario!</div>
</div>
2nd Option
Use a pseudo-element
*,
body {
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
height: 300px;
}
ul {
background: #afafaf;
position: relative;
border: 1px solid green;
}
ul:before {
content: '';
position: absolute;
height: 100%;
background: inherit;
width: 100vw;
left: 50%;
transform: translateX(-50%);
z-index: -1
}
li {
display: inline-block;
}
<div class="container">
<div class="menu">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
<div class="content">It's me, Mario!</div>
</div>
JSfiddle Demo
if in .container you change
width:50%;
to
width:100%;
it will do it
fiddle
you could also use the .menu-wrap class (which I've seen in your markup) to do this
The title says it all for some reason my margin 0 auto is not centering my margin: 0 auto; wont center my ul inside of the nav element. Any help would be greatly appreciated. I already took a look at other posts on stack regarding the same issues, and couldn't fix my issue.
CSS
/* Sets the body to take up 100% of the width of the browser */
body {
width: 100%;
background: #444444;
margin: 0px;
}
#container{
width: 100%;
}
header {
margin-left: -10px;
margin-top: -10px;
padding: 0 20px;
width: 25%;
height: 12000px;
background: url("imgs/headerBg.jpg") repeat-y;
float: left;
}
nav{
width:60%;
margin: auto;
}
nav ul{
width: 70%;
list-style-type: none;
text-align: center;
margin: 0 auto;
}
nav ul li{
height: 45px;
padding: 0px;
margin: 0px;
display: inline-block;
border-top: 3px double #fff;
}
nav ul li a{
text-decoration: none;
text-align: center;
font-weight: bold;
color: #ffffff;
font-size: 2.5em;
}
#homepage{
height: 120000px;
width: 65%;
float: left;
}
#homepage li{
list-style-type: none;
height: 14.20%;
}
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skull Alcohol ©</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="container">
<header>
<nav>
<ul>
<li>home</li>
<li>recipes</li>
<li>our products</li>
<li>shop</li>
<li>contact</li>
</ul>
</nav>
</header>
<section id="homepage">
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
<li>
<hgroup></hgroup>
<figure><img src="" alt=""/></figure>
<figcaption></figcaption>
</li>
</section>
<footer>
<div id="privacy">privacy</div>
<div id="tos">terms of service</div>
</footer>
</div>
</body>
</html>
It looks like your ul is actually centered, but because ul has a default padding on the left side it appears more to the right.
Try adding padding: 0 to your nav ul rule.
I want to create a drop down menu view based on the following HTML / CSS :
<!DOCTYPE html>
<html>
<head>
<style>
html * {
margin: 0;
padding: 0;
}
body {
color: #FFF;
}
#panel, #content {
position: absolute;
top: 0;
bottom: 0;
}
#panel {
left: 0;
width: 750px;
background: #333;
z-index: 100;
padding-top: 200px;
padding-left: 250px;
}
#content {
background: #000;
left: 250px;
right: 0px;
}
#panel > nav {
margin-bottom: 100px;
}
.Dropdown {
position: relative; /* Has to be set, can be overriden */
}
.Dropdown > ul {
position: absolute;
display: none;
list-style-type: none;
}
.Dropdown:hover > ul {
display: block;
}
.Dropdown > ul, /* On the right by default */
.Dropdown.Right > ul { /* Deploys on the right side of the label */
top: 0;
left: 100%;
}
.Dropdown.Bottom > ul { /* Deploys below the label */
top: 100%;
left: 0;
}
</style>
</head>
<body>
<div id="panel">
<nav class="Dropdown Right" style="width: 200px;"><!-- so it can appear on jsfiddle -->
<div class="Label Parent">Label</div>
<ul>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
<li>
<nav class="Dropdown Right">
<div class="Label Parent">Label</div>
<ul>
<li>
<div class="Label">Entry</div>
</li>
<li>
<nav class="Dropdown Right">
<div class="Label Parent">Label</div>
<ul>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
</ul>
</nav>
</li>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
<div id="content">
</div>
</body>
I would like a developper to be able to extend this drop down CSS to add, for example, a transition between 0 and 1 opacity.
Actually it is not possible with this code because the property display conflicts with the transition one. Adding opacity 0 on the non-hover and opacity 1 on the hover will not work because of that display property.
I've read somewhere on this web site that i could use height 0 and height auto instead of display none and display block (respectivly) but it didn't work either.
Any ideas about how to add transitions please ?
Thanks for your help !