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 7 years ago.
Improve this question
I have a rectangular-shaped gray div that is supposed to hold a header ("sample text") and a thin turquoise highlight (which is also just a thin rectangle). When I have both the turquoise div and header inside the other div, one gets forced out.
First of all, how can I fix this issue? Also, is there a more efficient way for me to make the turquoise highlight in the gray div?
http://imgur.com/Sm8qy8J,kSuNEh5 (if I have HTML as shown)
http://imgur.com/Sm8qy8J,kSuNEh5#1 (if I remove the turquoise div)
<div class="column w2">
<div id="headerbox">
<div class="highlightbox">
</div>
<h3>sample text</h3>
</div>
</div>
Note I'm using some Sass CSS here:
h3 {
font: $header-type-font;
font-family: $header-type-font;
color: $header-type-color;
text-align: center;
}
#headerbox {
background-color: $box-color;
height: $block-height;
width: 400px;
}
.highlightbox {
background-color: $highlight-color;
height: $block-height;
width: 20px;
}
Add float:left to your highlightbox class:
.highlightbox {
background-color: $highlight-color;
height: $block-height;
width: 20px;
float:left;
}
Related
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 11 months ago.
Improve this question
My site is divided in blocks, and each left blocks have class block_1 and on the right part of the page have block_2.
How can I change only first div with block_1 class? .block1:nth-child(1){background-color:red;} works, but at all divs with block_1 class
The first thing is, looking at your title, don't ever have two id's that are the same, they should always be unique. Second thing is, if you edit your question to include the HTML and CSS you are using then hopefully somebody can give you a more reasonable answer than this one.....
From what I can tell you want to add a background colour to only the first div which has the class block_1
This should work in your CSS
.block_1:first-child{
background: red;
}
Looking at the details you have given your class as block_1 but the css code has block1 without the underscore_.
Eg If all your block_1's where nested under a div with an ID of 'block_1_container` your scss file could look something like
#block_1_container .block_1:first-child {
background: red;
}
It's better to split the whole site into seperate sections and then use the nth-child property to change the colors. I have attached a demo below
.container {
display: flex;
width: 100vw;
height: 100vh;
}
.block-1 {
height: 100%;
width: 100%;
background-color: #6200ee;
}
.block-2 {
height: 100%;
width: 100%;
background-color: #762fff;
}
.container:nth-child(1) .block-1 {
background-color: #212121;
}
.container:nth-child(3) .block-1 {
background-color: #212121;
}
<div class="container">
<div class="block-1"></div>
<div class="block-2"></div>
</div>
<div class="container">
<div class="block-1"></div>
<div class="block-2"></div>
</div>
<div class="container">
<div class="block-1"></div>
<div class="block-2"></div>
</div>
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 2 years ago.
Improve this question
I'm trying to create a Triangle on top of a rectangle div. The triangle needs to be the width of the page and also be responsive. The upper right and left parts of the div (where no triangle exists) needs to be transparent.
I have an image of what it should look like but it's very difficult to see due to the similar dark colors. The upper right and left of the rectangle div needs to be transparent.
Does anyone know how I can recreate the highlighted rectangle in the image below?
I've been trying for hours by searching through stackoverflow and haven't been able to figure it out from other questions.
Thank you!
You can try that :
<html>
<body>
<style>
body {
margin: 0;
}
.rectangle {
width: 100%;
height: 100px;
background: #777;
}
.triangle-up {
width: 0;
height: 0;
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
border-bottom: 100px solid black;
}
</style>
<div class='rectangle'>
<div class='triangle-up'></div>
</div>
</body>
</html>
(I changed the colors to make it easier to see)
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'm trying to make a website based similar to this design I found on Dribbble. I decided to incorporate the curved background, however I'm not sure how to implement this. I've tried to make a div with the full background with background-color: #04060F but I'm not entirely sure of how to do this nor get it to fill until a specific padding and border radius.
EDIT: I'm getting this result
Any help would be appreciated
Thanks
Do you mean :
div{
border-radius: 5px;//or any length
}
this will give you the rounded corners you're looking for.
Source
Here is a very simple example :
div{
height: 100px;
background-color: blue;
color: white;
border-radius:5px;
}
<div class="rounded">
Some text
</div>
This is the main skeleton I was thinking of looking at the pic you posted.
.main {
background-color: red;
}
.badge{
background-color: #efefef;
border-radius: 20px;
padding: 10px;
}
<body class="main">
<div class="badge">
lorem<br>
ipsum<br>
dolor<br>
sit<br>
amen<br>
</div>
</body>
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 5 years ago.
Improve this question
I want to bring my Sketch file to HTML/CSS in the browser.
How can I implement the white line just between the small and big text, as shown in the image below?
If don't want to include any additional html element then you can use pseduo element:after.
h2:after {
display:block;
content:" ";
width: 80px;
height: 5px;
background: grey;
margin-top: 5px;
}
fiddle
You can add an empty div with a bottom border & custom width, which is of cleaner and shorter code:
body {
background-color: blue;
color: white;
}
#mydiv {
border-bottom: 4px solid white;
width: 33%;
}
#myline {
height: 4px;
background-color: white;
border: 0px solid black;
width: 33%;
}
A div:
<div id="mydiv"></div>
A horizontal line:
<hr id="myline" />
That's 4 lines for the HR and 2 for the div, and that's without making the hr align to the left.
If you don't want to add another element you can use ::after on any element - just make it have display: block and set the color, width, height etc. similar to the above code.
You can add tag <hr> and him specify needed width, height,color...
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 7 years ago.
Improve this question
Can someone help me getting my divs to stack like on this image? It has to be done in CSS, since I can't split in 2 separate columns. My code should look like this :
<div class="container">
<div class="div1">
Div #1
</div>
<div class="div2">
Div #2
</div>
<div class="div3">
Div #3
</div>
</div>
The only way I can think of doing this is setting some static widths and heights. You can try the below.
I personally don't recommend this, I would suggest using a table or divs and making some columns/rows. It will keep the layout more fluid and dynamic. If you need to add more elements it will auto adjust for you.
If you avoid columns and rows, you have to calculate everything before you write it out
<div class='out'>
<div class='in big'>one</div>
<div class='in sm'>two</div>
<div class='in sm'>three</div>
</div>
.in {
float: left;
background: tomato;
border-right: 1px solid white;
border-top: 1px solid white;
}
.out {
width: 200px;
height: 400px;
}
.big {
width: 99px;
height: 399px;
}
.sm {
width: 99px;
height: 199px;
}
and a fiddle: http://jsfiddle.net/u03rs3mb/3/