I want the whole div clickable, but it will not show. I want it to change when hovered as well. I believe I have used this same coding before and it has worked, not sure why I am having issues.
<div class="clickable_one">
</div>
div.clickable_one {
float:right;
}
div.clickable_one a {
position:absolute;
width:120px;
height:30px;
text-decoration:none;
background-image:url("images/forums_link copy.png");
}
div.clickable_one a:hover {
position:absolute;
width:120px;
height:30px;
text-decoration:none;
background-image:url("images/forums_link_2 copy.png");
}
The problem is you are using float:right on your div and position:absolute on your <a> which forced everything to move on right corner of screen. If you use InspectElement you will have clear view. I placed a border around your div as example to check location of div
I'v updated your CSS a bit and content is showing.
div.clickable_one
{
border: 2px solid blue;
}
div.clickable_one a {
width:120px;
height:30px;
text-decoration:none;
background-image:url("images/forums_link copy.png");
}
div.clickable_one a:hover
{
width:120px;
height:30px;
text-decoration:underline;
background-image:url("images/forums_link copy.png");
}
DEMO
Related
I am trying to put a title in a div toolbar next to some pictures. The problem is that my text is not well placed, it should be at least on top of the toolbar but instead it is at bottom and doesn't move.
I would like it to be in the vertical middle at left near the pictures.
Here is a codepen : http://codepen.io/anon/pen/fDojK
And a picture :
Here is the html part of the title bar:
<div id="bar" >
<div id="picturesmenu">
<img src='images/back.jpg' alt='back' />
<img src='images/home.jpg' alt='home' />
<img src='images/reload.jpg' alt='reload' />
</div>
<div id="titlemenu">Main</div>
</div>
<div id="body">
...
And style :
#bar
{
width:100%;
height:50px;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
vertical-align:top;
}
#picturesmenu
{
margin:0;
padding:0;
display:inline;
}
#bar img
{
border:3px solid white;
width:40px;
margin:2px;
}
#titlemenu
{
margin:0;
padding-left:20px;
height:100%;
display:inline;
font-size:20pt;
font-weight:bold;
color:white;
}
#bar span
{
margin-left:20px;
margin-top:200px;
font-size:20pt;
font-weight:bold;
color:white;
}
I tried vertical align and margin but the "Main" text doesn't move...
Thanks in advance before I change anything into tables ;)
[EDIT]
Thank you all for your answers ! I didn't thought about handling the alignment of the content (#titlemenu) instead of the container (#bar), it's not very logical...
You need to work the vertical align for both #picturesmenu and #titlemenu and remove the padding left for that title if you want it to the left. Then work with inline-block elements. Like this:
EDITED WITH CROSS-BROWSER CODE
html, body {
height:100%;
width:auto;
padding:0;
margin:0;
background-color:black;
}
#bar {
width:100%;
height:auto;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
display:block;
}
#picturesmenu {
margin:0;
padding:0;
}
#bar img {
border:3px solid white;
width:40px;
margin:2px;
display:inline-block;
vertical-align:middle;
width:40px;
height:50px;
}
#titlemenu {
margin:0;
padding-left:0px;
display:inline-block;
vertical-align:middle;
font-size:20pt;
font-weight:bold;
color:white;
}
.item {
float:left;
width:120px;
height:120px;
border:2px solid white;
text-align:center;
margin:20px;
padding:20px;
}
.picitem {
height:70%;
margin-bottom:25px;
border:2px solid white;
}
.textitem {
underline:none;
color:black;
font-size:16pt;
color:white;
}
I have forked your CodePen
However, a way better approach would be to give #bar a display:block property and then add inline-block to everything inside, but if you want it to work as in your description, there you go
Add these lines to the #titlemenu in CSS
padding:10px;
display:inline-block;
vertical-align:top;
By vertical-align:top, the block gets aligned to the top of the parentdiv and you set padding to fit the height of the block to the height of the parent div
Demo
As you can see by my code, I am creating several different links in the shape of a circle, these links have an image, however when you hover the image, I want it to change the image to something else.
However when I try to hover it will not work? :S
CSS:
.Row {
width:16%;
height:250px;
text-align:center;
margin-top:25px;
margin-left:130px;
float:left;
display:block;
border:0px solid red;
overflow:hidden;
}
.Google {
width:240px;
height:240px;
text-align:center;
border:5px solid white;
border-radius:300px;
margin:auto;
background-image:url("img/googlet.png");
}
.Google:hover {
background-image:url("img/outlook.png");
}
HTML:
<div class="Row">
<div class="Google"></div>
</div>
You can block a tag with a {display:block;}
than write css for hover like following.
a:hover .Google {background-image:url("img/outlook.png");}
I'm making a dropdown menu in pure CSS and I'm encountering some difficulties making the dropdown look the same in every browser.
I've tried everything I can think of - setting margins to zero, setting padding to zero... and nothing seems to work.
http://jsfiddle.net/mf9cS/
Safari renders it perfectly:
Firefox has a mysterious gap between the title and the dropdown:
And Chrome is missing one pixel out of the border on the top right concave corner:
CSS:
.container {
position:absolute;
top:50px;
left:50px;
margin:0px;
}
.title {
position:relative;
display:inline-block;
height:25px;
overflow:hidden;
font-size:15pt;
padding:0px;
padding-top:1px;
margin:0px;
}
.title:hover {
height:200px;
}
.title:hover > .links {
width:150px;
}
body {
font-size:14pt;
}
.links {
width:0px;
border:1px solid grey;
visibility:hidden;
padding-top:0px;
margin-top:0px;
}
.titletext {
margin-left:0px;
margin-top:0px;
height:25px;
margin-bottom:0px;
}
.title:hover > .titletext {
border:1px solid grey;
border-bottom:1px solid white;
}
.title:hover > .links {
visibility:visible;
}
a {
text-decoration:none;
color:grey;
width:150px;
display:block;
}
a:hover {
background-color:purple;
}
HTML:
<html>
<body>
<div class="container">
<div class="title">
<span class="titletext">
This is a test
</span>
<div class="links">
Link 1
Link 2
This is the third link
</div>
</div>
</div>
</body>
</html>
Problem is your white border of title span element. All browsers are rendering border different way. In chrome and firefox that white border is touching to end of that element where you see white space at corner. Set border radius to 2px it the space will go away. I'm sure but here is the demo.
`border-bottom-right-radius:2px`
http://jsfiddle.net/mf9cS/3/
The elements aren't positioning themselves as I want them to. I want the picture to be 20px away from the left, why is the logos div so thin? :S Also why is the topuserbar div going under? There seems to be no reason.
Here is the CSS and HTML. It's not rocket science, so that's extra frustrating because it shouldn't be rendering like this.
#header
{
border:1px solid red;
background-image: url('images/headerBackground.png');
background-repeat:repeat;
width:auto;
}
#logo
{
border:1px solid red;
display:inline;
margin-left:35px;
}
#topuserbar
{
border:1px solid red;
font-family:Georgia;
font-size:large;
float:right;
margin-right:50px;
}
#topuserbar ul
{
}
#topuserbar li
{
display:inline;
margin-left:10px;
color:#fff;
}
#topuserbar .helpicon
{
margin:0;
padding:0;
position:relative;
top:5px;
left:3px;
}
#topuserbar a
{
color:#fff;
}
#topuserbar a:hover
{
color:Yellow;
}
<body>
<div id="header">
<div id="logo">
<img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />
</div>
<div id="topuserbar">
<ul>
<li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
<li>Mis Anuncios</li>
<li>Perfil</li>
<li>Ayuda<img class="helpicon" src="../../Content/images/helpIcon.png" alt="Help icon." width="20" height="20"/></li>
<li>Cerrar Sesion</li>
</ul>
</div>
</div>
</body>
EDIT: What the heck? Opera and Firefox render things differently. I knew there were browser inconsistencies but for thing as simple as this?! Can a pro please let me know what's causing this?
I would give the header a specified height, take display:inline off of your logo div,and maybe make the logo div float:left;
For the first question should this solve it:
#logo
{
border:1px solid red;
display:inline;
margin-left:20px;
}
Im not sure if I understood you!
Try this:
#logo
{
border:1px solid red;
display:inline;
margin-left:20px;
height: 75px;
width:140px
}
adjust the height and width to your liking...
Got it:
This is how you stop to Chrome push your div under:
#topuserbar ul
{
margin:0px;
}
Worked fine for me!
Tell me if it does what you want!
I am trying to create a little growl like div for a site. It works great in Firefox, but not IE6 (haven't tried IE7, but I still need to support IE6).
In Firefox: Centered text with image floated to right side of div
In IE6: Centered text with image to the left of text.
I've tried switching the img and span tag order, but that causes a line break in FF between the two, and IE renders the image on the right of the text, but not docked to the right side of the div.
HTML
<div id="growl">
<img src="close.gif" class="action" title="hide" />
<span class="text">Grrrrrr.......</span>
</div>
In css:
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl > .text {
font-size:120%;
font-weight:bold;
}
#growl > .action {
float:right;
cursor:pointer;
}
The > selector does not work on IE 6.
Just get rid of it:
#growl .text {
font-size:120%;
font-weight:bold;
}
#growl .action {
float:right;
cursor:pointer;
}
The > css selectors are not supported by IE6, try just removing them.
No point in adding a class to each elements in the div when you only have one img and span. Do this instead for cleaner code.
<div id="growl">
<img src="close.gif" title="hide" />
<span>Grrrrrr.......</span>
</div>
-
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl span {
font-size:120%;
font-weight:bold;
}
#growl img {
float:right;
cursor:pointer;
}