Hi I would like to replicate the setup. I'm currently trying to use a div for the yellow background and inside it two nested divs for the purple blocks of text. If I don't put any additional elements in the outer div the background color doesn't appear. If I put an element, just to test, I get the yellow border between the purple blocks not around them.
edit: updated the link to a working image.
http://picasaweb.google.com/lh/photo/5yxlv3hQEcS5GN-VXomD0w?feat=directlink
You can use:
min-height:Value;
on the outer element to force it to appear.
I am also unable to visit your link.
Check out 960 CSS Framework. It is an excellent way to quickly and easily create multi-column layouts.
Related
I have the following div with a background image and another div with a background image. They need to stay together in the same configuration when responsive. I have an auto scroll on hover the inside image. All done with CSS. However, I'm using padding to align the 2 together but it is making both images to small and I want them to fill the column. Does anyone have a better suggestion as to how to do this? Please take a look at what I did.
https://jsfiddle.net/517Design/gukbnzf8/3/
I want to create something like this in the Susy grid system:
The different color demonstrate different sections of the website and also their background colors. The vertical lines are the grid columns.
If I use a simple grid container I can set the background color only within the div which is inside the grid, but I would like to have the background color stretched to the left and right edge of the website. The content stays inside the grid.
I found a solution using multiple grid containers (one for each section), but I heard that this approach is not recommended.
And I also don't want to use a fluid grid container.
As Eric Meyer, a developer of Susy, pointed out in the comments, the Susy grid is just a concept and there is nothing wrong with having multiple grids on the website, one in each section.
I was dealing with a similar issue.
I had used the following approach: Have a div (let's call it 'content') inside each of your sections.
Apply the container class to the 'content' div. .content{#include container;}
This way, when you set the background color of a section, it spans the entire width of the page while the content in the sections adheres to the rules of the grid.
Hope it makes sense.
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.
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.
This is my problem:
http://jsfiddle.net/pbgLc/
I need the background image (with url) to be placed at the top left position of the image, and want the text to be moved next to the background image.
As you've probably noticed I'm using two backgrounds, so its probably not possible to use just one div, right?
Have you guys any solutions for that?
I don't know if this is exactly what you are looking for, but you can have 2 background elements at the same time, as long as they don't conflict each other. http://jsfiddle.net/pbgLc/5/
Maybe this can help a little? CSS background-position Property
If you want the image and the text next to each other, why don't you put them litterly next to each other?
2 divs inside 1 div
Or am I misunderstanding you?