I am planning a fluid-design based layout with 2 cols as follows;
Below is the HTML code:
<div id="container">
<div class="fl wd5percent"><img src="titleText.jpg" /></div>
<div class="fl wd95percent"></div>
</div>
Here the 1st col contains the image for title text and remaining width is used for other content.
Now my issue is as this is a fluid layout, I cannot use "px" width anywhere... I define img to use max-width:100%, but that kind of creates blank space (or gap) below the titleText image when the 2nd col height is more.
How do I define my CSS such that the page scales well as the browser is resized. By that, I mean whatever be the browser size, the titleText image would be displayed to occupy full height as the content height of 2nd col..
Again, I cannot use px width or height anywehere in my CSS. So I cannot say, width:200px;height:100px
Please see the below fiddle link:
http://jsfiddle.net/thilakar/xKrws/2/
Related
I would like to get unusual behavior bootstrap and media-query.
The content of one div (a) should be dependent on his width and not the width of the browser window. In the case of the picture (a) has a width of 600px and should be displayed as XS, and the container should act as LG.
You are thinking of Bootstrap incorrectly.
The point of bootstrap is to allow you to easily modify the behavior of elements depending on the width of the screen. If you're using only the grid system for example, all you're modifying is the width of the elements themselves based on the width of the screen.
If you want your a element to behave as sm at all times, regardless of the width of the screen (or at least until it reaches xs, for example) then you can use something like:
<div class=" div-a -col-sm-6"></div>
This will tell bootstrap to display the div A with 6 columns as long as the screen width is bigger than sm.
I'm not sure what you mean by "the container to act as LG" but I assume you mean it should be modified only for LG screens. Then:
<div class="container-div col-LG-12 col-*-newSize">
<div class=" div-a -col-sm-6">
*content*
</div>
<div class="container-b-c col-*-6"
<div class"div-b col-*-12"
-content-
</div>
<div class"div-c col-*-12"
-content-
</div>
</div> //End of container-b-c
</div> //end of container-div
where * is the size you need.
I have a set of images for which I am specifying explicit width and height attributes in the HTML, so that space is reserved for them while the page is loaded (this avoids page "jumps" when images take longer to load).
On the other hand I don't ever want the images to take more space than the available width of the viewport. So if the viewport is too narrow the images should resize. For this I added the following CSS styles:
img.resizable {
max-width: 100%;
height: auto;
}
The problem: As soon as I set height:auto in the CSS, space for the image is not reserved anymore during page loads and I get the page "jumps" effect. If I remove height:auto, then if the image resizes the aspect ratio will not be preserved. Any suggestions on how to approach this?
A non-Javascript solution would be preferred if possible.
I solved this with hints from this blog post that explains how to use CSS to set the aspect ratio of a fluid element.
Basically the solution looks as follows:
<div style="width: [width]px; max-width:100%; position:relative">
<div style="padding-top: [aspect]%"></div>
<img style="position:absolute; top:0" src="...">
</div>
where: [width] = image width, [aspect] = 100 * image width / image height
Basically with this the browser has the following information:
The initial width of the image (set in the outer div via width)
The aspect ratio (set in the inner div via padding-top)
The resizing behaviour (set in the outer div via max-width)
With this I achieve the desired behaviour: No page jumps upon initial load, and automatic resizing (keeping the aspect ratio) for narrow viewports.
I just encountered with a strange problem.Though i haven't used any media queries on my site,the sidebar of my blog moves down when i resize my window like it's responsive but it's not.It is supposed to stay there as it is .
How do i overcome this problem with css?
My blog link
You need a wrapper with a min-width attribute, since the total width of your site retracts and can no longer support your sidebar beside the content node.
div.wrapper { min-width:XXXpx; }
<div class="wrapper">
<div class="content">
<div class="sidebar">
</div>
The wrappers min-width (or just width) must be wide enough to keep the sidebar and the content side by side. (Content width) + (sidebar width) = wrapper width.
Why don't you use percentage(%),
<div style="width:25%;"></div>
Then it will re-size according to your browser window size.
My layout is like this:
<section class="container">
<div class="picture-div">
<figure><img src="blah"></figure>
<figure><img src="blah"></figure>
...
</div>
<div class="text-div">
<p>Text which could be very very very very very very very very very very very very very very very very very very long</p>
<p>Text which could be very very very very very very very very very very very very very very very very very very long</p>
...
</div>
</section>
Both the picture-div and the text-div have dynamic width according to their content. The picture-div has a min width of 500px and the text-div has a min width of 300px.
I want a dynamic effect matching the following rules:
The element following the container should have float both cleared and the content fully below the container element.
If the viewport width is not enough, the horizontal scroll bar should always be placed on the HTML element instead of the container, picture-div, or the text-div element.
If the container width exceeds (picture-div width + 300px), the text-div floats at the right of the picture-div and takes whole left space of the container. (eg. if container width is 2000px and picture-div width is 800px, then picture-div takes 800px and text-div takes 1200px.)
If the container width doesn't exceed (width of picture-div + 300px), the text-div doesn't float and both the picture-div and the text-div take full container space. (eg. if container width 1000px and picture-div width 800px, then both picture-div and text-div take 1000px)
Is there a pure CSS solution for this?
I'm kinda bad with syntax far as what you might be asking for, but thought I'd give it a shot to see if you might be able to follow this after in order to fix your issue.
It sounds like you want a responsive layout that will respond to maximum screen width and do specific things at each max or min width that the window shows. The floats would just be different classes that you could add in, I normally just use class="fl" and include that in my css. Here's a small example of what I have that pretty much does what I think you're asking.
<div id="panel-1-index">
<div class="row">
<div class="large-4 columns">
<img src="your-image.gif"/>
</div>
<div class="large-8 columns">
<p>Your Text Content</p>
</div>
</div>
</div>
Then your css would associate each of the class="large-* columns" as a certain width percentage. For the example above it would be:
.large-4 { position:relative;width:33.333% }
.large-8 { position:relative;width:66.667% }
The row and columns css properties will essentially just provide you with specific padding parameters and 100% width. After that, it would just involve you adding media queries that would give the classes different behaviors depending on screen widths.
The example I gave you is from use with my own site utilizing Zurb Foundation css framework. The first part of your question I couldn't really answer cause I have no idea - but the rest can be accomplished by looking at Foundation framework styles that shoot for responsive design. In my very limited experience, I would also suggest not using pixels for your measurements and instead go with percentages or em measures for better responsive design.
Let me know if I was far off, or just trying to tell you something you already know :)
I want to create website based on the 1140 grid system with a "landing" image that fills the whole browser, so you'll have to scroll for the content.
So, basically, when you open it, you see this image (with height and width that fill 100% percent of the browser, without any constraints) and when you scroll you see the rest of the page, which is in centered and in columns.
Please not that I want the "landing" image to be scalable as well - it will fit an smartphone or tablet widts as well.
It sounds like you are looking for something like this. It is a very basic layout, but you should be able to get the idea from that fiddle.
Basically, you just create a <div> with 100% height and width. It will take up whatever size the browser is, then you can add another block element below that to house your other content.
<div style="height:100%;width:100%;">
<img src="http://0.tqn.com/d/cats/1/0/c/i/3/iStock_AngryCat425x282.jpg"
style="height:100%;width:100%;"/>
</div>
<div>
here is some other stuff</br>
here is some other stuff</br>
</div>