Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I can't center my atom animation logo, or stack it by using position:absolute. I also want it to be centered and it's not working.
GOAL: Stack the logo + center it over the particle.js divider
I am using particles.js for the background.
Here is the site:
http://www.niitro.ga
You just need to add the following CSS to your .box element:
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
to the div with class='box' add the following style:
<div class='box' style="left: calc(50% - 150px);top: calc(50% - 150px); >
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have an image like this
I want to put small clickable boxes on it, like this
Does anybody have any idea how to do this using HTML/CSS?
Edit: Thanks to #BCollingwood, his answer with boxes property as absolute worked like a charm.
You can add all images to a container div then position them relative to each other using CSS:
HTML
<div class="container">
<img class="image_1" /> // the background
<img class="image_2" /> // the clickable square
</div>
CSS
.container {
position: relative;
}
.image_2 {
position: absolute;
left: 50px;
top: 50px;
}
you have to use svg. it is not wise to use anything other than svg to make certain part of image clickable.
[https://www.w3schools.com/graphics/svg_intro.asp]
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am attempting to center in image in jQuery mobile using CSS. No matter what styles I apply to the image it will not center. Please not the extremes in the css were to see if the image is even being manipulated but it is not. It remains in the same position. I have tried adding a class to the image itself and aligning it center but that did not work either.
HTML:
<div class="me">
<h2 class="name">John Doe</h2>
<img src="MyPic1.jpg" alt="My Photo" height="200px"/>
</div>
CSS:
.me{text-align:center;
padding-left: 50px;
margin-left: 100px;}
Did you try change your css to
.me img{text-align:center;
padding-left: 50px;
margin-left: 100px;}
Maybe its just something what rewriting your css. You can try position relative and then give it left: 0; right: 0; and text-align: center;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm trying to create the headline section on www.dzn-studios.com full height, only when on desktop.
Though when I try and adjust the height: with a '%' value there is no effect. If I enter a pixel value that does change the height but ruins the responsiveness.
Desired outcome
Apologies for the newbie question but we all have to start somewhere right!
You would add this declarations to your css rule for header.section-headline.homepage
.section-headline.homepage {
height: 100vh;
margin-top: -80px;
}
If I've understood your question correctly percentages aren't working.If this is the case you may need to set a 100% height on all your parent elements, in this case your body and html.
example:
html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; }
if this isn't what you're asking please be more clear and i'll edit my answer
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
So the problem is the following:
My content width is higher than the screen width, but unfortunately I have no idea why.
My HTML is the following:
HTML
And my two css files
CSS - general
CSS - airbnb
The weird thing is when I am inspecting the element, the bod and html seem to have the correct width.
What am I doing wrong ? There's a twig statement in the html file, you can just remove it if you don't have Twig installed.
Thank you for your help
PS: If it helps, the background image from the css is s17.postimg.org/ik3jnp9cv/background.jpg
put this in your body in the airbnb_main.css file
background-size: cover;
height: 100vh;
width: 100%;
and do:
.search_container {
position: relative;
top: 145px;
left: 20%;
/*right: 0;*/
max-width: 80%;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am trying to create a web page that looks like like in this site:
I tried creating an image with that design(the one in the middle with a white background and pointy edges on the top and bottom) but the result is that the image is static and does not dynamically change when the content of the page changes.
I do not know if I can implement the design by customizing the <div> borders or upload the design as a background image then dynamically create it.
Thanks for all the help.
If you don't want to use CSS3 (for more browser support) use the following structure:
<div class="conatiner">
<div class="pointyHeader"></div>
<div class="content">
your dynamic content here
</div>
<div class="pointyFooter"></div>
</div>
where pointyHeader and pointyFooter have a fixed height and background image.
Working jsFiddle
I thought of a .box { position: relative; }
and a .top { position: absolute; top: 0; } and same with bottom .bottom { position: absolute; bottom: 0;}
check it here: http://jsfiddle.net/DyG8F/