first of all I wanted to give you a fiddle instead but as I ran it, it looked correctly so obviously the problem lies somewhere else in my code and I have no idea where.
Basically, I want rounded borders around the 2 div columns above the footer, however they hover over the divs. Additionally as you can see, the rounded border is hidden behind the div background in the bottom corners. How can I fix these?
Link (sorry for the dodgy-looking link but that's the first free hosting website I could find to test the website before I actually get some proper hosting): http://pawel.net63.net/
Put the background image on #featured-product not #bottom-main.
Related
First off, let me say its been about 6 months since I have made a website, so I am very rusty! Normally I could probably figure this out myself...
I have a header div that stretches 100% width and a drop shadow, below that I have a wrapper div with a neg z-index to allow for the top div's shadow. Everything seemed ok until I tried to add an image gallery in a div that is located inside of the wrapper div, the images won't pop up. I know this is because the positioning relative and z-index but I can't for the life of me figure out how to fix this.
I am sure this is something so simple and stupid but any help would be appreciated!
I temporarily threw it on my hosting so you can see the code:
http://graves-properties.com
Thanks,
Dan
Instead of a negative z-index on the wrapper put a higher z-index on the header , e.g., 9999. That will allow the drop-shadow to show and should resolve the image gallery issue.
I have an image inside the .nav container with background-positioning property set to right that is set under the hover selector to display. It's working almost perfect except I want to move the image over to the left a bit closer to the actual navigation link. When I try to use inset border thickness or absolute positioning it it either moves the text for the nav link as well (inset border thickness) or its get really messed up when I use absolute positioning for background-position. Any way to move the image without it affecting any things else around it? New to HTML5 and I am using dreamweaver CC and am unfortunately away from my comp at the moment.
Try setting the left property of the background image. In my experience, if you mess with the container then it will mess with everything else. Also, you might have to tinker with the actual image to get it look right.
Can't for the life of my figure this one out...
Does anyone have any idea why the large red div at the bottom of this page is not flowing below the DIV above it, (but the red div is "appearing" behind it, and getting partially covered)?
I had the same problem with the ABOUT div at the top of the page flowing behind the div above it. The only way I could find to resolve it was to position:relative, and set the top to 45px. Same fix works here, but I would rather figure out why it is not flowing below the content above it than hack it. The Div above it has clearfix applied, and the issue doesn't seem to have anything to do with floats...other than that I am all out of ideas, and still fairly new to CSS...
http://firewalkcreative.com/2012/2012.html
The section (id="work") immediately above it has the styling 'position:relative;top:45px'. This moved it down 45px from where it would otherwise be, covering the top of the following section.
I need to create this layout and I'd like to do as much of it as possible with CSS, rather than using images and whatever.
As such, how can I do this in CSS? (if at all?)
As you can see, there is the image behind, with the button overlaid with padding. The bit that I'm struggling with is creating the curves on the IMAGE above and to the left of the button and bottom to the right of the button (I've pointed them out on the pic below).
Any help would be great.
Thanks
I know just enough CSS to be dangerous so I can't detail every step, but I think you can approach it like this:
Split the background image into two separate images both at a z-index of 0 at the height of the top of the grey box. I think you can use two div's that reference the same original image with different offsets (similar to CSS Sprites) but I don't know the details of how to do that. The left edge of the lower div would start where the grey box ends. Round the lower-left corner of each "image" div.
Add the grey box at a z-index of 1 with appropriate rounding, and then the blue box at a z-index of 2, again with appropriate rounding.
The background of the block element containing all of this would also have to be grey to match the grey border and properly fill in grey where your right-most arrow is pointing.
You don't have to split your image at all, only the container divs.
Let me detail a bit:
You can have your image set as a background image instead of putting it in a src attribute of an img tag. This technique is most commonly used when working with CSS sprites.
So, if you have you uppermost div at a constant width and height, if you try to apply the background image in it, you'll see it fits very nice.
On the bottom, you have two divs or whatever block element you'll like, just be sure to put fixed width and height, so the background will be applied and you will be able to actually see it.
Then all you have to do is fiddle with css background-position to adjust the SE chunk of image.
I'll be putting a small demo together to better illustrate the idea.
After you have a big div at the top, and two smaller at the bottom, where two of them share the same background-image, but with different background-position, you can safely add some css3 border-radius to fit your roundness needs. You can also use some tool like http://css3generator.com/ to add a compatibility layer on all browsers with ease.
That is very easy to realize with pure css. The page you have shown is divided into 3 divs without any margin. You only need to set the right border radius for each div.
This is a function of the background image, which is a css element if that's what you mean, but it is not a seperate attribute for a selector, at least not in standard CSS. Wait until CSS3 becomes more prevelant, then it's corner-radius or some such thing.
Well it's 3 probably 3 seperate divs, a hole "burned" into the background image, or a div being overlayed for the button.
The best way to figure out how it's done is to read the source of the page you found it on.
For convenience:
If you have a webkit based browser like chrome or safari then enable developper mode mouse over the button "right click" and choose inspect element. Otherwise you can pour over the page source until you find what you want.
I am currently making a website here. And to the right is a postcode search div. The top corner of that needs to be rounded.
I am using images to round the corners. I do not want to use another method unless it fully supports all browsers, up until IE7.
I have already done this on the navigation (to the left. only top right and bottom left corners). But I cannot seem to get it to work for the top left corner. Please help. This may be a silly little mistake I have made.
If the "postcode search div" is fixed width and height (as it appears to be), the simplest solution would just be to do the entire thing as an image, and set that as the background:
(yes, the images are the correct size and colour)
The problem is that your background color is covering your image. If you remove the background-color property, you will see the corner image.
Take your image http://molossi.psm2.co.uk/assets/images/li-bg-tl.png and add in the grey background with it. Set the width and height of the entire grey background element to 225x120 or whatever you want and you will be good to go. Basically move from it being just the corner image piece to the full image.
If you don't want to do it this way then take your corner image and make it 225px in length with the grey extending out all the way.
There are two methods for creating round corners without using border-radius (CSS3) and without using images:
Use four small divs of height: 1px and progressively increasing widths that create the round corner illusion. This is probably the better option. For a code sample, see the following site:
http://webdesign.about.com/od/css/a/aa072406.htm
Use an HTA file and browser hacks. I've never tried this personally. For code samples and techniques, see the following site
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
For older browser support using images is the best and probably only option. If you don't mind lower levels of browser support CSS3 Rounded Corners (in the CSS3 Boarders page of W3Schools) may have your answer.