I am trying to create this effect by using HTML in UIWebView control of iOS. The goal is to create the effect of progress bar on the listing. So far I tried this but as you see, by adding a padding on diV makes everything messed up. How can I achieve similar effect? I have no issue of using table but seems that would be more difficult.
Thanks
Why not just use nested divs and give the inner Div a percentage width.
<div><div class="inner"></div></div>
And CSS:
div {
background-color: blue;
height: 30px;
}
.inner {
width: 50%;
background-color: skyblue;
}
Since divs are block level element they have a 100% width by default so you don't need to explicitly specify it for the outer div if that is sufficient.
Another possibility would be to use a background gradient and just move alter the background-position.
In the code you supplied you have this div:
<div style='position:absolute;left:0%; background-color: hsl(30,100%,59%);width:30%;z-index:10;'> </div>
Just add "top: 0px;" to it so that it becomes
<div style='position:absolute;left:0%; top: 0px; background-color: hsl(30,100%,59%);width:30%;z-index:10;'> </div>
And it will look correct.
Edit: And then give the LI elements position: relative to make it work with multiple elements. See http://jsfiddle.net/tFn78/9
Another version which is a bit cleaner: http://jsfiddle.net/v7zNn/ and adjusts to variable height of the title.
Related
I am attempting to position a background image so that it lines up with an existing gradient background, which is relatively positioned to the <html> element (ie. the gradient image appears at 92% of the browser width, no matter how you size the window).
I did it by placing the image inside a <div>, positioning the image relative to the <div>, and positioning the <div> relative to the browser window.
eg.
<body>
<div id="background-position-container">
<img src="images/bubbles.png" id="background-corner-decoration" />
</div>
</body>
with:
<style>
#background-position-container {
position: absolute;
width: 0px;
height: 0px;
top: 180px;
left: 92%;
}
#background-corner-decoration {
position: relative;
/* tweak the position of the image so it lines up with the gradient */
top: -176px;
left: -118px;
width: 216px;
height: 477px;
margin: 0px -118px -176px 0px;
}
</style>
This seems to work well, but if you shrink the browser window horizontally, the background image will cause the <body> element to grow beyond the <html>element, and scrollbars appear.
I seem to be able to fix this by creating a new sibling element of <body> and placing the <div> inside that:
<div id="background-page-container">
<div id="background-position-container">
<img src="images/bubbles.png" id="background-corner-decoration" />
</div>
</div>
<body>
</body>
and adding:
#background-page-container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
This works in Firefox at least, but this does not seem like a good practice and I'm sure all browsers do not render this properly. Is there a better way to accomplish what I want while leaving all display elements inside <body> (That is, having the background image clipped at the edge of <body> instead of growing it)?
Thanks for your help,
gs.
Edit: As requested, here are jsfiddles to illustrate the problem:
Here is what it looks like with Hiigaran's solution: http://jsfiddle.net/kn36A/
Here is a solution that aligns properly, but causes unsightly scrollbars when the window is re-sized: http://jsfiddle.net/w446Q/
Here is the "best" (?) solution I have so far, but it seems to violate HTML best-practices: http://jsfiddle.net/H2PLr/
Every browser I have tested #3 with seems to render it properly so far - is this solution really as bad as I think it is?
Thanks again!
gs.
Assuming I read correctly...
You can combine background CSS by separating them with commas. So for instance, if you want to have an image and a gradient as the background for the same thing, try:
background-image: url('image.png'), linear-gradient(#bb0000, #0000bb);
You can then add other background CSS properties like background-position in the same manner:
background-position:50px 50px, 0;
The order of the values matters. The first set of values (50px 50px) applies to the image, but not to the gradient. The second background-position value (0) applies to the second background-image value, which is the gradient.
Using this on your HTML, you should be able to position your image with absolute or relatively values.
EDIT: Also, if you add any additional background property without commas, then the value you provide will apply to all backgrounds. For example, background-repeat:no-repeat will not repeat either the image or the gradient, but background-repeat:no-repeat,repeat will be applied to each in the same way that the position values are.
In the comments of the other answer Hiigaran solved the problem by simply starting with solution #3 and moving the outer containing div (called "background-page-container") under <body>. So there's no need for elements to appear outside of <body> as I had thought.
gs.
I would like to centrally align a multiple-row list within a div:
http://jsfiddle.net/8Wu2S/
In this example I have set a fixed width on the ul to demonstrate what I want to achieve. However, I need the width of the ul to be dynamic, so that it just contains the list items (which are fixed width), i.e. shrink to fit. Each row of list items should start from the left and fit as many items as it can before flowing onto a new line.
The div is variable width, so for example, if the div was a little wider it would look like this:
http://jsfiddle.net/8Wu2S/1/
I've tried all sorts, but it seems to be a lot more difficult than I had thought!
ul {
background-color: red;
width: 80%;
margin: 0 auto;
}
li {
display: inline-block;
width: 49%;
border: 1px solid black;
}
I used 49% but you could use CSS box-sizing: border-box to avoid that and use a solid 50%.
Set the ul and li elements to display inline.
<div style="width:20%;">
<ul style="display:inline;">
<li style="display:inline;">Foo</li>
<li style="display:inline;">bar</li>
</ul>
</div>
jsFiddle example: http://jsfiddle.net/QcNTW/4/
I managed to find essentially the same problem:
CSS - how to make DIV with wrapped floats inside only be as large as it needs to be to hold the floats?
It turns out there is no nice solution. One way is using media queries to set the width of the ul. The other way is using a jQuery plugin like Masonry.
I was probably going to use Masonry on my site anyway, so I think I'll go down this route, with non-javascript users falling back to a non-centered layout.
I'm trying to add an image with the &::before pseudo element and place it on top of it's parent element by adjusting the padding/margin. I have not be able to place the img "on top" of it's parent element. It resides within the box of the parent. I have tried setting both elements to display:block. I have attempted to use relative/absolute positioning. I have adjusted margins/padding without a solution.
HTML:
<div class="foo">
<div class="title">title</div>
<div class="body">text</div>
</div>
LESS/CSS:
.foo {
display:block;
padding: 1em;
&:before {
background-image: url("bar.svg");
padding: .25in;
background-repeat: no-repeat;
background-position: top left;
background-position: top outside;
background-color: white;
content: "";
display: block;
max-width: (#column + .45in);
margin-left: -.15in;
margin-top:-.5in;
}
}
I would expect adjusting the value of the margins on the pseudo element would produce the expected result. However this is not the case. Is there a limitation I'm unaware of?
Thanks for your time and your help.
First, I assume by "on top" you mean displayed "before" the .foo element. I assume that based on what it appears you are trying to do with your code. Normally, I would interpret "on top" as a higher z-index and overlapping an element, but I don't think that is what you are asking.
Second, unless I am unfamiliar with something (definitely possible), there is no outside keyword for background-position; therefore, that would seem to be an error (though I would not expect it to cause the issue you face).
Third, I would think that your basic premise should be working. This fiddle demonstrates a shifting of the :before element to be "before" its .foo parent. It could be your mixed use of em units and in units is causing some issues. That would not be a good way to insure you get the positioning you want. I would keep your units in em.
Pseudo-elements are displayed inline by default. Also, they are placed within the content area of an element.
To make it appear 'on top' of that element, set the display to block.
Lastly, pseudo-elements should be initialized using the content property.
.foo::before {
content: url(./bar.svg);
display: block;
}
This might be a very simple question, but I can't get it working.
All I want is to have 2 boxes (left and right), both should take 50% of the space and they should show up next to each other.
My current css looks like this:
#left {
text-align: right;
width: 50%;
padding-right: 10%;
float: left;
}
#right {
width: 50%;
text-align: left;
padding-left: 10%;
}
#footer {
clear: both;
}
The HTML looks like this:
<div id='left'>
<h1>Left</h1>
<ul>
<li>Some Listing</li>
</ul>
</div>
<div id='right'>
<h1>Stuff</h1>
<p>
Stuff right
</p>
</div>
<div id='footer'>
</div>
As I said, it isn't working. But I think it should be clear what it should do.
You have to take the padding and margins into account. Putting 50% on each <div> while specifying any padding other than 0, will cause the <div> to wrap. Try removing the padding on the <div>, or reducing the width from 50% to, say, 45% and see what it looks like.
There are 2 things I needed to do to make it work:
1) The width + padding of each div must only add up to 50%. Otherwise, in your original code, they add up to 60%, and both add up to 120%, and they can't fit in the 100% width of the body.
2) I have to also float the second div to the left, or make both div overflow: hidden
(i am still looking into why step 2 is needed)
A full style reset will make sure you avoid falling foul of anything that XSaint mentioned. Margins, Borders and padding will affect this.
So you should make sure that these elements have:
div {
margin: 0;
padding: 0;
border: 0;
}
If you wish to have padding and borders, be sure to reduce the width of the elements accordingly.
One document worth referencing is the box model, that picture is worth 1000 words:
http://www.w3.org/TR/CSS2/box.html
In the note below that diagram, it states that the width affects the width of the content box, not the padded, bordered or margined box. That is the box inside all the others.
you may either do what XSaint32 has suggested or remove the padding from the #left div and put another div #context with the padding inside the #left div. i.e)
Xsaint and Danny Staple gave the best answers so far.
Just complementing their answers, you can also use a property named "box-sizing" in order to ensure correct calculations.
I even recommend adding this property to your (and everybody else) CSS reset, hence Webkit, IE, Opera and Mozilla tends to use different box models.
I am having a problem with some div's
The outer div has a min-height, but the inner divs are all varying heights. Because the inner divs are absolute positioned, they do not affect the outer divs height. Is there a way to make these inner divs affect the height of the outer div?
The reason I am styling these divs with position:absolute is so that they all start at the top of the container div.
As far as I know, there's no way for absolutely positioned child elements to affect the height of their statically, or relatively positioned parent elements using only CSS. Either:
Reorganize so that the child elements remain in the document flow
Use JavaScript on load of the page to set the height of the parent to the height of the largest child
This issue is common in fade-in/fade-out JavaScript slideshows, and from what I've seen either 1) the height of the parent container needs to be defined or 2) the parent container's height is set dynamically for each slide.
I recently had this problem with a fade in/out CSS transition slideshow, and ended up solving it by giving the first child element position: relative; and the others position: absolute; top:0; left: 0; which ensures that the containers height is the same as the height of first element. Since my CSS transition slideshow uses the opacity property the container dimensions never changes during the course of the slideshow.
Alas, since I also needed to supply a javascript fallback for older browsers I had to set the container height for these browsers anyway (because of jQuerys fadeIn/fadeOut actually setting display: none; I would guess).
Here is a long overdue cross-browser solution to your problem. No more static width, no more em hack.
<style>
/* clearfix */
.container:after {
content: '';
display: table;
clear: left;
}
.page {
float: left; /* display side-by-side */
width: 100%; /* be as wide as parent */
margin-right: -100%; /* take up no width */
}
</style>
<div class="container">
<div class="page"></div>
<div class="page"></div>
</div>
After searching for a solution to this problem for so long, I am baffled to see how simple it is. Granted, the .page elements are not absolutely positioned. However, all the same goals can be achieved through this method, with almost no pain or sacrifice.
Here's a demo: https://jsfiddle.net/eqe2muhv/
This also works for inline-blocks, of course. Though you might need to set the font-size or letter-spacing of the container to 0. I would also recommend using vertical-align: top on the .page, to simulate a regular block element.
Here's a demo: https://jsfiddle.net/dzouxurs/8/
Try to use display: inline-table, height: auto; .. it works for me
I think you should position them relatively and just change "vertical-align" to "top" in the interior divs. Then you won't have the issue of messing with abs divs.
You can simply float the divs if you want them to be on the same horizontal plane.
i've done this task without any JS. Only, by CSS:
.frame {
max-height: calc(100vh - 283px); // 283px gives me some space at the botoom of the frame
}
Maybe u can try max-height: calc(100% - 50%); it will work if the content that should be in the middle of the screen/div is super short/small.
position:absolute;
top:0;
bottom:0;
margin:auto;
width:auto;
height:auto
max-height: calc(100% - 50%);
...etc...
Test display: inline-block on the element that need auto height.