I am trying to make a ribbon type header for a website I am working on but I am struggling to get the text to adapt well to a smaller resolution.
Is there a way I can make the text responsive, or flow to a double line on smaller screens?
I have put the code into JS fiddle to show what I am using here.
h3.ribbon {
background: #c3d5d8;
margin-top: 0px !important;
margin-left: -30px;
padding-left: 20px;
color: #fff;
border-bottom: 40px solid #c3d5d8;
border-right: 20px solid #fff;
height: 0px;
line-height: 40px;
font-size: 18px !important;
font-family: 'ProximaNovaThin';
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-weight: bold;}
You could use a skew'd pseudo element for this, allowing for the text to wrap if need be.
.title {
display: inline-block;
width: 70%;
min-height: 50px;
line-height: 50px;
background: lightgray;
position: relative;
}
.title:before {
content: "";
position: absolute;
height: 100%;
min-width: 120px;
width: 40%;
left: 80%;
background: lightgray;
transform: skewX(45deg);
z-index: -1;
}
<div class="title">this is a long title............................a really long title! Like a super long title that should require a second line!</div>
Related
I'm trying to write CSS to get this design
Here's my CSS so far:
.exp {
font-weight: 300;
display: inline-block;
padding-bottom: 15px;
position: relative;
margin-bottom: 30px;
font-style: italic;
}
.exp:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0%;
border-bottom: 1px solid #219b65;
}
HTML:
<h1 class="exp">Experience</h1>
And here's the JSFIDDLE
Any idea how to go about doing this? I did it a few years ago but couldn't get it to work again!
Here's a complete answer for you. Adjust widths to you needs.
.FromTheFounder {
font-weight: 300;
display: inline-block;
padding-bottom: 15px;
position: relative;
margin-bottom: 30px;
font-style: italic;
}
.FromTheFounder:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 13px;
left: 0%;
border-bottom: 1px solid #219b65;
z-index: 1;
}
.FromTheFounder:after {
content: "";
position: absolute;
width: 300%;
height: 1px;
bottom: 13px;
left: 0%;
border-bottom: 1px solid #ccc;
}
https://jsfiddle.net/vjhg7mna/
Brett's answer will work perfectly if you know the width of your container, or want the underline to only span a certain width. If you want the underline to fill the available space, you'll need two elements - one for the full-width underline, and the other for the highlighted underline.
This would also be possible with one element using ::after in place of exp-title and setting the content property to "Experience", but that's not very user-friendly.
Note that I've made the underline significantly fatter (5px) so the effect is more obvious.
.exp {
position: relative;
font-style: italic;
border-bottom: 5px solid #ccc;
}
.exp-title {
display: inline-block;
border-bottom: 5px solid #f00;
font-weight: 300;
padding-bottom: 15px;
margin-bottom: -5px;
}
<h1 class="exp">
<span class="exp-title">Experience</span>
</h1>
For what it's worth, another option here is to use a linear-gradient background on a pseudo element, instead of an actual border.
The disadvantage here is that this option doesn't have the flexibility to automatically match the width of any arbitrary length of text in your h1. But then again, if you've got several headers, and you want the highlighted portion of the underline to be the same width for all of them, regardless of text length, this may be the way to go.
.some-container {
position: relative;
padding-bottom: 15px;
}
.exp {
font-weight: 300;
display: inline-block;
margin-bottom: 0;
font-style: italic;
}
.some-container::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0%;
background-image: linear-gradient(to right, steelblue, steelblue 25%, lightgray 25%, lightgray);
}
<div class="some-container">
<h1 class="exp">Experience</h1>
</div>
Can't figure out the way that the button would be shown the same in all systems and browsers, any help?
the screenshots:
https://www.browserstack.com/screenshots/550281a9fe2a9b7d36614ec53391db509557c4f9
#contactus .container button {
height: 35px;
width: 35px;
background-color: #a4cbe3;
border:none;
padding: 0;
margin: 0;
outline: 2px dashed white;
color: white;
font-size: 30px;
position: relative;
top: 4px;
margin-right: 13px; }
<div class='container' id="gavejai">
<button onclick="addfield();" type="button">+</button>
Browsers still have some inconsistencies in css rendering, even same version of browser between different operating systems, make sure you defined ALL the css properties of element, which may be different between them. here's the code:
#contactus .container button {
height: 35px;
width: 35px;
background-color: #a4cbe3;
border:none;
padding: 0;
margin: 0;
outline: 2px dashed white;
color: white;
font-size: 30px;
position: relative;
top: 4px;
margin-right: 13px;
/* add these styles */
font-weight: 300;
line-height: 35px; /* must be equal to height property */
display: inline-block;
vertical-align: middle;
}
[edit] I recommend using CSS Reset at the top of your css code which tries to remove this inconsistencies http://html5doctor.com/html-5-reset-stylesheet/
I need to make something like this.
It´s not seen very much, bot the box with arrow is not a part of the button.It´s in the front of it. Is it possible to do this using :before selector? Buttons are classical navigation list. Thanks for your help
It most certainly is possible. You may also use an image instead of the appending the ">"
ul {
list-style: none;
}
li { background: gold;
width: 150px;
height: 30px;
line-height: 30px;
color: white;
}
li:before {
content: ">";
border-right: 1px solid white;
padding: 5px 10px 5px 10px;
margin-right: 10px;
}
<ul>
<li>Some text</li>
</ul>
Yes, you can. Make the :before element be an absolutely positioned block within the relatively positioned main button.
Then, simply give it the appropriate height, background color and border. You can use FontAwesome and the content property to set it to display an arrow.
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{padding: 20px;}
div{
margin-left: 64px;
position: relative;
background: orange;
height: 64px;
color: white;
line-height: 64px;
text-indent: 20px;
font-size: 20px;
font-weight: bolder
}
div:before{
content:'';
position: absolute;
left: -134px;
top: 0;
margin-left: 64px;
height: 64px;
width: 64px;
background: orange
}
div:after{
content: '';
position: absolute;
left: -90px;
top: 16px;
margin-left: 32px;
height: 20px;
width: 20px;
border-top: 8px solid white;
border-right: 8px solid white;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<div>Some Text </div>
I'm trying to remove the top spacing of my layout I am working on, which you can view here: 50.116.81.173/~speedcit/wordpress/. However, I don't seem to be having much luck with it. I essentially would like to remove the white spacing at the top of the page.
Below is the CSS code I am currently using:
body, html {
font-family: Arial;
font-size: 11.5pt;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
table, tr, td, div {
font-family: Arial;
font-size: 11.5pt;
}
#outer {
text-align: center;
margin: 0px;
}
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 2px;
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
#header {
background-image: url(http://50.116.81.173/~speedcit/images/header.jpg);
width: 1024px;
height: 280px;
}
#menu {
width: 1024px;
height: 61px;
}
#content {
background-image: url(http://50.116.81.173/~speedcit/images/content-bg.jpg);
background-repeat: no-repeat;
width: 804px;
height: 357px;
padding-top: 80px;
padding-bottom: 10px;
padding-left: 110px;
padding-right: 110px;
line-height: 24pt;
}
#footer {
margin: 0px;
padding: 0px;
}
.txt {
color: #BF2736;
font-weight: bold;
}
Add padding 0 to your wrapper. CSS reset should fix your problem but might create new ones.
http://meyerweb.com/eric/tools/css/reset/
#wrapper {padding:0;}
The root cause to the problem is that you did not reset the way in which the browser renders CSS back to zero.
Change the Padding of the #wrapper to Zero
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 0px; -- Change This to zero!!!
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
You might want to read about css reset tool
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings,
and so on
Replace padding-top:2px with padding:0 in the #wrapper rule. If you add padding:0 before the padding-top property, you will still have the problem.
problem of your bottom padding is image it-self. There is a white space in image. Edit it and remove it:
50.116.81.173/~speedcit/images/footer.jpg
And problem of your top white space is what others said before.
I have a problem with css popup. I am hidden some content in span tags and show it when I hover over a text. But there is a overlap and the text in the second line is overlapping the popup. And the border for the popup is messed up. The content is on this link. And I am using following css:
.rest-cat
{
clear: both;
padding: 3px 40px 0 0!important;
width: 600px;
}
.rest-menuitem
{
position: static;
float: left;
width: 254px;
padding: 3px 5px 0 0!important;
border-top: 1px dotted #DDD;
}
.dishname{
position: absolute;
z-index: 0;
float: left;
width: 229px;
}
.dishprice{
position: relative;
float: right;
width: 25px;
}
.product
{
width: 600px;
padding: 0px 0px 20px 20px!important;
}
.dishname span
{
display: none;
text-decoration: none;
}
.dishname:hover
{
overflow: hidden;
text-decoration: none;
}
.dishname:hover span
{
display: block;
position: static;
top: 0px;
left: 170px;
width: 320px;
margin: 0px;
padding: 10px;
color: #335500;
font-weight: normal;
background: #e5e5e5;
text-align: left;
border: 1px solid #666;
z-index: 200;
}
Is there a easy fix for this? I already tried using position: relative; and added z-index to all the CSS tags. They didn't work and I am stuck on it for a day.
The reason your popups are being clipped is because of this CSS:
.dishname:hover {
overflow: hidden;
}
Removing that would be a good place to start.
Next, z-index only affects elements with a position property other than static. Use relative and they will render the same but the z-index will have an effect.
After that there are a lot of different things that could be affecting the layering I would start like #Michael Rader said by cleaning up your HTML, you have a lot of unnecessary wrappers.