I'm having a problem on img:hover
Here's my jsbin: http://jsbin.com/bereputu/1/edit
My problem is when I put my mouse over the "home" or "contact", the image that I want to replace the original appears a little under than I expected.
Here's my code:
<html>
<head>
<title>UltraLotus</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="container">
<div class="header">
<img src="images/header.png">
</div>
<center>
<div class="nav">
<img src="images/home.jpg">
<img src="images/contact2.jpg">
</div>
</center>
<div class="page">
<p></p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
CSS
body {
background-image: url("images/bg.jpg");
background-repeat: repeat-y;
background-size: 100% 100%;
margin:0;
padding:0;
height:100%;
}
.container {
min-height: 100%;
}
.header {
background-color:#1a1a1a;
width:100%;
height:100px;
}
.header img {
position: relative;
margin-top:-30px;
}
.nav {
position:relative;
width:100%;
height:40px;
top: -15px;
background-image: url("images/nav.jpg");
}
.nav img {
position:relative;
margin-top:13px;
}
.nav a:first-child:hover {
position:relative;
background-image: url('images/home.jpg');
}
.nav a:nth-child(2):hover {
position:relative;
background-image: url('images/contact.jpg');
}
.page {
padding-top:5px;
top:150px;
padding-bottom:70px;
}
.footer {
position:absolute;
bottom: 0;
width:100%;
height:70px;
background-image: url("images/footer.jpg");
}
I'm not quite sure what you're looking to accomplish with the :hover styling, but it's replacing a totally different image than the one you're using in your original nav element.
For easier debugging, if you open up the chrome developer tools, you can force a hover state so you can look at all the applied css rules:
You'll notice that you're giving your a element a background-image on hover, but it's contents still contains an img element. Thus the double styling.
Note 1: Since they're both the same, you really don't even need the hover styling at all.
Note 2: This does not seem worth pulling in an image to me. You should be able to accomplish this exact style with native html an css. They render far quicker, they're much easier to download, they're much better for screen readers, they have much cleaner and clearer content, and they extend and adapt much easier. I'd skip the images altogether and go html/css for this.
Here's a little CSS to get your started:
.nav a {
color: grey;
font-size: 1.2em;
text-decoration: none;
border: 1px solid grey;
padding: 5px;
padding-bottom: 0px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
/* I even added in a little hover effect */
.nav a:hover {
background-color: #2C2C2C;
}
Here's your full site design without any images (except your logo):
http://jsbin.com/bereputu/2/
You can get much more sophisticated but I would avoid imaging out your design as much as possible. If you're doing web dev, learn CSS
Related
So my website should be multilingual. To let the user change between languages there will be flags in a dropdown.
To get a better resize ability for my images (of the flags) I wanted to create them soley via CSS. However I failed doing this, so I created little 1x3 and 3x1 .jpgs files which I wanted to resize via CSS.
Here are 2 examples I created:
(Most likely you should just download the pictures and scale them really high to understand what I did.)
My plan was using the image-rendering properties pixelated to get a resized images without any smoothing or color gradients and it worked fine until I used IE.
I created a little code snippet to recreate the basic idea:
.ger {
image-rendering: pixelated;
background-image: url(http://i.stack.imgur.com/tNV8n.jpg);
background-size: 1px 45px;
background-repeat: repeat;
}
.fr {
image-rendering: pixelated;
background-image: url(http://i.stack.imgur.com/ErVbV.jpg);
background-size: 120px 1px;
background-repeat: repeat;
}
#flag1, #flag2{
width: 120px;
height: 45px;
}
<body>
<div id="flag1" class="ger"></div>
<br/>
<div id="flag2" class="fr"></div>
</body>
But I guess I'm too new to this topic to be able to do it right. Because somehow it won't show the german flag to you.
Anyways... I can't ask you to make IE starting to support this function. But what I can ask is if you know some way to work arround this.
If not, do you know some way to create these simple flags just using CSS?
I was thinking of three divs of different colors beneith each other.
For example:
.black, .red, .yellow{
width:800px;
height:100px;
}
.black{
background-color:black;
}
.red{
background-color:red;
}
.yellow{
background-color:yellow;
}
<div class="black"></div>
<div class="red"></div>
<div class="yellow"></div>
... for the german flag.
But if I try to implement something similar into my dropwdown...
I fail...
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, #dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.black, .red, .yellow{
width:60px;
height:10px;
}
.black{
background-color:black;
}
.red{
background-color:red;
}
.yellow{
background-color:yellow;
}
<ul>
<li><a class="logo">Logo</a></li>
<li class="dropdown">
<div class="black"></div><div class="red"></div><div class="yellow"></div>
<div class="dropdown-content">
Flag 1
Flag 2
Flag 3
</div>
</li>
</ul>
Because if I do it like this, it will never have the full size of the bar, will it?
I'm sorry for providing so much information, because it's propably just too much. However these were my attempts and I really have no clue what I'm missing out onto.
In the ende the bar (shown in the last snippet) should contain a flag. The flag should touch the right and upper border of the window and the bottom broder of the bar. If you hover over it a dropdown should appear with similar flags.
If I wasn't clear at some point just ask I will try to make it clearer.
The problem with the first snippet is that there were <style> tags in the CSS section of the snippet, and that was messing it up.
.ger {
image-rendering: pixelated;
background-image: url(http://i.stack.imgur.com/tNV8n.jpg);
background-size: 1px 45px;
background-repeat: repeat;
}
.fr {
image-rendering: pixelated;
background-image: url(http://i.stack.imgur.com/ErVbV.jpg);
background-size: 120px 1px;
background-repeat: repeat;
}
#flag1,
#flag2 {
width: 120px;
height: 45px;
}
<body>
<div id="flag1" class="ger"></div>
<br/>
<div id="flag2" class="fr"></div>
</body>
I know this sounds kind of confusing but I am wondering if it is possible to make a thick border line where the header is supposed to be?
I will try to explain it by giving an image:
I want the top part of my website page to have a different color, and then the lower part another color.
Is there any way I could use a html/css code to make this happen?
this is the way to do it but for a question like this you should researsh a bit and learn the basics
.header{
background-color:yellow;
width:100%;
height:150px;
}
.rest{
background-color:black;
width:100%;
height:700px;
}
<div class="header">
</div>
<div class="rest">
</div>
if i understand correctly, you can create a div and append following css:
border-top: 50px yellow solid;
background-color: #000000;
==============
In this way the header part will be only for design, you can't put a relative code inside the border.
If you want to use that space you can do the following:
<style type="text/css">
div.header {
text-align:center;
background-color: yellow;
color: #00000;
padding: 20px;
width: 100%;
}
div.body {
width: 100%;
backgroun-color: #000000;
color: #ffffff;
}
</style>
<div class="header">Title</div>
<div class="body">Content</div>
Hopefully will help you,
Cheers
You can try having an element for your header, this way you can include content in it.
HTML5 has added multiple new tags for better understanding, you can use the tag header for it and then define you content inside the tag main
For example:
body {
background: #FAFAFA;
padding: 0;
margin: 0;
}
header {
background: #3F51B5;
padding: 20px;
text-align: center;
color: white;
}
main {
padding: 20px;
}
<header>This is the header</header>
<main>
This is the content
</main>
There is a way, you have to use CSS to do this
lets say you have.It doesnt matter if you are using HTML5 or HTML4 the code below is only example
<section>Header</section>
<article>Body</article>
now you need to add to your <head></head> , style tag
<style></style>
but if you are using HTML4 it must be
<style type="text/css"></style>
Now you need to select one of those and give them color, in my example I will give them both color
<style>
section{
background-color:#000000;
}
article{
background-color:#FFFFFF;
}
</style>
background-color neednt to be in hexadecimal like #FFFFFF it can be in rgb(0,0,0) or rgba(0,0,0,0).
I hope someone can help. I am trying to create a link with a background image in one div and and text in another. I am trying to create hover states for each which activate as soon as the parent is hovered over, which currently i'm having difficulty with. So far I have only managed to activate individual hover states.
Any ideas as to how I can solve the problem? Or is it even possible?
<style>
.pf_block {
float:left;
width:33.33333333333333%;
background-color:#6f2788;
}
.pf_img_1 {
width: 100%;
height: 313px;
background-image: url(http://kay-dee-emm.com/test/images/pf_vectors.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
}
.pf_title {
position:relative;
width: 95%;
padding:10px 0 10px 5%;
font: 28px /* 48px / 16px */ 'Quicksand', Arial, sans-serif;
color:#f7f56b;
}
.pf_img_1 {
transition:0.4s;
}
.pf_link_1 .pf_img_1:hover {
opacity:0.6;
}
.pf_link_1 pf_title:hover {
opacity:1;
color:#red;
}
</style>
<a class="pf_link_1" href="">
<div class="pf_block">
<div class="pf_img_1"> </div>
<div class="pf_title">
<p>
Vectors
</p>
</div>
</div></a>
You do this by specifying :hover on the parent instead of each child:
.pf_link_1:hover .pf_img_1 {
opacity:0.6;
}
.pf_link_1:hover .pf_title {
opacity:1;
color:red;
}
These are still two separate CSS rules with their own declarations, but hovering over the parent will correctly activate both rules simultaneously.
I have a topbar, i.e. something like Facebook or or StackExchange or Twitter's top portion of the screen, and I want it to have a different background than the rest of the page (the stuff below/the main body). How do I accomplish this?
you can use this code :
<div id="topbar">
</div>
and you can use Position:fixed; like twitter's topbar
body{
background: green;
}
#topbar{
width:100%;
background-color:blue;
height:80px;
position:fixed;
}
Try with this
css
body { background:#252525; margin:0;padding:0;}
.headerStrip{ height:40px; width:100%; z-index:1001; background:#F00; position:absolute; position:fixed;}
Html : Put it after body tag
<div class="headerStrip"></div>
You have to place the your header_block outside your wrapper
<div id="header_block">
...... Header_block Contents
</div>
<div id="wrapper">
...... Entire Page
</div>
css
#header_block
{
position:fixed;
width:100%;
float:left;
}
This should do the work
Best way to accomplish this is to use the CSS Background property.
For example stackoverflow is using a div with an id like the following to set the background color for the gray bar up top:
<div id="custom-header"></div>
Then in their css file they are using background-color like this; note the height as well:
#custom-header {
background-color: #EEE; <------------
height: 31px;
margin-bottom: -31px;
}
This gives us the grey bar up top which passes behind the StackExchange logo.
You can see that the body is set to white via CSS and the Background (shorthand) property:
body {
background: white; <-------------
color: black;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 80%;
text-align: center;
}
You can see that the footer div is taking it a step further by using background (shorthand) and border-top for the 7 pixel solid black line:
#footer {
color: #444;
background: #777; <------------
border-top: 7px solid black; <------------
clear: both;
padding: 15px;
margin-top: 30px;
}
This is a few years old now though, you might find value in running through some tutorials like this one from Net Tuts.
My current project involves setting up a bunch of sidebar links, such that the finished design looks like this:
The envelopes are supposed to move and overlap (i.e., change z-index), depending upon which icon/text is currently has :hover state.
I thought each would be a separate PNG file, but I've been given a sprite that looks like this:
Any suggestions how I could achieve this? Normally I'd just change the background position of the list elements each piece of text is in, but I don't think this is possible given the overlapping nature of these. Does he just need to export it differently?
Many thanks...
To me it looks like that sprite would work perfectly. The left most image is for when book is hovered, second image for twitter, third for facebook, forth for email. I'm guessing the last one is just the default state. Its tricky to make this work with pure css and :hover (but possible!), however, it would be extremely easy with javascript.
For the pure css solution, the div with the sprite would have to be the child of all the text elements, so you could change the background based on :hover on the parent (the text). If this isn't clear, I can make you some example code.
Edit:
Its not perfect, but its a proof of concept.
JsFiddle: http://jsfiddle.net/jp6fy/
CSS:
#side{
position:relitive;
height:341px;
width:250px;
}
#link1{
top:0;
}
.link{
position:absolute;
left:0;
top:85px;
height:85px;
padding-left:160px;
width:90px;
}
#image{
position:absolute;
top:-255px;
left:0;
z-index:-1;
background:url(http://i.stack.imgur.com/I2Y4k.png) -720px 0;
height:341px;
width:150px;
}
#link1:hover #image{
background-position:-540px 0;
}
#link2:hover #image{
background-position:-360px 0;
}
#link3:hover #image{
background-position:-180px 0;
}
#link4:hover #image{
background-position:-0px 0;
}
HTML:
<div id='side'>
<div class='link' id='link1'>
email
<div class='link' id='link2'>
facebook
<div class='link' id='link3'>
twitter
<div class='link' id='link4'>
book
<div id='image'></div>
</div>
</div>
</div>
</div>
</div>
It is possible. (But ugly.)
As a :hover selector can only affect elements inside (or directly adjacent) to the triggering element, the solution is to nest the trigger elements: (jsFiddle)
<style>
div {
width: 100px;
height: 100px;
position: absolute;
left: 100px;
}
#image { background: black; }
#trigger1, #trigger1:hover #image { background: red; }
#trigger2, #trigger2:hover #image { background: green; }
#trigger3, #trigger3:hover #image { background: blue; }
</style>
<div id="trigger1">
<div id="trigger2">
<div id="trigger3">
<div id="image"></div>
</div>
</div>
</div>
But preferably, you'd get the envelope sprites exported separately (you can of course still use CSS sprites). That should give you simpler HTML and CSS, a smaller image, and you'll avoid having to muck around with nested absolutely positioned elements, each having its own coordinate system.
I tried an approach which keeps the markup fairly simple, with only one extra non-semantic div per item:
<ul>
<li id="email">
<div class="background"></div>
<em>Email</em> chris
</li>
<li id="facebook">
<div class="background"></div>
<em>Facebook</em> follow us
</li>
<li id="twitter">
<div class="background"></div>
<em>Twitter</em> your life away
</li>
<li id="book">
<div class="background">
</div><em>Book</em> a project
</li>
</ul>
I positioned all the different copies of the background div at the same place, then varied the background position based on the hover states:
/* First, just style the document and the list text in general.
skip on for the important bit */
body {
background-color: black;
color: white;
}
ul {
width: 350px;
margin-top: 40px;
position: relative;
}
li {
margin-right: 40px;
font-family: "Century Gothic", Helvetica, sans-serif;
text-align: right;
margin-bottom: 0px;
padding: 15px 4px 25px 0;
}
li em {
text-transform: uppercase;
display: block;
}
li:hover {
color: red;
}
/* From here down is the important bit */
/* Set up the sprite in all the .background divs */
div.background {
background-image: url(http://i.stack.imgur.com/I2Y4k.png);
position: absolute;
top: 0;
left: 0;
height: 341px;
width: 160px;
}
/* By default, turn off the background in all the divs */
div.background {
display: none;
}
/* Just picking an arbitrary item to show the default, non-hover background */
#email div.background {
display: block;
background-position-x: -737px;
}
/* If we're hovering over the list as a whole, disable the default background,
so it doesn't show up underneath the background we want to display */
ul:hover #email div.background {
display: none;
}
/* For the email item, which shows our arbitrary default background, override
to the email background on hover with more specificity than the default rule */
ul:hover #email:hover div.background {
display: block;
background-position-x: 0px;
}
/* For all other items, override to their background on hover */
#facebook:hover div.background {
display: block;
background-position-x: -375px;
}
#twitter:hover div.background {
display: block;
background-position-x: -189px;
}
#book:hover div.background {
display: block;
background-position-x: -556px;
}
Working, though slightly rough example, in this jsFiddle.
Note that it's okay to have multiple copies of the sprite in multiple different divs; the browser will just grab one copy for its cache and use that for all instances of the image.
Could you create an image map and then hover swaps the image to the one with the correct envelope in front. See this link on an interesting link
google search link on idea
My method with clean HTML.
.nav { position: relative; }
.nav li {
margin-left: 179.8px;
list-style-type: none;
}
.nav li:before {
position: absolute;
left: 0; top: 0;
content: url(http://i.stack.imgur.com/I2Y4k.png);
clip: rect(0 899px 341px 719.2px);
margin-left: -719.2px;
z-index: 1;
}
.nav li:hover:before { z-index: 2; }
.email:hover:before {
clip: rect(0 179.8px 341px 0);
margin-left: 0;
}
.facebook:hover:before {
clip: rect(0 359.6px 341px 179.8px);
margin-left: -179.8px;
}
.twitter:hover:before {
clip: rect(0 539.4px 341px 359.6px);
margin-left: -359.6px;
}
.book:hover:before {
clip: rect(0 719.2px 341px 539.4px);
margin-left: -539.4px;
}
<ul class="nav">
<li class="email">Email</li>
<li class="facebook">Facebook</li>
<li class="twitter">Twitter</li>
<li class="book">Book</li>
</ul>