I'm currently making a checkout/thankyouforyourorder page for a webshop, and i made different borders with text in them explaining the process after you succesfully placed an order. I gave my borders an orange color and have 4 of them in a row under each other. I want an orange line in the center of them all so i can link them together and style them so i can make a chronologic process of how their order arrives at home. I hope this makes sense, because i have no clue of how to explain it any other way and i can't wrap my head around where i have to look or what to look for. Can anyone who understands this help me?
.opsomming {
width: 600px;
border: 1px;
border-style: solid;
padding: 5px;
margin-top: 3;
border-color: #FFA500;
box-shadow: 2px 2px 2px ##3F3F3F;
font-family: Georgia, Times;
font-weight: 400;
border-radius: 3px;
background-color: #FFBA43;
}
this is 1 of the borders, what i want to do is make a vertical line in the middle of them all, so i can link them together.
You mean like this?
HTML
<div class="leftline-wrap">
<div class="opsomming">content</div>
<div class="opsomming">content</div>
<div class="opsomming">content</div>
<div class="opsomming">content</div>
</div>
CSS
.opsomming {
width: 600px;
border: 1px;
border-style: solid;
padding: 5px;
margin-top: 3;
border-color: #FFA500;
box-shadow: 2px 2px 2px #3F3F3F;
font-family: Georgia, Times;
font-weight: 400;
border-radius: 3px;
background-color: #FFBA43;
}
.opsomming {
margin-left:10px;margin-bottom:5px;max-width: 90%;position:relative;
}
.opsomming:before {
display:block;
content: "";
border-top: 1px solid #FFA500;
width:10px;
height:1px;
position:absolute;
left:-10px;
top:45%;
margin-top: 0px;
margin-left:-1px;
}
.leftline-wrap {
border-left: 1px solid #FFA500;
}
(1) https://jsfiddle.net/q6xzxoan/2/
or like this
(2) https://jsfiddle.net/9ua89hds/4/
Related
I am trying to create a button with 3 horizontal dots as in the attached screenshot with the below css class and unicode Character “…” (U+2026).
But when I apply background it takes more width and height, can any one please suggest.
In the attached screenshot, I need the first image but getting the second image.
.test:after {
content: '\2026';
font-size: 25px;
background-color: #D0D0D0;
}
<div class="test"></div>
How about this?
Placing a <div> inside the button allows us to fine tune the position of the dots.
button {
border: 2px solid #9fa2a4;
height: 18px;
border-radius: 5px;
background: linear-gradient(#fbfbfb, #d1d1d1); /* gives the "gradient */ color background"
}
.dots {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /* The Arial font appears to have "square" dots */
font-size: 36px; /* The size of the dots */
line-height: 0; /* helps vertically position the dots */
margin-top: -10px; /* helps "raise" the dots higher */
letter-spacing: -2px; /* "squeezes" the dots closer together */
}
<button>
<div class="dots">...<div>
</button>
mostly achieved the required style with the code. Now trying to add empty background before and after 3 dots in the result image.
.horizontal-dots {
cursor: pointer;
width: 19px;
height: 14px;
background-image: radial-gradient(circle, black 1.5px, transparent 2.0px);
background-size: 6px 16px;
background-color: #EEEEEE;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-radius: 0.2em;
margin-left: 14px;
}
.horizontal-dots:hover {
border: solid .2px #0198E1;
}
<div class="horizontal-dots">
</div>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
Closed 2 years ago.
Trying to make a little database for projects for personal use, not sure how to word it but...
what i want:
what i got:
current code:
#Header {
text-align: center;
vertical-align: top;
color: #FFF;
border: 4px #000 solid;
border-top: ;
border-right: ;
border-bottom: ;
border=left: ;
padding: 20px;
background-color: #000;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<body>
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
</body>
I used a screenshot editor to create the image of what i want, how can i change the code to get the desired effect?
Thanks for your time and hopefully your response.
I would strongly recommend wrapping your sections into containers or HTML5 elements and style them accordingly
See pen HTML and CSS:
https://codepen.io/aystarz52/full/LYpLYBp
HTML
<body>
<div class="container">
<h1 id="Header">What do you want to do?</h1>
</div>
<br>
<div class="page-content-container">
Games   Code<br><br><br>
Articles
</div>
</body>
CSS
body, html {
background: #FFF;
padding:0;
margin:0;
}
.container {
text-align:center;
border: 4px #000 solid;
padding: 10px 0;
background-color: #000;
}
#Header {
color: #FFF;
}
.page-content-container {
padding:10px;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
Is this more or less what you hoped for?
Set padding and margin to zero for the body, set a margin on the header and position at the top of the body....
body{margin:0;padding:0;box-sizing:border-box}
#Header {
text-align: center;
vertical-align: top;
color: #FFF;
border: 4px #000 solid;
border-top: ;
border-right: ;
border-bottom: ;
border=left: ;
padding: 20px;
background-color: #000;
margin:0;
top:0;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
What you can do is subtract 10px from the padding-bottom of #Header and add it to padding-top:
#Header {
padding: 30px 0 10px; <--plus ten on top, minus ten on bottom
}
#Header {
text-align: center;
color: #FFF;
border: 4px #000 solid;
padding: 30px 0 10px;
background-color: #000;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<body>
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
</body>
To achieve what you want, the easiest way is to increase padding-top on #Header.
Your CSS has some issues, though. I'm listing them here:
border-top: ;
border-right: ;
border-bottom: ;
Omitting the right side of the declaration is not allowed. You need to either add values to assign to those CSS properties, or remove the lines completely.
border=left: ;
I'm assuming this is just a typo - it has to be border-left. Aside from that, same as stated previously. You must assign a value, or remove the declaration.
Background: #FFF;
CSS property names never contain capital letters. Instead, use background: #FFF;
#Header {
text-align: center;
vertical-align: top;
color: #FFF;
border: 4px #000 solid;
border-top: ;
border-right: ;
border-bottom: ;
border=left: ;
padding: 40px 20px 20px; /* short for 40px top, 20px left & right, 20px bottom */
background-color: #000;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<body>
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
</body>
Set margin-top:0px; in #Header style, That should work for you.
I'm trying to align a triangle next to written text in a button using only HTML and CSS. For the life of me, I can remember how.
.room-info-btn {
background-color: #FFA500;
color: #fff;
border-radius: 4px;
padding: 5px 11px;
font-size: 20px;
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
}
<li>
<button class="room-info-btn" id="room-info-btn">
<div class="arrow-down"></div>
Rooms / Availability
</button>
</li>
I highly recommend checking out Flexbox.
For your code, you can simply add the following css to your .room-info-btn selector:
display: flex;
align-items: center;
This makes aligning many items very simple and gives you other flex control options.
Try this. Flexbox is a better choice I guess.
Take a look here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.room-info-btn {
background-color: #FFA500;
color: #fff;
border-radius: 4px;
padding: 5px 11px;
font-size: 20px;
display: flex;
align-items:center;
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
}
<li>
<button class="room-info-btn" id="room-info-btn">
<div class="arrow-down"></div>
Rooms / Availability
</button>
</li>
Try display: inline-table; in arrow-down class to align with the text
Hi I'm doing a really simple navigator but I just came up into a strange problem I can't figure out where this is coming from.
My separations are not exactly till, they are created the same way..
Some are tougher than other and I don't get why.
Could it be due to the font ? I tried it with different browser and the problem is persistent...
JsFiddle There
The code is really simple :
HTML
<nav id="main-menu2">
<span class="fa fa-home"></span>
DERNIÈRES MINUTES
SÉJOURS
CROISIÈRES
CIRCUITS
FRANCE
WEEK-ENDS
VOYAGE À LA CARTE
PROMOS
</nav>
SCSS
$darkOrange: #ed6d00;
#main-menu2 {
background-color: $darkOrange;
width: 100%;
text-align: center;
font-size: 0.7em;
a{
color: #fff;
text-decoration: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
margin-left: -2px;
margin-right: -2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.3em;
line-height: 1.7em;
}
.fa-home{
font-size: 23px;
position: relative;
top: 2px;
}
}
I can't reproduce the bug, but I may have a solution : you're currently using borders that you don't need. Let me explain : there is a border right on Séjours and a border left on Croisières. So 2 borders, and you're currently hiding one of them.
Using font-size in em, makes your trick (margin-left / margin-right : -2px) unconsistent, because em can't really be converted into px (well it can, but it will depends on the browser calculation so you may need more than 2px to make a border go over another, maybe 1px maybe 1.5487px).
So, my solution : removes all the unecessary borders :
a {
border-left: 1px solid #fff;
}
a:last-child {
border-right: 1px solid #fff;
}
No more borders overlapping, more reliable solution.
Manage it with the font-size:
#main-menu2 {
font-size: 0;
}
#main-menu2 a {
font-size: 14.5px;
margin-left: -1px;
margin-right: 0;
}
The whole code:
$darkOrange: #ed6d00;
#main-menu2 {
background-color: $darkOrange;
width: 100%;
text-align: center;
font-size: 0;
a{
color: #fff;
text-decoration: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
margin-left: -1px;
padding-left: 10px;
padding-right: 10px;
font-size: 14.5px;
line-height: 1.7em;
}
.fa-home{
font-size: 23px;
position: relative;
top: 2px;
}
}
Demo: JSFiddle
It is because in your code you have some space by indent the text. Unfortunately all browsers interprete these content as white spaces and thus you have some gap between the elements.
I want to create a border as shown in the image. I tried with all the styles inset, outset,ridge and groove but I was not able to get the expected result.
Is there any way to bend border towards inside till middle and get back towards till top(hope you understand the problem).
If it's repeated question please add the solution link.
Thanks in advance.
I have tried this:
div {
border-bottom: 1px ridge #B5B9BB;
/*border-bottom: 1px inset #B5B9BB;
border-bottom: 1px outset #B5B9BB;
border-bottom: 1px groove #B5B9BB; */
}
You could use outline:
.bordered {
border-bottom: 1px solid grey;
background: aliceblue;
outline: 5px solid aliceblue;
}
<div class="bordered">Available Apps</div>
Demo
Seems why not just use a border on the text?
div {
background: lightgrey;
padding: 0.5em;
}
p {
border-bottom: 1px ridge #B5B9BB;
}
<div>
<p>Available Apps</p>
</div>
It is probably best to use a wrapping element if possible; it is more flexible than outline (supports border-radius, box-shadows etc.)
For example:
<div class="headline-area">
<h2>Available Apps</h2>
</div>
with the CSS:
.headline-area {
background:#D4D9DC;
padding:5px;
}
.headline-area h2 {
border-bottom:1px solid #B5B9BB;
}
Whenever I am in your situation I use box-shadow:
body {
background:#D1D6D9;
font-family:verdana;
}
div {
border-bottom: 1px solid #B5B9BB;
box-shadow:0 1px 1px rgba(255,255,255,.7);
padding-bottom:5px;
}
<div>Available Apps</div>
You could always try a hr tag. You can then style it in CSS to your desired preference.
HTML
New apps
<hr>
Try this Also but you need an extra Div to do so.
HTML
<div class="outerDiv">
COntent
<div class="innerDiV">
</div>
<div>
CSS
.outerDiv{
background-color: grey;
height: 32px;
text-align: center;
padding: 16px;
font-weight: bolder;
font-size: 25px;
}
.innerDiV{
margin: 0 auto;
border: 1px solid black;
width: 98%;
margin-top: 10px;
}
Demo