So I have a header which is set to 100% width on my page and I want to put text on the banner and stay in place but when I zoom in and out the position of the text changes. How do I make it so that the text stays place to the place I set it and zooming in and out does not affect it?
Fiddle : jsfiddle.net/5ASJv/
html
<div id="wrap">
<div class="right">
Hey <br />
What is up <br />
</div></div>
css
* {
margin: 0 auto;
}
#wrap {
height: 150px;
width: 100%;
background: url(http://froggyadventures.com/wp-content/uploads/galleries/post-93/full/placeholder%20-%20Copy%20(2).gif) no-repeat center;
text-align: center;
background-color: #FFF;
}
.right{
width: 400px;
height: 110px;
position: relative;
z-index: 999;
top: 100px;
left: 100px;
}
Try this:
* {
margin: 0 auto;
}
#wrap {
height: 150px;
width: 100%;
background: url(http://froggyadventures.com/wp-content/uploads/galleries/post-93/full/placeholder%20-%20Copy%20(2).gif) no-repeat center;
text-align: center;
background-color: #FFF;
position: relative;
}
.right{
width: 400px;
height: 110px;
position: absolute;
z-index: 999;
top: 100px;
left: 100px;
}
Related
For a picture preview I want to put 2 invisble divs (red/blue in the picture) in front of a picture for next/previous image functionality.
I would like to have the div ("pictureContainer"/ green bordered zone) to automatically take over the dimension of the containing picture but I can't find a PURE CSS solution without setting the width and the height manually.
.container {
position: fixed;
width: 100%;
height: 100%;
border: 3px solid black;
}
.pictureContainer {
/* I don't want to set width and hight manuyally.
The container should have the size if the contained image. */
height: 50%;
width:300px;
position: relative;
margin: auto;
border: 3px solid green;
}
.leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
opacity: 80%;
}
.rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
opacity: 80%;
}
.picture {
position: absolute;
top: 0;
left: 0;
margin: auto;
z-index: -1;
}
<div class="container">
<div class="pictureContainer">
<div class="leftSide"></div>
<img class="picture" src="https://www.9skips.com/wp-content/uploads/2018/01/anger-300x300.jpg">
<div class="rightSide"></div>
</div>
</div>
Also the container should be horizontally aligned.
Note: The full screen white div with the black border is used to close the picture preview.
You should change so the divs have absolut: position, let the image have it's natural size, container should be display: inline-block;
.container {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 100%;
height: 100%;
border: 3px solid black;
}
.pictureContainer {
position: relative;
display: inline-block;
margin: 0 auto;
border: 3px solid green;
}
.picture {
display: block;
}
.leftSide {
position: absolute;
top: 0;
bottom: 0;
left: 0;
background-color: blue;
width: 50%;
opacity: 80%;
z-index: 1;
}
.rightSide {
position: absolute;
top: 0;
bottom: 0;
right: 0;
background-color: red;
height: 100%;
width: 50%;
opacity: 80%;
z-index: 1;
}
<div class="container">
<div class="pictureContainer">
<div class="leftSide"></div>
<img class="picture" src="https://www.9skips.com/wp-content/uploads/2018/01/anger-300x300.jpg">
<div class="rightSide"></div>
</div>
</div>
I am trying to overlay a circle over a square image. The text needs to be centered hoziontally and verticaly in the circle.
I have almost got it right with a square div, but as soon as I put an image into the mix, the circle moves below the image.
My code.
.Container {
width: 300px;
height: 300px;
}
.Square {
height: 100%;
width: 100%;
background-color: yellow;
}
.Square img {
width: 100%;
height: 100%;
}
.Circle {
position: relative;
height: 70%;
width: 70%;
top: 15%;
left: 15%;
background-color: rgba(0, 0, 200, 0.5);
border-radius: 50%;
/*80px;*/
margin-bottom: 50%;
/*30px; */
float: left;
margin-right: 20px;
}
.Circle h3 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
text-align: center;
}
<div class="Container">
<div class="Square">
<img src="SiteData/Images/ProfilePics/ProfileImg.png" />
<div class="Circle">
<h3>Words Here</h3>
</div>
</div>
</div>
The Container will ultimately be of variable width, determined by bootstrap col
Since you want to position your circle over the image, you have to use position: absolute instead of relative. This will take it out of the document flow and you can position it anywhere you want within the parent element.
In order for this to work, you will also have to declare position: relative on the parent.
See proof-of-concept example below:
.Container {
width: 300px;
height: 300px;
}
.Square {
height: 100%;
width: 100%;
background-color: yellow;
position: relative; /* To allow children to be absolutely positioned */
}
.Square img {
width: 100%;
height: 100%;
}
.Circle {
position: absolute; /* Use absolute positioning */
height: 70%;
width: 70%;
top: 15%;
left: 15%;
background-color: rgba(0, 0, 200, 0.5);
border-radius: 50%;
/*80px;*/
margin-bottom: 50%;
/*30px; */
float: left;
margin-right: 20px;
}
.Circle h3 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
text-align: center;
}
<div class="Container">
<div class="Square">
<img src="SiteData/Images/ProfilePics/ProfileImg.png" />
<div class="Circle">
<h3>Words Here</h3>
</div>
</div>
</div>
I have a layout frame of small widget with top navbar and bottom navbar. Inside that widget i have items and in one of them i have to put another layout(same as parent). This is small example of mine css problem, where footer in child layout is not in the bottom.
.body{
position: static;
width: 100%;
height: 100%;
}
.header{
position: absolute;
top: 0px;
}
.footer{
position: absolute;
bottom: 0px;
}
.main{
position: relative;
width: 100%;
height: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.item{
position: relative;
width: 100%;
}
.view{
height: 100%;
}
this dont get the height of height in parent widget, how can i fix that?
I manage to build the layout i want without any kind of positions, i removed all of them. I use:
display: table;
display: table-row;
for mine layout and it works perfectly. Here is the example of what i did. Below is general css of what i did.
.body{
height: 100%;
display: table;
width: 100%;
text-align: center;
}
.header{
display: table-row;
width: 100%;
height: 50px;
background-color: blue;
}
.footer{
display: table-row;
bottom: 0px;
width: 100%;
height: 50px;
background-color: grey;
}
.main{
display: table;
width: 100%;
height: 100%;
}
.item{
display: table-row;
width: 100%;
}
.fullExtend{
height: 100%;
}
html, body { height: 100%; }
Class body is container for widget, header and footer is for header and footer for each widget, main is the body of widget, item is part of main which can be widget and fullExtend is item which height get maximum space left in page.
Do you want to achieve something like this?
Edit: I refined your structure a bit. You want to achieve this?
HTML :
<div class="main-header">
Main Header
</div>
<div class="wrapper">
<div class="item item-1">
<div class="header">
Item 1 Header
</div>
<div class="item-content">
<div class="item item-2">
Item 2
</div>
</div>
<div class="footer">
Item 1 Footer
</div>
</div>
</div>
<div class="main-footer">
Main Footer
</div>
CSS:
html{
height: 100%;
}
body{
margin: 0;
padding: 0;
height: 100%;
}
.main-header{
position: absolute;
top: 0px;
background-color: blue;
width: 100%;
height: 50px;
line-height: 50px;
color: white;
text-align: center;
}
.main-footer{
position: absolute;
bottom: 0px;
background-color: grey;
width: 100%;
height: 50px;
line-height: 50px;
color: white;
text-align: center;
}
.wrapper{
position: relative;
padding: 50px 0;
box-sizing: border-box;
height: 100%;
}
.header{
position: absolute;
top: 0px;
width: 100%;
height: 50px;
background-color: darkblue;
color: white;
}
.footer{
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
background-color: darkgrey;
color: white;
}
.item{
position: relative;
width: 100%;
height: 100%;
}
.item-view{
height: 100%;
position: absolute;
width: 100%;
padding-top: 50px;
box-sizing: border-box;
}
.item-content{
position: relative;
top: 50px;
}
My problem is that I wanted to have split page by two divs side by side (50% width). Inside of them I wanted to place another divs and make them aligned vertically and horizontally at the same time.
I think that it is possible to make it without JS, but I'm not able to do that.
Can anybody make my two circles placed in the center (V,H) of their parent DIV, which are 50% of width and 100% of height so that when I will resize my window the circles will always be in center (and side by side as is now)?
Here is my code:
<div id="container">
<div class="left">
<div class="kolo1">
sometext1
</div>
</div>
<div class="right">
<div class="kolo2">
sometext 2
</div>
</div>
</div>
And a JSFiddle for that: http://jsfiddle.net/m5LCx/
Thanks in advance in solving my quest :)
It's actually quite simple, all you need to do is to simulate a table-like behaviour:
HTML markup:
<div id="container">
<div>
<div class="half left">
<div class="circle">hello</div>
</div>
<div class="half right">
<div class="circle">world</div>
</div>
</div>
</div>
CSS styles:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
}
#container > div {
display: table-row;
}
.half {
display: table-cell;
width: 50%;
text-align: center;
vertical-align: middle;
}
.half.left {
background: red;
}
.half.right {
background: blue;
}
.circle {
display: inline-block;
padding: 50px;
border-radius: 50%;
}
.half.left .circle {
background: blue;
}
.half.right .circle {
background: red;
}
Final result http://jsfiddle.net/m5LCx/11/:
Working here http://jsfiddle.net/3KmbV/
add position: relative in .left and .right class and than add margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; in .kolo1 and .kolo2 class. and remove top position from .left class
try it
body {
background-color: #006666;
margin: 0 auto;
height: 100%;
width: 100%;
font-size: 62.5%;
}
#container {
width: 100%;
min-height: 100%;
height: 100%;
position: absolute;
}
.left {
width: 50%;
min-height: 100%;
float: left;
top: 0;
background-color: #660066;
position: relative;
}
.right {
width: 50%;
min-height: 100%;
float: right;
min-height: 100%;
background-color: #003366;
position: relative;
}
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
you can give postion: relative to .left and .right.
and give below CSS for to .kolo1 and .kolo2
margin: -5em 0 0 -5em;
position: absolute;
left: 50%;
top: 50%;
Updated demo
Another fiddle. This one uses absolute positioning with negative margins to ensure the circles are always in the centre. CSS looks like this
.kolo1 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -5em; /* this must be half of the width */
margin-top: -5em; /* this must be half of the height */
}
As #Tushar points out, you need to set the position of the parent element to relative also.
Working Fiddle
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
Try adding padding-top:50% for parent divs (having class left and right)
I have a DIV who's borders are made up of images. What I'm trying to do is have this DIV auto expand (in height only) whenever the content does not fit the content area. Otherwise it should just use the min-height. Here is my markup:
XHTML:
<div id="alerts">
<div id="alerts-top"></div>
<div id="alerts-left"></div>
<div id="alerts-content">
<div id="alerts-header">
<p>Alerts</p>
</div>
<div id="alerts-main">
<!-- content in here -->
</div>
</div>
<div id="alerts-right"></div>
<div id="alerts-bottom"></div>
</div>
CSS:
#alerts { float: left; width: 267px; height: 200px; }
#alerts #alerts-top { float: left; background: url(../images/alerts-top.png) no-repeat; height: 12px; min-width: 257px; }
#alerts #alerts-left { float: left; background: url(../images/alerts-left.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-content { float: left; min-width: 239px; height: 206px; min-height: 206px; }
#alerts #alerts-content #alerts-header { background: url(../images/alerts-bell.png) no-repeat; height: 20px; width: auto; padding: 10px; }
#alerts #alerts-content #alerts-main { background-color: #FFFFFF; height: auto; }
#alerts #alerts-right { float: left; background: url(../images/alerts-right.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-bottom { float: left; background: url(../images/alerts-bottom.png) no-repeat; height: 11px; width: 258px; }
This isn't working for me - there is a gap between the bottom border and the left and right borders. The content area is #alerts-main.
Try this for #alerts-bottom:
#alerts #alerts-bottom {
float: left;
background: url(../images/alerts-bottom.png) no-repeat;
height: 11px;
width: 258px;
margin-top: -9px;
}
With a negative value for margin-top property you control how the div will be displayed (in this case you'll force the #alerts-bottom div to be rendered 9px above the default display).
Hope it helps.
After a "five minutes" consideration I've wrote this code and it will do what you want. Just change the styles to add the images as backgrounds. First the CSS:
#wrapper { position: relative; width: 500px; min-height: 350px; }
#alerts { position: relative; height: 50px; background-color: red; width: 90%; text-align: center; margin: auto; margin-top: 10px; margin-bottom: 10px; }
#top-margin { position: absolute; height: 10px; top: 0; background-color: gray; width: 100%; }
#right-margin { position: absolute; width: 10px; right: 0; background-color: gray; height: 100%; }
#bottom-margin { position: absolute; height: 10px; bottom: 0; background-color: gray; width: 100%; }
#left-margin { position: absolute; width: 10px; left: 0; background-color: gray; height: 100%; }
#content { text-align: justify; padding: 65px 20px 20px 20px; }
And the HTML:
<div id="wrapper">
<div id="top-margin">
<div id="alerts">Alerts alerts alerts</div>
</div>
<div id="right-margin"></div>
<div id="bottom-margin"></div>
<div id="left-margin"></div>
<div id="content">Lorem ipsum dolor sit amet etc...</div>
</div>
The #wrapper's height will expand as more text is added. Sorry that I've changed the names of the Ids and justified the text. But that can easily be remedied.