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
}
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>
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
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'm trying to make a maze using only CSS. First I'm designing shapes and then I'm giving them a :hover attribute, so that when the player fails and hits a "wall" with the cursor, the corresponding shape expands and blocks the entire screen. Here's what I have so far:
.square1 {
width: 1092px;
height: 320px;
background: red;
position: absolute;
top: 50%;
left: 20%;
}
.square2{
width: 200px;
height: 300px;
background: red;
position: absolute;
top: 0%;
left: 20%;
}
.triangel1{
width: 0;
height: 0;
border-top: 300px solid red;
border-right: 300px solid transparent;
position: absolute;
top: 0%;
left: 34.6%;
}
.triangel2{
width: 0;
height: 0;
border-bottom: 250px solid red;
border-left: 250px solid transparent;
position: absolute;
top: 30%;
left: 27%;
}
.square3{
width: 400px;
height: 280px;
background: red;
position: absolute;
top: 0%;
left: 47%;
}
.square4{
width: 327px;
height: 400px;
background: red;
position: absolute;
top: 0%;
left: 76%;
}
.square1:hover{
width: 1092px;
height: 642px;
position: absolute;
top: 0%;
left: 20%;
background: red;
}
.triangel1:hover{
width: 680px;
height: 340px;
position: absolute;
top: 0%;
left: 20%;
background: red;
}
.triangel2:hover{
width: 500px;
height: 340px;
position: absolute;
top: 0%;
left: 20%;
background: green;
}
body
{
background-color: rgba(0,0,0,0.8);
}
Where the shapes (square1, square2 etc...) are named as <div class="square1"></div> in a different file. The only problem is that the :hover is innacurate. My shapes sometimes expand when I hover 5 pixels away from them and doesn't expand when I'm right on top of them. Why is this and how can I prevent it?
PS: I only want to use CSS, HTML and possibly PHP.
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;
}