I have a problem with positioning HTML divs:
I want to have a top headline with height 50px and a footer with height 40px.
The whole in-between shall be filled with the div "pad" but it does not fill the whole area.
Dont know where my mistake is.
And..btw..Do i really need jquery for this mickey mouse stuff?
</head>
<body>
<style>
body{
margin: 0px;
padding: 0px;
}
#head{
position: fixed;
top: 0px;
height: 50px;
width: 100%;
border: solid black 1px;
}
#pad{
position: relative;
border: solid red 1px;
top: 50px;
width: 100%;
}
#foot{
position: absolute;
border: solid green 1px;
width: 40px;
bottom: 0px;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
var win_h = $(window).height();
console.log(win_h);
$('#pad').height(win_h-90);
</script>
<div id="head" >HEAD</div>
<div id="pad">PAD</div>
<div id="foot">TOOL</div>
</body>
Here's an example using absolute positioning and no jquery:
http://jsfiddle.net/adamfullen/6kqT3/
body{
margin: 0px;
padding: 0px;
}
#head{
position: fixed;
top: 0px;
height: 50px;
width: 100%;
border: solid black 1px;
}
#pad{
position: absolute;
border: solid red 1px;
top: 50px;
bottom: 40PX;
left: 0;
right: 0;
}
#foot{
position: absolute;
border: solid green 1px;
width: 40px;
height: 40PX;
bottom: 0px;
}
Add 100% height for your body and html. Then using calc expression you can assign the height for the pad division.
html,body
{height:100%;}
#head{
position: fixed;
top: 0px;
height: 50px;
width: 100%;
border: solid black 1px;
}
#pad{
position: relative;
border: solid red 1px;
top: 50px;
width: 100%;
height:calc(100% - 90px);
}
#foot{
position: absolute;
border: solid green 1px;
width: 40px;
bottom: 0px;
}
DEMO
Related
<html>
<body>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid red;
right:0;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</body>
</html>
In my code div relative I wrote right:0; but this box does not move in right corner and still is in left corner.
Seems to be working (if you add margin-left: auto). Other than that being relative right: 0 means moving right from current position. So no reason it would go to right edge. If it was absolute it would have.
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid red;
right: 0;
margin-left: auto;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
<div class="relative">
i am relative
<div class="absolute">
i am absolute
</div>
</div>
I'm trying to make a JavaScript piano, with the keys being at the bottom of the screen, but setting bottom: 0px; doesn't work
html {
height: 100%;
width: 100%;
position: relative;
}
/*keyboard div*/
#keyboard {
position: relative;
display: table;
width: 1366px;
height: 90px;
bottom: 0px;
}
/*keys, if those are important*/
#wk,
#bk {
display: table-cell;
border-color: #000000;
border-width: 1px;
border-style: solid;
}
#wk {
position: relative;
height: 90px;
width: 1.92%;
background-color: #ffffff;
}
#bk {
z-index: 1;
position: absolute;
height: 52px;
width: 58.05%;
right: -9.04px;
background-color: #000000;
}
<html>
<div id="keyboard">
<div id='wk'>
<div id='bk'></div>
</div>
<div id='wk' class=''>
</div>
</div>
Replace your styles as given below:
#keyboard {
height: 90px;
position: fixed;
bottom: 0;
width: 100%;
background-color:#0000FF;
}
/*keys, if those are important*/
#wk, #bk {
border-color:#000000;
border-width: 1px;
border-style: solid;
}
#wk {
height:90px;
width: 1.92%;
background-color: #ffffff;
}
#bk {
height:52px;
width: 58.05%;
right: -9.04px;
background-color: #000000;
}
Dont set bottom since that will move it from down to up rather set:
top: 50%;
but since your width and height are odd use 41% to place it nicely
also its a nice practice to use em/rem or simply % and not px
I'm designing a logo in CSS3.
I have made a class .logo with particular height and width. Rest of the div inside .logo class will resize its position relative to parent div.
This is my CSS code.
.logo {
width: 200px;
height: 200px;
position: fixed;
}
.logo .vertical-left {
width: 25px;
height: 60%;
position: absolute;
bottom: 0;
background-color: #09aaba;
}
.logo .vertical-right {
width: 25px;
height: 65%;
background-color: #09aaba;
margin-left: 60%;
top: 0;
position: absolute;
}
.logo .vertical-right2 {
width: 25px;
height: 60%;
background-color: #ba1dd4;
margin-left: 60%;
top: 0;
position: absolute;
}
.logo .horizontal-top {
width: 100%;
height: 25px;
background-color: #09aaba;
position: absolute;
top: 30%;
border-radius: 10px 0;
}
.logo .horizontal-top2 {
width: 60%;
height: 25px;
background-color: #ba1dd4;
position: absolute;
top: 30%;
right: 0;
}
.logo .horizontal-bottom {
width: 72.5%;
height: 25px;
background-color: #09aaba;
position: absolute;
top: 65%;
border-radius: 10px 0;
}
/* triangle */
.logo .arrow-left {
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
position: absolute;
top: 30%;
left: 35%;
border-right:10px solid #ba1dd4;
}
.logo .arrow-down {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 13px solid transparent;
position: absolute;
top: 60%;
right: 27%;
border-top: 10px solid #ba1dd4;
}
<div class="logo">
<div class="vertical-left"></div>
<div class="vertical-right"></div>
<div class="vertical-right2"></div>
<div class="horizontal-top"></div>
<div class="horizontal-top2"></div>
<div class="horizontal-bottom"></div>
<div class="arrow-left"></div>
<div class="arrow-down"></div>
</div>
Here .logo div size is 200px X 200px. When I change it to 300px X 300px the inside div are messed up as in following snippet.
.logo {
width: 300px;
height: 300px;
position: fixed;
}
.logo .vertical-left {
width: 25px;
height: 60%;
position: absolute;
bottom: 0;
background-color: #09aaba;
}
.logo .vertical-right {
width: 25px;
height: 65%;
background-color: #09aaba;
margin-left: 60%;
top: 0;
position: absolute;
}
.logo .vertical-right2 {
width: 25px;
height: 60%;
background-color: #ba1dd4;
margin-left: 60%;
top: 0;
position: absolute;
}
.logo .horizontal-top {
width: 100%;
height: 25px;
background-color: #09aaba;
position: absolute;
top: 30%;
border-radius: 10px 0;
}
.logo .horizontal-top2 {
width: 60%;
height: 25px;
background-color: #ba1dd4;
position: absolute;
top: 30%;
right: 0;
}
.logo .horizontal-bottom {
width: 72.5%;
height: 25px;
background-color: #09aaba;
position: absolute;
top: 65%;
border-radius: 10px 0;
}
/* triangle */
.logo .arrow-left {
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
position: absolute;
top: 30%;
left: 35%;
border-right: 10px solid #ba1dd4;
}
.logo .arrow-down {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 13px solid transparent;
position: absolute;
top: 60%;
right: 27%;
border-top: 10px solid #ba1dd4;
}
<div class="logo">
<div class="vertical-left"></div>
<div class="vertical-right"></div>
<div class="vertical-right2"></div>
<div class="horizontal-top"></div>
<div class="horizontal-top2"></div>
<div class="horizontal-bottom"></div>
<div class="arrow-left"></div>
<div class="arrow-down"></div>
</div>
How can I have a responsive logo which will adjust according to parent height and width?
Setting the dimensions to percentages should make it resize. But the pointed arrow tips won't because they can't be set to percentage. The code below makes the logo resize but you will see that the arrow head cuts off at some point. Hope this puts you in the right direction
.logo {
width: 300px;
height: 300px;
position: fixed;
}
.logo:nth-child(2) {
width: 100px;
height: 100px;
position: absolute;
right: 0;
}
.logo .vertical-left {
width: 12.5%;
height: 60%;
position: absolute;
bottom: 0;
background-color: #09aaba;
}
.logo .vertical-right {
width: 12.5%;
height: 65%;
background-color: #09aaba;
margin-left: 60%;
top: 0;
position: absolute;
}
.logo .vertical-right2 {
width: 12.5%;
height: 60%;
background-color: #ba1dd4;
margin-left: 60%;
top: 0;
position: absolute;
display: flex;
justify-content: center ;
align-items: flex-end;
}
.logo .horizontal-top {
width: 100%;
height: 12.5%;
background-color: #09aaba;
position: absolute;
top: 30%;
border-radius: 10px 0;
}
.logo .horizontal-top2 {
width: 60%;
height: 12.5%;
background-color: #ba1dd4;
position: absolute;
top: 30%;
right: 0;
display: flex;
justify-content: center;
flex-direction: column;
}
.logo .horizontal-bottom {
width: 72.5%;
height: 12.5%;
background-color: #09aaba;
position: absolute;
top: 65%;
border-radius: 10px 0;
}
/* triangle */
.logo .arrow-left {
}
.logo .arrow-down {
}
.vertical-right2:after {
content: '';
width: 100%;
height: 0;
border-left: 12px solid transparent;
border-right: 13px solid transparent;
position: relative;
bottom: -10px;
border-top: 10px solid #ba1dd4;
z-index: 100;
}
.horizontal-top2:before {
content: '';
width: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
position: relative;
border-right: 10px solid #ba1dd4;
left: -10px;
flex-grow: 1;
z-index: 100;
}
<div class="logo">
<div class="vertical-left"></div>
<div class="vertical-right"></div>
<div class="vertical-right2"></div>
<div class="horizontal-top"></div>
<div class="horizontal-top2"></div>
<div class="horizontal-bottom"></div>
<div class="arrow-left"></div>
<div class="arrow-down"></div>
</div>
<div class="logo">
<div class="vertical-left"></div>
<div class="vertical-right"></div>
<div class="vertical-right2"></div>
<div class="horizontal-top"></div>
<div class="horizontal-top2"></div>
<div class="horizontal-bottom"></div>
<div class="arrow-left"></div>
<div class="arrow-down"></div>
</div>
I've tweaked your CSS a bit:
.logo .vertical-right {
width: 25px;
height: calc(65% - 25px);
background-color: #09aaba;
margin-left: 60%;
bottom: calc(27% + 25px);
position: absolute;
}
.logo .vertical-right2 {
width: 25px;
height: 60%;
background-color: #ba1dd4;
margin-left: 60%;
bottom: 40%;
position: absolute;
}
.logo .horizontal-top {
width: 100%;
height: 25px;
background-color: #09aaba;
position: absolute;
bottom: 60%;
border-radius: 10px 0;
}
.logo .horizontal-top2 {
width: 60%;
height: 25px;
background-color: #ba1dd4;
position: absolute;
bottom: 60%;
right: 0;
}
.logo .horizontal-bottom {
width: calc(60% + 25px);
height: 25px;
background-color: #09aaba;
position: absolute;
bottom: 27%;
border-radius: 10px 0;
}
/* triangle */
.logo .arrow-left {
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
position: absolute;
bottom: 60%;
right: 60%;
border-right: 10px solid #ba1dd4;
}
.logo .arrow-down {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 13px solid transparent;
position: absolute;
top: 60%;
margin-left: 60%;
border-top: 10px solid #ba1dd4;
}
First off I agree with other posters here that an image sounds more like what should be getting used in this case. However that doesn't really answer the question; it's just handy advice.
With the sort of positioning you're attempting try to make your elements use a common "point of origin" within your container. In other words always try to align them from the same edges. You had a bit of a mixture before of top, right, left, and bottom. I've made elements that respect each other use the same edge for calculating distance. I've also added a couple of CSS calc functions like this one height: calc(65% - 25px);, since you're mixing mostly percentage elements with a couple of static pixel based measurements.
A perfect way to achieve what you want to do is to go for a SVG logo.
SVGs can be resized without breaking, and are quite powerful.
This tutorial could help you get started.
Alright so I am trying to a basic overlay over an image but it seems that I am doing something wrong, instead of being width and height 100% of the IMG, it is width and height 100% of the entire page
HTML
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
And the CSS
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position:absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:rgba(255,255,0,0.5);
width: 100%;
height: 100%;
}
JS fiddle: https://jsfiddle.net/0utbjwo0/
you should add position: relative; to your absolute parent div
#main_BodyNews{
position: relative;
}
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
position: relative;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position:absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:rgba(255,255,0,0.5);
}
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
You can use absolute. It's just that you are setting
width: 100%;
height: 100%;
Remove that and set your margin-top and margin left. You can set your width and height for the actually dimensions of your image. If you do this, you wont have to exactly keep your overlay div within your image div.
Here is an example of one I have made for my site.
#overlay {
margin-top: 60px;
margin-left: 88px;
height: 30px;
width: 85px;
position: absolute;
}
You can temporarily set a background-color for it so that you can get a good idea of where it is placed on your page. Then adjust your margins accordingly.
It's because the position: absolute has top, right, bottom, left value of 0. You don't need to specify the height and width. To make it resize on it's parent size. You need position: relative on parent element.
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
position: relative;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color: rgba(255, 255, 0, 0.5);
}
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
Right, I ran into a bit of a problem and not to sure if this can be solved another way.
I need to move the content: "F"; and center it onto the border I have in the top left corner. Now is this possible without creating another element?
HTML:
<div class="userBoxF"></div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content: "F";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
The only way I can think to do it is to create the corner as a completely separate element so I can put the text "F" into a span (or something) and move it that way.
Demo Here
Note: Nothing here will change size, width and height for both the box and corner will always be the same.
Here is what I want, using the solution i found but would rather not use.
HTML:
<div class="userBoxF">
<div class="corner"><span>F</span></div>
</div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF .corner {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
.userBoxF .corner span {
display: block;
position: absolute;
top: -30px;
left: -20px;
}
Here is a demo of the solution I came up with but I would rather not create anymore elements.
My Solution
You can use :before wit :after together.
I removed the span:
<div class="userBoxF">
</div>
And changed the CSS blocks to this:
.userBoxF:before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
content: "";
}
.userBoxF:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "F";
font-size: 30px;
}
And here's the updated fiddle
EDIT: Here's an added bonus!
You can jack the "F" from the class, if you want it to be more versatile, if you use CSS's attr inside content. Example:
<div class="userBox" data-l="F">
</div>
And:
.userBox:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "" attr(data-l);
font-size: 30px;
}
And another fiddle
Arguably the "F" is actual content as it's not a styling option...it actually denotes something and, perhaps should be read by a screenreader (for instance) then a span with a gradient (TL - BR) mightbe more appropriate.
JSFiddle Demo
HTML
<div class="userBoxF">
<span class="section-letter">F</span>
</div>
CSS
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.section-letter {
position: absolute;
top: 0;
left: 0;
width:2em;
height:2em;
line-height: 1em;
text-align: left;
padding:0.25em 0 0 0.25em;
font-size: 30px;
background: linear-gradient(135deg, pink 0%, pink 50%, transparent 50%, transparent 100%);
}
Simply use another :psuedo:
Demo Fiddle
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:before,.userBoxF:after{
position: absolute;
top: 0;
left: 0;
}
.userBoxF:before {
content:"";
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
}
.userBoxF:after {
content:attr(data-l);
top: 10px;
left: 10px;
font-size: 30px;
}
From a single pseudo, you can use a gradient as background : DEMO
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content:"F";
position: absolute;
top: 0;
left: 0;
text-indent:20px;
line-height:60px;
width:80px;
height:80px;
background:linear-gradient(to bottom right, #F385FF 51%, transparent 49%);
font-size: 30px;
}
background-image as gradient can be just an image like in old days :
DEMO: