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;
}
Related
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
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
}
I have a design with wave structure in top and three static images in bottom.Top image is the banner image ie dynamic, user will upload a image,we need to show that image in a div with wave structure as show below.Is there is any way to achieve it using svg, canvas, HTML and css3.
You can play with the values:
HTML:
<div id="wave"></div>
CSS:
#wave {
position: relative;
height: 70px;
width: 600px;
background: #e0efe3;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}
I have a div filling all the width and an amount of the height, and then I have an smaller circle which needs to be half on the bottom/center of this div, half right after it.
All works until I got more height or try to zoom it, then the circle will just move vertically and no longer being 50/50. Also, zooming the page will make the circle expand from its top, not its middle.
jsFiddle
<div id="rectangle">
<img id="circle" src="http://alloutput.com/wp-content/uploads/2013/11/black-circle-mask-to-fill-compass-outline.png">
</div>
Css:
body {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#rectangle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 92%;
background: #E5E5E5;
}
#circle {
position: absolute;
top: 86%;
left: 0;
right: 0;
width: 100px;
margin-right: auto;
margin-left: auto;
}
Since circle is inside the rectangle, than its position is relative to rectangle. That means you need to set the circle bottom property to half of circle radius:
body {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#rectangle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 92%;
background: #E5E5E5;
}
#circle {
position: absolute;
bottom: -50px;
left: 0;
right: 0;
width: 100px;
height: 100px;
margin-right: auto;
margin-left: auto;
background: none #000;
border-radius: 50%;
}
<div id="rectangle">
<div id="circle"></div>
</div>
I used html element to create a circle instead of the image you provided (you may delete it).
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