I am making my own website, but for some reason I can't move the black box into the middle of the screen please could you guys help me out. I have to make it on JSFiddle because I don't have enough RP to show screenshots on here.
Please see this link to view my code:
http://jsfiddle.net/xiiJaMiiE/LfWBn/4/
#white_box {
position:absolute;
margin:auto 0;
min-width:80%;
max-width:100%;
height:85%;
top:0%;
background:black;
z-index:1;
width:80%;
}
Thanks in advance!
If the width is always 80% then just offset the left half of the restant width:
left:10%;
Check this Demo http://jsfiddle.net/LfWBn/7/
Hope it will work:
#white_box {
position:absolute;
margin:auto 0;
min-width:80%;
max-width:100%;
height:85%;
top:7%;
left:10%;
background:black;
z-index:1;
width:80%;
}
You have the margin on auto, try it out: margin: 20px;
Related
Hello i have question when i'm watching on my bigger monitor my height is not correct my height in footer so i need help?
when i'm watching on my bigger monitor is like :
and on small monitor is like :
btw i need fix that lines
Try this code.
https://jsfiddle.net/b2avu1h9/3/
I have edited this part
.column{
width: 20%;
//height:50px;
height: 90px !important;
float:left;
border-right:3px solid #6bae6b;
padding-left:15px;
}
you can try this
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
Please take a look at this fiddle https://jsfiddle.net/t2w4yd8j/1/
I have a couple of questions about this:
1) There seems to be a padding between the .top div(red) and the browser if I use the relative position. However if I change the position of .top div(red) to absolute the padding goes off. Why is that?
2) The .next div(pink) should stack after the .main div(grey). But the main div seems to be taking a bit more extra space even though the height is set to auto and there is no children in the extra space. Why is that?
Thanks
CSS
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
position:relative;
top:0px;
left:0px;
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position:relative;
top:-25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
width:200px;
height:50px;
display: inline-block;
background-color:#0F0;
}
.bottom{
position:relative;
top:-50px;
left:0px;
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
HTML
<div class="main">
<div class="top"></div>
<div class="middle">
<div class="midfill"></div>
</div>
<div class="bottom"></div>
</div>
<div class="next"></div>
1) By placing it relative, it relates to it's parent, the body tag. Remove the padding and margin from the body and HTML tag, and it fits. When you place the div absolute, it's taking out of the document flow, making it relate to the viewport. That explains the difference.
html, body { margin: 0; padding: 0; }
2) you position the div's relative, and then move them around. But the place stays reserved in the parent div. I moved the divs a bit around.
html, body {
margin: 0;
padding: 0;
}
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position: absolute;
margin-top: -25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
display: inline-block;
width:200px;
height:50px;
background-color:#0F0;
}
.bottom{
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
Updated Fiddle
Solution for your both problem is following. By Default it takes extra margin by removing it from body solved your issue:
body{
padding:0;
margin:0;
}
Check Fiddle Here.
just a quick question. I have recently dicovered the use for percentages and positioning in css. However I'm having a little trouble with moving elements.
I have two Images one on the left side of the screen and one on the right. both images are set to relevent positioning. The issue im having is getting the image on the right to stay put rather than moving to stay in frame of the window. How would I achieve this using percentages?
Css
.left {
position:relative;
left:0%;
z-index:250;
}
.right {
position:relative;
right:100%;
z-index:250;
}
ADDED ON REQUEST
/* -- page layout */
#wrapper {
position:relative;
width:auto;
height:auto;
margin:0;
padding:0;
z-index: 0;
}
#wrapper #head{
position:relative;
width:100%;
height:50px;
z-index:200;
margin:0;
margin:0;
}
Note
These images are placed within a a div, that spans 100% of the screen. Thanks again!
If I follow you correctly, try
.right {
position:relative;
left: 80%;
z-index:250;
}
I recommend using float instead.
http://jsfiddle.net/beautifulcoder/HCjvK/
/* -- page layout */
#wrapper {
position:relative;
width:auto;
height:auto;
margin:0;
padding:0;
z-index: 0;
min-width: 1280px;
overflow:hidden;
}
This has fixed it for me! Thanks for all your help!
I have an img and div i can't find why there is a gap. I have seen so question. But it is not working for me i have also tried using margin:0. here is my My fiddle. But i cant find why this gap is here. Thanks
<img src="http://www.kidsmathgamesonline.com/images/pictures/shapes/rectangle.jpg" class="header"/>
<div class="body-middle">
</div>
css is:-
.header
{
width:100%;
height:auto;
padding:0px;
margin:0px;
}
.body-middle
{
height:50px;
width:100%;
margin:0 auto;
background:url('http://www.clipartsfree.net/vector/large/simple_green_rectangle_Vector_Clipart.png') 0 0 repeat;
background-size:contain;
background-position:center top;
}
Give display:block to the image.
.header{
display:block;
}
Updated fiddle here.
.body-middle {
margin-top: -50px; //adjust number of pixels to what works best for you
}
Try This CSS..
*{
margin:0;
}
DEMO
I was wondering how to make the rectangle in this fiddle: http://jsfiddle.net/gztdG/2/ 'overflow' to the left, so that the rectangle aligns to the right edge of the square. A simple question, but I can't figure out how to achieve this with position: absolute. Thanks in advance. Here is the html:
<div id='square'>
<div id='rectangle' />
</div>
And here is the css:
#square {
height:50px;
width:50px;
background:blue;
margin:auto;
}
#rectangle {
width:200px;
height:20px;
background:red;
position:absolute;
}
I think, the correct answer is to set position: relative; on the parent container, then have the rectangle align to the right (see this http://jsfiddle.net/gztdG/5/):
#square {
position: relative; <---
height:50px;
width:50px;
background:blue;
margin:auto;
}
#rectangle {
position:absolute;
right: 0; <---
width:200px;
height:20px;
background:red;
}
Use negative margin, like that:
margin-left:-150px;
http://jsfiddle.net/4qr7z/1/
You could also move the div tags so that the rectangle is not wrapped in the square (unless your design requires it)
<div id='square'></div>
<div id='rectangle'></div>
#square {
height:50px;
width:50px;
background:blue;
margin-left:150px;
overflow:auto;
}
#rectangle {
width:200px;
height:20px;
background:red;
position:relative;
}
This would move the square instead, and use margin-left:150px;
The reason I could imagine this being useful is that pages are loaded from left to right, so if the window is moved, you might experience some displacement, since margin-left:-150px will push it right.