So i'm working on a school project (beginner to coding here), and i need to make a div move when you hover over it.
Here is my css code for that div:
#div2
{
box-shadow: 4px 4px 10px;
width: 80%;
height: 220px;
font-size: 15px;
margin-left: 5%;
margin-bottom: 3%;
text-align: center;
margin: auto;
background-color: #99CC00;
a:hover
{
float: right;
}
}
I need to make the whole box move to the right when you hover over it.
If anyone could help me that would be awesome!
If you are looking to move the whole div, you can make a new div id with a hover on it. Not just links have the ability to hover.
Example:
#div2:hover {
float: right;
}
Although, having a float on a hover will have it be very strange on the page. You can add padding-right to make it move just a little.
Your hover is currently just for a elements. If you want the div to do something, you'd have to add a new section with #div2: hover
remove
a:hover
{
float: right;
}
and insert
#div2:hover
{
float: right;
}
Related
In my article header section, I'm having a few alignment issues. I did a screen shot, but here is the live page:
http://www.picturemeclubbing.com/newyear/index.php/2014-01-21-01-37-46/item/19-phil-cashout-interview
Pic here:
I chose to inspect the area I wished to move and found:
span.itemAuthorDetailss
position: relative;
text-indent: 4px;
bottom: 20px;
Changing bottom: 20px to a lower number brought the text down. At least in the code inspector window. But when I made the changes in the css file, the page when haywire. On top of that, the image next to the text would not move down independently. I'm new to this coding stuff. Any help would be greatly appreciated.
span.itemAuthorDetailss {
position: relative;
text-indent: 4px;
float: right;
}
Does that work? Maybe add some margin to:
.authorDetails {
float: left;
margin-right: 12px;
margin-top: 5px;
}
Another alternative is your PMD image seems a little high - so try this:
.authorDetails img {
margin-top: 5px;
float: left;
}
.authorDetails span.itemAuthorDetailss {
position: relative;
text-indent: 4px;
float: right;
}
Put that in your custom.css style sheet:
http://www.picturemeclubbing.com/newyear/templates/yoo_moreno/css/custom.css
I have seen many topics on this around Stackoverflow, but I still could not find out how to do this on this particular case.
I am trying to display a list in a card fashion, I have a template I developed. It looks like this:
Here I have 3 cards, and in the first one, I displayed where I think divs should be created
I cannot align the text the way I want. I want the Title on top of the Description and both aligned right of the first image. But so far I have gotten nowhere. I have a JSFiddle of what I have so far right here: http://jsfiddle.net/MEaze/
Sorry about the ugly colors, I just needed to "see" the divs.
Make them float, and use div instead p.
.trophy-image {
float: left;
background-color: #FF0000;
margin: 8px;
height: 56px;
}
.trophy-info {
float: left;
background-color: #00FF00;
margin: 8px;
line-height: 28px;
}
updated jsFiddle
You have to make the image float left.
I added:
float:left;
to the image div's css. Is that what you were looking for?
http://jsfiddle.net/2jfSK/
You only have to float the image to left. This div will automatically become a inline-block:
.trophy-image {
background-color: #FF0000;
margin: 8px;
height: 56px;
float: left;
}
To set the description to the middle of the image you can use line-height:
.trophy-info {
//background-color: #00FF00;
line-height: 90%;
}
Here an example.
You have to use float:left
http://jsfiddle.net/cAT2B/
http://jsfiddle.net/y7GJa/
I have also added a second image
You should also use DIV
.trophy-image {
background-color: #FF0000;
margin: 8px;
height: 56px;
float:left;
}
.trophy-info {
background-color: #00FF00;
float:left;
}
I have some issues with the text inside two of my buttons located inside a block_head class div.
In Chrome, they show exactly as I want :
In IE9, there is no text :
Here's my CSS code :
.block .block_head button {
margin: 13px;
padding: 5px 15px;
float: right;
height: 30px;
text-align: center;
}
I tried playing with the CSS attributes (vertical-align, remove margin, etc.), and the best I could come up with is by removing the padding line :
I sense a stupid mistake or compatibility problem, as I am kind of new to web programming.
Any help would be much appreciated!
Without seeing your code, all I can imagine is that there is a style being applied that is setting the line height. Can you try adding this to your ".block .block_head button" style?
line-height: 1em;
padding: 0px;
Try this:
.block {
float: right;
}
.block .block_head button {
margin-right: 13px;
padding: 2px 15px;
// float: right; (button is an inline element)
// height: 30px; (auto height)
// text-align: center; (no fixed width, the text will always be in the center)
}
I have created an image to illustrate my problem:
As you can see. I have a large rounded button. it consists of 3 images. One image is on the right side, another on the left size and another one in the middle.
The left and right images are quite wide because there is a gradient going on in the button so I cannot make them just 5px wide. The problem now is, that the text inside is limited to the middle area. I would like it to stretch across the entire button.
Here are my styles:
#index-navigation ul li a {
height: 96px;
line-height: 96px;
text-decoration: none;
font-weight: bold;
font-size: 1em;
color: #333;
background: url('/images/btn_grey#2x-right.png') right center no-repeat;
padding-right: 100px;
}
#index-navigation ul li a span.left {
background: url('/images/btn_grey#2x-left.png') left center no-repeat;
padding-left: 100px;
}
#index-navigation ul li a span.middle {
background: url('/images/btn_grey#2x-middle.png') left center repeat-x;
}
How to edit the style to be able to have the anchor take the entire width of the button? Like this:
You have to move your text to a separate span to be able to stretch it across the whole a. Just give your .left and .right the appropriate backgrounds, let the a hold the main bg - http://jsfiddle.net/JutRB/3/
a {
height: 96px;
width: 350px;
text-decoration: none;
font-weight: bold;
font-size: 1em;
color: #333;
background: beige;
border: 2px solid #000;
display: inline-block;
position: relative;
}
a span.left, a span.right {
float: left;
background: yellow;
height: 96px;
width: 100px;
display: inline-block;
}
a span.right {
float: right;
background: pink;
}
a span.text {
position: absolute;
display: block;
text-align: center;
top: 30px;
width: 100%;
}
UPDATE
Or if you want a CSS3 solution and don't care about the older IE-s then you can use the :before and :after pseudo-elements with much cleaner markup - http://jsfiddle.net/JutRB/4/
It's the sliding doors technique, falling out of favour nowadays with border-radius and graceful degradation to the old browsers getting traction in the marketplace.
The a tag in your demo does take the whole area as it wraps the inner 2 spans, you want to make sure you remove the width declaration though so it extends with the text.
If you've got a demo we could debug it a bit more specifically for you.
I am creating a web site for my church. Because they know of no web programmer members, I am taking care of it with my meager skills. My problem is merely one of placement. I am trying to place an image in the top-left of the page, but, no matter what I do, it interferes with the other div elements on the page. This is my current CSS:
body {
background-color: #FFFFFF;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#wrapper {
width: 90%;
background-color:#ffffff;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid blue;
}
div#image {
padding: 15px;
margin: 0px;
float: left;
}
div#header {
padding: 15px;
margin: 0px;
text-align: center;
}
div#nav {
width: 25%;
padding: 10px;
margin-top: 100px;
float: left;
}
div#main {
margin-left: 30%;
margin-top: 100px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid blue;
text-align: center;
}
No matter how I define the image div, it always pushes the main, navigation, and header divs out of alignment. If I just place the image in another div, it still makes things move.
Is there any way to have the page centered with 90% width and everything else in the wrapper div, and also have the image in the top-right corner? If it would require a different type of thing, can someone help me figure it out? Something that works only in one browser won't help, as I want it to work as seamlessly as possible for the most people.
You might be looking to use absolute positioning,
#image { position:absolute; top:0; left:0; }
However this will need to stay relative to your wrapper:
#wrapper { position:relative; }
Though I'm strictly guessing, provide more info and you'll get a more definitive solution.
Use z-index to put the image on a higher layer.
http://www.w3schools.com/Css/pr_pos_z-index.asp
This way nothing else gets moved.
If you don't want it to affect anything else on the page, can I just check that it's not a background image? If it's not, then have you tried making it a background image? That way it won't/can't affect the document flow and nothing will be moved because of it.
Though if you already have one background image it might complicate things a little.