I am designing a fluid page which requires:
parent: 80% (of the screen)
container contains x number of images, width:10%, float left.
The container needs to be autosized as wide as the content, max-width is 50% of the parent.
I have tried different techniques to set display to inline-block, and attached the jsfiddle here. http://jsfiddle.net/7D9XS/
#parent
{
width: 80%;
}
#container {
max-width:50%;
border:solid 1px red;
display:inline-block;
}
.uploadItemPreviewThumbDiv
{
width: 20%;
margin: 10px;
background: cyan;
float:left;
}
.uploadItemPreviewThumbDiv img {
width:100%;
}
OK, Here you go...
.uploadItemPreviewThumbDiv
{
width: 70px;
margin: 10px;
background: cyan;
float:left;
}
JSFiddle!
Remember, the problem here was that the whole of the talk was going on in percentages.. and percentages tend to be one of the most unreliable things that you can come across while developing responsive designs, and on a side note, if I were you i'd use jquery plugins like Isotope or http://mixitup.io/
And Yeah, this is as far as i know, maybe someone could explain quiet better clearer..
Ok Let me try to put it this way...
This is sort of a paradox, where your conditions are..
You want your innerelements(content) to be of a certain percentage
width of the container.
But on the same time you dont want to specify what the width of the container would exactly be.
Because you want the container to be "autosized as wide as the content"
Which again brings us back to the 1st point.
It is like both the 'container' and the 'innerelements' are arguing over who should take the responsibility of being a specific width First, and each one is telling the other to attain a specific width, so that he himself can then adjust his own width based on that.
Related
I want to divide my webpage horizontally in to 2 parts, my monitor layout is 1410 X 752, if I write css code like this
.left{
width:210px;
}
.right{
width:1200px;
}
it wont work correctly in other monitors and also when I zoom in/out the browser the page structure will be totally out of order I mean the left DIV moves down and it will be to under the right DIV !
I know I must use % but when zoom in/out the browser scroll bar doesn't appear, please check this address to see what I said. what shall I do ?
thanks.
First of all, you aren't telling your divs to go anywhere. They are just stacking themselves on-top of each other.
You do however have the correct start and methodology, though it should be modified to fit current best practices. Let me elaborate...
To make your code work you need to add a float property change your code to this:
.left{
float: left;
width:210px;
}
.right{
float: left; /* could also put "right" here as a value */
width:1200px;
}
Now with that said... a better option that will produce the same result is this:
.left{
display: inline-block;
width:210px;
}
.right{
display: inline-block;
width:1200px;
}
Let's go a step further.... While this will "work" it will look terrible on other peoples screens. What if my resolution is 1280x1024, which isn't as wide as yours. I'll have to scroll to the right to see your site. That will encourage people to LEAVE your site. We can fix this though...
.left{
display: inline-block;
width: 20%;
}
.right{
display: inline-block;
width: 80%;
}
Now, no matter how big your browser window is your divs will take up 80% of the right side of the screen, and 20% of the left side of the screen. NOTE This will depend on a good reset.css as the width of an element is by default does not include any padding, margin or border space. If you add a padding or margin or border, the above method will break. To get around that there are a few options. You can use % values for your padding and margins but that breaks if you add a border.
A common solution is to add this property to your css:
.left{
display: inline-block;
width: 20%;
box-sizing: border-box;
}
.right{
display: inline-block;
width: 80%;
box-sizing: border-box;
}
This will fix any padding or margin space issues mentioned above, but you still have to account for margin space. Let's say you want a 5% gutter between the two, then you need this code:
.left{
display: inline-block;
width: 20%;
box-sizing: border-box;
margin-right: 5%;
}
.right{
display: inline-block;
width: 75%;
box-sizing: border-box;
}
Notice how I subtracted 5% from the right column to incorporate the margin space. if you add it all up 20+5=25 25+75=100% 100% means it works, if its more than 100% it will break.
For additional reading so some research (google) Responsive Layout/Web Design.
Info on float property -> http://www.w3.org/wiki/CSS/Properties/float
Info on display property -> http://www.w3.org/wiki/CSS/Properties/display
Info on box-sizing property -> http://www.w3.org/TR/css3-ui/#box-sizing
A good resource to determine browser compatibility is http://caniuse.com/
You should be using % instead of px here is a simple example.
If you are using 1200 of a 1410 monitor then we use math to get the % relative to that width
(1200 * 100) / 1410 = 85% (more or less... the right answer will be 85.71428571428571 %, but really don't matter).
HTML
<div class="left"></div>
<div class="right"></div>
CSS
.left {
float: left;
width: 15%;
background: green;
height: 300px;
}
.right {
float: left;
width: 85%;
background: blue;
height: 300px;
}
Live example.
As everyone says , you should use percentage, cause your window browser will never do the size of your screen, unless it is set on full screen.
Then scrollbars might show up.
% percentage are quiet safe if you manage a little less than 100% all together (calculation from percentage dow to pixels, can add extra pixels).
Differents ways to build ypour layout can help to use pixels, as :
display: table-cell:
you need to set the size of the smallest in pixel and set others to 100% to shrink small one to its size.
float:
set float and width on first element. second element can remain in the flow with no size and overflow:hidden; to keep aside float element and use all space left.
If you need a fiddle to get the idea, ask.
I have a portfolio page with a image display with zoom.
I have this code: http://codepen.io/Mpleandro/pen/LvrqJ
The div that shows the image has a class of .display, on line 13 of the HTML and the css formating for this div isline 90.
The image width will be flexible, so I what I want is to make the containing div inherit the width of image.
I tried the css property auto, inherit and min-with, but nothing works!
Could someone help me?
P.S.: I need a responsive solution.
Thanks
since 1 year has passed you may not be interested in the solution, but hope that helps someone else.
I also had a situation like that where I needed a div to be of the same width as the image and this had to be responsive.
In my case, I set a fixed width for the div
.some-div{
width: 250px;
}
I also had responsive image:
img{
display: block;
max-width: 100%;
height; auto;
}
and then I added a media query with threshold when the fixed width of the div started to affect the responsive nature and simply addedd this:
#media screen and (max-width: 917px){
.some-div{
width: 100%;
}
}
For my project the threshold was 917px when the fixed width started to affect.
I guess it is a solution that will fit everyone since width: 100% after the certain threshold will always be the width of the image if the image is responsive.
I don't know how to give you a perfect answer, but I can hopefully send you in the right direction. First, you can forget about inherit or min-width because they are not what you want.
auto is the default value, and I think that the default behaviour is very close to what you want: the width of the div adapt to its content. If this is not the current behaviour, this is because of many other reasons including the positioning of that div. The thing is, you won't have a proper centering and sizing of the <div class="display"> with only CSS, because it would need a specific explicit width declaration.
Since you already use Javascript to display/hide the good images, you could use Javascript to set the width everytime you change the image that is in the box.
My best advice would be to use existing solutions which are tested, approved and look really good. A 2 seconds Google search pointed me to Fesco which you could try.
I'm not sure if this is what you mean, but if it is, I hope it will help!
If you want your image to fill the div, but to scale with the browser, try setting the width of your div. Next, apply max-width="100%"; height: auto; to your image.
The simplest solution would be to just set .display to display: inline-block;, which would adjust its size to the contained image. If you want to be responsive as well, you need to define an upper limit via max-height: 80%, for example.
Put together, it would look like this: http://codepen.io/anon/pen/IluBt
JS line 17:
$(".display").css("display","inline-block");
CSS for .display
.display {
position: relative;;
background: rgba(255,255,255,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
max-height:80%; /* <-- limit the height */
top:10%;
left:0;
margin:auto;
}
And to align everything nicely:
.loader {
color: red;
position: fixed;
width: 100%; height: 100%;
background: rgba(0,0,0, 1) url(../http://www.mpleandro.com.br/images/new/loader.gif) no-repeat center center;
text-align: center;
}
Longtime Java programmer, pretty new to CSS/HTML in general. Here is my portfolio site I am working on.
www.zdware.com/projects.html
Going to it with a non-large browser window forces my content to spill into another div. Currently, I added some padding to it, so its not exactly spilling, but now the content is pushed down (for some odd reason, even though there seems to be space.
I am using a few "hackish" things to sort of like :
margin-bottom: -10000px;
padding-bottom: 10000px;
for my two "columns" in the middle. Would this have anything to do with it?
The two columns I have are effected by this.
.sidebar1 {
float: left;
min-height: 100%;
min-width:250px;
width: 20%;
background-color:gray;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
.content {
padding: 10px 0;
width: 80%;
float:right;
}
.content section{
padding-left:30px;
}
I've tried adding min-width to .content, but it doesn't really do anything. I do have rather bigger images on the pages, but they should still fit.
To elaborate visually..
My preferred way I would like this to work is for the non "container" sections (which holds both the sidebar and content tags) to be shortened, instead of the container.
I also feel like this is a common problem. However, dealing with the way CSS is, I feel if I implemented someone else's solution (based upon their own problem) that another piece of code would end up preventing it from working.
The min-width: 250px; rule on .sidebar1 is what's causing the .content div to position itself beneath the sidebar. If you get rid of that, then your content column moves itself into the right position.
As for what to do with the logo, I'd either bump it down so that it fits in that space, or set it to have a percentage width in the css so it always fits in that column regardless of how wide the column is.
And yeah, I'd lose the 10000px negative-margin hack.
I came across the website http://www.swiftkey.net.
On my widescreen I see the gray background on the sides of the content area..On my regular(1024x768) the grey bars are not there.
How do they acheive this effect?
Using firebug, I was able to decipher what I think MIGHT be doing this:
.w1 {
float: left;
width: 1600px;
position: relative;
left: 50%;
}
.w2 {
float: left;
width: 1600px;
position: relative;
}
I do have experince with CSS and HTML, but the above code is a little bit cryptic to me, especially considering w2 is inside w1.
I'm answering this under the assumption that the grey bars you're talking about are the ones shown in the second sample image:
The simple answer is that the page uses a wrapper with a static maximum width that is horizontally centered:
#wrapper {
max-width: 1000px;
margin: 0 auto; //centers a block element
}
The grey bars are created by having a background color on the <body> or <html> elements:
body {
background-color: #888;
}
I haven't checked the source to see where these styles are specifically set, I'll leave that as an exercise for the reader.
This has to accomplished with javascript screen object
var scr=window.screen;
var availwidth=scr.availWidth;
var width=scr.width;
var availh=scr.availHeight;
var height=scr.height;
availWidth and availHeight gives actual available width and height, considering taskbars and scrollbars etc.
width and height give the actual screen resolution. Then access the variables and decide the type of layout.
However adjusting anything to center is easy
div
{
width:1024px;
position:absolute;
left:50%;
margin-left:-512px;
}
the javascript screen width tracing is for more control options
I have fairly simple layout, like this:
<div class="card">
<span class="attack">1</div>
<span class="defence">2</div>
</div>
They're arranged on top of each other with simple display: block. What I want to achieve is when a card is in specific areas, "attack" shows on bottom and "defence" is on top. I know I can make it with jQuery, but can I achieve the same effect using pure CSS?
Technically, this is a business rules thing, which is not the domain of your cosmetic layer.
In an HTML document, the order of elements from first to last has semantic meaning - your case is not different, I suspect, in that you are trying to indicate some difference in importance from one element to the next (in the document, not just the visual representation) depending on the context.
So your approach should be JQuery, or some other method of changing the meaning of the relationship of these two elements in terms of their order in the document. CSS is intended to change only their cosmetic appearance.
With situations like this, it can be helpful to think, "what if someone could not see the elements, and had to rely on a screen reader to read them in the order they appear in the document? Would this information (not just the content of the two elements, but their relationship) still be correct and comprehensible?"
You may not intend for this to be accessible to the blind, but that's often a good sanity check for how to approach a problem like this.
I'm pretty sure this will work:
.card {
width: 100px;
height: 150px;
float: left;
}
.attack, .defence {
width: 100px;
height: 75px;
clear: right;
}
/* Play with height and padding-top of .defence to
get the text to the very bottom */
.attack-top .card .attack {
float: left;
}
.attack-top .card .defence {
float: right;
height: Wpx;
padding-top: Xpx;
}
/* Play with height and padding-top of .attack to
get the text to the very bottom */
.defence-top .card .attack {
float: right;
height: Ypx;
padding-top: Zpx;
}
.defence-top .card .defence {
float: left;
}
There are a few details missing in your description, so I'll try to fill in my assumptions, and you can let me know if they're valid or not.
You said "when a card is in specific areas". I'll assume these areas can be represented by different containing classes (.attack-top and .defence-top, but rename as you see fit).
I'm assuming that a .card is 100px wide and 150px tall. If these width and height values are wrong, fill in the correct ones and make the appropriate recalculations. If .card doesn't have fixed width/height, it may still work, but I'm less confident, and you won't be able to get the bottom text to go to the very bottom of the card (just below the top text).
The first thought is to use absolute positioning within .card.
.card { width:100px; height:50px; position:relative; }
.attack { width:100px; height:25px; position:absolute; top:25px; }
.defense { width:100px; height:25px; position:absolute; top:0; }
In this example, .attack will be (visually) below .defense. But note, if you disable CSS, the true arrangement will be seen.
If you know the height of the element, you can use position: relative (with positive and negative values, respectively) or position: absolute. But this is all very hacky and comes with a lot of side-effects - I would do it in Javascript instead.
You can do this by using (if you only want to do the swap in div.card):
.card .attack {
position: relative;
top: 1em;
}
.card .defence {
position: relative;
top: -1em;
}
But as others have mentioned this can have some unintended side-effects. E.g. the above sample will move swap position correctly only for 1 line blocks.
No, you can't. Even if you decided to try to "hack" it out in CSS, the resultant CSS would be huge, messy, and not easily maintained. The corresponding jQuery code would be very simple by comparison, easily understood, and easily maintained.