hello this is driving me mad can anyone help. i want a grid of divs 2x2 centered on a large screen but when viewed on smaller screen moves to 1x4 but still centered. so far i have this it works but aligns left on small 1x4 view. i have tried to us inline-block instead of float:left but then you cant add any further content with the #frame-block. the width must be fixed widths at 500px
#frame-block {
width: 500px;
border: 2px #0066FF solid;
margin:5px;
height:400px;
float:left;
}
#frame-container {
text-align: center;
}
#frame-main {
display: inline-block;
vertical-align: middle;
}
<div id="frame-container">
<div id="frame-main">
<div id="frame-block"></div>
<div id="frame-block"></div>
</div>
</div>
Here you go: http://dabblet.com/gist/3734237.
One of your problems was reusing IDs. IDs are unique and should only be used once per page. Here's even more reading on it: http://csswizardry.com/2011/09/writing-efficient-css-selectors/.
In my amendment to your code, I changed the IDs to classes, gave .frame-block 'display: inline-block' instead of 'float: left'.
I'd suggest using relative units as opposed to pixel units so that you need only change the base font-size on your 'body' to adapt on smaller screens that are below 500px. You can read more about it here: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
How about using media queries to make the #frame-block twice as wide on a certain resolution?
Related
I'm trying to implement a basic image viewer using HTML and CSS, where the image remains centered in the page, except for when it's too big to fit. In that case, the user should be able to scroll to see the rest of the image with no margins. If only one dimension is too big to fit, the other dimension remains centered. There is nothing else on the page other than the image.
However, the size of the image needs to be specified by a scaling factor so that I can enlarge or shrink it relative to its original size. This means I can't use an explicit width/height in pixels or size it relative to the size of the page. I've tried adjusting its transform css property, i.e. transform: scale(2.5) but that generally causes the top of the image to be cut off. I've also tried doing this by making the image's display property by set to inline-block and its height property set to auto so that I can set its width to the percentage I want it to be scaled by, but I can't figure out how to keep it centered on page as described in the above paragraph.
How can I accomplish this? So far I've tried around a dozen different ways of centering an element on the page, and none of them result in this exact behavior I'm shooting for. For example, I've used flexboxes to keep the image centered horizontally and vertically, but as soon as it grows too tall to fit, (again) the top of the image gets cut off.
You can use flexbox and center with margin to obtain this:
body {
min-height:100vh;
margin:0;
display:flex;
}
body > img {
margin:auto;
}
<img src="https://picsum.photos/500/500?image=1069" >
And in case you don't want scroll apply max-height/max-width:
body {
height:100vh;
margin:0;
display:flex;
}
body > img {
margin:auto;
max-width:100%;
max-height:100%;
}
<img src="https://picsum.photos/500/500?image=1069" >
there are several ways to achieve horizontal and vertical alignment. However, they are usually done separately and in different ways. You can have a look at W3Schools, they do a few tutorials on each:
W3Schools Alignment Tutorial
Also if you are willing to use bootstrap (makes everything much easier, especially centering) you can have a look at the following link:
BootStrap Grid System Tutorial
Below is a quick method on for centering. Credit goes to: This Post with some minor improvements from myself.
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
text-align:center;
/*whatever width you want*/
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
I have a layout that breaks at 500px using floats and inline-blocks to shift elements. But chrome(40) does not render them correctly after breaking from smaller to larger size.
Here's the initial mobile layout
Expected layout on resize
Incorrect result
The div containing edit/delete buttons is displayed inline-block and floated right, but does not stack along the 'tags'.
div.link-div div.edit-delete {
display: inline-block;
float: right;
background-color: #3498db;
}
Complete CSS JSFiddle.
My break point is between mobile rotations so the browser will resize. This works fine for FF, IE. Is something wrong in CSS? Please give some workaround.
Well, a way to solve the problem would be adding a "float: left;" to the anchor Tags, to make sure it doesn't occur. You can wrap them in a div and 'float' that div left in opposition to the "edit-delete" div.
Here is your JSFiddle edited. I created a class to the div called "tags-div", which, on MediaQuery is set to "float:left;" on screen sizes bigger than 500px.
#media screen and (min-width: 501px) {
.tags-div {
float: left;
}
I am working on a webpage, and I want to use JavaScript to center some text (contained in a "p" with the display:inline-block attribute) when the text is shifted under everything else (on a smaller window). When the window size is big enough, I have the text on the right of the screen (where I want it for larger windows).
Basically, I have content on the left and right of the screen for bigger windows, but I want that content to become centered and vertical when the browser is smaller.
I've tried using .addEventListener() but my JavaScript knowledge is pretty limited.
Any thoughts? Does this make sense?
I see you're trying to do some sort of responsive design. You're better off doing this without any javascript.
You should look into Css Media Queries, that are meant to set specific css styles depending on the screen size:
#media screen and (max-width: 500px) {
Similar to your scenario, here's a sample showing the concept: http://jsfiddle.net/xkJ3G/
Resize the window and test it!
You can achieve desired effect using only HTML and CSS.
JSFiddle
HTML
<div class="outer">
<div class="A">A</div>
<div class="B">B</div>
</div>
CSS
div.outer {
width: 100%;
text-align: center;
}
div.A,
div.B {
width: 40%;
min-width: 250px;
display: inline-block;
}
Linebreak will be when width is lesser than min-width (in this example when 40% < 250px)
My problem is with the header. So I basically have 3 columns of divs. I want the middle one to have a constant width of 980px, and then I want the left of the header to extend to the end of the browser window with a blue background color. As for the right of the header, I want that to extend to the end of right side of the browser with a black background color. It kind off looks like this:
<------------------------------[blue][center header][black]---------------------------->
I've done my research and all I could find so far are two columns with a fixed left column with the right column filling up the rest of the space. I wonder how this can be applied to my problem?
Would it be like:
<div style="width:100%;">
<div style="display:table-cell; background-color:blue;"></div>
<div style="width: 980px;">my header</div>
<div style="display:table-cell; background-color:black;"></div>
</div>
Thank you!
A simple solution - basicaly using your exact stying, but putting another block in the central table-cell element, something like this span here:
<div class="wrapper">
<div class="left"></div>
<div class="center"><span>my header</span></div>
<div class="right"></div>
</div>
I moved all the inline style to a separate CSS block and used class selectors:
.wrapper {
display:table;
width:100%;
}
.left {
display:table-cell;
width:50%;
background-color:blue;
}
.right {
display:table-cell;
width:50%;
background-color:black;
}
.center {
display:table-cell;
}
.center span {
display:inline-block;
width:900px;
}
here is a jsfiddle
and here I made the center much narrower for a better illustration: jsfiddle
Hope this helps =)
Unfortunately there isn't a super smooth way of doing this that is also has wide cross compatibility support. There is a CSS spec for display called flex or flexbox which would do what you want beautifully and elegantly, but it has very limited support at the moment. Here is some resources on flexbox for your perusal...
http://css-tricks.com/old-flexbox-and-new-flexbox/
In the meantime, you can achieve the layout you want with some basic CSS jiggery-pokery that will get you what you want, but it requires absolute positioning your middle div.
Heres the JSFiddle: http://jsfiddle.net/CW5dW/
Here's the CSS:
.left {
width: 50%;
height: 300px;
float: left;
padding-right: 160px;
box-sizing: border-box;
background: red;
}
.right {
width: 50%;
height: 300px;
float: right;
padding-left: 160px;
box-sizing: border-box;
background: blue;
}
.middle {
position: absolute;
width: 300px;
height: 300px;
left: 50%;
padding: 10px;
margin-left: -150px;
box-sizing: border-box;
background: orange;
}
What is going on here you might ask?
Basically, we are taking the div with class middle and removing it from the flow of the document. This allows us to float our left div left, and our right div right, with widths of 50% in order to fluidly take up ALL space of the browser.
We then tell the middle div to take up 300px of space (in your case 980), and we tell it to go 50% of the total width of your browser from the left. This doesn't center it though, because its calculated from the left edge of your div. So we give it a negative margin space of half it's width, to sort of "move" that left edge to the center of the div.
Then, since we know the middle div has a width of 300px (in your case 980), we can then say that the left div should have some padding on its right edge greater than or equal to half the middle divs width, in my example that's 150px, and I added 10px more so text couldn't come right to the edge of the div, so 160px total. We do the same for the right div but for it's left side. This limits the content of those two divs from falling underneath our middle div.
This answer is not an "answer" as such - it's an extended comment to #Michael's post. I have, however, posted another answer - a jQuery solution.
Regarding #Michael's answer (which is a very tidy solution indeed) there is a tiny issue that if you remove your height declaration (which the OP undoubtedly will) then the backgrounds for the various columns become exposed - this method relies on the backgrounds all levelling out at their bottom edge in order to make the design coherent. If the OP's design doesn't have backgrounds behind the columns then this solution should be fine. If backgrounds are required (which they might be judging by the question wording) then it could be awkward. Two solutions to this...
a simple javascript that scans the page for column length, finds the longest, and matches all shorter ones to the maximum.
The other (and probably better) solution is to drop a background into your with the columns already on it (it only needs to be 1px high I guess) - just make sure the central white band is 980px wide and the side columns extend off a thousand or so pixels to accommodate even the largest of browsers
OK, here's my solution. This will present a "common or garden" three column fixed width layout to all users and then adjust it for users with javascript enabled (which, let's face it, is the vast majority of users). The benefits of this solution are that the layout will behave like any ordinary 3 solumn layout without the quirks you can experience from using more advanced CSS tweaks like absolute positioning and fixed heights.
Fiddle here... http://jsfiddle.net/vuary/
You should be able to see what's going on with the HTML and CSS... it's basic stuff. The jQuery is pretty straight forward too:
$(document).ready(function(){
// find the width of the browser window....
var docuWidth = $(window).width();
// find the width of the central column as set by the CSS...
// (you could hard code this as 980px if desired)
var centerWidth = $('#center').width();
// figure out how many pixels wide each side column should be...
sideColWidth = (docuWidth-centerWidth) / 2;
// then set the width of the side columns...
$('#left,#right').css({
width:sideColWidth+'px'
});
})
EDIT
Converted the jQuery to a function that is called when the document is ready, and again if the viewport is resized... just in case:
http://jsfiddle.net/aKeqf/
I've got this problem, I've placed a div within a div, I've positioned the "title" to be height 50, and then "navbar" below it, so I've put height 100% though the thing is, its not staying within the div, its actually straying away from and out of the div and making a scrollbar appear.
I would love "site" to hog the walls and then all the other div fit in that div.
<div id="site">
<div id="title">TitleBar</div>
<div id="navbar">NavBar</div>
<div id="frame">FrameBar</div>
</div>
body{
margin: 0;
}
#site{
position:absolute;
width: 100%;
height: 100%;
*border: 1px solid #333;
}
#title{
border: 1px solid #333;
height: 50;
}
#navbar{
border: 1px solid #c38a8a;
width: 200;
height: 100%;
}
I've found an image that shows something similar.
http://img176.imageshack.us/img176/4637/picture1zb1.png
that's because 100% height actually means "use the same height as the container".
But I didn't quite get all your requirements for this layout, if your navbar is a navigation bar, it should be designed in a way that allows scrollbars to appear when the content is too big.
But I think you're going for the wrong structure to accomplish this, is there any actual reason you want a wrapper div? I've created a fiddle on this, check if this is closer to what you wanted: http://jsfiddle.net/6g6HV/2/
This other one is yours, in case you wanna play with it: http://jsfiddle.net/yq8PS/3/
Edit: Adding the javascript solution to the answer http://jsfiddle.net/6g6HV/9
You can make divisions in HTML appear side by side to each other by adding a float property to the css.
#navbar{
border: 1px solid #c38a8a;
width: 200px;
height: 100%;
float: left;
}
Additionally, always add the 'px' unit after a size. Modern browsers assume you mean px, but older ones might not.
There isn't a good way to prevent the overlapping when you have a sidebar that is a set pixel width. To achieve the liquid width (or fluid width) style, you would have to add negative 200px margin on the left to the #frame (to counter sidebar). Then, add another divsion inside the #frame to do the styling for that portion. This is how I have achieved the look on my web site, and it's also the solution used in the previous default Drupal theme (Garland).
#frame{
margin-left: -200px;
}
IN this context, 100% for the Navbar doesn't mean the remaining height but 100% of the visible heigth of the parent; so if the parent has a height of 400px then Navbar will also have an height of 400px. If you add to this size the height of the title bar, you get a total value greater than the size of the parent; therefore the appearance of the scolling bar.
While there is usually no problem with the width to make it appears to fill the whole length of a screen, it's very difficult in HTML & CSS to do the same with the height as they have not been designed for this sort of thing; especially with an imbricated structure (div inside div).
Some people will use Javascript to get the size of the screen (browser) and compute the size of their objects accordingly but I don't know if you can do the same with a pure HTML/CSS solution; especially if you want to have your solution compatible accross many browsers.
For more info, take a look at http://www.tutwow.com/htmlcss/quick-tip-css-100-height/