How would i fix this logo to allways be in the center top of the page and doesn't move as browser changes size, so when the browser changes size the logo stays in its old position and will not recenter its self.
Here is my current CSS
CSS
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
Thankyou for your help
CSS
body
{
height: 1000px;
}
#logo {
position:absolute;
background-image:url('http://i.stack.imgur.com/DUYP4.jpg?s=128&g=1');
background-size:150px;
width:150px;
height:150px;
position: fixed;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
HTML
<div id="logo">
</div>
Fiddle
Remove your margin, left and right properties and add this one:
margin-left:100px;
This way, your image will always be 100px to the right.
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
z-index:1;
top:0px;
margin-left:100px;
}
Related
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.
I'm facing a problem that's totally blowing my mind...
I'm creating a classifieds website, and in the product container I'am adding a "New" icon in the container's top-left:
.preview {
position:static;
width:250px;
height:300px;
float:left;
outline:thin solid #999;
margin-left:6px;
margin-right:7px;
margin-top:10px;
margin-bottom:20px;
}
.preview .new_icon {
position:absolute;
width:60px;
height:60px;
margin:0;
background-image: url(function_images/New-2.png);
background-size:contain;
background-repeat:no-repeat;
}
#header {
width:100%;
position:fixed;
height: 55px;
background-color:#fff;
top:0;
}
My website's header is fixed but when I scroll down, all the "New" icon container appears over the header. I want the header to be appear at the top of it.
So any help??
Thanks in advance!!
This nested div renders differently in FireFox and Chrome. Chrome, with the result I am looking for.
A div that can grow with content, inside of another div that has a padding of 20px.
The effect should look like it has a 20px bar above and below the nested div like this (in Chrome).
http://jsfiddle.net/SEOplay/58xRJ/2/embedded/result/
The code I'm using:
HTML
<section>
<div class="dualContainer">
<div class="dualBgBlock"></div>
<div class="dualMiddle">
<div class="dualContent"></div>
</div>
</div>
</section>
CSS
div.dualContainer {
margin-top:50px;
margin-bottom:20px;
position:relative;
z-index:0;
width:100%;
}
div.dualBgBlock {
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
background-color:#ccc;
width:60%;
height:100%;
padding:20px;
}
div.dualMiddle {
width:80%;
margin:0 auto;
}
div.dualContent {
background-color:#333;
overflow:hidden;
position:relative;
height:200px;
}
Link to the fiddle:
http://jsfiddle.net/SEOplay/58xRJ/2/
So how can I get FireFox to render my code the way Chrome does?
Padding is in the wrong place. Move it from .dualBgBlock {} to .dualContainer {}
Fiddle Example
CSS:
div.dualContainer {
padding:20px;
}
div.dualBgBlock {
// No padding here
}
move your padding to div.dualMiddle, see demo here
div.dualBgBlock {
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
background-color:#ccc;
width:60%;
height:100%;
padding:20px; //remove this line
}
div.dualMiddle {
width:80%;
margin:0 auto;
padding:20px; //add this line
}
I have a DIV that contains several other divs. I need divs to be able to peek out of the parent vertically, but not horizontally.
I thought using overflow-x and overflow-y would solve this little problem, but I can only get either x and y to show, or get them both to hide.
My CSS and HTML:
.game {
position:absolute;
width:400px; height:300px;
top:100px; left:100px;
background-color:#cccccc;
overflow-x:hidden;
overflow-y:visible;
}
.block1 {
position:absolute;
width:100px; height:100px;
top:-50px; left:150px;
background-color:#ffcccc;
}
.block2 {
position:absolute;
width:100px; height:100px;
top:150px; left:-50px;
background-color:#ccffcc;
}
<div class="game">
<div class="block1"></div>
<div class="block2"></div>
</div>
See this JSFiddle: both child divs are cut off, even though overflow-y is set to visible.
Structural Change Needed
This gets what you want if it works otherwise (I don't know if the html/css changes affect other aspects of your game). It solves it by layering the "game" so that its vertical direction fills the entire screen, and then your "window" (grey area) is set by a child div. This allows the overflow: hidden horizontally, but not have it vertically.
See fiddle.
HTML
<div class="game">
<div>
<div class="block1"></div>
<div class="block2"></div>
</div>
</div>
CSS
html, body { height: 100%; margin: 0;}
.game {
position:absolute;
width:400px;
height:100%;
top: 0;
left:100px;
overflow:hidden;
}
.game > div {
position: absolute;
top: 100px;
height: 300px;
width: 100%;
background-color:#cccccc;
}
.block1 {
position:absolute;
width:100px; height:100px;
top:-50px; left:150px;
background-color:#ffcccc;
}
.block2 {
position:absolute;
width:100px; height:100px;
top:150px; left:-50px;
background-color:#ccffcc;
}
try Changing your game class to
.game {
width:400px; height:300px;
top:100px; left:100px;
background-color:#cccccc;
overflow-x:hidden;
overflow-y:auto;
}
Thanks,
Dhiraj
I'm trying to add a div block so that it's at the center of the screen. All i have is a fixed background image and it's doing some odd stuff.
CSS:
body {
margin:0;
padding:0;
}
#middle { <--- the white div block
background-color:#FFF;
display:block;
width:750px;
height:750px;
margin:0 auto 0 auto;
margin-top:15px;
position:relative;
overflow:hidden;
}
#bigbg { <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
html:
<div id='middle'>
</div>
<img src="images/backgroundmain.jpg" id="bigbg">
Looks like this:
i want the white div block to be centered in the middle. Is there a better way of applying a background image? I was able to achieve what i wanted by adding the background-image:url property to the html, but i wasn't able to add all the properties i wanted such as fixed margins/width etc..
Change margin:0 auto 0 auto; to margin:0px auto; in the middle class
Upadate your css a below
body {
margin:0;
padding:0;
width=100%;
}
#middle { <--- the white div block
background-color:#FFF;
display:block;
width:750px;
height:750px;
margin:15px auto 0 auto;
position:relative;
overflow:hidden;
}
#bigbg { <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
to the 'middle' div add margin-left: auto; margin-right: auto;
or you could do something like this:
body {
width: 100%; <---make sure you use percentages
height: 100% <---
margin:0;
padding:0;
}
#middle {
background-color:#FFF;
display:block;
width:25%; <--change the width and height to % also
height:25%; <---
left: 37.5%; <--since your div is 25% wide you want to move
<--- it 37% to the right to center it. (100% - 25% = 75% / 2 = 37.5%)
margin:0 auto 0 auto;
margin-top:15px;
position:relative;
overflow:hidden;
}
#bigbg { <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
However, if you're keeping your code the same, i'd suggest just switching margin:0 auto 0 auto; to margin-left: auto; margin-right: auto;