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...
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 3 months ago.
Improve this question
I was able to achieve the overall design but I am a bit worried about the way I code because I am aware that I am not using the best practice.
These are my codes:
#formatting {
text-align: center;
padding: 25px;
padding-top:10px;
padding-bottom:10px;
display:inline-block;
color:#ffffff;
}
.thindash {
background: #000000;
border: 2px dashed #ffffff;
position: relative;
}
.thindash:after {
content: '';
position: absolute;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
border: 1px solid #000000;
pointer-events: none;
}
</style>
<div style="background: #000000; padding: 15px; display: inline-block;">
<div class='thindash' id="formatting">
<h3>Working Hours</h3>
<p>Monday to Friday</p>
<p>8 AM - 12 PM (Lunch - Dinner)</p>
<p>8 AM - 11 AM (Morning Breakfast)</p>
</div>
</div>```
You are unlikely to get someone to clean your code. However I can provide a couple of tips regarding the code above.
Don't use inline styles on your outer <div>. Use a class instead.
Unless you have a specific reason to do so which is not obvious from the code above, do not use an id for styling #formatting. Either use the thindash class you already have or make formatting a class rather than an id.
You don't need to use padding, padding-top and padding-bottom on #formatting. padding is shorthand for padding-top padding-right padding-bottom padding-left. Presumably you want 25px padding on the left and the right and 10px bottom and top. As such you can just write padding: 10px 25px. That will give you 10px top and bottom and 25px left and right. More information on padding.
Don't get too frustrated; read articles and tutorials (there's tonnes of free resources online); and keep practising.
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 a canvas and I want to place some text to its right. This is my HTML code:
<div id="GL">
<canvas id="GL-Surface" width="800px" height="600px">
Canvases are not supported in your browser
</canvas>
</div>
<div id="side_box">
Sample text
</div>
And this is my CSS code:
#GL {
padding-bottom: 20px;
padding-top: 5px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
}
#side_box {
padding-bottom: 20px;
padding-top: 5px;
}
But for some reason, the sample text is placed under the canvas and if I inspect the site in chrome, I see, that there still is a margin. This is a screenshot from chrome:
The sample text on the bottom is supposed to be on the right.
Why does it still exist? I have set it to 0px.
div elements are block elements. This means, they will always force the next element to go under it.
We can fix this with the css property: display: inline; or display: inline-block;
There is also other ways to accomplish this, like with flexbox or css grid
You can read more about flexbox and css grid here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
https://developer.mozilla.org/en-US/docs/Web/CSS/grid
In the snippet I'm using the inline css property, and I've given the canvas a border for illustrative purpose.
#GL {
display: inline-block;
border: 1px solid black;
}
#GL-Surface {
height: 200px;
width: 200px;
}
#side_box {
display: inline;
}
<div id="GL">
<canvas id="GL-Surface" width="200px" height="200px">
Canvases are not supported in your browser
</canvas>
</div>
<div id="side_box">
Sample text
</div>
By default div is block elements, changing it to inline-block fixes the issue-
div {
display: inline-block;
}
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 3 years ago.
Improve this question
i have a listing html page, in which the first div background color will be white and the second grey color. i have used the following css
.aamir {
background: #fff;
width: 1000px;
margin: 0 auto;
text-align: left;
padding: 20px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
height: 45px;
margin-bottom: 3px;
border-radius: 1px;
}
div:nth-child(even) {
background: #fafafa
}
the problem is when i am using the class name like
.aamir:nth-child(even)
its not working. when i am using
div:nth-child(even)
its working fine. can anyone please tell me why i cannot give it my class. thanks in advance.
Firstly, i think your CSS selector is incorrect. You would need to do the following (note, the starting period):
.aamir:nth-child(even) {
background: #fafafa
}
Second, i think you might be suffering because of the specificity. You can try the below CSS to get around it. This will make it more specific than the original selector by using the element type as well as the class. If your element type is not a div, change the CSS to match the element type.
div.aamir:nth-child(even) {
background: #fafafa
}
You can find out more about specificity at: https://www.w3schools.com/css/css_specificity.asp
Make sure not to forget to add a dot before aamir.
.aamir:nth-child(even) {
background: #fafafa;
}
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;
}