So, currently I'm trying to set the minimum height for some css tabled content based on the height of the picture rather than the height of the text.
In essence, my layout is like this:
<Image #60% width> | <Text #40% width>
And I'm currently using flex boxes to do this.
However, right now, when the page is resized (I cannot use static heights as it needs to be fully responsive), at a certain point the image becomes extremely small and the text makes the container huge.
I'd like, ideally, for the text to be the same height as the image at all times and, if there is overflow, for it to be scroll based.
Here's my current Jsfiddle.
http://jsfiddle.net/D7h3z/4/
I'm not averse to using technologies that are new/experimental. I am averse to using JavaScript for this as there shouldn't be a need. And if I do need to, I don't use JQuery, so please avoid that in your answers if you can.
3check out the changes I made to your fiddle -- New Fiddle
Essentially, I made the inner span of description absolute positioned and then placed an overflow-y auto on it's container span. I the applied a min-height of 200px to the img container and it appears to be working as you described. Let me know if this isn't the case.
.description {
width: 40%;
padding: 10px;
position: relative;
overflow-y:scroll;
}
.imagebox {
width: 60%;
min-width: 300px;
}
.imagebox img {
width: 100%;
min-height:200px
}
.description span {
padding: 10px;
position: absolute;
}
EDIT Actually doesn't work 100% yet, the image doesn't maintain aspect ratio... sad trombone
EDIT 2 Added in a min-width which sorta gets it there, but from a dynamic standpoint, this is far from ideal. I will give it another look later tonight.
Related
So, I have a few divs that i want to center.
I'm currently using this css code on something i call a "container div" - you've most likely heard this "container" thingy before.
#container {
margin: auto;
width: 75%;
margin-top: 100px;
}
Although this does not seem to center the divs when resizing the window; If I resize the window, the divs will follow slowly and by that -move further away from the center.
Fiddle - https://jsfiddle.net/kud3f01n/
What is causing the divs to behave like this?
As verified in your example, I've found that you made those blocks design by using margins(negative and high range values). Hence even you are giving main container width 75% or any other still it will overflow from the parent div. And this kind of CSS will create critical issues in smaller devices.
Suggestion: Try to avoid this type of CSS. And if you need this type alignment and it has t be work in responsive also you can some third party plugins such as masonry.js etc.,
Try this
#container {
height:50px;
width:50px;
position:absolute;
left:50%;
top:50%;
margin: 0 auto;
}
I have tried multiple options and narrowed it down to a specific class but I cannot seem to figure it out.
Im trying to get "#content-wrapper" to increase height but it seems to be stuck at the browsers height.
This has been pissing me off for the past 3 hours.
#content-wrapper {
width: 100%;
max-width: 1000px;
height: 100%;
min-height: 100%;
margin: auto;
position: relative;
}
JSFiddle Link: http://jsfiddle.net/8hn7uLqr/
If anyone can help me please I will be very grateful, I hope everyone is having a good Christmas Eve!
Delete height:100% in the css for the #wrapper and #content-wrapper. It this case it means the height of your browser without scrolling. Give the height a number of pixels or let the height depend on the content within with height:auto.
So if I understand you correctly, you're not sure why your content shows a height of 703px when it's actually in the 9000's. There are 2 issues here.
is the use of height: 100%. Many people think that means 100% of the content but it's actually 100% of the current screen size unless you set html to be height: 100% as well. You can use min-height: 100% which will allow it to extend past the screen height.
The biggest issue you are having is because of the constant use of position: absolute. I'm not sure if you are aware but using absolute positioning removes the element from the flow of the document. Meaning it no longer adheres to it's parents constrains.
After I removed the multiple position: absolute and the height: 100% you can see form the following screenshot the height is adjusted to the content:
So really you need alot of CSS overhaul to set this up without absolute: position
I have a div placed on the bottom-left corner of the browser window by using position: fixed. When the user resizes the window, I want the div to resize as well, but preserve the original aspect ratio.
CSS solutions only (or a confirmation that it cannot be done solely using CSS). I'm working in IE9+. I will accept any solution: div resizing by its width OR height.
There were many questions (with solutions) like mine, however none of them seem to provide a solution for when the div is using position: fixed. Their solutions must have position: absolute, or they don't work.
EDIT 1: Codepen live example here.
EDIT 2: This is how I want it to work, whilst still using position: fixed.
It's not entirely clear to me if you know the aspect ratio in advance -- if so, you can just use a variation of
#content:before {
content:'';
float:left;display:block;
width:0;
padding-top:80%; /*height= 80% of width */
}
possibly combined with a min-height for #container? (This is a streamlined variant of the accepted answer in your link.)
Assuming you are looking for something where you will have a small div at the bottom right corner of your window and resizing the browser window will resize the small box.
HTML:
<div class="fixed-box">
Something...
</div>
CSS:
.fixed-box {
position: fixed;
bottom: 0;
left: 0;
width: 10%;
height: 10%;
background-color: #ccc;
}
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/
I'm certainly no CSS guru, but I am working on a problem where I'd like to make copying of images just slightly more burdensome for users. Sure, they can still easily be retrieved, but this makes it so you can't just drag/drop them on your desktop. Basically, I had a bunch of markup like this:
<img width="400" src="my image.png" class="foo" alt="foo">
Instead, I decided to put this into a background image and change the element to a div:
<div width="400" class="foo">
The problem I have is that the images have a fixed width, but a variable height. This worked excellent when I was using an img tag. It doesn't have the same behavior when I use a div tag. Instead, the CSS is requiring me to force a height property to display anything at all:
This doesn't work
.foo {
display: block;
margin: 0;
padding: 0;
width: 400px;
background-image: url(myimage.png);
/* height: 200px; */
}
This sorta does:
.foo {
display: block;
margin: 0;
padding: 0;
width: 400px;
background-image: url(myimage.png);
height: 200px;
}
The problem is the height for the images are all variable as I mentioned before. So it tiles over and over if I hard code a size. The container can be a placeholder for well over 5,000 images, so setting it by hand won't do it. If I can get this div to behave exactly like the img tag did, the problem is solved.
If you are just trying to prevent people from clicking and drag/dropping, I would say put each img into it's own div with position: relative. Add another div inside that relative div that has the following style:
div.img_box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
z-index: 9999; /* or anything higher than your img's z-index */
}
That will cover up the image with a transparent div.
That way the image (which is part of your content) is still syntactically correct in the html.
Everybody is of course correct in saying that they have already downloaded the images to their computers just by visiting the site.
If you're trying to prevent users from reusing your content easily, some good methods are to:
1. Use images with lower resolution to limit reuse potential
2. Watermark your images
3. A combination of both, in an image sprite.
Hacking at it will just be ugly, ineffective, and difficult to maintain.
You are just setting the background of the div, you aren't adding an image to the div. The div can be resized to whatever it won't resize to what it's background image is. Just use the tag.
The only thing you could do with CSS is add a height which would work for all images. So if you're images range from 200-250px in height, set the div to 250px. Otherwise, you'll need javascript or server-side scripting to determine the height of the image and set the the CSS.