I have a wired problem, i have a regular nav with ul and li and i am trying to make after one of the li red box with number inside, but the problem is that the number from some reason going out of the box, what is the problem?
This is the code:
#mainHeader .rightNav {
float: right;
li {
position: relative;
}
img {
vertical-align: middle;
}
li:nth-child(4)::after {
content:attr(data-value);
color:#fff;
border-radius: 2px;
background-color: #d94a3e;
text-align: center;
width: 18px;
height: 18px;
position: absolute;
top:0;
right:0;
}
}
http://plnkr.co/edit/ys7Wy3EJPlA4VlXDt6hE?p=preview
There was wrong on your line height.
Should have : line-height: normal;
Add that to #mainHeader .rightNav li:nth-child(4)::after
Update your css to this:
#mainHeader .rightNav li:nth-child(4)::after {
content: attr(data-value);
color: #fff;
border-radius: 2px;
background-color: #d94a3e;
text-align: center;
width: 18px;
height: 18px;
position: absolute;
top: 0;
right: 0;
line-height: normal;
}
Sample link
Replace your styles with this:)
#mainHeader .rightNav li:nth-child(4)::after {
content: attr(data-value);
color: #fff;
border-radius: 2px;
background-color: #d94a3e;
text-align: center;
position: relative;
top: -10px;
right: 0;
padding: 1px 4px;
}
Related
I have the following drop down menu and when expanded, it seems to be blocking my login form as shown in the picture below. I am not sure if I should use codepen to but anyway, here is my css code:
.nav {
width: 200%;
}
#nav-icon {
font-size: 28px;
line-height: 50px;
padding-left: 1em;
color: #ffffff;
background-color: #f44336;
}
div.nav ul, div.nav li, label{
line-height: 50px;
margin: 0;
padding: 0 2em;
list-style: none;
text-decoration: none;
color: #000;
font-weight: 100;
width: 100%;
position: relative;
}
div.nav ul {
position: relative;
z-index: 10;
}
header div.nav-login{
float:left;
position: absolute;
left: 90em;
top: 5.5em;
}
header div.nav-login ::placeholder {
color: #6A5ACD;
opacity: 1;
}
header div.nav-login input[type='password'] {
position: absolute;
left: 130px;
}
header div.nav-login input[type='password']::placeholder {
position: relative;
left: 1em;
}
header div.nav-login form{
padding-top: 40px;
}
header div.nav-login form input{
float:left;
width: 8em;
height: 3em;
padding-left: 5px;
margin-right: 10px;
border:none;
background-color: #ccc;
font-family: arial;
font-size: 14px;
color: #111;
line-height: 20px;
position: absolute;
}
header div.nav-login form button{
float:left;
width: 60px;
height: 30px;
margin-right: 10px;
border:none;
background-color: #FFF8DC;
font-family: arial;
font-size: 14px;
color: #111;
cursor:pointer;
position: absolute;
left: 19em;
top: 3.2em;
}
header div.nav-login form button:hover{
background-color: #ccc;
}
Those are most of my code for that section and I definately need that z index to be there so that it won't be behind my table but now I can't use the login form when the drop down menus are expanded....enter image description here
Here is my html and CSS-
<style>
.bottom-border {
border-bottom-style: solid;
border-bottom-width: 2px;
color: #999;
margin-top: 0.1%;
margin-bottom: 1.5%;
}
.subheading {
position: relative;
padding-left: 0.5em;
padding-right: 0.5em;
font-weight: bold;
font-size: 16px;
font-family: sans-serif;
clear: both;
color: #666666;
z-index: 1000;
}
h1 {
text-align: center;
margin-bottom: -0.4em;
}
</style>
<div class="bottom-border">
<h1><span class="subheading" >Hello World</span></h1>
</div>
I want my text to look like -
And current result is -
I can achieve expected one by setting background-color to white of span but i want to know other way of doing that as it's not ideal way.
You can do it this way which doesn't use background colour.
.lines {
line-height: 0.5;
text-align: center;
}
.lines span {
display: inline-block;
position: relative;
}
.lines span:before,
.lines span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid red;
top: 0;
width: 300px;
}
.lines span:before {
right: 100%;
margin-right: 15px;
}
.lines span:after {
left: 100%;
margin-left: 15px;
}
<div class='lines'>
<span>This is some super long text how about that</span>
</div>
You will need to change the widths of the lines on either side though.
Just add a white background to your span
.bottom-border {
border-bottom-style: solid;
border-bottom-width: 2px;
color: #999;
margin-top: 0.1%;
margin-bottom: 1.5%;
}
.subheading {
background-color: white;
position: relative;
padding-left: 0.5em;
padding-right: 0.5em;
font-weight: bold;
font-size: 16px;
font-family: sans-serif;
clear: both;
color: #666666;
z-index: 1000;
}
h1 {
text-align: center;
margin-bottom: -0.4em;
}
<div class="bottom-border">
<h1><span class="subheading" >Hello World</span></h1>
</div>
I guess what you want to achieve is something like this
body {
font-family: 'Cinzel Decorative', cursive;
background: url(http://s.cdpn.io/3/blurry-blue.jpg);
background-size: cover;
background-repeat: no-repeat;
color: white;
}
h1 {
font-size: 3em;
text-align: center;
}
.embiggen {
font-size: 4em;
text-shadow: 0 0 40px #ffbab3;
}
.subtitle {
margin: 0 0 2em 0;
}
.fancy {
line-height: 0.5;
text-align: center;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid white;
border-top: 1px solid white;
top: 0;
width: 600px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
<h1>Main Title</h1>
<p class="subtitle fancy"><span>A fancy subtitle</span></p>
Update/Add following to your CSS
.subheading {
background:#fff;
padding-left:5px;
padding-right:5px; /** You can change padding value**/
}
Another way is, to use
h1 .subheading{
background:#fff;
position:relative;
}
h1:before{
content="";
width:50%;
height:1px;
background:#000;
position:absolute;
left:0;
top:50%;
}
h1:after{
content="";
width:50%;
height:1px;
background:#000;
position:absolute;
right:0;
top:50%;
/** USE CSS to Create left line **/
}
I have some hidden speech bubbles that appear when you hover over links like this demo:
http://jsfiddle.net/mmorrell2014/e4q7K/
HTML:
<div id="container">Hover over me!<span>Hidden message here.</span></div>
CSS:
#container {
background-color: #FF0;
margin: 100px;
float: left;
height: 200px;
width: 200px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
a.hoverbubble {
position: relative;
text-decoration: none;
}
a.hoverbubble span {display: none;
}
a.hoverbubble:hover span {
display: block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: px;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -40px;
background: rgba(0,0,0,.8);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #fff;
font-size: 0.86em;
font-family: Arial, Helvetica, sans-serif;
}
a.hoverbubble:hover span:after {
position: absolute;
display: block;
content: "";
border-color: rgba(0,0,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
position: absolute;
bottom: -20px;
left: 1em;
}
I was wondering if it is possible to make this tooltip appear when you hover over an image instead of a link?
If you want a very simple solution, change your code like below.
<div id="container"><img src="sample.gif" border="0" /><span>Hidden message here.</span></div>
If you don't want to use anchor tag itself then check the below jsfiddle, I have updated your code.
http://jsfiddle.net/e4q7K/19/
Quick question, I need help and have no idea what to do, because I know nothing about html/css and got this as a bonus task along with other programming things.
What I have:
What I would like to have:
Here is css code
.offer-small { width: 278px; height: 209px; position: relative; margin-bottom: 25px; }
.offer-small img { width: 278px; height: 209px; }
.offer-small .mask { width: 278px; height: 209px; cursor: pointer; position: absolute; top: 0; left: 0; background: url('../images/photo-small-mask.png'); }
.offer-small .desc { display: none; font-size: 10pt; width: 258px; height: 189px; padding: 10px; position: absolute; top: 0; left: 0; background: url('../images/photo-small-black-transparent.png'); color: white; text-shadow: 1px 1px #000000}
.offer-small .desc p { font-size: 9pt; color: #f2f0e4; }
.offer-small .desc table.compare { width: 160px; height: 48px; margin: 0 auto 0 auto; background: url('../images/offer-table.png'); color: #f2f0e4; }
.offer-small .desc table td { text-align: center; padding-bottom: 10px; }
.offer-small .desc table td.small { font-size: 8pt; }
.offer-small .title { width: 258px; background: url('../images/offer-transparent.png'); padding: 2px 10px; position: absolute; top: 120px; left: 0; }
.offer-small .title strong { font-size: 9pt; color: #ffffff; }
.offer-small .title small { font-size: 8pt; color: #f2f0e4; }
.offer-small .title small strong { font-size: 8pt; color: #f2f0e4; }
.offer-small .view-offer { position: absolute; top: 160px; left: 150px; }
.view-offer { display: block; width: 120px; height: 44px; background: url('../images/button-view-offer.png'); }
.btnSendOrder { width: 260px; height: 75px; border: 0; background: url('../images/button-send-order.png'); cursor: pointer; }
.toLeft { float: left; margin-right: 25px; }
Html/smarty code:
{if $random}{foreach item=item from=$random}
<div class="offer-small">
<img src="{$smarty.const.APP_URL}/userfiles/photos/{if $item.item_photo}s_{$item.item_photo}{else}blank_small.jpg{/if}" alt="" />
<div class="desc">
<strong>{$item.item_name|truncate:30}</strong>
<p>{$item.item_short_description|truncate:120}</p>
<p align="right"></p>
</div>
<div class="title">
<strong>{$item.item_name|truncate:30}</strong><br/><small>Cena teraz: <strong>{$item.item_cost_now|money} zł</strong> zamiast <strong>{$item.item_cost_before|money} zł</strong></small><br/><br/>
<strong>OSZCZĘDZASZ <big>{$item.item_cost_before-$item.item_cost_now|money}</big> zł</strong>
</div>
</div>
{/foreach}{/if}
Tips are welcome too.
I mean I can handle making grid if someone will show me how to break this stupid list.
An easy way is to just float the divs of class .offer-small left:
.offer-small {
width: 278px;
height: 209px;
position: relative;
margin-bottom: 25px;
float:left;
}
As long as you have them all within a container element with a fixed width, they should fit next to each other nicely, wrapping to the next line automatically.
I currently have a problem with my z-index with IE.
I have a div, an image in this div and some text over this image.
Here is my HTML code:
<section id="content_right">
<div class="mini_bloc_image">
<img alt="Camionnette VCI" src="img/mini_reparation_site_nb.png" />
<span>Réparation sur site</span>
<span>Nous nous déplaçons</span>
</div>
and the CSS:
#content_right {
width: 230px;
height: 484px;
float: right;
}
.mini_bloc_image {
height: 148px;
margin-bottom: 20px;
position: relative;
}
.mini_bloc_image > img {
position: absolute;
}
.mini_bloc_image > span:first-of-type {
display: block;
position: absolute;
top: 95px;
left: 0px;
font-size: 1.1em;
background-color: #ffffff;
padding: 4px 5px 4px 5px;
}
.mini_bloc_image > span:last-of-type {
display: block;
top: 95px;
left: 0px;
position: absolute;
left: 50px;
top: 125px;
color: #ffffff;
font-size: 1.1em;
font-family: 'Marck Script', cursive;
}
IE don't understand my text must be OVER the image...
I found some solutions like this http://www.adrenatie.com/z-index-et-ie6/ or this http://systembash.com/content/css-z-index-internet-explorer/ but it don't works.
Can someone help me please?
Problem is you're dealing with spans, which are rendered inline by default. If you use display:block, the z-index will be used:
.mini_bloc_image > span:first-of-type {
display: block;
position: absolute;
z-index: 10;
font-size: 1.1em;
background-color: #ffffff;
padding: 4px 5px 4px 5px;
margin-top: 95px;
}
.mini_bloc_image > span:last-of-type {
display: block;
position: absolute;
z-index: 10;
color: #ffffff;
font-size: 1.1em;
font-family: 'Marck Script', cursive;
margin-left: 30%;
margin-top: 125px;
}
For more about inline elements and positioning, see this article.