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 do something like this..
enter image description here
I need to do this vertical line and the bottom border for every input. anyone has an idea?
Here is a basic structure you can use. Now it is up to you to integrate this with the elements of your website...
However, please be aware that Stack Overflow is not an outsourcing website where you ask people to code for you. Try to find a solution yourself and come here if you need help.
#wrapper {
display: flex;
justify-content: center;
}
#wrapper > div > div {
height: 30px;
margin: 10px;
border-bottom: solid 1px gray;
}
#separator {
height: 90px;
border-left: solid 1px gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<div id="wrapper">
<div>
<div>1: plcHolder</div>
<div>3: plcHolder</div>
</div>
<div id="separator"></div>
<div>
<div>2: plcHolder</div>
<div>4: plcHolder</div>
</div>
</div>
</body>
</html>
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 last year.
Improve this question
I am trying to create a navigation bar with underline effect under each element when hovering over. For some reason the hover effect does not show up and I don't know if it's my code that's wrong or the browser and I have no idea how to fix it. The problem is the ".underline_indicators" class
I am following the latest freeCodeCamp course for creating a web design system, followed the code exactly but it still did not work. Any help is much appreciated!
Here's my code snippet:
ul{
display: flex;
list-style: none;
}
a {
color: black;
text-decoration: none;
}
.underline-indicators > * {
padding: 1rem;
border: 0;
cursor: pointer;
border-bottom: .2rem solid white;
}
.underline-indicators > *:hover,
.underline-indicators > *:focus {
border-color: black;
}
.underline-indicators > .active {
border-color: black;
}
<html>
<head>
<link rel="stylesheet" href="underline.css">
</head>
<body>
<nav>
<ul class="underline-indicators">
<li class="active">00</li>
<li>01</li>
<li>02</li>
</ul>
</nav>
</body>
</html>
With the code you gave us it doesn't work. But if you add <!DOCTYPE html> as Doctype declaration before the <html> tag, it works fine. The code snippet works, because in the iframe the Doctype is added. I guess, the CSS can't validate without it.
https://www.w3.org/QA/Tips/Doctype
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
My code is below but it is not working. I want to add a dotted line after each section which has width 100%.
section::after {
border-bottom: 1px dotted red;
}
just remove ::after borders apply to elements. adding content won't create a line across the page. Not sure why this was voted down. It works and is pretty straight forward.
section {
border-bottom: 1px dotted red;
}
<section></section>
I hope this works for you :
<!DOCTYPE html>
<html>
<head>
<style>
section {
display: block;
width: 100%;
}
section::after {
content: " ";
display: block;
width: 100%;
border: 2px solid red;
}
</style>
</head>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
May be ul will be work for you,
HTML:
<ul>
<li><span>Name:</span></li>
<li><span>Age:</span></li>
</ul>
CSS:
ul li {
border-bottom: 2px dotted #ccc;
}
I created a demo for you in JSFiddle
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 5 years ago.
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.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
With the example HTML / CSS below, I cannot work out why this doesnt display the expected results in any browser (hosted in Visual Studio), however works perfectly when done as a JSFiddle. I'm probably missing something pretty obvious, but can anyone point out what that might be?
HTML:
<body>
<div class="wrapper">
<div class="navbar">
<p>Random white text which should appear in a grey banner at the top of the page.</p>
</div>
</div>
</body>
CSS:
body {
width: 100%;
margin: 0;
}
.wrapper {
display: table;
width: 100%;
}
.navbar {
width: 100%;
height: 200px;
background-color: #292929;
color: #ffffff;
text-align: center;
vertical-align: middle;
display: table-cell;
}
EDIT: I have tried this in various different browsers, including Firefox, Direfox Dev Edition, Edge, and IE, all with the same results (just plan black text on white screen).
Make sure to link your css file to your html file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
...
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
This is very dumb question. But I do not know how to solve the issue.
I have the following html/css code
<!DOCTYPE html>
<html>
<head>
<title>Selectors and Grouping</title>
<style type=”text/css”>
p {
font-family: Arial;
font-size: 14pt;
}
h1 {
color: black;
border: 5px solid black;
}
h2 {
color: orange;
border: 4px solid orange;
}
h3 {
color: blue;
border: 3px solid blue;
}
h1,
h2,
h3 {
letter-spacing: 5px;
padding: 10px;
}
</style>
</head>
<body>
<h1>
Heading 1
</h1>
<h2>
Heading 2
</h2>
<h3>
Heading 3
</h3>
<p> Selectors choose the element to apply formatting to. grouped together.
</p>
</body>
</html>
html headings must be enclosed in boxes and have different colours. However, when I open the document in Firefox browser it displays the page without any style applied. Online validators point to no error. So the issue must be related to firefox. Can anybody help me?
Thanks in advance.
The issue comes from this part :
<style type=”text/css”>
Your quotes are not the good ones. Use :
<style type='text/css'>
You have following errors :
1) There were incorrect quotes in <style type=”text/css”>. Change it to proper double quote:
<style type="text/css">
2) You are missing one < in doctype declaration as per above code you have mentioned in question.
3) You haven't closed the <html> tag
look at your style tag :
<style type=”text/css”>
change to normal double quote
<style type="text/css">
and close you html tag at the end
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I'm a newbie to html and CSS, and I've been trying to style my paragraph to have 5px of padding on each side of the text, but whenever I add "padding: 5px;" it gets rid of the background colour (of the paragraph), and the padding makes no effect. I've tried with just the padding and that doesn't work either. Thank you in advance!
HTML and CSS for reference:
body {
background-color: #000000;
font-family: arial;
color: white;
}
a {
color: orange;
}
p {
background-color: #393939
padding: 5px;
}
<!doctype html>
<html>
<head>
<title>spam</title>
</head>
<body>
<link rel = "stylesheet" href="main.css">
<img src = "">
<h1><strong>Website name</strong></h1>
<ul>
Home
News
</ul>
<p>
Man stabbed in ...
</p>
</body>
</html>
In CSS you need to end each property you add with a ; so simply change the code to:
p {
background-color: #393939;
padding: 5px;
}
Not having the ; to show that a property ended meant the browser read the CSS as one big property that doesn't exist, which is why it seemed like your CSS did nothing.
You are missing the ; after background-color: #393939