I have a span for RESTAURANT (text) which needs to have a border-bottom that is divided into two but will not overlap the text below it. It's like this picture:
I want to know how to create the divided border beside "bar & lounge" (in the link)
The best way to create this is to use CSS :before and :after.
You can wrap this text in one <span>spoon and fork</span> Or you can create two paragraphs, its you decision.
Then you can use :before and :after
<p>Spoon and fork</p>
p {
display: inline-flex;
align-items: center;
}
p::before, p::after {
content: "";
width: 50px;
height: 3px;
background: red;
margin: 5px;
}
Try this :
h2{text-align:center}
.custom { width:100%; text-align:center; border-bottom: 1px solid #000; line-height:0.1em; margin:10px 0 20px; }
.custom span { background:#fff; padding:0 10px; }
<h2>MARINA'S RESTAURANT</h2>
<h2 class="custom"><span>Spoon and Fork</span></h2>
you can use before and after pseudo element
.block{
width:350px;
text-align:center;
margin:0px auto;}
.text,.text2{
position:relative;
display:block;
font-size:28px;
text-transform:uppercase;}
.text:before{
content:'';
position:absolute;
border:2px solid #000000;
top:50%;
right:0px;
width:45px;}
.text:after{
content:'';
position:absolute;
border:2px solid #000000;
top:50%;
left:0px;
width:45px;}
<div class="block">
<span class="text2">Marina's restaurant</span><br/> <span class="text">spoon and fork</span></div>
Related
The following code does not respect the overflow:hidden boundaries, and this is causing a mess with my code where I have many consecutive lines.
You can see (jsfiddle below) that it does respect it with regard to the text ("Test"), but not with what is defined in the ::after item.
How can I solve / workaround this?
UPDATE: it makes sense that by removing the position:absolute in the ::after element then the boundaries are respected, but then the "icon" is not seen anymore
html
<div class="wrap">
<div>Test</div>
<div>Test</div>
<div>Test</div>
</div>
css
body { padding: 50px 0; }
.wrap {
background: grey;
height:18px;
overflow:hidden;
}
.btn {
border: 1px solid #999;
border-radius: 8px;
}
.icon {}
.icon::after {
content:"";
position:absolute;
margin-left:6px;
margin-top:1px;
width:4px;
height:6px;
background:#fff;
border:1px solid #444;
opacity:0.8;
}
http://jsfiddle.net/jsedv6kw/1/
Try this:
.icon {position: relative;}
http://jsfiddle.net/jsedv6kw/2/
.wrap {
background: grey;
height:18px;
overflow:hidden;
position:relative;
}
You are missing
position:relative;
http://jsfiddle.net/jsedv6kw/3/
Give position:relative; to .wrap, as position property creates layers of elements.
after... must be dispaly:block
.icon::after {
**dispaly:block**
content:"";
position:absolute;
margin-left:6px;
margin-top:1px;
width:4px;
height:6px;
background:#fff;
border:1px solid #444;
opacity:0.8;
}
I have a heading for a web page that is supposed to look like this
And i'd like to use css to style it. One way is to use pseudo elements :before and :after with h3 tag, and use content:url(...image.png);, but Is it possible to create something like this using only css, and not using images?
I could create on of those using :before and :after, by specifying borders, width and height, and absolutely positioning them, but that way I couldn't create the other side. Are there some line parameters in css to help me create it?
Here's jsfiddle of what I have right now.
HTML
<div class="container">
<h3>CONTACT US</h3>
</div>
CSS
.container{
position:relative;
left:100px;
}
h3{
font-family: Lato;
font-weight: 300;
display: inline-block;
color: #222222;
font-size: 40px;
line-height: 48px;
margin-bottom: 26px;
position: relative;
}
h3:before{
content:"";
border-right: 1px solid #e65941;
width: 30px;
height: 40px;
position: absolute;
left:-50px;
bottom:5px;
}
h3:after{
content:"";
border-left: 1px solid #e65941;
width: 30px;
height: 40px;
position: absolute;
right:-50px;
bottom:5px;
}
Here we are:
Create the left and right borders with the h3 itself.
Adjust bottom on :before and :after to get the exact result you want.
Have a jsBin! - updated the link, jsfiddle is crashing on me so I have uploaded to jsBin
I have done a bit of a tidy up, and have removed the container as the h3 styling is self-contained.
CSS
h3 {
position:relative;
font-family:Lato;
font-weight:300;
display:inline-block;
color:#222;
font-size:40px;
margin:30px;
border-left:solid 1px #e65941;
border-right:solid 1px #e65941;
padding:0 10px;
}
h3:before,h3:after {
position:absolute;
content:"";
border-bottom:1px solid #e65941;
width:30px;
bottom:23px
}
h3:before {
left:-30px
}
h3:after {
right:-30px
}
Not sure how to describe it, so here's a pic:
This is what I've tried so far, but the span is not visible.
.border{
border-bottom: 1px solid #666;
width:400px;
position:relative;
}
.border span{
border-bottom:4px solid red;
display:inline-block;
width:50px;
position:absolute;
left:48%;
bottom:-4px;
}
Ok, try this:
HTML:
<div class="border"></div>
CSS:
.border{
width:400px;
height: 1px; /* instead of border */
background: #666;
position:relative;
}
/* pseudo-element instead of span for cleaner HTML */
.border:before {
content: '';
border-bottom:4px solid red;
display:inline-block;
width:50px;
position:absolute;
left:48%;
top:-2px; /* instead of bottom, go top by half the height */
}
Replace bottom by margin :
.border span{
border-bottom:4px solid red;
display:inline-block;
width:50px;
position:absolute;
left:48%;
margin-bottom:-2px;
}
try this
css
div.container{border-top:solid 1px red;padding:0px;}
div.inside{height:100%;width:100%;border-top:2px solid red;margin:0px;}
html
content
i havent tested but it should work
I am trying to style setup a section of a website with a pattern running to each side of certain pieces of text. You an see a screenshot that I took from the PSD file here --> http://screencast.com/t/84RCLRdSZT with red arrows pointing to the areas in question that I am finding difficult to solve.
Any idea how to go about this?
Here is what I am starting with:
<div class="box">
<h2>Some text here</h2>
</div>
and the css:
.box {
width:400px;
height:200px;
text-align:center;
background:yellow;
}
h2:after,h2:before{
content:"";
border:5px double purple;
}
here is the fiddle --> http://jsfiddle.net/HerrLoop/g63LB/1/
As you can see, the stripes are vertical, instead of horizontal as you can see in my initial screenshot.
This isn't quite perfect and requires you set a fixed width on the before/after elements (best I can think of is to use JavaScript if responsive is required), but here goes:
h2{
display:inline-block;
vertical-align:middle;
}
h2:after,
h2:before{
content:"";
margin:0px 20px;
border:1px solid #000;
border-left: 0px;
border-right:0px;
height:5px;
width:50px;
display:inline-block;
vertical-align:middle;
}
http://jsfiddle.net/daCrosby/g63LB/2/
Edit
This is a little bit more responsive, but still gets kind of cut off at small sizes and looks disproportional at others:
.box {
width:50%;
overflow:hidden;
}
h2{
display:inline-block;
vertical-align:middle;
width:100%;
white-space:nowrap;
}
h2:after,
h2:before{
content:"";
margin:0px 20px;
border:1px solid #000;
border-left: 0px;
border-right:0px;
height:5px;
width:20%;
display:inline-block;
vertical-align:middle;
}
http://jsfiddle.net/daCrosby/g63LB/3/
Try the solution described here: http://kizu.ru/en/fun/legends-and-headings/
The quick demo:
h2{
overflow-x: hidden;
white-space: nowrap;
text-align: center;
}
h2:before, h2:after {
content: "";
border: solid #000;
border-width: 1px 0;
height: 5px;
width: 50%;
display: inline-block;
vertical-align: middle;
}
h2:before { margin: 0 .5em 0 -50%; }
h2:after { margin: 0 -50% 0 .5em; }
Demo
Basically, I'm trying to setup something that looks like this:
However, my code for some reason isn't working. Fist of all, in teh tinkerbin, my arrow image isn't even showing. It works fine on my computer though, so I'm not sure why this is. I also tried jsfiddle and it didn't work there either.
I can get the arrow to be there just fine, but I can't get the text to be centered vertically, let alone even go insie the gray box when the image is there. That is what is confusing me here.
HTML:
<div id="answers">
<div id="arrowcenter"></div><div id="answerstext">Text Next To Arrow</div>
</div><!-- end grayAnswer -->
CsS:
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:71px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
margin-left:-140px; }
#answerstext {
margin-top:0;
}
1st of all your arrow was isn't showing because you were using margin-left:140px; in #arrow_center
See my Fiddle
Just with 1 <div> Fiddle
This answer is inspired by Mr. Alien's answer of using less markup (id optional).
Reference: jsFiddle
HTML:
<span>Masculino</span>
CSS:
span {
background-image:url('http://fortmovies.com/brazil/arrow.png'); /* 70px x 31px */
background-position: 3px 10px;
background-repeat: no-repeat;
background-color: #DDDDDD;
border-top: 1px solid black;
border-bottom: 1px solid black;
font-family: Arial;
font-weight: bold;
font-size: 30px;
padding: 8px 10px 8px 80px;
}
Status Update: jsFiddle with Div for Navbar method
Just remove margin-left:-140px; and add float:left; to #arrowcenter
Working Demo
Use the tag instead of the tag.
The tag defaults to display: block, which prevents the content of different s to be aligned next to each other. tags default to display:inline; which suits your ideas better. As analternative you could also set those display rules in your css.
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:75px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
float: left;
}
#answerstext {
margin-top: 16px;
}
Little bit changes that i made in just in your css as follow, and it is working...
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:120px;
height:31px; float:left;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
}
#answerstext {
margin-top:0; float:left; height:50px; line-height:50px;
}
Working Demo
OR
Use this CSS
#answers
{
width: 220px;
height: 50px;
background-color: #DDDDDD;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin-top: 20px;
}
#arrowcenter
{
width: 100px;
height: 50px;
background-image: url('http://fortmovies.com/brazil/arrow.png');
background-position: left center;
background-repeat: no-repeat;
float:left;
}
#answerstext
{
line-height:50px;
margin-left:10px;
font-size:20px;
font-family:Arial;
font-weight:bolder;
}
Use this in HTML :-
<div id="answers">
<div id="arrowcenter">
 </div>
<div id="answerstext">
Masculino</div>
</div>
I hope it'll helps!! :)
What's the purpose of margin-left:-140px; it moves #arrowcenter off-screen remove it and you'll be fine.
Also set both divs to display:inline-block and vertical align appropriately
#arrowcenter {
...
display:inline-block;
vertical-align:middle;
}
#answerstext {
...
display:inline-block;
vertical-align:middle;
}
http://jsfiddle.net/XEk5d/