So I have this Div that has a roll over effect on it where it changes the border color on roll over, in order to make this div a link I've put a link into the DIV and given it a Display: Block property so it fills the div.
What I'm having an incredibly hard time doing is getting the text to align to the bottom left corner of this div while keeping the blocking so the whole roll over area stays a link.
ANY solutions to this problem I'd greatly appreciate, thanks for your help in advance I've been battling this for a while.
http://www.klossal.com/media/index_test.html
this is the test page and this is the code:
<!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>
<title>MEDIA</title>
</head>
<SCRIPT TYPE="text/javascript">
<!--
function mouseover()
{
document.getElementById("thediv").style.borderLeft="10px solid black";
}
function mouseout()
{
document.getElementById("thediv").style.borderLeft="10px solid #898787";
}
//-->
</SCRIPT>
<style type="text/css">
</style>
</HEAD>
<link rel="shortcut icon" href="\favicon.ico">
<body>
<DIV style="width:200px;height:200px;border-left:10px solid #898787" id=thediv
onmouseover="mouseover()" onmouseout="mouseout()">
<a style="padding-top:1cmpx;" href="www.klossal.com">LINK IT BABY</a>
<DIV>
</body>
</html>
</body>
To align something to the bottom, one can set the position to absolute and bottom to 0px. This will align it to bottom of the first parent that is positioned either absolute or relative.
In your case, set the position of the DIV to relative, the position of the link to absolute and the bottom of the link to 0px:
http://jsfiddle.net/rodin/jxyZz/
And by the way, you can achieve the rollover effect with pure CSS, see the fiddle. If you want to make the entire box a link, the box should be an A and the text a DIV (you did it the other way around).
You could add an additional span element that will positioned a the bottom of the link. Note you could create the hover effect in css as well: http://jsfiddle.net/Te23c/
Html
text
a{
width: 200px;
height: 200px;
display: block;
position: relative
}
CSS
a:hover{
background: lime
}
span{
position:absolute;
bottom:0;
}
Related
I made a simple way to display help text that looks like a popup window using only CSS. It works good except by default the popup window is left justified. I would like the window to be closer to the icon itself like what (in my example) "left: 360px;" would show. Since the position of the hover icon may change, does anybody know of a way of setting the position of the popup window based on the position of the hovered over icon? We use jQuery and Prototype but I'd prefer to use only CSS so the same code could be used on either type of page. Thanks.
Here's my example:
EDIT: This was already answered but here's the fixed code in case anybody else is looking for an easy way to display a popup message when hovering over an icon. Also, here's an example of it on jsfiddle.net so you can easily try it out: http://jsfiddle.net/zDADW/
By the way, if anyone knows why someone would rank this down one (as of this writing someone clicked the down arrow for this question), please let me know.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Show help text when hovering using CSS</title>
<style type="text/css">
#help:hover #help_popup {
/*If you hover over the help icon, show the help_popup span*/
display: block;
}
#help {
/*This is the part I was missing*/
position: relative;
}
#help_popup {
/*Normally, hide this span*/
display: none;
position: absolute;
width: 15em;
padding: 10px;
background: #CFF;
color: #000;
border: 3px solid;
text-align: center;
left: 10px; /*this is still needed even if it's 0*/
}
</style>
</head>
<body>
<div>
This shows a popup window using CSS when you mouse over an image.
<div>
Hover over the question mark for a popup help window.
<span id="help">
<img src="questionmark.png" alt="[?]"/>
<span id="help_popup">
This is the normally hidden help text.
<br/>It only shows up when you hover over the question mark.
</span>
</span>
</div>
</div>
</body>
</html>
Add #help { position: relative; } to your CSS. This will allow the absolutely positioned element to calculate it's position relative to the #help element. You'll probably find that you want to decrease the left property once you make this change.
jsFiddle demo
I'm currently trying to make a div that is 100% as wide as the whole screen. And I did it by writing the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>100% width</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html,body {
padding:0px;
margin:0px;
width:100%;
}
</style>
</head>
<body>
<div style="background-color:yellow;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
It works fine in normal zoom settings but when I do max zoom in (FireFox 6.0.2) the letters inside the div outgrows the yellow box. Is there a way for the yellow box to extend to the end of the window as well?
Thanks.
You can force the really long word to wrap with:
word-wrap: break-word;
in your div style.
Does it really matter what happens at maximum zoom though?
Option 1
If you want to keep the text within the yellow box try adding this CSS styling.
div {word-wrap: break-word;}
It will cause the text to go to the next line rather than continue.
Option 2
OR you could try hiding the content that goes past the div border using CSS styling
div {overflow:hidden;}
Safari 4 seems to be ignoring element margins unless I add a border.
The following example renders left and right margins but no top or bottom.
Upon adding a border, it renders as expected. Am I doing something wrong or am I going to have to add borders (albeit transparent ones) to every element with margins just for Safari?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>testing</title>
<style>
body {background-color:#666;}
div {display:block; position:relative; margin:0; padding:0;}
.background {background-color:#990000;}
.foreground {background-color:#fff; margin:10px; padding:10px;}
</style>
</head>
<body>
<div class='background'>
<div class='foreground'>
foreground
</div>
</div>
</body>
</html>
It's a normal weird behaviour calling margin (edited, sorry i'm french) collapse.
To simply avoid it add overflow:auto; on the container.
.background {background-color:#990000; overflow:auto;}
It is called margin collapse. When a top and bottom margin are touching each other, the margins will combine into the greater of the two.
The reason it works "correctly" when you add the border is because you created a 1px separator for the margins so they no longer collapse. Interestingly, if you instead added a empty div with no height/borders, the margins would still collapse because the div takes up 0px space.
We have a div with static positioning. Inside we have a paragraph with a margin.
The height of the div will be the paragraph without the margin
We have a div with float:left. Inside we have a paragraph with a margin. The height of the div will be the paragraph plus its margin.
What is the explanation of this?
Here is the html code:
<!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" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nivel1">
<div id="nivel21">
<p>Este es el primer parrafo</p>
</div>
<div id="nivel22">
<p>Este es el primer parrafo</p>
</div>
</div>
</body>
</html>
And the CSS code:
body {
margin:0;
padding:0;
}
#nivel1 {
border:solid;
border-color:#333;
margin:0;
background-color:#0F3;
margin:2em;
}
#nivel21 {
margin:2em;
float:left;
background-color:#C00;
}
#nivel22 {
margin:2em;
background-color:#FC0;
}
And here is a link to the test site.
After several edits, I think I have got the answer now :)
I have also experienced this puzzling behaviour. I think part of the explanation is in section 10.6.7 of the CSS2.1 spec:
In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element
that establishes a block formatting context is computed as follows:
If it only has inline-level children, the height is the distance between the top of the
topmost line box and the bottom of the bottommost line box.
If it has block-level children, the height is the distance between the top margin-edge of
the topmost block-level child box and the bottom margin-edge of the bottommost block-
level child box.
Those "certain cases" listed in section 10.6.6 include floating elements.
The #nivel21 element in the question is a floating element, and it contains block-level children (a <p>), therefore this special-case rule is applied and the height of the <div> is calculated using the top and bottom margin-edges of the <p> tag.
Secondly, this page about collapsing margins may give a clue as to why the height of #nivel22 does not include the margins of the <p> tag:
The [...] margin-top on the p element effectively becomes the top margin of the div element, and pushes the div down the page [...]
The <p> tag has an implicit margin (10px in my tests), which needs to collapse with the 2em margin of the outer #nivel1 element, so for this reason the browser pretends that the <p> tag has no margin at all (it puts it on #nivel22 instead), which means that the height of #nivel22 shrinks down to the line-height of the <p> tag.
I hope this answer makes sense to someone other than me!
I think When you use the float property the browser pads the element to show is floating.
Well, since there is no question and no clear naming of your elements i'll just assume you want to put 2 columns in a container.
Cleaned up code with some more clear naming and use of classes results in this:
(hope this is what you were looking for)
<html>
<head>
<title>divs</title>
<style>
.container{
float: left;
background-color: #0F3;
}
.column {
margin: 2em;
float: left;
padding: 5px;
}
#lefty{
background-color: #C00;
}
#righty{
background-color: #FC0;
}
</style>
</head>
<body>
<div class="container">
<div id="lefty" class="column">
<p>Column number 1</p>
</div>
<div id="righty" class="column">
<p>Column number 2</p>
</div>
</div>
</body>
</html>
This happens because of the interaction of the two divs. Remove the floating one, the static one will shrink. What happens is, the floating div pushes the text in the static div down, thus expanding it.
More comments: The paragraph tag is irrelevant here. You can achieve the same effect by removing the paragraph margin and increasing the margin for the elements themselves. Either way, the statically positioned element would grow while the floating one would not. Same thing with this CSS:
body {
margin:0;
padding:0;
}
p {
margin: 0;
}
#nivel1 {
border:solid;
border-color:#333;
margin:0;
background-color:#0F3;
margin:2em;
}
#nivel21 {
margin:5em;
float:left;
background-color:#C00;
}
#nivel22 {
margin:5em;
background-color:#FC0;
}
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">
<head>
</head>
<body>
<div style='border: 1px solid red; width: 100px;'>
foo
bar
</div>
something
</body>
</html>
I got problems with IE7 (IE6 support is not needed)
On IE7 rendered html looks like this=>
I need it to look like this (works on chrome/ie8 at the moment)=>
What should i change? :)
You need to float both elements and clear it.
<!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>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
bar
foo
<div style="clear:both;"></div>
</div>
something
</body>
</html>
Or simply put the floating element in front of the normal element like this:
<!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>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
bar
foo
</div>
something
</body>
</html>
Brief Explanation:
Pardon my english and drawing, but here's briefly how float and clearing works in cross browser:
An element can be floated left or right. When you have element floating, the element doesn't push "normal" content downwards. See why -
Float and clear:
Legend: Orange/Float Right, Blue/Float Left, Gray Lines/Clear divider, Red Rect/bounds
In this case, you have 2 elements of one line text - one float left, and the other float right. When floating, it will not push the contents downwards aka taking space. Thus if you do not use clear:both at the gray lines, the contents below will stack upwards between the 2 floating elements and thus may not be what you want.
When you use clear:both below the floats, the content below the floats will be pushed as far as whichever float element is of highest height. This is shown in the diagram's 2nd and 3rd section.
Float only:
Legend: Orange/Float Right, Blue/Normal content, Gray Lines/the line that is divded with the next, Red Rect/bounds
The blue normal content is already by default text-align: left;. Thus it is left oriented. You need the float to be in front of the normal content because you're telling the browser to float from this line.
You should experiment different conditions to see its effect: putting float in front, behind, float left right, clear both, clear right and left.
Always helpfull for all IE-Float-Combos: Give every float-element a display: inline;
Try the clear after fix:
div:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}