So I have used - http://www.roundedcornr.com/ - to generate some rounded corners via CSS. Great - works fine, no probs.
However! I am now really stuck trying to do "hover" rounded corners. I basically got the generator to generate the corners in a lighter color (for the hover) and now have no idea how to implement the lighter hover ?
Does anyone know how to do this in CSS/HTML only ? It should be 100% possible I am just a little unsure.
I only gave the website a short peak and basically they provide you with a couple of PNGs. Not bad, however not the best solution in all cases. Since the current CSS standard doesn't support rounded corners and beside Firefox/Mozilla no one understands this:
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
I think you are stuck with only one option. Choose a constant height and width for your element and create ONE png out of it. You can than create something like this
span{
display:block;
width:100px; height:100px;
background-image:url("nice.png");
}
span:hover{
background-image:url("nice_hover.png");
}
Why do I think there is no other way? Because you only can effectively change the attributes of one element at a time with the "hover" effect. Hopefully CSS3 will give us rounded corners... However if you make use of JavaScript this is a completely different story..
Update
I thought about it and I probably flopped in presenting you all the available options. Here is a working solution for IE7+, FF, Opera that achieves exactly what you are looking for. Just replace the color with some background-image. Sorry!
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Floating</title>
<style type="text/css">
.content p{
position:relative;
height:100px;
width:400px;
border:1px solid black;
}
.content p span{
position:absolute;
}
.content p .span1{
left:0;
top:0;
}
.content p .span2{
right:0;
top:0;
}
.content p .span3{
left:0;
bottom:0;
}
.content p .span4{
right:0;
bottom:0;
}
.content p:hover .span1{
background-color:red;
}
.content p:hover .span2{
background-color:blue;
}
.content p:hover .span3{
background-color:green;
}
.content p:hover .span4{
background-color:yellow;
}
</style>
<body>
<div class="content">
<p>
<span class="span1">1</span>
<span class="span2">2</span>
<span class="span3">3</span>
<span class="span4">4</span>
</p>
</div>
</body>
</html>
I would recommend doing this in JavaScript, this will then allow for variable sized rounded corner boxes.
Related
This is a login form that I am creating and it already has an image (some logo). I would like to add some background image for the same page to make it beautiful. Unfortunately my CSS does not help me to do it. What should I do to add a background image to my web page when there is already an image
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Login
</title>
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body >
<header >
<h1>Loan Management System </h1>
</header>
<!--This is the image -->
<img src="Images/logo_large.jpg" height="200px" width="200px" title="Logo" class="logo">
<form>
<label>Username</label>
<input type="text" name="username"/>
<label>Password</label>
<input type="password" name="password"/>
<button type="submit" name="login">Login</button>
</form>
</body>
</html>
CSS
header
{
position:absolute;
font-size:13px;
color:#000040;
text-shadow:5px 5px 5px #CCCCD9;
margin-top:80px;
margin-left:280px;
}
body
{
position:relative;
font-family:Georgia,serif;
background-color:#A52A2A;
background-image:url(Images/login2.jpg);
}
.logo
{
position:absolute;
display:block;
padding:5px;
}
form
{
position:absolute;
width:300px;
height:300px;
border:5px solid #194775;
border-radius:20px;
margin-top:161px;
margin-left:362px;
box-shadow:2px 2px 2px #194775;
}
label,input
{
display:block;
margin-top:25px;
margin-left:55px;
}
label
{
font-weight:700;
}
input
{
width:200px;
height:2em;
border:2px solid #036;
border-radius:10px;
}
input:hover
{
border-radius:10px;
border-color:#FF8A00;
}
input:focus
{
background-color:#DBDBFF;
}
button
{
display:block;
margin-top:25px;
margin-left:55px;
width:90px;
height:40px;
color:#FFF;
border:2px solid #000;
border-radius:10px;
background-color:#243D91;
}
button:hover
{
background-color:#0FCCF0;
border-color:#003D91;
}
I'm posting this as an "answer" because it's simply too long for a comment. As I mentioned in my comments, css paths to urls are parsed relative to the directory where the css is stored rather than the directory of the page that includes it. As an example:
You have a website with a root and 2 subfolders, CSS and Images. Your directory structure might look like:
mypage.html
myotherpage.html
CSS\styles.css
CSS\layout.css
Images\login.jpg
Images\login2.jpg
If mypage.html has a reference link to styles.css, then any url images that are included from styles.css will need to be referenced from the CSS directory.
background-image: url(Images/login2.jpg);
/* This fails because there is no CSS\Images directory */
background-image: url(../Images/login2.jpg);
/* This works because that is the natural path to the Images directory from CSS */
To avoid this confusion, I prefer to use absolute paths in my css whenever possible, but this becomes understandably difficult when you have a potential to cross domain or protocol boundaries. If you have multiple domains pointing to the same site folder, then you'll have a style reference from myfirstsite.com to mysecondsite.com and this may be inappropriate (particularly if branding is an issue). You may also have an https part of the site that would then have a reference to a non-https version of the site which would create ssl errors/alerts.
Well, the obvious suspect would be that you check the path to the image.. If thats alright then you might want to have a look at the z-index property of CSS. It deals with the way images are ordered in vertical space..You can read about it here ..In your case the body background would be at the back(z-index:0) and then the logo at the front(z-index:1) .
I think as mentioned on the comments. You should check your path to see if it renders.
Check out my Fiddle
body{
position:relative;
font-family:Georgia,serif;
/* I have used background-color property and it gets applied, but I really do not want it*/
background-color:brown;
/* Here is my background image.But it is not applied in the page */
background-image:url("https://mozorg.cdn.mozilla.net/media/img/firefox/os/bg/1400/birthday.jpg");
}
Plenty of other things on the page are using the absolute positioning as well, but for some reason the "vote" and "profile" buttons are displaying several hundred pixels to the right and about fifty pixels up in Internet Explorer 9/10 (8- is not an issue here). There is no styling in the HTML, it's all right here. Anything that stands out? Thanks!
.contain{
margin-left:-65px;
margin-top:-85px;
position:absolute;
}
.video_display1{
background-color:#333;
width:250px;
height:200px;
margin-top:40px;
margin-left:88px;
display:inline;
}
.profile1{
width:49px;
height:12px;
margin-left:87px;
margin-top:3px;
position:absolute;
}
.vote1{
margin-top:3px;
margin-left:240px;
position:absolute;
}
.display_vote1{
margin-left:295px;
margin-top:2px;
font-size:11px;
position:absolute;
}
And here's the HTML:
<span class="contain">
<iframe class="video_display1" width="250" height="200" src=""> </span>
<span class="profile1"><img src=''/></span>
<span class="vote1"><input type="image" src=''/></span>
<span class="display_vote1"></span>
</span>
And the DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
You have not defined width and height of images, so to get fixed height & width define it first. And use display: inline-block; in your .contain then only you get what you want.
Let me preface this question with the warning that I'm a self-taught (amateur) web developer (and not a very good one). I've been trying for a long time to find an effective way of centering web pages using AP Divs. I've tried setting "margin: 0 auto;" and I've tried setting "margin-left: auto;". Both work for that one div. But I then have to use that as a wrapper to design within, so when I put more divs inside that, they don't center.
I may be completely approaching this wrong; if so, please correct me. Code (not working) for a basic version of what I want to do is below. If you run that code, if I were to place, say, an image in apDiv1, it would scale to the page size fine; but the text in apDiv2 does not.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Page</title>
<style type="text/css">
#apDiv1 {
margin: 0 auto;
width:600px;
}
#apDiv2 {
position:absolute;
width:50px;
height:24px;
z-index:1;
left: 47px;
top: 29px;
}
</style>
</head>
<body>
<div id="apDiv1">
<div id="apDiv2">Hello</div>
</div>
</body>
</html>
I can center a div inside another div just fine using margin-left:auto; and margin-right:auto;:
Working example: http://jsfiddle.net/xjKhT/
In my own opinion, it is not good to use appdivs(coz it depends on how you positioned it on the design). You can do it(centering stuffs) on your own, check this:
Centering(Simple Sample)
<style>
#header {
margin:auto;
width:600px;
background:#000;
padding:5px;
}
#title {
width:50px;
margin:auto;
background:#CCC;
padding:5px;
}
</style>
<div id="header">
<div id="title">Hello World</div>
</div>
Custom AppDivs adds extra styles which is not really necessary:)
Updated example
Ok after some guessing and poking I think you mean that you want to absolutely position the elements inside the center-aligned wrapper.
position: absolute will be absolute to the page UNLESS the parent has position: relative.
#apDiv1 {
margin: 0 auto;
width:600px;
position:relative;
}
I'm having an issue with IE9(and 8) with positioning empty(kinda) anchor elements over an image. The anchors contains text, but it's kicked off the page using CSS's text-indent property.
I'm working on a site that has a series of promo panels, they're all contained in an UL. Inside each LI there's a promo image, and 1 or more anchor elements positioned over different areas of it. The IMG and the A elements are absolutely positioned in the LI element. So, the basic structure looks like UL > LI > IMG A A A.
This setup works fine in Firefox and Chrome, but IE doesn't like it. I've tried using z-index on this setup with no luck.
Can anyone explain the issue that IE is having, and give a better solution for my CSS? I've made a quick/simplified example of my problem using a div, img, and a single anchor. This can be copy/pasted onto your machine to see it in action.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="Description" content="" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="" />
<style type="text/css">
#div {
z-index:1;
display: block;
background:red;
position:relative;
}
#image {
z-index:2;
position:absolute;
top:0;
left:0;
display:block;
}
#anchor {
z-index:3;
display:block;
overflow:hidden;
position: absolute;
top:0;
left:0;
text-indent:-9999px;
width:640px;
height:480px;
}
</style>
</head>
<body>
<div id="div">
<img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
clicky
</div>
</body>
</html>
I don't have much control over the UL > LI > IMG A layout. This is setup that as we get new promos we can easily update the image, and just add or remove anchors easily depending on how many 'calls to action' the image has. The positioning of the A elements are injected inline.
Thanks!
I had the same issue. Using your example, here's my solution:
<style type="text/css">
#div {
position:relative;
}
#anchor {
display:block;
width:640px;
height:480px;
overflow:hidden;
text-indent:-9999px;
position:absolute;
top:0;
left:0;
background:url(http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg) no-repeat 640px 480px;
}
</style>
<div id="div">
<img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
clicky
</div>
Since the anchor tag has a set width and height with overflow hidden, set the anchor tag's background image to the image that it's absolutely positioned over (or any image you've already included), BUT set the background-position to positive pixel values larger than the anchor's width and height and background-repeat to no-repeat. By doing this, the anchor tags work in IE, AND the browser doesn't download extra resources so you save bandwidth. Note: the img tag doesn't need any special styling, and the containing div only needs position relative.
If you don't want to worry about setting the background-position, don't have control over the size of any dynamically generated images, and/or aren't concerned about saving bandwidth, you could also create and use a small (1x1) clear/transparent image (set background-repeat if necessary).
Alternately, augmenting Billy Moat's fiddle example: http://jsfiddle.net/7NpLq/29/
I think you could use a plain old HTML image map to achieve what you're wanting here:
http://www.w3schools.com/tags/tag_map.asp
Otherwise here's a fiddle doing what I think you were trying to do originally:
http://fiddle.jshell.net/7NpLq/
This issue affects IE10 as well, but not IE11. An alternative to the background image approach is to apply background-color: rgba(0, 0, 0, 0); to the anchor. Note that this won't work in IE8, which doesn't support rgba colors.
Can someone explain how to code the feedback button seen on foursquare.com? It's a vertical button on the side of the webpage and it opens a new window and dims out the background. I've seen this on some other sites as well. Thanks in advance.
How they did it...
The button is provided through the http://getsatisfaction.com service. This service is similar to other services like http://sharethis.com which exist to minimize the programming required to create a fully-rounded website. Essentially you setup an account (I'm assuming...) and they provide you with a javascript code-block that you include in your projects, which causes the vertical-button to appear on your site.
Do it yourself...
This wouldn't be that difficult the do yourself. I quickly worked up a jQuery example. Suppose we have the following markup:
<div id="feedback">
<p>Here is where you would have your form.</p>
<div class="toggler">?</div>
</div>
.toggler will be our button in this case. We'll want to place it outside of the feedback box with some css, and also place the feedback box with some css too:
#feedback { position:absolute; left:0; width:200px; padding:10px;
background:red; color:white; }
.toggler { width:25px; height:50%; color:white; background:blue;
text-align:center; position:absolute; top:25%;
right:-25px; cursor:pointer }
This could be cleaned up a bit. But now that we have our elements, we can add some toggle-logic with jQuery:
$(function(){
// When the user clicks on .toggler
$(".toggler").click(function(e){
// Get a reference to our feedback box
var feedback = $("#feedback");
// If it's in the process of being opened (or is opened)
if ( $(feedback).hasClass("opened") ) {
// Close it
$(feedback)
.removeClass("opened")
.animate({"left":0}, 1000);
} else {
// Else, Open it
$(feedback)
.addClass("opened")
.animate({"left":-$(feedback).outerWidth()}, 1000);
}
});
});
Online demo: http://jsbin.com/iyenu4
Have a look at jquery and the jquery UI javascript library for implementing those kinds of interavtive features.
Here is an example: http://wpaoli.building58.com/2009/08/jquery-animated-feedback-tab-thingy/
Looks like they're using the Lift modal dialog for the popup and background dimming.
The button is probably positioned using CSS fixed positioning. Fixed positioning means that it remains in the same place on the screen, not on the page. This allows it to 'float" over the text even when you scroll.
The popup dialogue is the same. Clicking on the button toggles the display CSS property between none and something other than none, probably block.
The gray background, I'd guess is created with a big fixed position <div> with width:100% and height:100% and some opacity.
Try this:
HTML
Save this as example.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Example</title>
<link rel="stylesheet" href="example.css" type="text/css" />
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<h1>Example</h1>
<a id="clickhere">Click here for the popup!</a>
<div id="main">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<form id="popup" class="dialog" action="#">
<div id="popupbackground"></div>
<div class="dialog">
<h2>Popup!</h2>
<a id="closepopup">Click here to close this dialog</a>
</div>
</form>
</body>
</html>
CSS
Save this as example.css:
html {
height:100%;
}
body {
height:100%;
}
form.dialog {
height:100%;
width:100%;
position:fixed;
top:0px;
left:0px;
text-align:center;
padding-top:10%;
display:none;
}
form.dialog div.dialog {
width:400px;
background-color:gray;
margin:auto;
text-align:left;
border:2px solid black;
padding:10px;
position:relative;
z-index:10;
}
form.dialog label {
display:block;
}
form.dialog input {
width:99%;
}
form.dialog textarea {
width:99%;
height:200px;
}
a {
cursor:pointer;
text-decoration:underline;
font-weight:bold;
}
#popup #popupbackground {
background:gray;
opacity:0.4;
filter:alpha(opacity=40);
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
}
JavaScript
Save this as example.js:
window.onload = function() {
document.getElementById("clickhere").onclick = function() {
document.getElementById("popup").style.display = "block";
};
document.getElementById("closepopup").onclick = function() {
document.getElementById("popup").style.display = "none";
};
};
The idea is that the <form> consumes the whole screen, because of the width
and height properties in the form.dialog rule. Since that rule also specifies a fixed position, the user can never scroll away from the contents of this <form>. We can then center the <div class="dialog"> using a margin:auto, so it floats, centered on the page. The <div id="popupbackground"></div> provides a faded gray backdrop.