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
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 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 3 years ago.
Improve this question
Good morning. I am starting with HTML but I did not find why we can use a few class names in one element like at this screenshot. Here's 3 class names in one element
You can have as many classes as you want, and they will show as long as there's a corresponding CSS declaration for it. If there isn't one, you can still assign class to the HTML
.square {
width: 120px;
height: 120px;
}
.blue {
color: blue;
}
.red {
background-color: red;
}
.bordered {
border: solid black 3px;
}
.round {
border-radius: 10px;
}
<div class="square blue red bordered round this-class-is-not-here">Hello there </div>
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 5 years ago.
Improve this question
most modern sites have what I'm looking for. I want to be able to change the background of different areas of my site... like this for example: https://adwords.google.com/intl/en_uk/home/ Googles page goes from blue, to white to a different shade of white.
How do I do this?
Thanks in advance
What they do is create different sections, and set a different background-color per section.
div {
width: 100%;
height: 150px;
}
#section1 {
background-color: red;
}
#section2 {
background-color: blue;
}
#section3 {
background-color: yellow;
}
<div id="section1">Content for section 1</div>
<div id="section2">Content for section 2</div>
<div id="section3">Content for section 3</div>
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 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.