Insert text in border CSS HTML - css

I need to insert text in the upper and lower of an inner border (both centred) which will have a background image behind it. This will be the same on each page. Can I achieve this using CSS?
Please see screenshot of what I mean:
The border needs to be 3px in width and white in colour and the font is Basis Grotesque Medium.
I'm hoping to start out with a WordPress theme and edit it.
Hopefully this question hasn't been answered before anywhere. I tried running a search but couldn't find what I needed.
Before I go ahead and start building this website could you tell me if this is possible and how I may go about achieving it?

You can use the approach I described here Line separator under text and transparent background for the lines on the left/right of the titles.
You can then use negative top/bottom margin to position them on the bottom and top borders :
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body {
background-image: url(http://fr.playstation.com/media/5ZfqPjVF/BigSkyInfinity_Hero_EN.JPG);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Open Sans', sans-serif;
color:#fff;
}
#content{
border:3px solid #fff;
border-width:0 3px;
display:inline-block;
margin:50px 0;
width:100%;
}
.divider {
font-size:30px;
margin: -0.65em auto -0.45em;
overflow: hidden;
text-align: center;
line-height: 1.2em;
}
.divider:before,
.divider:after {
content: "";
vertical-align: top;
display: inline-block;
width: 50%;
height: 0.65em;
border-bottom: 3px solid #fff;
margin: 0 2% 0 -55%;
}
.divider:after {
margin: 0 -55% 0 2%;
}
p{margin: 150px 0;}
<div id="content">
<h1 class="divider">Top title</h1>
<p>...Content here...</p>
<h2 class="divider">Bottom title</h2>
</div>
Note that top/bottom negative margins will need tweaking according to the font-family you are using

Related

Responsive title with transparent icon AND solid background color

I have a title bar with a transparent accent at the left end. There's also a solid background color. I need it to be responsive and accept any length of title. IDK why this is such a pain, but I've tried everything.
I've tried a static image as background, but when the title is two lines high, no dice.
If it were a solid icon, it'd be easy: just drop in the image and add the background color. Since there's no such thing as a "transparent image" that trumps a background color, I'm lost.
Here's what the final product needs to look like:
Any ideas on how to combine a transparency with a solid background and not have said background fill in the transparency?
UPDATE: My current code is not great, but here it is. It works well enough for most widths but is a disaster when it gets narrow. I'll try your suggestions and let you know how things work out. THANKS Everyone!!!
HTML
.titlebox-wrap {
width:90%;
position:absolute;
top:-2em;
left:-3em;
margin:0;
padding:0;
}
.titlebox-hook {
background: url("images/blue-cap.png") no-repeat;
background-size:cover;
background-position:left center;
position:absolute;
top:0;
left:0;
width:10%;
height:100%;
z-index:-1;
}
.titlebox-text {
background:#0d2240;
margin:0;
margin-left:9.8%;
padding:.7em 1em .7em 0;
max-width:80%;
float:left;
-webkit-border-radius:.2em 3em 3em .2em;
-moz-border-radius:.2em 3em 3em .2em;
border-radius:.2em 3em 3em .2em;
}
<div class="titlebox-wrap">
<div class="titlebox-hook"></div>
<span class="titlebox-text">THIS STUPID THING NEEDS TO DICTATE LENGTH</span>
</div>
just a fast idea (not garanteed it will work): why not try the inverse of the ornament as an svg (can style the color) in tat blue color and the rest is not too complicated?
Create a background image that's only as wide as the transparent cutout portion, but very tall, with large solid-colored areas above and below the transparent shape — you'll have to decide how many lines of text this design element reasonably needs to accommodate to determine the px height of the image to produce
Use that bg image on a pseudo-element
Position that pseudo-element outside the element that holds the text using negative margin or transform: translateX(), or in a real element that's a flexbox child of the wrapper
Here's an example using flexbox (from https://codepen.io/RwwL/pen/yPOade):
html, body {
height: 100%;
}
body {
padding: 5%;
height: 100%;
font-family: sans-serif;
background: linear-gradient(to bottom, red, orange);
background-size: cover;
background-repeat: no-repeat;
}
.titlebox-wrap {
width:90%;
margin:0;
padding:0;
display: flex;
}
.titlebox-hook {
width: 40px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAMgCAYAAADVw8ezAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNy0xMS0wM1QxNzoxMTo5MDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAzLjc8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgICAgPHRpZmY6Q29tcHJlc3Npb24+NTwvdGlmZjpDb21wcmVzc2lvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPHRpZmY6WVJlc29sdXRpb24+NzI8L3RpZmY6WVJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTAwPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+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');
background-repeat: no-repeat;
background-position: left center;
}
.titlebox-text {
background:#0d2240;
flex: 1;
color: #fff;
padding :.7em 2em .7em 0;
max-width:80%;
float:left;
-webkit-border-radius:.2em 3em 3em .2em;
-moz-border-radius:.2em 3em 3em .2em;
border-radius:.2em 3em 3em .2em;
}
Here's an example that illustrates how to set up your image, with a semicircle punchout instead of your fancy floral shape, but it'll work the same:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAMgCAYAAADVw8ezAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNy0xMS0wM1QxNzoxMTo5MDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAzLjc8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgICAgPHRpZmY6Q29tcHJlc3Npb24+NTwvdGlmZjpDb21wcmVzc2lvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPHRpZmY6WVJlc29sdXRpb24+NzI8L3RpZmY6WVJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTAwPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+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
Finally did this with Flex
HTML
<div class="fancy-title">
<div class="fancy-cap"></div>
<div class="fancy-text">content</div>
</div>
CSS
.fancy-title {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap:nowrap;
}
.fancy-cap {
background: url("images/blue.png") no-repeat 0 0;
background-size:cover;
background-position:center left;
width:2.7em;
}
.fancy-text {
background:#0d2240;
width:auto;
}
img {
Background: 100%;
background: url();
}
img {
width: 100%;
display: block;
}

CSS margin-top influencing outer <div>

<body>
<div id="naslov">
<img src="image/Conto_logo.png" title="Conto Regis" alt="contologo" />
</div>
<div id="izbornik">
<div id="home">
</div>
</div>
</body>
body {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:1.0em;
font-weight:100;
margin:0px;
color:#000;
}
div#naslov {
height: 128px;
width: 100%;
background-image: url(../image/Header.png);
background-repeat: repeat-x;
}
div#naslov > img {
cursor:pointer;
height: 80px;
margin:20px 0px 0px 20px;
}
div#izbornik {
width:100%;
height: 45px;
background-image: url(../image/izbornik.png);
background-repeat: repeat-x;
}
#home{
height:27px;
width:28px;
border:#000 1px dashed;
}
I'm having problem positioning div "home" inside div "izbornik" when I use margin-top to pull div "home" a bit down something strange happens. Dreamweaver displays it fine while IE10 and Chrome(latest) display it as if I used margin-top inside div "izbornik". Funny thing is if set div "home" to float:left margin starts acting normal but I'm not sure why, I'll be using some javascript later when the template is completed and I need the page to be very very stable. Any suggestions?
http://jsfiddle.net/xNrGR/6/ => in short why does that 8px gap appear there? I need the div "home" to go down not the whole parent-child combo
Add overflow:auto to #izbornik. Seems to be a collapsing margins issue.
div#izbornik {
width:100%;
height: 45px;
background: red;
background-repeat: repeat-x;
overflow:auto;
}
jsFiddle example
This is collapsing margins. You can fix this by setting overflow: auto or overflow: hidden to the parent div. This can cause issue for some users depending on the content you have.
The other option is to give the parent div a border. If you make the border the sam color as the background it would not be noticeable. When people use 1px border they normally use margin -1px too. These are just some ways of tackling the problem.
DEMO http://jsfiddle.net/kevinPHPkevin/xNrGR/9/
border: thin solid red;

Why do I get a white line when I clear:both?

I'm trying to get h1 to appear on the left and h2 on the right, which I've managed to do thanks to a previous post on stackoverflow. But now there is this white line showing up under the text that is seriously messing with my design. Any thoughts?
<div id="container">
<div id="header">
<h1 style="text-align:left;float:left;">Ken DeRosier</h1>
<h2 style="text-align:right;float:right;">Master Sculptor</h2>
<hr style="clear:both;">
<!-- end #header -->
</div>
...
</div>
This is all the CSS I can think of that could be affecting the code above.
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #FFFFbb;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #000000;
background-repeat: no-repeat;
background-position: center top;
background-image: url(../images/sunriseHeader.jpg);
}
.thrColLiqHdr #container {
width: 80%; /* this will create a container 80% of the browser width */
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.thrColLiqHdr #header {
padding: 0 10px;
padding-top: 170px;
padding-right: 20px;
}
.thrColLiqHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
Try replacing this line
<hr style="clear:both;">
with this
<div style="clear:both;"></div>
I think this is because you use a <hr> aka "horizontal rule". Why don't you try to use a span or a div or something else to clear which is not intended to display itself with something visible?

Two images comprising the background for a div?

I need to create the following in CSS and have it work on IE7+ (and Firefox if possible):
Everything is done except the background!
The quotation is different each time, so the background needs to automatically adjust in height.
It also needs to auto adjust to the width of the container it's placed within. By this, I mean the gradient cannot stretch. The background needs to be the fade-in left gradient, then the background colour, then the fade-out right gradient.
Here's my current code - now on JSFiddle:
HTML
<div id="ehs-quotecontainer">
<div id="ehs-bgleft">
</div>
<div id="ehs-bgright">
</div>
<div class="ehs-marks" id="ehs-marktop">
“
</div>
<span class="ehs-quotetext">Once you believe anything, you stop thinking about it.</span>
<div class="ehs-marks" id="ehs-markbottom">
”
</div>
</div>
CSS
#ehs-quotecontainer {
padding-top:8px;
padding-bottom:8px;
background-color:#F7F8FA;
text-align:center;
}
#ehs-bgleft {
background:transparent url(../images/ehsbgleft.jpg) repeat-y scroll right top;
}
#ehs-bgright {
background:transparent url(../images/ehsbgright.jpg) repeat-y scroll right top;
}
.ehs-marks {
height:20px;
color:#8B8C90;
font-size:5.0em;
}
#ehs-marktop {
float:left;
margin-top:-18px;
}
#ehs-markbottom {
float:right;
margin-top:-5px;
}
.ehs-quotetext {
padding-left:4px;
padding-right:4px;
color:#000;
font-size:1.1em;
font-style:italic;
}
Any ideas on how to make the background work correctly?
The easiest way to do this is to make the entire quote position:relative so that you can position things inside it, relative to the quote container.
After that what you ask is fairly easy to do:
http://jsfiddle.net/7GEah/1/
Something like this: http://www.webdevout.net/test?012&raw
<!doctype html>
<html>
<head>
<title></title>
<link href='http://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'>
<style>
body {
background: url(http://i.stack.imgur.com/VeMeV.png) no-repeat 8px 8px;
margin: 71px 8px 8px;
}
.quote {
border: 1px solid #dfdfdf;
position: relative;
padding: 8px 35px;
}
.quote
p {
margin: 0;
font: italic 12px sans-serif;
text-align: center;
position: relative;
z-index: 1;
}
.quote .w,
.quote .e {
position: absolute;
top: 0;
width: 75px;
height: 100%;
background-image: url(http://img526.imageshack.us/img526/1796/gradientj.png);
background-repeat: repeat-y;
}
.quote .w { left: 0; background-position: -75px 0; }
.quote .e { right: 0; background-position: 0 0; }
.quote
span {
color: #898a8e;
font: 70px/70px allerta, serif;
position: absolute;
}
.quote
.ldquo {
left: -35px;
top: -15px;
}
.quote
.rdquo {
right: -35px;
bottom: -42px;
}
</style>
</head>
<body>
<div style="width: 209px;">
<div class="quote">
<p><span class="ldquo">“</span>No task is so important or urgent that it cannot be done safely.<span class="rdquo">”</span></p>
<div class="w"></div>
<div class="e"></div>
</div>
</div>
</body>
</html>
Could you create a single image, with the gradient meeting in the middle? If so, you can use:
#ehs-quotecontainer {
background: (YOUR_OUTER_EDGE_COLOR) url(../images/ehsbgMerged.jpg) repeat-y center center;
}
Provided you have defined edges of your box (which it seems you have), this will always center the gradiant image on your text.
I should add, that if your image is too narrow, your background color will blend with the edges of the image rather than spread out the middle, which might not be what you're looking for.
i hate to say this but since you will be using a very small image would you not rather use the background and insert your text having your background .
so here you will :
you keep the background with the quotation marks as it is
Insert your text in a with the background that you have . And finally you can just give the text some padding . and you are ready to go .

Can I overlap CSS borders? Trying to underline from edge of page to end of text

I'm trying to center a heading (with variable width) and have the underline running from the left hand edge of the page to the end of the text. Unless I'm missing something, there doesn't seem to be an easy way of doing this! The closest I've come to what I want is:
<style type="text/css">
#wrapper1 {
margin-right: 50%;
border-bottom: 4px solid red;
}
#wrapper2 {
text-align: center;
position: relative;
left: 50%;
}
h1 {
display: inline-block;
margin: 0 auto;
border-bottom: 4px solid red;
}
</style>
<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>
This way, the text is centered with a border acting as an underline, and the border on wrapper1 extends from the left hand edge to the center. BUT, because the heading is within the wrapper, and the border on the wrapper is outside of the content, the wrapper border is below the heading border.
Any suggestions gratefully received - this is driving me mad!
In your #wrapper2:
bottom: -4px;
Will make it move 4 pixels downwards to overlap the other line.
(Tested in Safari, works)
Try removing both the padding-bottom and margin-bottom on both wrappers (set to 0), then add it back in on the inner one only until it looks right.
OK, I had a go, and this works for me. I had to put position relative on both wrappers, which then allows you to push the inner wrapper down a couple of pixels from it's original location.
<html>
<head><title>test</title></head>
<body>
<style type="text/css">
#wrapper1 {
margin-right: 50%;
margin-bottom:0;
padding-bottom:0;
border-bottom: 4px solid red;
position:relative;
}
#wrapper2 {
text-align: center;
position: relative;
left: 50%;
margin-bottom:0;
padding-bottom:0;
position:relative;
top:4px; /*The width of the border doing the underlining*/
}
h1 {
display: inline-block;
margin: 0 auto;
border-bottom: 4px solid red;
}
</style>
<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>
</body>
</html>

Resources