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>
Related
I’m really new to coding, and as a result, I’m having a bit of difficulty solving a problem that I have encountered. I am currently attempting to create a login page for practice, but when both the “Sign in to Google” and the “Sign in” button retain the same appearance no matter what I try to do. They work just fine, it is just the appearance that’s the issue. The “Sign in button will always emulate the appearance of the “Sign into Google button, no matter what changes I make to it. Any help would be appreciated.
<button type="button"><strong></strong>Sign in with Google</button><br><br>
<style>
button {
display: inline-block;
background-color: #e6e6e6;
padding: 12px;
width: 330px;
background-image: url("IMG_0045.jpg");
background-size: 20px;
background-repeat: no-repeat;
background-position: 25%;
}
a {text-decoration: none; color:black;
}
</style>
<button type="button" class="submit">Sign In</button>
<style>
button {
display: inline-block;
background-color: e6e6e6;
padding: 12px;
width: 330px;
height: 50px;
</style>
In your CSS you are using the button selector. That means it will apply that style to any <button> element in the HTML. The way CSS works is that the most recently stated rule overwrites the previous ones. So it makes sense that only
button {
display: inline-block;
background-color: e6e6e6;
padding: 12px;
width: 330px;
height: 50px;
}
Is showing up, what you want to do is give each button an id or a class
With <button id="signInButton">
You can use the CSS selector for that ID and it will apply those styles only to that button, so
#signInButton {
display: inline-block;
background-color: e6e6e6;
padding: 12px;
width: 330px;
height: 50px;
}
Would only apply to the button with that ID
I would recommend checking out an HTML and a CSS tutorial from W3schools, they teach you the fundamentals and they helped me a lot.
here's a working snippet but accept the previous answer as #Da Mahdi03 clearly showed then way
button {
display: block;
background-color: #e6e6e6;
padding: 12px;
width: 330px;
height: 50px;
background-image: url("IMG_0045.jpg");
background-size: 20px;
background-repeat: no-repeat;
background-position: 25%;
margin-top:16px;
}
a {
text-decoration: none;
color: white;
}
#google{
background:blue;}
#signin{
background:red;}
<button id='google' type="button"><strong>Sign in with Google</strong></button>
<button id='signin' type="button" class="submit">Sign In</button>
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
I have some links to my facebook and twitter, these links are images. I want these links to turn lighter when I hover over them. I was thinking I could do this by making two images and making the images change when I hover over the image link. Is this the best way to do it and if it is how do i do it? I couldn't find any help on how to do it this way.
Here is my HTML:
<div class="social">
<a href="https://www.facebook.com/seth.urquhart?sk=wall&v=wall">
<img src="../img/facebook_logo_extended.jpg"/>
</a>
</div>
<br>
<div class="social">
<a href="https://twitter.com/SethUrquhart">
<img src="../img/twitter_logo_extended.jpg"/>
</a>
</div>
Here is my CSS:
p {
color: #232323;
text-indent:0px;
margin-left:30px;
padding-right: 30px;
}
ul {
text-align: center;
color: gray;
}
ul a {
text-decoration: none;
color: black;
}
ul a:hover {
text-decoration: underline;
margin-right: auto;
margin-left: auto;
}
html {
background: #e8e9e1;
}
h1 {
text-align: center;
}
body {
font-family: sans-serif;
color: #232323;
}
.wrap {
min-width: 600px;
width: 1200px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}
.content {
background: #ffffff;
width: 900px;
margin-left: auto;
margin-right:auto;
height: auto;
text-indent: 50px;
}
.footer {
text-align: center;
background-color: #383838;
width: 900px;
margin-left: auto;
margin-right: auto;
color: #e8e9e1;
}
.social {
width: 900px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}
.social:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
ul#list-nav {
padding: 0;
list-style: none;
width: 605px;
margin: 0 auto;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
Assuming you're willing to use CSS3, I created an example showing one way to get a brief widening effect for the icons (I suppose that is what "dense" means in the question). Reduced code here:
.icon {
-webkit-transition: 0.25s;
transition: 0.25s;
}
.icon:hover {
position: relative;
z-index: 1;
transform: scale(1.7);
-ms-transform: scale(1.7); /* IE 9 */
-webkit-transform: scale(1.7); /* Safari and Chrome */
}
The transform property has good support. The effect with transition isn't so well supported (no IE9 support), but if you are thinking on graceful degration, I think it's quite valid to use that.
EDIT
I'm updating this answer because it could help other people in future. The accepted answer isn't the right approach, since it's using obtrusive JavaScript to do things about styling, where CSS is the right tool. I really hope the OP will take a look here and change their code.
Based on the OP's feedback, I updated the example showing how to get a brightness effect simulated by changing the opacity property with a fallback using filter for IE6-8. In short, here's the code:
.icon {
opacity: 1;
filter: Alpha(Opacity=100);
}
.icon:hover {
opacity: .6;
filter: Alpha(Opacity=60);
}
It's easy and works very well when the parent's background-color is lighter than the element. If you need something more elaborated (if you really want changing between two images), I really suggests you to use CSS sprites.
I don't know what you mean by dense, but you can alter any image property via the onmouseover and restore it with onmouseout. Here's a code snippet to show how to do it. This code simply makes an image dimmer when the mouse is over it, then restores it when the mouse leaves:
<img
src = "test.jpg"
style = "width:50%;"
id = "test"
onmouseover = "document.getElementById('test').style.opacity=0.5"
onmouseout = "document.getElementById('test').style.opacity=1" />
If you wanted to make the images bigger on the hover, you'd change any of the size attributes. For instance, here's a particularly dramatic size jump:
<img
src = "test.jpg"
style = "width:50%;"
id = "test"
onmouseover = "document.getElementById('test').style.width='75%'"
onmouseout = "document.getElementById('test').style.width='50%'" />
Please note that the above is for illustrative purposes only. There are other ways of doing this, and I am not saying the way I presented is the best or even a good one. However, it's clear and I just want you to clearly see how this can be done.
The simpliest solution would probably for you to use background-images rather than images so you can just switch between them. You can even go as far as creating 3 states this way.. inactive, hover, and selected..
Consider cascades and specificity.. If you define your inactive state first, hover state is defined second overwriting the same definitions, selected state is defined last, again with the same definitions and level of specificity. Now each will overwrite the other in the appropriate or they will happen.
An image
div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }
On hover display a different image
div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }
If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class
div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }
Hey all I posted a question earlier here : Why am I getting white space between my HTML element? which was solved.
I have continued working on this page and have ended up with the following:
IE Screenshot:
http://postimage.org/image/2aqd5k99g/
Chrome Screenshot:
http://postimage.org/image/1xdm95138/
What I really want is basically the chrome screenshot but without the white space below my red footer. What can I do to get this desired effect for both IE and Chrome?
My HTML file is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
</head>
<body>
<img src="final.jpg" id="banner"></img>
<ul id="nav">
<li class="links">Home</li>
<li class="links">Planning</li>
<li class="links">Construction</li>
<li class="links">Evaluation</li>
</ul>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
</div>
<div id="rightcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS file is:
html{
font-family: sans-serif;
background-color:#464E54;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 5px solid black;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#mainc {
float: left;
width: 760px;
background-color: white;
margin: 0;
}
#rightcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 197px;
}
#footer {
clear: both;
background-color: red;
}
.links {
float: left;
margin: 0px;
}
a:link {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
Once again cheers for everyones help - hopefully after this I will be a bit more familiar to these mysterious white lines showing up.
add the following rule
div#footer p {
margin:0;
}
Use inspect element on chrome by right clicking.
you will find the area which is blue by moving mouse over the respected area and then you can solve the problem
Have you checked it on different chrome browsers (From different PCs chrome browsers) or do you have any download manager extension installed on your browser, if yes; then disable that first and then reload your page.
Hope this works for you.
Many of these problems are solved, only by importing and using a CSS Reset. Why don't you use them?
Theory: Browsers apply some default style on HTML elements, and they are not the same in that. For example, IE might add 15px margin to p elements, while Chrome might add 13px. This means that incosistencies can exist between default styles of HTML elements across browsers. CSS Reset is technically a set of CSS rules which zero-outs these default values. For example, you can see that in CSS reset, a p is directed to have 0 margin.
p
{
margin: 0;
}
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>