I want the black and white squares that share a tile/cell to overlap. The tile/cell blocks (There will be more, ideally) should fill the container of arbitrary size from left to right before going to the next row. What am I doing wrong? I thought left to right was default, but I know I am overriding some defaults with absolute positions.
http://jsfiddle.net/Hc7af/
Thanks!
.cell{
...
float: left;
}
Is this what you mean?
Also if you change the p element to a div it will fix the no-wrapping issue. I suspect it has to do with default styles.
Related
I am trying to construct this shape in CSS:
But I can't figure out how to put the triangle shape (considering I have a rectangle for the "body" of the tag and a triangle for the tip) facing right. Because I'm working with positions, how can I tell the triangle to appear right after the rectangle, when tags can all have different sizes? I just can't work it out.
You can check the fiddle: http://jsfiddle.net/ExZFe/ with a similar tag to the one I'm making. This example uses just positions, so giving the triangle a fixed position is useless. I tried with :after but got stuck too, because of the same reason. What am I missing? Thank you in advance.
Simply position the triangle using the right property (which start from the right of the rectangle) instead of the left (which starts from the left of the rectangle and is useless here as you can't know the width of the tags): http://jsfiddle.net/Gv3rf/
Just add a line-height to .tag
.tag {
line-height: 10px;
/* the rest of your styles here */
}
http://jsfiddle.net/ExZFe/3/
I have a span element which I want to be present at teh right corner of the page. For that I have used margin-right:10px. But it shows no effect. Where as margin-left works. Why is this? And how to make the span element appear at the right side of the page?
Try this (jsFiddle)
.right-corner {
float:right;
}
or this (jsFiddle)
.right-corner {
position:absolute:
top:0;
right:0;
}
The reason that margin-right doesn't work is because it's just giving your element a right margin not repositioning it. To help you understand, if you put something after your element with margin-right there will be a gap between them which is the margin.
margin-left does this as well, it's just doing it on the left side and since elements are places from left-to-right there is the gap on the left side which looks like it just shifted to the right.
Have a look at this little example to try to understand. You should read up on the CSS box model if you don't understand.
Margin-right is the right margin.
If you want to align it to the right you can use right:10px that is if position is absolute.
otherwise you can use float:right
You can also set the display:inline-block to the span.
You can learn more about margins
http://phrogz.net/css/htmlvsbody.html
http://www.htmldog.com/guides/cssbeginner/margins/
I think what you're looking for is float:right;
In order to complete #Tyriar answer, here's a fiddle also showing you the use of text-align: right. And why a margin can exist but have no observable effect. Also how to use the clear property after a floating element and/or a clearfix on containers of floating elements (both are not necessary here)
http://jsfiddle.net/rLQbk/
One more advice: do NOT use absolute positioning if you're not really (really) sure of what you want to achieve and how; most of the time it's not the best solution to a CSS problem. Completely out of the flow, its content will display over other content without any care...
I have a 3 elements stacked on top of each other. The top element is the overlay content. The second element is a background border image. The bottom element is a background.
What I want to do is hollow out the middle element, so that I can see through the top element into the bottom element, but leave the border of the middle element surrounding the top element.
http://jsbin.com/unimux/4/edit
As you can see the middle element is blocking the view to the bottom element.
Edit: I did try using border-image but it wouldn't render correctly for me with border-radius.
Edit2: is it possible to get the desired effect with border-image? Kudos to anyone who can make it look not terrible with border-image.
Edit3: Some progress based on Zuul's answer:
http://jsbin.com/unimux/15/edit
Setup a new element, with a class, e.g., .apple and place it over all other existent elements with the same image as the bottom one:
See your JS Bin Example Altered!
div.apple {
margin: 100px;
width: 200px;
height: 200px;
background: url(http://www.ipadwallpapersonly.com/images/wallpapers/1gk0rv4ng.jpg) center center;
}
Having the image centred and by give a correct margin value, it simulates the "hollow" effect at the div.middle.
See the result preview:
If the elements dimensions aren't the same, the use of CSS position helps keepping everything into the proper place:
An example here!
You can't really do that with the current state of CSS. Maybe just put the bottom element on top of the middle one, and work?
As per egasimus, you can't really do that with CSS.
Try something like this though, with four divs creating the 'window'.
I am trying to construct this shape in CSS:
But I can't figure out how to put the triangle shape (considering I have a rectangle for the "body" of the tag and a triangle for the tip) facing right. Because I'm working with positions, how can I tell the triangle to appear right after the rectangle, when tags can all have different sizes? I just can't work it out.
You can check the fiddle: http://jsfiddle.net/ExZFe/ with a similar tag to the one I'm making. This example uses just positions, so giving the triangle a fixed position is useless. I tried with :after but got stuck too, because of the same reason. What am I missing? Thank you in advance.
Simply position the triangle using the right property (which start from the right of the rectangle) instead of the left (which starts from the left of the rectangle and is useless here as you can't know the width of the tags): http://jsfiddle.net/Gv3rf/
Just add a line-height to .tag
.tag {
line-height: 10px;
/* the rest of your styles here */
}
http://jsfiddle.net/ExZFe/3/
So I'm pretty new to both css and html but this is not the first time that I have used floats to achieve 2 divs sitting next to each other. This time it is not working properly and I've been tinkering around for about 3 hours and I figure I should call on some help.
I have edited the portion of my website in jsFiddle to assist in describing my problem:
http://jsfiddle.net/9QRcP/10/
The problem isn't that you're not assigning your divs to float: right, but that your divs are small enough that you can fit multiple of them within the page width, so they're doing exactly what they should do.
To fix this, though, we would add clear:right to #about_side and #about_side_footer, but that won't force them to be level, so it doesn't quite fix the problem.
To fix that problem as well, instead of floating each individual piece of your #greeting_wrapper and #about_wrapper left and right, respectively, float the wrappers left and right instead.
#greeting_wrapper {
float: left;
}
#about_wrapper {
float: right;
}
#greeting_header, #greeting, #greeting_footer, #about_side_header, #about_side, #about_side_footer {
float: none;
}
I found that you need to float #greeting_wrapper and #about_wrapper. These wrappers are the important elements. As far as I can tell, the children of these divs shouldn't need to be floated as well.
Also currently those divs are taking on the width of the body which is 960px thus forcing both divs onto a new line.
I had a fiddle with your code: http://jsfiddle.net/9QRcP/15/
I haven't bothered to correct the alignment, but left is now on left and right is now on right.
By my own admission this isn't a very good approach to this. A few pointers:
you can use 'clear: left' to force an element on the left to move to a new line http://www.w3schools.com/cssref/pr_class_clear.asp
you should probably contain your left and right elements in 2 seperate containers (e.g. class="container left" and class="container-right" ). Clear left for any sub-element in the left container that you want to move to the next vertical level, and likewise for elements in the right container. This will allow you to easily break your page up into columns. Here 's one I prepared earlier http://jsfiddle.net/9QRcP/19/ from http://www.quirksmode.org/css/clearing.html
you could probably save yourself a lot of work by using a grid system, e.g. http://960.gs/
The issue is with the width of your wrapper. If you increase the width, the floated div will take its place on the right.