Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 months ago.
Improve this question
so I was making a search engine and posting it to the public, but I want the image to move down and center, here's my code:
img {
background-position: bottom 45px bottom;
margin-bottom: 26px;
display: block;
margin-left: auto;
margin-right: auto;
padding: 5px;
outline-style: solid
}
<div id="outline-style">
<div id="margin-bottom">
<img src="https://ci4.googleusercontent.com/proxy/CqUZKaQT0aKsKN4s6QLmO_2lsIoFqxMCpWGdGjA_WFdTcEsdIDEXvDSBl8YT7TwqpUC50zHHq_X-MIy5Onl-WKDjP7IBvoPG-P5CZHr6OmC__zLeZfRJN3v79eqB3GkP6720yegWc9HD_rMfFbsD96v3NYqwFAQgcN09MqY1QqxuCnzPu4QFEGCS5Qt-OLyQwZWMf4E9RdnPkf2QqQPwbXYStw=s0-d-e1-ft#https://dynamic.brandcrowd.com/preview/logodraft/086197e5-30cd-4bd5-abc0-e3ff2882e5a0/image/large.png?bust=ad19d638-d125-45ae-b59a-278e4976924f"
width="200px" height="200px">
</div>
</div
You may adjust the position and padding of the image.
Here's a reference of the difference between margin and padding:
https://www.javatpoint.com/margin-vs-padding#:~:text=tabulated%20as%20follows%3A-,Margin,inside%20of%20the%20element's%20border.
You might need to make it into position: absolute if necessary
Learn more about positioning here:
https://www.w3schools.com/css/css_positioning.asp
Try one of these things:
Position: relative;
top: -10; (maybe +)
or
margin-top: -10%
Add the below property inside the img{} block:
vertical-align: text-bottom;
Refer to this article for more details:
at W3Schools Website
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I build websites from scratch using bootstrap and have a question regarding containers/positioning.
I am going to be building a section where a container overlaps the header image (screenshot example attached). I was wondering if anyone has examples of this being used or knows what the technique is called so I can have a look into other examples?
The way to do it will be using absolute positioning but I'd just like to see some other examples of peoples attempts before I do my own!
Thanks for all your help.
I think we need to see the structure of your html to know how it's formed and apply the css rules accordingly.
But in case you don't have it, here is an example using negative margin:
.first {
background-color: lightgreen;
width: 100%;
height: 200px;
z-index: 1;
}
.second {
background-color: blue;
width: 60%;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-top: -80px;
z-index: 2;
}
<div class="first"></div>
<div class="second"></div>
i have tried doing this before, and i used z-index: -1 for the image.
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 7 years ago.
Improve this question
Can some one explain the following css code I found in a web page and which element does the section.positioned affect?
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top: 100px;
left: 100px;
width: 500px;
box-shadow: 0 0 15px #333;
}
Part of web page code
<section class="">
<div class="container">
......
</div>
</section>
The section.positioned rule target an element like this:
<section class="positioned">
</section>
By changing the existing html section element's class from empty to "positioned", the section.positioned rule will apply to the element instead of the section rule.
Added:
What section.positioned really means is it target an element of type "section" which has a class named "positioned".
Further reading about css selectors:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
What does the dot mean in CSS?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have menú in my web of margin left, but I want put text in the next of menú, of the left relative this. But I make a div in css and this put below of menú.
What position I need put?
I have a div inside other div.
example code this:
http://jsfiddle.net/a70aabub/
Thank you!
Add float:left for text class.
#menu ul {
margin: 0px;
padding: 0px;
width: 200px;
float:left
}
#menu ul li {
background-color: #999;
}
#state {
position: relative;
left: 0px;
float:left
}
http://jsfiddle.net/a70aabub/1/
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 7 years ago.
Improve this question
I have two images:
<img ng-src="image1.jpg" class="regular">
<img ng-src="image2.jpg" class="favorite">
For the second image, I am looking for a way to structure my CSS class such that a marker/symbol appears over the image (example a star for favorite or just a letter - maybe a drawing). Is there a way to do so?
As <img> element cannot have pseudo content, so you could wrap it into a <span> tag or so into the markup, and apply the pseudo content on it instead.
.favorite {
position: relative;
display: inline-block;
}
.favorite:before {
content: "\2605";
position: absolute;
left: 5px;
top: 5px;
}
<span class="favorite"><img src="//dummyimage.com/100x100"/></span>
Absolute position works.
Try:
With:
.regular {
position: absolute;
left: 0px;
}
.favorite {
position: absolute;
left: 100px;
border: 1px solid black;
}
Code here: https://jsfiddle.net/zyng2Lxj/
as image tag doesn't support after pseudoelement, what about a little jquery code like:
$(function() {
$('.favorite').after('<img src="" class="icon" />');
});
the position the image with the class as in this FIDDLE
(all credit to #Christopher Harris for his answer at Does :before not work on img elements?)
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I wrote code.
I can't fill in the blanks in my code.
Why I can't do it?
...
<style type="text/css">
...
#content
{
margin: 0px;
padding: 0px;
width: 100%;
background-color: black;
color: white;
}
...
<div id="content">
AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>
</div>
My site's address is http://www.clover.lrv.jp.
This is due to a browser pre-set margin. Put this at the top of your code, it will reset the margins and padding:
*{margin: 0; padding: 0;}
You need to define your height as well. Note don't add height in percent here. For eg. add this line: height: 200px; in your #content.