I'm placing a big image on top of a couple div layers with relative positioning. I'm also using top: -170px; to pull the image up to exactly where I need it to be. It works perfectly in Firefox, but in IE it won't adjust the position of the blue bar beneath it to account for the negative top positioning.
If I don't make sense, you can have a look at the live development site:
http://www.suncastmedia.com/clients/ezbook/
You'll see what I mean if you look in both firefox and IE. Here is my CSS for these specific divs as well.
#red-box {
width: 100%;
height: 343px;
background: url('../images/bg-red.png') top left repeat-x;
text-align: left;
}
#red-box-text {
position: relative;
left: 70px;
top: 45px;
font-size: 18px;
font-weight: bold;
color: #fff;
font-family: helvetica;
width: 451px;
}
#spacer {
width: 100%;
height: 8px;
}
#blue-box {
width: 100%;
height: 29px;
background: url('../images/bg-blue.png') top left repeat-x;
}
#pic-globe {
position: relative;
top: -170px;
left: 52%;
background: url('../images/pic-globe.png') top left no-repeat;
width: 506px;
height: 471px;
}
You could switch #pic-globe and #red-box-text around, then add float: right; to #pic-globe. Generally, if you are using huge, negative margins, there might be an easier way to do it.
Related
I was practising in css paralax and got a problem: between background image and a next div there is a white gap, you can just change the width of a viewport and scroll down to see it.
So, my question is: Why it's happening and what I should do to remove it?
A screenshot and Link on JSFiddle or
css code:
.car {
position: relative;
width: 100%;
height: 600px;
background: url(http://i63.tinypic.com/14viwxk.png) no-repeat;
background-position: top left;
background-size: contain;
padding-top: 100px;
padding-bottom: 0;
overflow: hidden;
background-attachment: fixed;
}
.car h1 {
line-height: 1.2;
}
.car figure {
width: 40%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10%;
color: white;
}
figure p {
margin-bottom: 20px;
}
Your image is simply too small. Change background-size to cover and see what you get
What have say #Hunter it's correct, or you can change the height: 600px; to height: 300px; or use other pictures with height: 600px
Look, I know that there are many threads with many solutions, but none of them have worked for me. I'm a begginer and I'm just starting making websites in HTML. I've tried to make a website before, but I've had the same problem. I've deleted the previous one and made a new one and I still can't solve this.
What I've tried and doesn't really work:
setting height to 100% / 100vh (method one)
setting div min-height to 100%, giving it position absolute and doing this:
top: 0px
bottom: 0px
(method two)
When I do the method 1 my div isn't stretched to the bottom of the page when you can scroll the page, it is stretched to the 100% height of the browser window instead.
And when I do the method 2 the divs just disappear. I didn't forced the border to stretch so you can still see it but if I would do this it'd disappear.
And by the way, I'm just a begginer and I still don't even know basics of JavaScript, jQuery etc. so I'd like to just use pure HTML and CSS and not JavaScript and other stuff until I learn them.
EDIT:
The DIVs need to stretch when the text is added too, actually that's one of my main problems.
Try this… You can monkey with the styles to make it the way you want. I put your border inside .Main and changed html, body to height: 100%
Note: The positioning looks funky because of your use of absolute positioning for the margins of Main. I would change that. But if you copy the code to your page it might be what you're aiming for.
html, body {
height: 100%;
}
.page {
background: linear-gradient(#2d5aa4, #03637c);
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}
.NavigationBar {
background: linear-gradient(to right, #636363, #4e4e4e);
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: 220px;
min-height: 100%;
z-index: 2;
font-family: BloggerSans;
font-size: 1.5em;
}
.NavigationBarBorder {
background: linear-gradient(to right, #292929, #171617);
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 10px;
min-height: 100%;
z-index: 3;
}
.MainParent {
position: relative;
min-height: 100%;
}
.NavigationTop {
background: linear-gradient(#636363, #4e4e4e);
position: absolute;
left: 220px;
width: calc(100vw - 220px);
height: 75px;
z-index: 1;
font-family: Jaapokki;
font-size: 2em;
}
.Main {
background: linear-gradient(#ffffff, #e8e8e8);
position: absolute;
top: 20vh;
bottom: 0px;
width: calc(100vw - 440px); /* set your width */
left: 220px;
margin-left: 90px; /*set your margin here */
min-height: 100%;
z-index: 4;
padding-left: 40px;
}
.MainBorder {
background: linear-gradient(#f79104, #e9720d);
position: absolute;
top: -10px;
left: 0;
width: 40px;
min-height: 100%;
}
h1 {
font-family: 'Jaapokki';
text-align: center;
font-size: 3em;
}
.Text {
font-family: 'BloggerSans';
font-size: 2em;
}
<body class="page">
<div class="MainParent">
<nav class="NavigationBar">
<div class="NavigationBarBorder"></div>
Table of content
</nav>
<header class="NavigationTop">
Navigation
</header>
<div class="Main">
<h1>Title</h1>
<div class="Text">
Text </br>
</div>
<div class="MainBorder"></div>
</div>
</div>
</body>
I am viewing p-ng.com in firefox, when it is viewed with the bookmark sidebar, the logo is not centred.
Example with sidebar:
When I view the page without the bookmark sidebar, it looks like this.
Example without sidebar:
Even so, the logo doesn't seem to stay centered.
Thanks for any suggestions.
CSS
.site-title {
font-size: 32px;
font-weight: 400;
line-height: 1.2;
}
.site-title a,
.site-title a:hover {
margin:0;
}
.header-image .site-title > a {
background: url(images/logo.png) no-repeat top center;
margin-left: 625px;
margin-top: -95px;
width: 87px;
height: 87px;
width: 100%;
position: absolute;
background:#E5E5E5;
overflow: auto;
}
You have so many unnecessary declarations, the reason it's not centering to the viewport is because you have position: absolute and a bunch of unneeded margins.
Change your css to this.
CSS
.header-image .site-title > a {
background-position: url(images/logo.png) no-repeat top center;
margin: 0 auto;
width: 87px;
height: 87px;
background: #E5E5E5;
}
I don't understand why you have all the different margins, widths and then finally a position: absolute on top of that, but here's an easy way to center your logo :
.header-image .site-title > a {
position: absolute;
width: 87px;
height: 87px;
left: 50%;
transform: translateX(-50%);
background:#E5E5E5;
}
If it needs to be vertically centered within its container as well, you can add this :
.header-image .site-title > a{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
For the browser support of the transformproperty (and to see which vendor prefixes you need), refer to this : http://caniuse.com/#search=transform
Position your logo relative to a container of width: 100%, then you can set margin: 0 auto - this way you can also lose the margin-left property.
Example:
.parentContainer {
width: 100%;
}
.logo {
margin:0 auto;
position: relative
}
I'm trying to work out how to work with img divs on a grid. The background image of this grid contains a border, when I try to inspect the element element, the img divs start from the absolute top-left hand corner instead of slightly away from on the actual checkerboard patterned image, which has a thick border around it (950 * 500 - 18 columns wide by 9 rows). Does anyone know How I could tackle this problem?
CSS
body
{
background: #000000 url('gfx/bg.png') 0 0 no-repeat;
position: absolute;
width: 1280px; height:720px;
margin: 0; padding: 0;
overflow: hidden;
font-family: tivo-normal;
text-align: center;
color: #FFFFFF;
}
#GameGrid
{
position: absolute;
/*width: 806px; height: 496px; top: 120px; left: 92px;*/
width: 950px;
height: 500px;
top: 50px;
left: 92px;
background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
}
#GameGrid > div
{
/*width: 62px; height: 62px;*/
width: 52px; height: 52px;
margin: 0;
float: left;
}
#GameGrid > div > img
{
/*width: 62px; height: 62px;*/
width: 52px; height: 52px;
margin: 0;
}
If I calculate by the values you are given: 18 columns each 52px wide that makes it 936px and your GameGrid is 950px. So I am assuming the 14px are taken by the border i.e. 7px each side
So, you can just add a padding in GameGrid
{
position: absolute;
/*width: 806px; height: 496px; top: 120px; left: 92px;*/
width: 950px;
height: 500px;
top: 50px;
left: 92px;
background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
padding:7px;
}
Set specific top,right,bottom,left paddings if they are required specifically.
you can add the cellpading="0" attribute to your tag. You can also add a CSS rule to prevent padding, something like:
#GameGrid td, #GameGrid th{
padding:0px;
position:relative;
}
and maybe add top:0px; to your #GameGrid > div > img. An example could help us to understand better your problem :-)
Resorted to modify the image file and removed the border around the grid. Created another div with an image of just the grid border and aligned it to the grid div.
I'm playing around with HTML & CSS and is trying to make a pretty simple "under contruction" page. I made the background black and text white. I placed the text where I wanted and are not trying to insert an image below the text. I got the image into the site, but somehow it is behind my background? Anyone who got a clue what to do?
Heres my CSS code:
.fullscreenDiv {
background-color: #000000;
width: 100%;
height: auto;
bottom: 0px;
top: 0px;
left: 0;
position: absolute;
background-attachment:fixed;
}
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -190px;
white-space: nowrap;
font-family: Century Gothic;
font-size: 120%;
color: #FFFFFF;
}
.trademark {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-top: 250px;
margin-left: 400px;
white-space: nowrap;
font-family: Century Gothic
font-size: 80%;
color: #FFFFFF;
}
And my HTML:
<div class='fullscreenDiv'>
<div class="center">Our website is currently under construction.</div>
</div>
<div class='fullScreenDiv'>
<div class="trademark">#GameAdviser - Copyright 2014</div>
</div>
EDIT:
Just a quick problem now, I made it worked placed my picture, and uploaded it to my FTP, now when I enter the website I can't see my picture, just a border with the "image not aviable" image or whatever it is. Seems strange since I had a picture before which worked fine.
Tried to change it from png to jpeg but didn't make a difference.
You can use z-index like
z-index:199; // for the Element you want on top
z-index:-199; // for the Element you want at bottom
Add z-index property to .center and change the class name fullscreenDiv instead of fullScreenDiv case sensitive.
Try this code:
DEMO
.center {
position: absolute;
width: 60%;
height: 50px;
top: 50%;
left: 20%;
font-family: Century Gothic;
font-size: 120%;
color: #FFFFFF;
z-index: 10;
text-align: center;
}