I want to have three circular divs next to each other (that's not a problem). At the bottom of the circle it will show the first words of my information text. On hover the information text will go up so you can read the whole text:
What I tried to do at first was to create a div width: 170px and height: 170px, set a circle as a background in my CSS and do class:hover to bring up the text.
What I realised while attempting this was that I can't hide some of the text "behind" the circle like in the Normal picture I posted above.
Whats the best way to do this?
Make an img that floats on top of the text (using CSS absolute positioning) that has the inner part of the circle transparent. See here for more information.
Related
I'm new here so forgive if anything sound very noobish.
I'm busy making a personal website and have two divs inside a wrapper, a content div and a sidepane div. their height is set on 99% and they overflow on auto. I want the page to not scroll (unless they make the screen smaller) but the divs must scroll.
The Problem: I want to have the bottom text of the divs to fade away so that when you scroll down the div it brings the text to normal. I could use a gradient image or just CSS if someone could lead me in the right direction. I'm struggling with this cause of the overflow. I want to know how one could keep the gradient at an absolute position at the bottom of the div, but now its not really at the bottom of the div if you get what I'm saying? Because the div has overflow on. I want it at the position where the div ends on the screen, but not where the text ends. I tried putting my code in
Here's a pic
If you check the right div, I want the bottom to be faded and as I scroll the gradient stays there at the bottom. (which is not actually the bottom of the div) - also need to be able to resize page and it stays in same position.
The key is background-position: fixed;
I have created a little fiddle for you to see what i mean: Click me
I just hope i understood your problem correctly without any code and just a screenshot ;)
Also for CSS gradients see here
Please refer the following links for image and diagram. Image, diagram This is the sample image. Here "Messages" title is a separate div float at left "Joe Smith and you" div is float at right. In left side all the messages are in separate divs. Now i need to change the background image on hover as shown below (like a blue arrow). The background image need to overflow from left div to right div. I tried this following code but it wont works. It get cut appropriate to the div size. I need to show the full image like in the image.
<div onmouseover="this.className='msgHover'"></div> `
above is the code on div. and my css class is
.msgHover
{
background-image: url('Images/MsgHighlight.png');
overflow:auto;
}
You can't just make the background image overflow the boundaries of the div. You can, however, make the whole div overflow it's own boundaries by using a negative right margin:
#mydiv:hover
{
margin-right: -50px;
}
This will make the entire div go wider without pushing any other elements or affecting the layout of the site what so ever. This sounds like exactly what you're trying to do. Here's an example.
Using this method you won't have to cheat using two divs in the first place and can just apply your background image on the one div.
Have a look at this example where the right margin is animated to go negative on hover.
I'm doing HTML and CSS for a site, and I've come across a very weird bug / behaviour that I can't pin down.
Take a look at http://www.atelierhsl.nl/antwerp/. There's a white line through the logo at the top. If I display:none the navigation at the bottom of the page, it disappears. But when I increase the bottom padding of the text column (.entry-content) it reappears again. This happens in Webkit, Mozilla and IE, so I know I must be doing something wrong. I just can't figure out what. Anybody?
This is caused by an anti-aliased line on the top your body's background images (just 1 pixel of light gray). The simple answer is to crop it using an image editor.
You may want to align the image to the top:
background: url("/wp-content/themes/transfer/images/bg.jpg") no-repeat scroll center top #1D1D88
The main problem is that the background image isn't as big as the the area it should cover.
Kobi's answer is correct, but if you don't mind a design suggestion: Rather than putting a black background image at no-repeat top for the body, separate body content into a container and a footer. For the content background use a smaller background image and tile it, or set the background color to black, since it appears you have no gradient. The footer div can then have a white background (inherited from the body, or just assigned directly).
You page is logically divided into main content and a footer, so the HTML should express that.
There is two solutions:
Just changed the body padding top from 60 to 40 or
changed the background position from center center to center top
I think, you should cut a 1px line from your background and to repeat-y it. There will be no bug, and you will decrease the image weight.
is it possible to repeat only right side of picture. If I have a menu button picture, there are border or stripe on left side and I only want to repeat right side(without border).
When I'm just putting repeat-x scroll right or just repeat-x, the whole picture will repeat, but I only want right side to repeat, not left or whole picture.
I hope you understand what I mean.
This is button example. When my button title is too long and it will need to repeat button picture.
Can I only repeat that yellow part of picture? not together with red.
PS! Cant repeat color, because button is made with cradient.
Short answer, no, it's not possible.
A picture has fixed-width and you can't stretch just a part of it.
Solution: use two pictures, one for the left side, with fixed size and other to the right side which you can use repeat-x to fill the remaining space.
EDIT:
If your button have a horizontal gradient, the best you can do is to make a picture wide enough to encompass "almost" all cases. The key word here is almost because you can always find someone with a screen wider than the image itself.
Not sure why you can't use a solid color, but why not simply use a wider image?
just put "no-repeat top right" is that what your meaning
Smashing Magazine has an excellent tutorial on designing buttons with CSS:
http://www.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/
Scroll down to the section "Sliding Doors: Flexible Buttons", it explains exactly what you're looking for.
My CSS knowledge is very limited, so I'm putting my problem here hoping for the best.
I'm using this box: http://www.456bereastreet.com/lab/flexible_custom_corners_borders/ in my website, and I need to display content in two columns format.
I've attempted with the simple table, and using divs with float set (needed clearfix so the parent got its height). My problem is a visual bug that appears of the left side.
Only happens with table and div floated. p, h1, etc works fine.
Here is a picture of the bug: http://img18.imageshack.us/img18/8783/imagem2hdp.png
Thanks
edit:
Here's the code: http://dl.getdropbox.com/u/178438/css_test.zip
You should set a background color for .content this will hide that part of the border image.
--edit below--
The extra whitespace between the gradient and the border looks like an element is being pushed sideways, when it's really all part of the left border background image which is the second main div.
div // Right border
div // Top border with corner sub divs
div // Left border
div // Content
div // Bottom border with corner sub divs
Since the content part of the box is inside the left border div and the border background image is done sprite style with multiple images put together in a larger image the only CSS only solution to this is to apply a background color to the content area to cover the left background image (like the Left background div is doing to the right background div)
There are other ways to fix this such as separating the images out into separate files or moving the Content div outside of the Left border div, but at that point you aren't really using that same box anymore.