I am trying to figure out the correct way to make a div class inherit the parent div height so that when I do for example, padding-top: 100% , it puts the element at 100% of the parent div.
Here's my code:
CSS
#globalContainer{
margin: 0px auto;
width: 100%;
height: 100%;
}
#header-out{
width: 100%;
background-color: black;
}
#header{
width: 940px; /* Set to % when possible */
height: 240px; /* Set to % when possible */
margin: 0px auto;
background-color: white;
}
#header .title{
position: relative;
float: left;
padding-top: 100%;
}
HTML:
<body>
<div id="globalContainer">
<div id="header-out">
<div id="header">
<div class="title">Test</div>
</div>
</div>
</div>
</body>
At the moment, my Test appears at the very bottom of the page inside of the bottom of my header...
Thanks !
EDIT: I am now trying to add a logo next to my title, I used this code:
#header .title{
position: relative;
float: left;
top: 50%;
left: 2.5%;
width: 250px;
height: 100px;
border-style: solid;
border-width: 1px;
}
#header .logo{
position: relative;
float: left;
top: 50%;
width: 250px;
height: 100px;
border-style: solid;
border-width: 1px;
}
Problem is, it overlaps my title, starting where my title would end if I did not use the left: 2.5%
I tried to remove the float: left, it doesn't change anything...
Anyone can help on this ?
Related
i try to make that in css
http://prntscr.com/l19jl9
but i only sucsses to
http://prntscr.com/l19juk
https://prnt.sc/l19itx
this my code:
.halfCircleLeft{
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
background:green;
}
how i can do that?
You can set overflow: hidden to the container and make the inner div a big circle, it will give you the effect you want.
.cont{
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
background-color: #e5e5e5;
}
.round-back{
top: -100px;
left: 50px;
position: absolute;
border-radius: 50%;
width: 300px;
height: 300px;
background-color: red;
}
<div class="cont">
<div class="round-back"></div>
</div>
This isn't exactly the shape that you have in your image, but it's simple and it's likely close enough:
#box {
border:1px solid #000;
border-radius: 10px 0px 0px 10px / 50% 0% 0% 50%;
width: 200px;
height: 100px;
background-color: #ccc;
}
<div id="box"></div>
The above solution uses elliptical border-radius, which is specified using a slash (/).
Another approach here is much closer to your original image, but it takes significantly more code to implement, and it's quite a bit more brittle too to customise:
#wrapper {
overflow: hidden;
width: 200px;
}
#box::before {
position: relative;
display: block;
content: "";
margin-left: -20px;
background: #ccc;
height: 400px;
width: 400px;
margin-top: -75%;
border-radius: 50%;
z-index: -10;
}
#box {
float: left;
position: relative;
margin-left: 20px;
width: 200px;
height: 100px;
background-color: #ccc;
}
#content {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
}
<div id="wrapper">
<div id="box">
<div id="content">
</div>
</div>
</div>
This approach uses an oversized circle, which is then clipped by a #wrapper div using overflow: hidden;. The #content div isn't strictly necessary for the shape, but it may make it easier to position something inside the box.
Is it possible to use calc() to center an element, which has a width defined with % ?
e.g.
.wrapper {
width: 100%;
background-color: black;
height: 300px;
position: absolute;
top: 0;
}
.inside {
width: 100%;
margin-left: 30px;
background-color: yellow;
height: 250px;
margin: 20px;
}
.inside h1 {
width: 30%;
background-color: white;
text-align: center;
}
.inside h1 {
position: absolute;
left: calc(50% - 15%);
left: -webkit-calc(50% - 15%);
}
<div class="wrapper">
<div class="inside">
<h1>CENTERED to viewport</h1>
</div>
</div>
This is the slider. It has a "string", which guides through the steps of the slider and the header is always in the middle of the screen. But for design purpose, the line starts a bit to the right and ends a bit to the left, which is given with a width of 80%.
The top is slider no.1 with the string, the second slider, which is synced is the area with the big white square.
Maybe now it is a bit more clear, why I tried what I tried.
Yes, if you create a variable in the css for example:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
--Example: 200px;
position: absolute;
left: 50px;
width: calc(100% - var(--Example)/2);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">Some text...</div>
</body>
</html>
If you can have fixed width just add margin: 0px auto. This will center the text horizontally.
.wrapper {
width: 100%;
background-color: black;
height: 300px;
position: absolute;
top: 0;
}
.inside {
margin-left: 30px;
background-color: yellow;
height: 250px;
margin: 20px;
}
.inside h1 {
width: 40%;
background-color: white;
text-align: center;
margin: 0px auto;
}
<div class="wrapper">
<div class="inside">
<h1>CENTERED to viewport</h1>
</div>
</div>
Here is the JSFiddle: http://jsfiddle.net/W2UvH/1/
Very simple implementation of a sticky footer that should stick to the bottom of the screen when there is less content height than the height of the screen. But if the height of the content extends beyond the height of the screen, then the footer should follow along with it.
I don't understand why my footer is stopping half way up the screen.
HTML:
<div id="Canvas">
<div id="Container">
<div id="Wrapper">
</div>
</div>
</div>
<div id="SiteFooter">
<p>Copyright © All Rights Reserved.</p>
</div>
CSS:
body, html {
height: 100%;
}
#Canvas {
position: relative;
min-height: 100%;
}
#Container {
margin: auto;
background-color: #CCC;
max-width: 802px;
padding: 15px 0;
}
#Wrapper {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
width: 730px;
background-color: #999;
border: 1px solid #DEDEDE;
overflow: hidden;
height: 1000px;
}
#SiteFooter {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
z-index: 9000;
background-color: #FF00FF;
height: 45px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #E0E0E0;
}
I see that all your other elements are positions relative. So, not sure what your exact implementation is, but:
#SiteFooter {
position: relative;
}
The above code should also do it for you.
You want the position to be fixed, not absolute.
#SiteFooter {
position: fixed;
}
I need to overlap image of logo 20px down in a responsive slider. The image of logo must come at front and the responsive slider must be back. Please view live at: http://www.pahari.com.np
**HTML PART:**
<div id="top_banner"> <div id="logo"><img src="image/logo.jpg"> </div> </div>
<div id="slider_bg"> <?php include_once("slider.php"); ?> </div>
<div id="menu_bg"> </div>
<div id="content_bg"> <div id="content"> </div> </div>
**CSS PART:**
<style>
#top_banner{
width: 1000px;
height: 106px;
margin: auto;
}
#logo{
width: 362px;
background: url(images/logo.jpg) no-repeat;
height: 106px;
float: left;
}
#slider_bg{
float: left;
height: 380px;
}
#menu_bg{
background: #B1BB34;
height: 30px;
}
#content_bg{
background: #A562B1;
height: 180px;
margin-top: 25px;
}
#content{
background: url("image/bg.jpg") no-repeat;
width: 1000px;
margin: auto;
height: 180px;
margin-top: 25px;
}
<style>
The easiest way is to position your slider1_container with a negative value for top and adding a negative z-index. ex.:
top:-2em;
z-index:-1
Hope this help!
I would wrap the top banner in another div and work with absolute positioning. Please note that I have taken only part of your code for display purposes on fiddle. You will need to add this to your site accordingly.
Check this out: http://jsfiddle.net/3Z2JZ/
CSS
body{
background: url(images/bg.jpg) #FFFFFF repeat-x;
font: normal 12px verdana;
color: #9C9C9C;
margin: 0;
padding: 0;
}
#top_banner_wrap {
position: absolute;
width: 100%;
}
#top_banner{
position: relative;
width: 1000px;
height: 106px;
margin: auto;
}
#logo{
width: 362px;
background: url(images/logo.jpg) no-repeat;
height: 106px;
float: left;
}
#slider_bg{
float: left;
width: 100%;
height: 380px;
background-color: red;
margin-top: 86px;
}
use
#logo {
position: relative;
z-index:100;
}
for the logo element and it will stay on top of the slider element.z-index should be highest number defined.
I use this template
<style>
#block_center{
position: absolute;
right: 210px;
left: 210px;
text-align: left;
border: 1px solid #000;
overflow: auto;
height: auto;
}
#block_right{
width: 200px;
border: 1px solid #000;
position: relative;
right: 3px;
text-align: left;
float: right;
}
#block_left{
position: relative;
left: 3px;
width: 200px;
border: 1px solid #000;
text-align: left;
float: left;
}
#block_content{
clear: both;
float: none;
width: 100%;
text-align: center;
overflow-y:auto;
overflow-x:auto;
height: auto;
/* margin-bottom: -50px; */
margin: auto;
}
#block_buttom {
background-color: blue;
/* z-index: -10; */
width: 100%;
height: 50px;
clear: both;
}
.clear {
clear:both;
overflow:hidden;
}
</style>
<div id="block_content">
<div id="block_center"> ARTICLE <br> article_ajax_content </div>
<div id="block_right"> Artile links </div>
<div id="block_left"> banner </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div id="block_buttom"> some text info about site and 31px height img </div>
Problem that I having is that Article not only can be random height size but also there is ajax block of random size content going after it and I simply can't absolutely stick bottom div to stay in bottom after all content regarding browser window size, content size, ajax block size...
Can any one help me with how css (I do not want to use jQuery to pin bottom block to a fix y coordinate) should look like for my pattern of use?
Make all blocks relatively positioned and give the heights and widths using percentage rather than pixels.
Make sure the sum of all your height percentages is 100%(in case you want to cover the whole screen).
This ensures your page content covers the whole screen, irrespective of the screen resolution.
The relative sizes of each block is also kept the same across all resolutions.
The key is to use PERCENTAGE values and not PIXEL values.
To solve the Dynamic sized article data, just CSS the article div to have a scroll bar.
this is currently does want i want
<style>
#block_buttom {
margin-top: 10pt;
/* z-index: -10; */
width: 100%;
display: inline-block;
height: auto;
clear: both;
}
.page-buffer {
padding-top: 50px inherit;
height: 50px;
clear: both;
width: 100%;
}
.clear {
clear:both;
font-size:0;
overflow:hidden;
}
#block_content {
width:100%;
text-align:center;
}
#block_left {
position: relative;
top: 0px;
text-align: left;
float:left;
width: 10%;
min-width:210px;
height: auto;
padding: 3px;
}
#block_center {
text-align: left;
display: inline-block;
margin:0 auto;
width:70%;
min-width: 640px;
height: auto;
padding: 3px;
}
#block_right {
position: relative;
text-align: left;
float:right;
width: 10%;
min-width:210px;
height: auto;
padding: 3px;
}
</style>
on high resolution it looking very nice, on lower - still require some tuning with finding balance of center block size and spaces between fixed size left\right blocks