I want to make a card which contains an image and some texts. The text should be put over the image. So I put all of them in a .container which has position: relative with themselves set to position: absolute.
For the text:
the 1st part of the text sits at the left side with the wrapper .row-start, one by one in a row
the 2nd part of the text sits at the right side with the wrapper .row-end
of course both within the container
Html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Color-blue.JPG"/>
<div class="row-start">
<p>Attr 1</p>
<p>Attr 2</p>
</div>
<div class="row-end">
<p>Attr 3</p>
</div>
</div>
</body>
</html>
Css:
.container {
position: relative;
height: 15em;
}
.container img {
width: auto;
height: 100%;
}
.row-start {
position: absolute;
left: 1em;
display: flex;
flex-direction: row;
}
.row-end {
position: absolute;
right: 1em;
}
What's the problem
What confuse me is that it seems .row-start can work while .row-end doesn't honor its .container parent at all. And it will be placed outside the .container div and from the right side of the page (so it honors the
<html> tag?)
What am I missing or doing something wrong here?
And any best practice for doing this? Thanks
Your container element is a block, so it's size it's the size of the screen. I have added a background: red to your container so I can show you what i mean
You can see it on this pluckr:
https://plnkr.co/edit/QdsaqIU5X7xYX4UXksT9?p=preview
.container {
position: relative;
background: red;
}
Your .container DIV doesn't have a width definition, so it's 100% wide, i.e. full width (of its parent / in this example of the window). The height is 15 em, which apparently is more than the height of the image.
So your absolute DIVs are positioned in relation to the .container, but that container is larger than you apparently think it is - the image only covers part of the container div.
To change that, you can define a width for the container, and 100% width or the image.
Related
I'd like to create a web page with a really, really large scrollable content area.
However it seems like once the size gets too large browsers stop displaying the full content area correctly. e.g.
<div id="scrollable">
<div id="visCont">
<img src="https://media.glamour.com/photos/5a0399bd8948116a5c05be65/master/w_644,c_limit/kaley-cuoco-the-big-bang-theory-penny-season-11-2017.jpg"> </img>
</div>
<div id="invisibleContent">
<p>
text
</p>
</div>
</div>
#scrollable {
overflow-y:auto;
}
#visCont {
top: 6710000px;
position:absolute;
}
#invisibleContent {
top: 6720000px;
position:absolute;
}
Here if you scroll all the way to the bottom you will see the image and the text displayed fine at the bottom of the div:
https://jsfiddle.net/L7c8bmpm/11/
However here because the content is so far down from the top, the the text is cut off in Chrome, and you don't even get the white div background at the bottom. In IE, it seems like the text isn't displayed and the image is at the very bottom.
https://jsfiddle.net/ww5yu6nh/10/
is there a way to fix this? or is this just a limitation of most web browsers these days as it's not expected that anyone would need a div this tall?
It should all render fine and in my browser (Chrome v65) I can see both elements just fine, but I think your approach is wrong.
Your parent div with id scrollable has a height of 0. Because the elements within are positioned absolute they receive their own stacking context and the parent div collapses. The scrollbar you currently see is actually on the body.
A better approach would be this:
#scrollable {
height: 6720000px;
position: relative;
}
#visCont {
bottom: 1000px;
position: absolute;
}
#invisibleContent {
bottom: 0px;
position: absolute;
}
https://jsfiddle.net/afe6odw3/1/
The scrollbar is still on the body, but your parent div does have an actual height now.
I have edited your code try this one
this is only an example
note tag is no close
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body, html {
height: 100%;
}
.image{
/* Full height */
height: 100%;
width: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<img src="https://media.glamour.com/photos/5a0399bd8948116a5c05be65/master/w_644,c_limit/kaley-cuoco-the-big-bang-theory-penny-season-11-2017.jpg" class="image">
<p>
text
</p>
</body>
</html>
I am not sure why I am having such an issue with this, but I cannot get a container to show 100% width and have it at the bottom of the parent element.
I am wanting the home-img-text-container2 and its description to be at the bottom of the image container and for it to be 100% width of the image.
Just like where the arrow is:
What I have done is changed the position of the containers to absolute:
#home-img-text-container1, #home-img-text-container2 {
position: absolute;
}
Then modified the width and placed it at bottom:0
#home-img-text-container2 {
bottom: 0;
width: 100%;
}
In addition the before:
#home-img-text-description2:before {
width: 100%;
}
The modifications I made are in the max 640px viewport media query.
What am I doing wrong to not get the container2 div to be placed at the bottom of the image and be 100% of the width of the image?
See the fiddle to see what I have done.
Fiddle
Try this, if you have the home-img-text-container2 element inside of a container, place it out the outside like so
...
</div> <!-- End of main container -->
<div class="home-img-text-container2"></div>
</body>
Then in your css:
.container{
min-height: calc(100vh - 80px);
}
The 80px is the height of whatever your home-img-text-container2 element is I just used 80px as an example. Make sure you have spaces either side of the "-" as well
calc(100vh-80px); will not work
I tried recreating your page and everything worked fine. here is the code:
<html>
<head>
</head>
<body>
<style>
#home-img-text-container1, #home-img-text-container2 {
position: absolute;
}
#home-img-text-container2 {
bottom: 0;
width: 100%;
}
</style>
<div id=home-img-text-description1>
<div id=home-img-text-container2>
Text inside the container2
</div>
</div>
</body>
Everyone this is my first post, so I hope I did it right.
I am facing a problem where I have child divs that need to be the same width. The #content can be bigger than the browser window (hence the 3000px, but won't always be bigger than the browser window). Currently #content is shown properly and I can use the scrollbar to see the entire #content, but #messages and #menu are cut off at the width of the browser window.
I have tried using width: inherit and several other options, but they didn't work. Does anyone else have a working solution?
I have created a JSFiddle to make life easier http://jsfiddle.net/Ks665/
I have added a screenshot of the probleem:
The red and green must become as long as the blue div.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<div id="messages">test</div>
<div id="menu">test</div>
<div id="content">test</div>
</body>
<html>
CSS:
#import url('reset.css');
body {
min-width: 990px;
}
#messages {
height: 100px;
background-color: red;
}
#menu {
height: 100px;
background-color: green;
}
#content {
background-color: blue;
height: 250px;
width: 3000px;
}
You could try wrapping them inside another DIV, and specify the width on there; the child DIVs will automatically fill to the width of the parent:
<div id="container">
<div id="messages">test</div>
<div id="menu">test</div>
<div id="content">test</div>
</div>
And then apply the width to the container DIV instead of to 'content':
#container {
width: 3000px;
}
The reason it isn't working in your example is because the DIVs are children of the body tag, which has a minimum width specified, but nothing explicitly defined like I've shown above.
I would like to build a fluid layout and would like to achieve something like
width:100%-200px;
i.e. have a div with content, call it div id="content" with a fixed margin on either side. I have tried to use the trick of putting the div id="content" into another div container with a margin, but I don't know how to fill out the background of div id="content". Is there a way of telling the div id="content" to use 100% of the available space as background, such that the width of the content plus the width of the margin does not exceed 100% of the browser window size?
Having the DIV set to be 100% with a margin of XXX on either side won't work as that will exceed the size of the browser window.
You could try the following:
body {
padding:0 2%;
}
#content {
width:96%;
}
http://jsfiddle.net/YYhvT/
Use position absolute...
#content {
position: absolute;
left: 0;
right: 200px;
}
See my Fiddle.
PS Advantage is that you don't need values on other elements.
You can put a container around the content and give it 200px left/right padding. This should do the trick (at least, from what I understand of what you are trying to accomplish). Also see this code example:
<!doctype html>
<html>
<head>
<style type="text/css">
body { margin: 0 50px; }
#container { padding: 0 200px; background: #FF0000; }
#content { width: 100%; background: #00FF00; }
</style>
</head>
<body>
<div id="container">
<div id="content">
Here goes my content
</div>
</div>
</body>
</html>
Note that the body margin is just for illustrating purposes, to let you see the background differences.
(I would post a jsFiddle, however I am not able to use it since I can only use IE7 at this point.)
here is my solution,
html:
<div id="content" class="content">
My Content
</div>
css:
.content {
position: absolute;
right: 100px;
left: 100px;
background-color:#A5112C;
}
and link to it: http://jsfiddle.net/MPYHs/
also if you want to put sort of image as a background I suggest you use small pattern like https://ssl.gstatic.com/android/market_images/web/background_stripes.gif
hope it helps,
regards
I'm trying to establish a layout with in the base three rows: A header, content and footer div.
The two outer most div's are of a fixed height; The center div has to be fluid and adapt itself to the height of the browser screen.
Could someone point me in the right direction how to tackle this with proper CSS? For now I'm not yet interested in a javascript solution. As CSS doesn't provide a clean answer, a javascript solution comes eminent!
This is how far I came:
<div id='header'>Header</div>
<div id='content'>
<div id='innerContent'>
This is the fluid part
</div>
</div>
<div id='footer'>footer</div>
css:
#header {
position:absolute;
top:0px;
left:0px;
height:100px;
z-index:5;
}
#content {
position:absolute;
top:0px;
left:0px;
height:100%;
z-index:2;
}
#innerContent {
margin-top:100px;
height:100%;
}
#footer {
height:400px;
}
EDIT:
I'm sorry, I feel embarassed. I made something similar about a year ago, but at first I didn't think it was possible to adjust it to this situation. Apparently it was.
As I think other's have already said, it is possible to put the footer div at the bottom by positioning it absolutely. The problem is to adjust it's position when the content div gets larger. Since the footer is absolutely positioned it won't follow the content div's flow, which makes it stay at the same place even though the content expands.
The trick is to wrap everything in an absolutely positioned div. It will expand if it's content gets larger, and the footer div will be positioned according to the wrapper's borders instead of the document's borders.
Here's the code. Try to put a bunch of <br /> tags within the content div and you'll see that everything adjusts.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
min-width: 100%;
position: absolute;
}
#header {
height: 100px;
background-color: red;
}
#content {
background-color: gray;
margin-bottom: 50px;
}
#footer {
height: 400px;
min-width: 100%;
position: absolute;
bottom: 0px;
margin-bottom: -350px;
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</div>
</body>
</html>
ORIGINAL:
Sadly, css lacks a clean way to do this. You don't know the viewport height (which you called h) and therefore can't calculate h-100-50 You have to build your website so that most people will see 50px of the footer div. The way to do that is to set a min-height for the content div.
The min-height value must be derived from some standard viewport height. Google Labs have published their data on viewport sizes for their visitors and made a great visualization of it here:
http://browsersize.googlelabs.com/
I design for my own viewport, which is 620px high (according to google ~80% have this viewport height). Therefore the min-height for the content div should be 620-100-50 = 470 px.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: red;
}
#content {
min-height: 470px;
background-color: gray;
}
#footer {
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</body>
</html>
If I understand your problem correctly I think this might lead you into the right direction.
http://jsfiddle.net/mikevoermans/r6Saq/1/
I'll take a poke at it. Not sure if I read your screenshot correctly but I set the content div to be 50-100px in height.
Here is my jsfiddle: http://jsfiddle.net/AX5Bh/
I am using the min-height and max-height CSS attributes to control the #innerContent div.
If you horizontally expand the result window you will see that some of the text is highlighted . I have set the content to be hidden if it is larger than the #innerContent div. You might want something different. I only highlighted the text with an <em> tag to demonstrate that max-height was working.
If you remove all the text but the first sentence you will see it is 50px in height.
Here is a link to browser support of min-height and max-height: http://caniuse.com/#search=max-height