I would like to preface this with I'm a complete newb, so keep that in mind. So what I'm trying to do is have a main content area and I want that a specific width, lets say 800px. And to the left and right of it I want just a black border. Now I want it so when someone resizes the page the two borders change width to fill the entire window but my main content box stays the same. Couldn't figure it out. thanks for the help!
Try this:
<html>
<head>
<style>
html {height:100%;}
body {background-color:#000000;height:100%;margin:0px;padding:0px;}
#content{background-color:#FFFFFF;width:800px;margin:auto;height:100%;}
</style>
</head>
<body>
<div id="content">content</div>
</body>
</html>
If this is your HTML code:
<div id="outer-container">
<div id="main-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
you could set the CSS to the following and it should work.
<style type="text/css">
#outer-container {
background-color: black;
height: 200px;
}
#main-content {
background-color: white;
width: 800px;
margin: 0 auto 0 auto;
height: 200px;
}
</style>
Related
I have a parent div with two other elements, one contains the text content, another may contain a picture. The picture and text might vary in size/length. I want the parent div to grow depending on the content but only up to a certain height. If there is an image I want the image to grow or shrink to make the parent div reach the max height. If there is no image, I want the parent div to shrink to contain the text. The image will be added via JavaScript. I have illustrated what I wanted to do in the following picture.
I was expecting the following code to work but the images seem to expand to be larger than the parent div. I have tried a few other things but I cannot seem to get it to work.
Here is a codepen.
<div id="parent">
<div id="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="image">
<img src="MayOrMayNotContainImg.com">
</div>
</div>
#parent{
max-height:400px;
padding:10px;
border: 2px solid black;
}
#text-body{
padding:10px;
border: 2px solid blue;
}
#image{
padding:10px;
border: 2px solid green;
}
Any help would be highly appreciated, thanks in advance.
In the snippet below, if the image is there, I am assigning its height dynamically using jQuery height by calculating the remaining space inside the #parent. (200 - height). So whatever the content may be, the height of the image will increase or reduce based on that.
$(document).ready(function() {
$('#img-wrapper').attr('src', 'https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg');
let height = $('#text-body').outerHeight();
$('#img-wrapper').height(200 - height - 20);
})
#parent{
max-height:200px;
padding:10px;
border: 2px solid black;
}
#text-body{
padding:10px;
border: 2px solid blue;
}
#image{
padding:10px;
border: 2px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="image">
<img id='img-wrapper' src="MayOrMayNotContainImg.com">
</div>
</div>
While developing new website for our client (he delivered design and insisted on using flexbox), we've come to element that looks like this (the "Samochody Peugeot" section with 2 little boxes at right):
Grid starts at text in left box, and ends at end of image in right boxes. The only real solution that we can find is to create the gray background using absolute positioned :before pseudo-element, but it seems pretty hacky.
At bigger widths the gray bg should expand to left, but everything else should stay in grid.
Is there any better way to achieve this kind of layout than using :before?
<section class="boxes">
<div class="container">
<div class="boxes__box">
<h3>Samochody<br/>PEUGEOT</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>
<a class="btn" href="">Przejdź do strony</a>
</div>
<div class="boxes__box-holder">
<div class="boxes__box boxes__box--small">
<h3>PONAD 20 LAT<br/>DOŚWIADCZENIA</h3>
<a class="btn" href="">O firmie</a>
</div>
<div class="boxes__box boxes__box--small">
<h3>POZNAJ NASZE<br/>USŁUGI</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="btn" href="">Przejdź do strony</a>
</div>
</div>
</div>
</section>
.boxes {
.container {
display: flex;
}
&__box {
width: 68%;
background: orange;
position: relative;
&:first-child:before {
content: '';
height: 100%;
width: 100vw;
background: red;
position: absolute;
right: 100%;
z-index: -1;
top: 0;
}
}
&__box-holder {
width: 32%;
}
}
I have a simple page where the all the content (<h1>, <h2>, <p>, etc.) is contained within a <div>, in order to have the same width.
I like the way the body text looks and want to keep it that way, but I'd like to add a background image to the heading. It should start from the very top of the page (and window, in my case) and end at the baseline of the last line of the heading itself, while also extending in width from the left side of the window to its right. In the following image I illustrated the desired layout. Below it, I've drawn the html hierarchy that I've attempted.
In fact, I've already tried creating a child of <h1> with
width: 100vw;
position: relative;
left: 50%;
transform: translate(-50%);
but:
Since the page has z-index: -1;, for some weird bug I can't click on links with relative positioning
I'd prefer not to use vw unites because of browser support.
I still can't manage to extend the background to the top.
The font size of <h1> and its margins are defined in pixels, as you see, but the page still behaves dynamically because as I resize the window, the number of lines of <h1> increases.
HTML
<div class="page">
<h1>Heading</h1>
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
CSS
body {
height: 100%;
width: 100%;
margin:0px;
}
.page {
font-size: 20px;
width: 90%;
max-width: 70ch;
padding: 50px 5%;
margin: auto;
z-index: -1;
}
h1 {
font-size: 30px;
margin-top: 0;
margin-bottom: 10px;
}
h2 {
font-size: 22px;
margin-bottom: 26px;
}
p {margin-bottom: 24px;}
JS Fiddle
Two suggestions:
Separate the h1 and the rest of the body in two different divs. Apply the background to the first div.
<div class="background-here">
<div class="page">
<h1>Heading</h1>
</div>
</div>
<div class="page">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Or you could just apply the background to the body and use background-repeat: repeat-x or bakcground-size: cover. But it depends on how the image was designed.
I am having the following structure of the web page.
Part 1: Header, fixed height
Part 2: Content, variable height
Part 3: Footer, fixed height
And I want the following to be true:
1) If the content is smaller than screen_height - header_height - footer_height : The footer should stick to bottom of page, giving the content all the screen space between header and footer.
2) If the content is larger than screen_height - header_height - footer_height : the page will scroll and the footer will be on the bottom of the page. (This case is already achievable, it's how all normal pages look)
To achieve first, I did the following
HTML:
<div class="page-content" style="display: table;height: 100%;width: 100%;">
<div class="header-section" style="display: table-row;height: 10px;">
Content here
</div>
<div id="content-section" style="display: table-row;height: auto;">
Content here
</div>
<div id="footer-section" style="display: table-row;height: 230px;">
Content here
</div>
</div>
With this, the header row is spanning not 10px height but more. I want to confine the header row to just 10px height. Is this achievable with this table structure? And what about cross-browser compatibility?
Thanks.
To reduce header height, add line-height:10px also.
You can add Javascript to apply height .
Please check the fiddle - https://jsfiddle.net/afelixj/c8vq3Lbu/5/
Tables try their very best to display everything in them. So since the text "content here" is higher than 10px, the top row will expand to show it all.
Possible solutions are
Take the header out of the table and put it above. Ordinary blocks handle height in a more straightforward way.
html, body {
margin: 0;
height: 100%
}
<header class="header-section" style="height:10px; overflow:hidden">
Content here
</header>
<div class="page-content" style="display:table; height:calc(100% - 10px); width:100%;">
<div id="content-section" style="display:table-row; height:auto;">
Content here
</div>
<div id="footer-section" style="display:table-row; height:230px;">
Content here
</div>
</div>
Put an extra div in the table cell in the header that you give the height. If a div in a table cell is 10px high, the cell won't have to expand, even if there is content overflowing.
html, body {
margin: 0;
height: 100%
}
<div class="page-content" style="display:table; height:100%; width:100%;">
<div class="header-section" style="display:table-row; height:10px; ">
<div style="display:table-cell;">
<div style="height:10px; overflow:hidden">
Content here
</div>
</div>
</div>
<div id="content-section" style="display:table-row; height:auto;">
Content here
</div>
<div id="footer-section" style="display:table-row; height:230px;">
Content here
</div>
</div>
Or, if the problem is that the content is actually 10px high, but you have a few pixels extra below it in the cell, it's probably that the content is inline and leaves room for a descender. In that case, the solution is to give the content display:block or vertical-align:top styles.
html, body {
margin: 0;
height: 100%
}
<div class="page-content" style="display:table; height:100%; width:100%;">
<div class="header-section" style="display:table-row; height:10px; ">
<div style="display:table-cell;">
<img src="http://lorempixel.com/300/10" alt="" style="display:block"/>
</div>
</div>
<div id="content-section" style="display:table-row; height:auto;">
Content here
</div>
<div id="footer-section" style="display:table-row; height:230px;">
Content here
</div>
</div>
As for cross-browser compatibility, it's usually best to emulate a full table (with nested divs being table, table-row and table cell) because older browsers may have problems with content being put directly inside a table row.
You do not need a table layout for achieving this.
Just do a calc for the min-height on your main content div. That's it. Use the viewport relative unit to get the height of the viewport (screen) and subtract the fixed heights of your header and footer.
All you need is this:
.header { height: 1.5em; } /* Fixed height, any unit */
.footer { height: 200px; } /* Fixed height, any unit */
.main { min-height: calc(100vh - 1.5em - 200px); } /* Calculated min-height */
Fiddle: http://jsfiddle.net/abhitalks/jpunjng4/2/
Snippet:
(go full screen to see the effect)
* { box-sizing: border-box; padding: 0; margin: 0; }
.header { height: 1.5em; background-color: #eef; border-bottom: 1px solid #999; }
.footer { height: 200px; background-color: #efe; border-top: 1px solid #999; }
.header, .footer { overflow: hidden; padding: 4px; }
.main {
min-height: calc(100vh - 1.5em - 200px); padding: 4px;
background-color: #eee;
}
<div class="header">
Header
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
The image below represents a website layout I am trying to create. The blue section (bottom right) represents an image should be behind the three neighboring elements and overflow them slightly.
I do not know the best way to do this, at the minute I have a wrapper div round the colored sections and put a background image in there but I am not sure if this is the best approach as the wrapper div needs to have a fixed size.
Any suggestions would be very welcome.
http://www.gumpshen.com/images/layout.png
If I understand you correctly this is my answer:
If the grey is a header, just treat it how you wish.
Then have a "content" div that wraps yellow, red, green and blue, which should be relatively positioned. From there you can absolutely position the blue so that it overlaps yellow, red and green. Then with some z-indexing you should have what you need.
this should be what you need...
Your CSS should look something like this:
<!-- add CSS Reset before this -->
#header {
background-color:#888;
height:100px;
}
#content {
position:relative;
float:left;
}
#topleft {
position:relative;
float:left;
width:50%;
background-color:yellow;
z-index:3;
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
min-height:100px;
}
#topright {
position:relative;
float:left;
width:50%;
background-color:red;
z-index:3;
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
min-height:100px;
}
#bottomleft {
position:relative;
float:left;
width:50%;
background-color:green;
z-index:3;
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
min-height:100px;
}
#bottomright {
position:absolute;
left:49%;
bottom:0;
width:50%;
padding:20px 0 0 17px;
background-color:blue;
z-index:2;
min-height:100px;
}
Your HTML should look something like this:
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<div id="topleft">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="topright">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="bottomleft">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="bottomright">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
note: "lorem ipsum", opacity and min-height added just for show :)
Is it fixed width? If so, you can do some cheats with background images. If it's fixed with and fixed height, then even better - just save the whole image as a background.
You could also give your image a background image, like so:
#MyImage {
padding: 20px 0 0 20px;
background: url(images/image-background.jpg) top left no-repeat;
}
The image will then sit in the middle, with the background showing around the edge. Then your image can be, say, 200x100px, with your background image being 220x120px.
I will assume that you have the colored blocks figured out already.
Now you can put the original image in the blue box as a background, positioned at the right bottom and position a semi-transparent version of that image (or use css transparency) absolutely at the right bottom of your wrapper. The semi-transparent image on top of the original won´t show, it will just show in the surrounding boxes.
Use relative positioning to position the elements and don't forget to set the right Z-Index values to the div you want to put on top.