I have a div containing pictures that will be updated frequently on WordPress. I would like to avoid having to edit the border of each image. This is kind of a dome-shaped border around a group of 8 photos that I created by using the clipping mask on Photoshop.
Is there a CSS trick I can use to make the border.png file overlay the div with the pictures and become transparent and block out the areas that it covers on the picture div?
Using border: none will remove the border, but also will remove the artificial "padding" from the width of that border. If you want the spacing to stay the same, you can do border-color: transparent. Note, however, that IE6 and earlier do not support border-color's transparent property.
Related
Preparing a website navbar, I thought of creating hover effects over tab like Android does it, i.e. a top border displays over a tab when you hover over the tab.
The problem is, these navbar tabs are nested in a container div, and for some reason, the navbar tabs have a slight margin, even though I haven't specified one explicitly. So, the top border which I want, is not perfectly aligned to the top of the window.
I tried the ususal workarounds: setting font-size:0 in the parent, using vertical-align:top and margin-top:-4px, but non of those seem to work perfect.
Here's the jsfiddle: http://jsfiddle.net/A3nEq/
Notice a thin black line between the absolute top and the white top border. I have to get rid of that!
You have to remove border: 2px solid transparent; from your #headContainer div.
Demo: http://jsfiddle.net/A3nEq/1/
Remove the border from #headContainer.
I'm having a bit of an issue with some CSS.
In the main content section I am using a background image, within that image is a transparent element which shows the background below it. This is fine and does what I want.
The issue is that I want to also specify a background colour so that if the content is longer than the image then the background continues. However, if I add a colour to the background, I lose the transparent part of the background image.
Is there a way to use both a transparent background and a solid colour on the same div but have the colour position be lower than the transparent part?
Here is the background with the transparent element showing the background underneath:
And I'm trying to avoid this, the sidebar is longer than the main content so the background ends early:
I solved this just by making the background image stupidly long instead.
Not a great option as I would prefer to keep image assets minimal, but it will do.
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.
I'm having some problems traying to place 3 images into a background, I mean, I have one image on top, actually a is 2000x550 pixels, then I need to leave 200px (vertical) and place another image that cover also the all the center and them one image into the footer.
Do you think that is better to make a full image a place it? full it's about 30KB. Or there is any way to place it using css?
Kind Regards
You should be able to achieve this with css z-index. See the following links for more information:
W3C Schools explanation of z-indexes:
http://www.w3schools.com/Css/pr_pos_z-index.asp
Indepth explanation of z-index's from Smashing Magazine:
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
To answer the question of how to place the header image, the best way would be to define a div with a specified height (a 550px tall header seems awfully large to me, but hey, its your site) and width (probably set to 100%), and use the background-image css property to place the image there. This will prevent any side-scrolling.
A sample of the what you have going on to go with the sample images would be nice. From your description though it sounds like you have not implemented the z-index properly. My guess is that you need to declare the position of the divs you are adding a z-index to. Even if it is position:relative you still have to declare it or the z-index doesn't work.
-- Edit for real answer --
After looking at your images this is not actually that hard to implement. Here is how I would do it -
Set the background of BODY to white and the green/pink/gray background:
body{background:URL(images/green-pink-gray_bg.png) #fff no-repeat;}
Set the background of the DIV to the gray image -
div#gray{background:URL(images/gray_bg.png) #fff no-repeat;}
There is no need to set the z-index of anything since the div with the gray background is already "on top" of the BODY of the page. Using PNG images with transparent backgrounds will allow the white background to show through anywhere it is not covered by one of the background images.
When I use CSS rounded corners, they look like this, and it's great:
http://www.incompetence-central.co.uk/roundedcorners-nobg.png
But if I specify a background color for an element inside them (in this case a simple <p> tag), the background color overlays the rounded corners, like so:
http://www.incompetence-central.co.uk/roundedcorners-bgcolor.png
How can I keep my pretty rounded corners without the background color drawing over them? I tried specifying the same rounded corners for the element inside, but if I do that the background color doesn't completely fill the space:
http://www.incompetence-central.co.uk/roundedcorners-hack.png
Don't specify the background color in an inside element, but just that particular element (with the border).
A little math may help too, taking border width into account. If your border radius is 5px, and border width is 1px, then the inner element should use border-radius 4px (5px - 1px border). Experiment and see.
Why don't you set the background colour of the outside element to the same as it's border? That way you won't have the little white space on the corners like you see in your image.
You'll never get it completely perfect, but it is possible to get it as close to perfect so that users just browsing won't see a difference.