As the title says, and as my screenshots show, my images and text move whenever I browse the website using a smaller browser-window. I have tried to search around the web for similar problems but found nothing really helpful.
.top-container {
background-color: #51555c;
position: relative;
padding-top: 100px;
color: white;
padding-bottom: 70px;
}
.top-cloud {
position: absolute;
right: 340px;
top: 40px;
width: 10%;
height: auto;
}
.sun {
position: absolute;
right: 60px;
top: 80px;
width: 10%;
height: auto;
}
.bottom-cloud {
position: absolute;
left: 200px;
bottom: 650px;
width: 15%;
height: auto;
}
.paper-plane {
position: absolute;
left: 120px;
bottom: 400px;
width: 15%;
height: auto;
}
Pictures of the problem
Related
I am trying to put a div at the centre . Thats works well but it is not visible on the lower div. i.e the lower div hides the content of the center div. My html code :
.outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 1;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
z-index: 2;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
Few things:
You don't have to use z-index for all the div's, if you want a specific div to be in front then just give z-index to that.
Since you already using div in your code, the div will sit beneath another be default and in your case layer-1 you want that to be in the front, so just use the z-index only for that and remove for others.
The higher the z-index value it display up-front.(in my code it is simple z-index:1`.)
.outerWrap {
position: relative;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 1;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
You got your z-index backwards. put layer1 at 2 and layer2 at 1
.outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 2;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
z-index: 1;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
Can i used relative
2 times in my css code
This is possible or is it a mistake
here is my code :
Thanks for any help
My CSS
#box1 {
width: 800px;
height: 600px;
background-color: #FF0004;
margin-right: auto;
margin-left: auto;
position: relative;
}
#box2 {
width: 380px;
height: 256px;
background-color: #A9FF00;
position: relative;
left: 7px;
top: 10px;
}
#box3 {
width: 190px;
height: 155px;
background-color: orange;
position: absolute;
left: 13px;
top: 15px;
}
My HTML
<div id="box1"><div id="box2"><div id="box3"></div></div></div>
I am trying to align a table in a div background, and must be responsive.
This is what i want:
EDIT:
I want to put the table on the dark-blue background of the image, and always must be there, doesn't matter the resolution, so must be responsive
This is the table css
.tg {
color: white;
width: 485px;
position: absolute;
bottom: 109px;
left: 266px;
top: auto;
right: auto;
height: 336px;
}
And this there is the code: Fiddle
Please help!
Try this, this is what I understood
Updated fiddle : https://jsfiddle.net/k0nxxuw2/4/
Code changed:
Updated
.tg {
color: white;
width: 485px;
position: absolute;
bottom: 109px;
left: 266px;
top: auto;
right: auto;
height: 336px;
}
With
.tg {
color: white;
width: 485px;
position: absolute;
bottom: 109px;
left: 266px;
top: auto;
right: auto;
height: 336px;
padding-top:200px
}
Ok, so I have to create a menu bar that has diagonal background images.
I've tried everything, but divs are rectangular and is not working so well.
Here is what I must achieve: http://imgur.com/OIQPhIC
and this is what I have so far: https://jsfiddle.net/z304mkoj/
enter code here
For now, just ignore the texts that are not aligned, I will deal with that later :)
I am wondering what can I do to make the diagonal images fit side by side, is it even possible?
All I have is the .psd with the design and the layers, and now I must convert it to HTML / CSS
Negative margins!
This got it looking just about right for me. :)
#leftedgebutton
{
width: 180px;
height: 45px;
}
#leftbutton
{
/*left: 283px;
top: 0px;
position: absolute;*/
width: 150px;
height: 45px;
margin-left: -50px;
margin-right: -30px;
}
#rightbutton
{
/*left: 867px;
top: 0;
position: absolute;*/
width: 150px;
height: 45px;
margin-left: -30px;
}
#rightedgebutton
{
/*left: 986px;
top: 0;
position: absolute;*/
width: 180px;
height: 45px;
margin-left: -50px;
}
#toplogoarea
{
/*left: 396px;
top: -12px;
position: absolute;*/
width: 507px;
height: 191px;
z-index:190;
}
#dfgameslogo
{
/*left: 581px;
top: 58px;
position: absolute;*/
width: 136px;
height: 127px;
}
#searchbar
{
width: 474px;
height: 45px;
}
I am trying to overlay an image in a div ontop of another image from the <img>. My code right now is:
<div class="something">
<img class="pp" src="get_pp()" />
<div class="img1"></div>
</div>
get_pp() is a Js function that gives me the img url before the page loads. And my css:
#pp {
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
}
#img1 {
background-image: url("../images/img_name.png");
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
z-index:300;
}
Unfortunately setting the z-index doesn't work. Any help would be appreciated!
Your error probably has something to do with the fact that you have your elements identified with class names in your HTML, but defined as IDs in your CSS.
Change CSS to:
.pp {
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
}
.img1 {
background-image: url("../images/img_name.png");
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
z-index:300;
}
Try this for starters.
First thing you have used class instead of id
so change
.pp {
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
}
.img1 {
background-image: url("../images/img_name.png");
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
z-index:300;
}
Second use image here instead of get_pp() etc.
Demo here