I have a horizontal nav that has triangle borders inserted :before and :after a list item to make it appear as though there is a white bordered point on the right side of the list item. It's rendering in FF and Chrome but not IE8, and I'm using the html5 doctype and have included the html5.js.
It appears as though the list item background-color is stacked on top of the arrow border so it can't be seen because if I turn the background-color off I can see the arrow. I thought it might be a z-index problem but that doesn't help either. I also notice in IE that all of the :after styles are crossed out, any ideas?
<html>
<head>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
ul.registration-nav {
float: left;
margin-bottom: 45px;
width: 100%;
}
ul.registration-nav li {
background-color: #afafaf;
color: #FFFFFF;
display: block;
float: left;
font-weight: 600;
padding: 10px 0;
position: relative;
text-align: center;
text-decoration: none;
width: 33%;
}
ul.registration-nav li.arrow:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 15px solid #afafaf;
position: absolute;
top: 50%;
margin-top: -20px;
left: 100%;
z-index: 2;
}
ul.registration-nav li.arrow:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 24px solid transparent;
border-bottom: 24px solid transparent;
border-left: 18px solid white;
position: absolute;
top: 50%;
margin-top: -24px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
ul.registration-nav li.checkout {
background-color: #cecece;
}
ul.registration-nav li.active {
background-color: #067673;
}
ul.registration-nav li.active:after {
border-left: 15px solid #067673;
}
</style>
</head>
<body>
<ul class="nav inline registration-nav capitalize">
<li class="register arrow active">Register</li>
<li class="books arrow">Books</li>
<li class="checkout">Checkout</li>
</ul>
</body>
</html>
FYI - Chris Coyier has an article on the after pseudo-selectors here
Browser Support
Little issues:
Firefox 3.5- wouldn't allow absolute positioning of pseudo elements.
In Opera 9.2, whitespace is always displayed within this
pseudo-element as if it’s pre text.
IE 8 doesn't support z-index on them
So this very well could have been your problem.
Related
I would like to add a white border over all my images in my content div using css. Images in the header and footer div areas should not be affected. how do I achieve this? See example image below. There are images of different sizes on the web pages.
See image:
You can do this without having an extra element or pseudo element:
http://cssdeck.com/labs/t6nd0h9p
img {
outline: 1px solid white;
outline-offset: -4px;
}
IE9&10 do not support the outline-offset property, but otherwise support is good: http://caniuse.com/#search=outline
Alternate solution that doesn't require knowing the dimensions of the image:
http://cssdeck.com/labs/aajakwnl
<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>
div.ie-container {
display: inline-block;
position: relative;
}
div.ie-container:before {
display: block;
content: '';
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
border: 1px solid white;
}
img {
vertical-align: middle; /* optional */
}
You could try this:
Html:
<div class="image">
<div class="innerdiv">
</div>
</div>
Css:
.image
{
width: 325px;
height: 239px;
background: url("https://i.picsum.photos/id/214/325/239.jpg?hmac=7XH4Bp-G9XhpuKz5vkgES71GyXKS3ytp-pXCt_zpzE4") 0 0 no-repeat;
background-size: cover;
padding: 10px;
}
.innerdiv
{
border: 1px solid white;
height:100%;
width: 100%;
}
jsFiddle
Hope this is what you meant :)
I solved this with box-shadow: inset and it works with IE11 and up. I wanted a border in the corners around the image but this examples have the border 10px inset. It requires a parent div with :before or :after element but handles it very well.
.image {
width: 100%;
height: auto;
}
.image__wrapper {
position: relative;
}
.image__wrapper:before {
content: '';
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
box-shadow: inset 0 0 0 3px red;
}
CodePen Demo
Whatever the div ID or class is you can simply add
#yourDivIDExample {
...
}
#yourDivIDExample img{
border:1px solid #ffffff;
}
This will create a border around the images in the div itself.. same works for classes or global rule also ..
img {
border:1px solid #ffffff;
}
You can do something like this DEMO
HTMl
<div class="imgborder">
<div class="in-imgborder">
</div>
</div>
CSS
.imgborder {
width: 300px;
height: 300px;
position: relative;
background: url(http://placekitten.com/300/300) no-repeat;
}
.in-imgborder {
width: 290px;
height: 290px;
position: absolute;
top: 4px;
left: 4px;
border: 1px solid red;
}
I need your help.
I am attempting to no avail, in trying to figure out as to how to make my li join neatly with my div. I have attached an example of the problem as well as the desired result. Maybe there are some CSS tricks to this, but I am no where near that skilled to figure this out on my own, only to see that it has been done on some websites.
Problem:
Desired result:
window.onload = function() {
$("#list li").click(function(){
var $li = $(this);
var selector = $li.data("show"); // => "#item1"
$('.item').addClass('hidden');
$('ul').children().removeClass('selected');
$(selector).removeClass("hidden"); //but show matching item
$(this).addClass("selected"); //but show matching item
alert($(this).attr("class").split(' '))
});
$("#list li").eq(0).click();
}
* {
font-family: Segoe UI;
font-size: 9pt;
}
#container {
bottom: 0; left: 0; top: 0; right: 0;
margin: auto;
position: absolute;
width: 900px;
height: 600px;
}
#list {
list-style-type: none;
padding: 0;
margin: 0;
}
#list li {
margin:0 0 10px 0;
background: #FFF;
padding: 10px;
cursor: pointer;
color: rgb(149,149,149);
font-size: 11pt;
}
.item {
width: 100%;
height: 100%;
border: 1px solid red;
}
#menu {
float: left;
width: 25%;
height: 100%;
}
#content {
float: left;
width: 75%;
background-color: rgb(238,238,238);
height: 100%;
}
.hidden{ display:none; }
#list li.selected {
color: rgb(149,149,149);
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
.selected {
background: rgb(238,238,238) !important;
color: rgb(51,51,51) !important;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div id="menu">
<ul id="list">
<li data-show="#item1">File Information</li>
<li data-show="#item2">My Summary</li>
<li data-show="#item3">Comments</li>
</ul>
</div>
<div id="content">
<div id="item1" class="hidden item">FILE INFORMATION</div>
<div id="item2" class="hidden item">MY SUMMARY</div>
<div id="item3" class="hidden item">COMMENTS</div>
</div>
</div>
I will give you the conceptual solution that can easily be achieved with pure CSS.
1) Set the list item to have borders at top, bottom, and left.
2) Then bring the list item above the larger box with z-index.
3) Finally, you will need to either shift the list to the right or the box to the left by the amount of your border width, so that they overlap to cover the small part of the border that is supposed to stay hidden under the list item.
#list li.selected {
color: rgb(149,149,149);
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
width: 205px;
z-index: 40;
position: absolute;
}
Please try this
Hope this help you.
You are seeing the border of the file information. There are two possible solutions:
1 - don't put a left border on the .item class. (But this will still not look right)
2 - Make the li overlap the content area slightly. You'll need to raise the z-index of the content and use a negative margin to bring them together.
Not the prettiest solution, but if you are okay with removing the white background of the "inactive" tabs, you can do some overlapping:
Demo
Your #list and #list li will need to be changed like this:
#list {
list-style-type: none;
padding: 0;
margin: 0;
position: relative; /*added*/
left: 1px; /*added*/
}
#list li {
margin:0 0 10px 0;
/*removed background*/
padding: 10px;
cursor: pointer;
color: rgb(149,149,149);
font-size: 11pt;
}
I want the price of coffee to come at the right end of the coffee name i.e 1.80 price should come in line of Americano. Similarly 10.00 price should come in line of Macchiato.
ul {
list-style: none;
padding: 5px;
margin: 0;
}
ul#container {
width: 18%;
min-width: 100px;
max-width: 400px;
border: 15px solid #886633;
border-radius: 5px;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
}
#container li {
border-bottom: 1px dashed blue;
}
#container > li {
font-size: 2em;
border-bottom: 1px solid black;
}
em {
float: right;
position: relative;
bottom: 0px;
}
span {
width: 100px;
display: inline-block;
}
<ul id="container">
<li>DRINK MENU
<ul>
<li><span>Latte</span><em>2.79</em>
</li>
<li><span>Cappucino</span><em>2.99</em>
</li>
<li><span>Cafe Americano</span><em>1.80</em>
</li>
<li><span>Espresso</span><em>2.00</em>
</li>
<li><span>Carmel Macchiato</span><em>10.00</em>
</li>
</ul>
</li>
</ul>
As you can see i am using relative position, but its not working.
Can you solve this without absolute position and minimum changes to the code?
Just tell me why is relative position not working.
First you need to fix your html - the closing li for the DRINK MENU should be after the nested ul.
Then I would make use of display:table css:
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul#container {
width: 18%;
min-width: 100px;
max-width: 400px;
border: 15px solid #886633;
border-radius: 5px;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
}
#container > li {
padding: 5px;
}
#container ul {
border-top: 1px solid black;
margin-top: 5px;
}
#container ul li {
border-bottom: 1px dashed blue;
display: table;
width: 100%;
}
#container span,
#container em {
display: table-cell;
vertical-align: bottom;
padding: 3px 0;
}
#container em {
text-align: right;
}
<ul id="container">
<li>DRINK MENU
<ul>
<li><span>Latte</span><em>2.79</em>
</li>
<li><span>Cappucino</span><em>2.99</em>
</li>
<li><span>Cafe Americano</span><em>1.80</em>
</li>
<li><span>Espresso</span><em>2.00</em>
</li>
<li><span>Carmel Macchiato</span><em>10.00</em>
</li>
</ul>
</li>
</ul>
UPDATE
As per your comments about overflow. There are a couple of ways to fix this:
Increase the min width of ul#container to something that will accommodate the longest line - in this case a width of 125px should suffice: Fiddle example
Add table-layout:fixed to your table li and add word-wrap:break-word to the span: Fiddle example
You can add a class to the <em>
HTML
<ul id="container">
<li>DRINK MENU</li>
<ul>
<li><span>Latte</span><em>2.79</em></li>
<li><span>Cappucino</span><em>2.99</em></li>
<li><span>Cafe Americano</span><em class="bottom">1.80</em></li>
<li><span>Espresso</span><em>2.00</em></li>
<li><span>Carmel Macchiato</span><em class="bottom">10.00</em></li>
</ul>
</ul>
CSS:
ul{
list-style: none;
padding: 5px;
margin: 0;
}
ul#container{
width: 18%;
min-width: 200px ;
max-width: 400px;
border: 15px solid #886633;
border-radius: 5px;
background-color: orange ;
box-shadow: 4px 4px 8px rgba(0,0,0,.3);
}
#container li{
border-bottom: 1px dashed blue;
}
#container > li{
font-size: 2em;
border-bottom: 1px solid black;
}
em{
float: right;
position: relative;
bottom: 0px;
}
.bottom {
position: relative;
top:15px;
}
span{
width: 100px;
display: inline-block ;
}
DEMO
Another posible solution (maybe the best practice):
CSS:
li:nth-child(3) > em, li:nth-child(5) > em{
position: relative;
top:16px;
}
DEMO
Along with your questions, I've taken your comments into consideration in preparing this answer.
First, your HTML was invalid. The list was nested improperly so I corrected that that in my answer.
In answer to your first question...
how to position the prices at the baseline
... absolute positioning will work and will not prevent your price card from adjusting to different browsers, platforms or devices. It will be as responsive as the container it is in. Of course, you should test your code to make sure it works as intended.
Note that for position: absolute to work properly you must set the parent element to position: relative. This is because absolute positioning will move the element – in this case the em – relative to its closest positioned ancestor (which in this case should be the li). If the absolutely positioned element doesn't find a positioned ancestor, it will position the element relative to the <body>. So bottom line:
To absolutely position a child element, set the parent element to position: relative.
Here's an example using your code.
DEMO
HTML
<!-- with corrections to improperly nested list -->
<div id="container">
<h2>DRINK MENU</h2>
<ul>
<li><span>Latte</span><em>2.79</em></li>
<li><span>Cappucino</span><em>2.99</em></li>
<li><span>Cafe Americano more text more text more text more text</span>
<em>1.80</em></li>
<li><span>Espresso</span><em>2.00</em></li>
<li><span>Carmel Macchiato more text more text more text more text</span>
<em>10.00</em></li>
</ul>
</div>
CSS
/* based on your original code */
#container {
width: 200px;
border: 15px solid #886633;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
padding: 5px;
}
h2 {
width: 99%;
border-bottom: 1px solid black;
margin: 0;
}
ul {
list-style: none;
padding: 5px;
margin: 0;
}
#container ul li {
font-size: 1em;
font-weight: bold;
border-bottom: 1px dashed blue;
position: relative;
}
span {
width: 100px;
display: inline-block;
}
em {
position: absolute;
bottom: 0;
right: 0;
}
In answer to your second question...
Just tell me why is relative position not working.
Actually, it's working fine. In the normal flow of things, it's positioned exactly where it belongs. Your descriptions are breaking to a new line because of the margin limitation you set in your span.
That being said, the em can still be positioned with position: relative. Change the value from 0. Your prices will (as defined by your style rule) move up or down as a group, depending on whether you use positive or negative numbers.
Your CSS rule:
em {
float: right;
position: relative;
bottom: 0px;
/* test these individually:
bottom: 25px;
bottom: -25px;
right: 25px;
right: -25px */
}
For more about positioning see the position article at MDN.
So I'm working on a portfolio website for myself (just for fun), and I have gotten a nav bar developed that I really like. Now, I cannot seem to close the overall nav bar div parent, and every div that I insert seems to appear inside the nav bar div as a child, even though I've checked about 20 times to make sure everything is closed. Did I do something in my CSS that is forcing it to stay open and create more children?
If you look in the HTML code, the picture div keeps appearing inside my nav bar. It's extremely frustrating.
<DOCTYPE html>
<html>
<head>
<title>Jeff Lester | Portfolio</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="nav">
<div class="buttons">
<div class="programming">
<p>Programming</p>
</div>
<div class="cinematography">
<p>Cinematography</p>
</div>
<div class="photography">
<p>Photography</p>
</div>
<div class="skills">
<p>Skills</p>
</div>
<div class="bio">
<p>Bio</p>
</div>
<div class="jeff_lester">
<p>Jeff Lester</p>
</div>
</div>
</div>
<div class="picture"><p>Picture</p></div>
</body>
</html>
body {
background-image: url('retina_wood_#2X.png')
}
/* Navigation Bar */
.nav {
background-color: #F5F5F5;
height: 75px;
width: 100%;
position: fixed;
line-height: 70px;
border-top: 4px solid #6E94E6;
border-bottom: 1px solid #DEDEDE;
opacity: 0.80;
}
.nav a {
color: #858585;
text-decoration: none;
display: block;
}
.nav a:hover {
color: #303030;
}
/* Approx. 62% of page */
.nav .buttons {
width: 1202px;
margin: 0 auto;
}
.nav .buttons .programming {
background-color: #F5F5F5;
height: 70px;
width: 140px;
text-align: center;
border-right: 1px solid #DEDEDE;
float: right;
}
.nav .buttons .cinematography {
background-color: #F5F5F5;
height: 70px;
width: 140px;
text-align: center;
border-right: 1px solid #DEDEDE;
float: right;
}
.nav .buttons .photography {
background-color: #F5F5F5;
height: 70px;
width: 140px;
text-align: center;
border-right: 1px solid #DEDEDE;
float: right;
}
.nav .buttons .Skills {
background-color: #F5F5F5;
height: 70px;
width: 140px;
text-align: center;
border-right: 1px solid #DEDEDE;
float: right;
}
.nav .buttons .bio {
background-color: #F5F5F5;
height: 70px;
width: 140px;
text-align: center;
border-left: 1px solid #DEDEDE;
border-right: 1px solid #DEDEDE;
float: right;
}
.nav .buttons .jeff_lester {
background-color: #6E94E6;
height: 70px;
width: 100px;
text-align: center;
border-left: 1px solid #DEDEDE;
border-right: 1px solid #DEDEDE;
margin-right: 400px;
float: right;
}
.nav .buttons .jeff_lester a {
color: #F5F5F5;
}
.nav .buttons .jeff_lester a:hover {
color: #303030;
}
Thats because the .nav element is position:fixed. Changed to position:relative and done
here is fixed
http://jsbin.com/fokunixa/1/edit
Update:
to make the .nav fixed without affecting the others element(in this case .picture) you have to set the .picture relative and give some margin from top.
.picture{
position:relative;
top:20px;
}
Here the example.
There are some great post that talk about positioning:
Difference between style = "position:absolute" and style = "position:relative"
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
You can keep the postion fixed if you want that effect. You need to take into account however that fixed positioned elements are lifted out of the document flow. That is why your 'picture' is not getting pushed down to the postion you would expect it to be and it appears to be inside your nav.
This can easily be solved by adding a margin-top to your body that equals the height of your fixed header, and setting the top value of your header to 0.
I went ahead and copied your code to a fiddle and added my suggestions:
http://jsfiddle.net/uHFv4/
Off topic: just because I can't help it, I know that this is not codereview, but your markup is quite horrible. You navigation is a list of links and should look something like:
<nav>
<ul>
<li class="programming">
Programming
</li>
...
And in your css, you write all the styles for each button, while most often they are all the same except for the width. I sense some room for improvement there...
First option: Remove position: fixed; from the .nav
DEMO
.nav {
background-color: #F5F5F5;
height: 75px;
width: 100%;
line-height: 70px;
border-top: 4px solid #6E94E6;
border-bottom: 1px solid #DEDEDE;
opacity: 0.80;
}
If you really want your .nav to be fixed while scrolling the page, then
DEMO
Add padding to your body
body {
background-image: url('retina_wood_#2X.png');
padding-top: 80px;
}
Add top:0 in .nav
.nav {
background-color: #F5F5F5;
height: 75px;
width: 100%;
position: fixed;
line-height: 70px;
border-top: 4px solid #6E94E6;
border-bottom: 1px solid #DEDEDE;
opacity: 0.80;
top: 0;
}
When you using floats, they change the layout of the page. the document dosen't render a height for them. In the picture class you should write clear:both; to clear the floats and change the position of the nav to position relative as answered above. Like this:
.nav {
background-color: #F5F5F5;
height: 75px;
width: 100%;
position: relative;
line-height: 70px;
border-top: 4px solid #6E94E6;
border-bottom: 1px solid #DEDEDE;
opacity: 0.80;
}
.picture{
position: relative;
clear: both;
}
If you want to keep your header as position fixed then you can specify that it stays at the top of the document with top: 0px; and then give the picture class a top margin of 70px or so, i.e the height of the nav. like this:
.nav {
background-color: #F5F5F5;
height: 75px;
width: 100%;
position: fixed;
top: 0px;
line-height: 70px;
border-top: 4px solid #6E94E6;
border-bottom: 1px solid #DEDEDE;
opacity: 0.80;
}
.picture{
position: relative;
margin-top: 70px;
}
I've tested both of these and they work :) Good luck :)
Imagine (or if you can't imagine, watch) this piece of code:
<div class="block"></div>
<style>
.block {
width: 10px;
height: 10px;
display: block;
background-color: red;
border: 1px solid #000000;
border-bottom: 0;
}
</style>
Now look at the bottom line. This is my problem; I want the left and right border to be 1px longer (so the bottom border is the part between the left border and right border).
Is it possible to accomplish this??
This is a way to do it, since the box model does not support what you need, using only one div:
<div class="block"><div></div></div>
and the css:
.block {
width: 10px;
height: 10px;
border: 1px solid #000000;
border-bottom: 0;
padding-bottom: 1px;
}
.block div {
width: 10px;
height: 10px;
background-color: red;
}
This will extend the black border on the left and right side with 1px.
Try this :)
http://jsfiddle.net/z6ASC/
This is possible if you have two containers, one for the outside left/right borders, and one for the inside bottom-border. I've put together a demo showing this.
DEMO:
http://wecodesign.com/demos/stackoverflow-7074782.htm
<style type="text/css">
#borderOutside {
height: 200px;
width: 300px;
border:1px solid #900;
border-bottom: none;
padding-bottom: 5px; /*this is the gap at the bottom*/
}
#borderInside {
height: 100%;
border-bottom: 1px solid #900;
}
</style>
<div id="borderOutside">
<div id="borderInside"><!--Your Content--></div>
</div>
It can be done without adding any extraneous elements in your HTML via this strategy:
.block {
position: relative;
width: 10px;
height: 10px;
display: block;
background-color: red;
}
.block:before {
position: absolute;
content: '';
width: 10px;
height: 11px;
top: -1px;
left: -1px;
border: 1px solid #000;
border-bottom: none;
}
The pseudo element :before is only supported from IE8, but works in all other major browsers.