I have text next to a image (red square for now).
When i make the window really small then the text goes under the image, i don't want this ever to happen.
so good:
bad:
How can this be prevended?
<div class="entrie">
<img class="entrieImage" src="images/img01.png"/>
<div class="entrieInfo">
<div class="band">Green</div>
<div class="album">...</div>
<div class="label">ATCO</div>
<div class="year">1966</div>
-
<div class="tags">rousseau, green, woodsy, band photo, 12IN, tree, civilization, Atco, 1960's, Fuzz
</div>
</div>
</div>
-
.entrie {
float: left;
margin-bottom: 40px;
position: relative;
}
.entrieInfo {
width: 200px;
float: left;
margin-left: 10px;
margin-right: -45px;
position: relative;
z-index: 2;
}
.entrieImage {
/* if you only set the width then the height will be set automaticly proportional*/
width: 300px;
height: 300px;
float: left;
position: relative;
z-index: 1;
background: red;
}
here a js fiddle for easy testing:
http://jsfiddle.net/K4RFU/
You could set a min-width on .entrie which is sufficiently large to encompass its content.
Related
How do I lay an image (such as a circle) over a different image so that it always stays in the right place, regardless of image or browser resizing? Is there a way I can do this with divs?
**Update: Thank you for your help. I have attached some images of relevant html and css to illustrate what I'm trying to do. I'm hoping to get the circles to surround one person's face, even though the image itself resizes with the browser. Thanks!
Webpage Image HTML CSS
One way I would recommend would be to use position:relative on your circle image, add it after the image you want in on top of, and set the left value to -outerWidth of 1st image. You should also put both of these in a span and add css to prevent line break as well
The code below gives examples of circles that remain within their parent square, and can be positioned in proportion to their parent squares. I've created some CSS so that you can add a class to various divs to change their size, etc.
N.B. You cannot apply .large or .small to the circles, their size is proportional to their parent div, although this does not have to be the case.
.square {
width: 100px;
height: 100px;
background: blue;
text-align: center;
margin: 5px;
float: left;
}
.large {
height: 200px;
width: 200px;
}
.small {
height: 50px;
width: 50px;
}
.circle {
position: relative;
border-radius: 50%;
background: red;
color: white;
}
.center {
left: 25%;
top: 25%;
width: 50%;
height: 50%;
}
.left-center {
left: 0;
top: 25%;
width: 50%;
height: 50%;
}
.right-center {
left: 50%;
top: 25%;
width: 50%;
height: 50%;
}
<div class="square small">
<div class="circle left-center">
</div>
</div>
<div class="square">
<div class="circle center">
</div>
</div>
<div class="square large">
<div class="circle right-center">
</div>
</div>
I have tried searching around and what I found was either for a set of divs side by side of equal size, or too complicated to adapt to my scenario.
I have a container div with a main div and images div. The main div contains a large blue box with text, while the images div contains two stacked images of different sizes. I want the distance between the main div, the images divs and the right hand side of the page to remain constant while making sure the main div resizes to not go over the sidebar.
All the code is on this codepen: https://codepen.io/1s2s2p/pen/rdJawE
Shortened down code:
HTML:
<div id="container">
<div id="image4">
<img style="width: 80%; height: 80%;" src="https://achievement-images.teamtreehouse.com/badges_intro_to_html_css_stage-01.png">
</div>
<div id="image5">
<img style="width: 80%; height: 80%;" src="http://wwwcdn.howdesign.com/wp-content/uploads/HTML5-CSS31.jpg">
</div>
<div class="main">
<!--Lot of text here-->
</div>
</div>
CSS:
.main {
padding: 21px 6px 6px;
font-weight: bold;
background-color: #66cccc;
float: right;
clear: both;
display: block;
visibility: visible;
z-index: 0;
width: 58%;
position: relative;
top: 167px;
left: -214px;
}
.images {
margin-right: auto;
margin-left: auto;
right: 8px;
padding-top: 156px;
position: absolute;
}
I have an images2 div which is used in the same way but with different images.
I have a fixed div that is covering up content on the bottom of my page when the user scrolls down. This specifically impacts mobile devices. I've recreated the problem here: http://codepen.io/bkuhl/pen/LWjXdx
Here's the code from that post:
<div class="main-content">
Test Content
<div class="content-suffix">
Copyright
</div>
</div>
<div class="fixed-bottom-bar">
I'm covering up the Copyright text
</div>
and CSS:
.main-content {
width: 100%;
min-height: 400px;
background-color: darkgrey;
}
.content-suffix {
padding-top: 350px;
}
.fixed-bottom-bar {
position: fixed;
bottom: 0;
right: 0;
padding: 1em;
width: 100%;
background-color: blue;
}
One approach I've thought about is adding a [padding|margin]-bottom to the content-suffix, but in this case my content on the fixed element has a variable length.
How can I make sure the "Copyright" text isn't covered by the fixed element, keeping in mind the fixed-bottom-bar has a variable text length?
You could use the css calc() property to achieve this. Add margin-bottom: calc(/* the values you want to calculate */); You haven't set the font-size, but the default is 16px. Therefore, you would want to add padding to the bottom of content-suffix that would be 16px + 2em, the total height of the footer. Your final code would be:
.content-suffix {
padding-top: 350px;
margin-bottom: calc(16px + 2em);
}
This would work better if you specified the font-size of the text somewhere. This could be a dynamic value (e.g. 1vw, 1em, etc.) and this would still work.
You need to set position to absolute, give overflow-y will be more better and calc for your height.
.main-content {
width: 100%;
height : calc(100% - 94px) !important;
background-color: darkgrey;
overflow-y : auto;
position:absolute;
}
.content-suffix {
padding-top: 350px;
}
.fixed-bottom-bar {
position: fixed;
bottom: 0;
height : 50px;
right: 0;
padding: 1em;
width: 100%;
background-color: blue;
}
<div class="main-content">
Test Content
<div class="content-suffix">
Copyright
</div>
</div>
<div class="fixed-bottom-bar">
I'm covering up the Copyright text
</div>
If the footer is simple you can add it at the bottom of the content and make it hidden so it will take space but will not be displayed.
.main-content {
width: 100%;
background-color: darkgrey;
}
.content {
display: flex;
align-items: flex-end;
height: 400px;
}
.bottom-bar {
width: 100%;
background-color: blue;
}
.bottom-bar.space {
visibility: hidden; /* hides the element but keeps it space*/
}
.bottom-bar.fixed {
position: fixed;
bottom: 0;
}
<div class="main-content">
<div class='content'>Test Content</div>
<div class="bottom-bar space">
I'm covering up the<br> Copyright text
</div>
<div class="bottom-bar fixed">
I'm covering up the<br> Copyright text
</div>
</div>
If you have no restriction for using JavaScript, look at below codes:
var x =
document.getElementsByClassName("fixed-bottom-bar");
document.getElementById("forged-fixed-bottom-bar").style.height = "" + x[0].offsetHeight + "px";
.main-content {
width: 100%;
min-height: 400px;
background-color: darkgrey;
}
.content-suffix {
padding-top: 350px;
}
.fixed-bottom-bar {
position: fixed;
bottom: 0;
right: 0;
padding: 1em;
width: 100%;
background-color: blue;
}
#forged-fixed-bottom-bar {
height: 20px
}
<div class="main-content">
Test Content
<div class="content-suffix">
Copyright
</div>
</div>
<div id="forged-fixed-bottom-bar">
</div>
<div class="fixed-bottom-bar">
I'm covering up the Copyright text
</div>
I'm having trouble solving this puzzle: I'm using a 2-column layout with a fixed-width right column and a left column which takes out the remaining space. Both heights are variable. So something like this:
<div class="sidebar">sidebar</div>
<div class="main-area">main content</div>
<style>
.sidebar { float: right; width: 250px; }
.main-area { position: relative; overflow: hidden; }
</style>
Ok, so up to here everything is fine. But here comes the tricky bit. I'm using CSS3 to enable a css change when reaching a max-width of 750px. I want the sidebar to break down below and have a 100% width (so it becomes a footer for the main content). But, because in the HTML code the sidebar div is required to be first it always appears above the main area.
Any ideas on how to lay this out?
Thank you very much!
The simple answer to your question is no. You can't make your sidebar move beneath the content in your breakpoint if the sidebar falls before the content area in your HTML. At least... Not without javascript and a bunch of craziness.
That said... Just move your sidebar below your main-content div. Semantically there is no reason for you not to.
<section class="container">
<div class="main-area">main content</div>
<div class="sidebar">sidebar</div>
</section>
Some CSS changes are required to achieve this however. It's not quite as simply done as you had it previously, but not especially difficult either.
.container {
position: relative;
}
.sidebar {
position: absolute;
top: 0;
right: 0;
width: 250px;
}
.main-area {
background: red;
margin-right: 250px;
}
Here is a JSFiddle demonstrating it working.
Feel free to add varying amounts of content to either the main-content area or the sidebar and you'll see that both still have varying heights that don't interfere with each other.
HTML:
<section class="container">
<div class="main-area">main content</div>
<div class="sidebar">sidebar</div>
</section>
CSS:
.container {
position: relative;
max-width: 1024px; /* could be width: x% as well*/
}
.sidebar {
position: absolute;
right: 0; top: 0;
width: 250px;
}
.main-area {
margin-right: 260px; /* sidebar width plus 10px gap */
}
#media only screen and (max-width: 750px) {
.sidebar {
position: static;
width: 100%;
}
.main-area {
width: 100%;
margin-right: 0;
}
}
I think you can realize this with jQuery.
HTML
<div class="main-area"></div>
<div class="sidebar"></div>
CSS
.sidebar{
background-color: #000;
height: 200px;
width: 50%;
}
.main-area{
position: relative;
background-color: #ff0000;
height: 200px;
width: 50%;
}
jQuery
$(function(){
$('.sidebar').css('float', 'right');
$('.main-area').css('float', 'left');
$(window).resize(function(){
if($(this).width() <= 750){
$('.main-area').removeAttr('style');
$('.sidebar').removeAttr('style');
}else{
$('.sidebar').css('float', 'right');
$('.main-area').css('float', 'left');
}
});
});
You can see result here -> jsFiddle
Well, this is my way.
I think I found the answer here: http://jsfiddle.net/salman/TPNpy/
<div id="main-area-wrap">
<div id="main-area">Column 1</div>
</div>
<div id="sidebar">Column 2</div>
<div id="clear"></div>
#main-area-wrap{
float: left;
width: 100%;
}
#main-area {
background-color: cyan;
margin-right: 200px;
}
#sidebar{
background-color: lime;
float: left;
width: 200px;
margin-left: -200px;
}
I want to have a login form centred on the page. An example is here
I know how to centre an element what I can't work out is how to centre an element always in the centre of the page even if the browser window changes size
Classic problem. Here's some example CSS:
#your_element{
position: fixed;
left: 50%;
top: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
}
Important bit: the negative margins should be half of the respective dimensions.
Add position: fixed; to it's style. If you know how to center it, then just adding this should do the trick.
Have a look here for more info: http://www.w3.org/TR/CSS2/visuren.html#choose-position
I keep this template HTML just for this situation, when I need a container that is vertically and horizontally centered:
CSS:
html, body {
height: 100%;
}
body {
background: #ffc;
margin: 0;
padding: 0;
}
#vertical-center {
float: left;
height: 50%;
width: 100%;
margin-top: -185px;
}
#content {
background: #ffffde;
border: 2px dashed red;
clear: both;
margin: 0 auto;
padding: 10px;
height: 350px;
width: 500px;
}
HTML:
<div id="vertical-center"></div>
<div id="content">
<h1>Centered Content</h1>
<p>This content is centered on the page.</p>
<p>More importantly, it won't get cut off when the browser window becomes too small to display it.</p>
</div>
Note that the #vertical-center has a margin-top that has to be half the height of the #content div, and it has to be negative.