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;
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 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); >
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've been searching everywhere and trying many things myself as to how I could possibly align DIVs horizontally. I'm probably thinking this in the wrong way but I could love to recreate this inside a web browser that will fit itself to the user's browser size, and when brought down to a certain size, such as an iPhone or other smart phones, it would change to another layout.
Here is an example of what I mean.
Thanks for your help!
For putting divs next to each other you are going to want to use float: left;
<div id=container>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
Then in css:
#container {
width: 1000px;
}
.section {
position: relative;
float: left;
width: 248px;
border: 1px solid black;
}
Here is an Example
If you want things to be responsive there are a couple different options depending on what you want to do. The most effective way is probably to look in to the #media tag. Link
UPDATE:
Here is another example where the divs will automatically scale to the browser width.
Example
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/