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.
Related
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
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 2 years ago.
Improve this question
So, here is my problem. I'm making a website, and my HTML file just refuses to work with classes. Here is my html code and CSS :
.card {
width: 400px;
margin: 0 auto;
}
<div class="card">
<img src="img/paarthurnax.jpg" alt="Sorry, we have troubles with connection">
</div>
Image does not line up properly when class is used. Interestingly, if i substitute ".card" with simply "div", it works.
But it refuses to work with classes. I also tried doing it with different datatypes, like paragraph, title and lists, and classes still don't work. I tried looking into possible "grammar" mistakes, but in tutorial video i watched, it used same code, letter-to-letter and it worked. Brackets' latest version was used to write code, if it can help.
your code:
.card {
width : 400px;
margin: 0 auto;
}
possible solution:
.card {
width : 400px;
margin: 0 auto;
}
.card img{
width : 100%;
height : auto;
}
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 2 years ago.
Improve this question
I'm currently stuck on a problem, I have tried using ".test" "#test" and "test" but nothing seems to select what I'm trying to work on. Below is the code I'm working on.
HTML
#test {
width: 40px;
height: 40px;
}
<div id="content">
<div id="test">
<img src="pictures/furniturepic1.jpg" alt="Furniture Picture" />
</div>
</div>
if your css file is linked properly with your html file. this one is going to work for you.
here is the css code:
div#content div#test {
width: 40px;
height: 40px;
}
or
#content #test {
background-color: blue;
width: 50px;
height: 50px;
}
both is going to work for you
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
for some flipping reason I can't control the height of width of my image
.pop_image{
top: 10px;
width: 100px;
height: 100px;
position:absolute;
}
the html
<ul class="pop_image"><img src="1.jpg"></ul>
To controll the size of the image, you need to address the image on the CSS:
.pop_image img {
width: 100px;
height:100px;
}
Your CSS will determine the size of the <ul> list, not your image.
Try the following instead:
.pop_image img {
top: 10px;
width: 100px;
height: 100px;
position:absolute;
}
Try to add a display: block; in .pop_image class even if the ul is normaly a block...
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Please check this link
The left panel text goes hidden under the center picture if I re-size the browser window.
How do I fix it?
Set .ac-wrapper h2 30% instead of 50%
.ac-wrapper h2 {
width: 30%;
}
EDITED
html
<div class="ac-device">
<h2 style="color:#888888">Logical & analytical. <span>Argues till someone <br>just walks away!</span></h2>
<img src="images/screen1.jpg">
<h3 class="ac-title">Not enough of an artist to work upon your imagination. Prefers to do stuff freely. Some may not like that, but that's the way I am!</h3>
</div>
CSS
.ac-wrapper h2 {
top: 20%;
width: 100%;
right: 100%;
position: absolute;
font-weight: 300;
font-size: 4em;
text-align: center;
padding: 0;
}
I'm looking at Chrome Dev Tools and I don't actually see where at any point styles from within a media query are being loaded. The obvious result you want is that right now that left panel is
position: absolute;
width: 50%;
and of course at this resolution you want that width to be something smaller. You can change the styles as your title suggests with a media query, but none's firing. Do you mind posting your relevant CSS to see why--if it exists--your mq isn't working?
Judging by the quality of your design I'm guessing you definitely know what a media query is, but just in case:
#media screen and (min-width: 1366px) {
id.class {
width: 40%; // or whatever
}
}