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
On the bootstrap 'Agency' template found here, on the about section there is a vertical line connecting all of the circle images. I have been looking however I cannot find the style rule or html element which is giving this affect.
Can anyone tell me what is doing this, so I can then modify it (e.g. line length)?
It is a ul element (with the class timeline) styled as follows:
.timeline:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 40px;
width: 2px;
margin-left: -1.5px;
background-color: #f1f1f1;
}
Also, as pointed out by #Vucko:
#media (min-width: 768px)
.timeline:before {
left: 50%;
}
Each point in the timeline is an li (the right hand side lis are just given a different class timeline-inverted).
Nice Question.
On the ul with class="timeline" there is a ::before object created in css that's given a gray background color to create that line.
.timeline:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 40px;
width: 2px;
margin-left: -1.5px;
background-color: #f1f1f1;
}
This is what I would do: create a div that's only 1px in width and however long you want in height, give it a background color, and you will end up with a vertical line.
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 3 years ago.
Improve this question
Previously legend-tags had an align property with the values top, bottom, left and right. But in HTML 5 this property is not supported anymore. W3schools advises to use css instead.
But how can you use css to position the legend to the bottom of the fieldset, so that it looks like this:
Edit: Just to clearify: I don't mean that the legend tag is not supported im HTML 5, but the align property does not exist anymore. And I want to position the legend on the bottom of the fieldset.
You need to manually position the legend.
fieldset {
width: 200px;
height: 50px;
position: relative;
top: 50px;
left: 50px;
box-sizing: border-box;
border: solid black 1px;
}
legend {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
padding: 0 5px;
background: white;
}
<fieldset>
<legend>Legend</legend>
Content goes here.
</fieldset>
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
Hi everyone. I am new to HTML and CSS and I want to create something like the figure in the picture. The two rectangles are divs and I want the left div has a little triangle protruding onto the div on the right.
I would appreciate any help and suggestions.
/**** Edit ****/
Seems like what I am looking for is pseudo-elements! I do not want the triangle to interfere with the content of the right div.
My English is limited so I did not know how to phrase what I want in a Google search.
Thanks a lot for everything!!
You can use a pseudo element :after to add your triangle like this:
.arrow_box {
position: relative;
background: #888;
width: 300px;
height: 300px;
}
.arrow_box:after {
left: 100%;
top: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0,0,0,0);
border-left-color: #888;
border-width: 30px;
margin-top: -30px;
}
<div class="arrow_box"></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 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 6 years ago.
Improve this question
I found this wonderful navbar online but I don't find the line in the code to remove the dots.
The current Looking: https://gyazo.com/0531847d45ebfc31d7a15b09b5404c9f
JSFiddle: https://jsfiddle.net/ujzge3sg/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
nav {
display: block;
width: 100%;
}
.navbar {
background: #f96e5b;
width: 100%;
}
.navbar-fixed-top {}
.navbar ul {
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
Here's a tutorial of list-style-type, or in your words, those are the black dots.
Just do list-style-type: none; on the li list. It would help if you would learn HTML and CSS before asking a question about it.
Update
After seeing the full HTML and CSS, I saw the 'problem'. There was an after adding squares after every li. To remove the squares, just delete from line 68-78 in the JSFiddle.
Here's an updated version: https://jsfiddle.net/d7Lrartp/
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 weird problem,
My main page (Only) is showing long empty space under page footer and this happens when I use Google Chrome only.
IE, Firefox working without any problems.
PS :
1 - this weird space disappears from Google Chrome when i turn my homepage to static content page.
2 - I've tried to disable all plugins but still have the same problem
So how to solve this problem.?
Site URL
The problem seems to be with the .screen-reader-text class inside each article which is keeping the items inside the main page flow.
Try updating the css to:
.says, .screen-reader-text {
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
Just keep in mind that this will also affect the .says class. If needed, just move .screen-reader-text into its own class.
.says {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}
.screen-reader-text {
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
}