I am trying to move this paragraph header up towards my h1. I don't really understand how to incorporate the position function. I have tried to use padding but it doesn't work.
ok so in the picture I am trying to get the " where every connections matters" right below the "Boblo"
The bottom is my HTML code
.jumbotron h1 {
text-align: left;
color: white;
font-size: 60px;
font-family: 'Shift', sans-serif;
font-weight: bold;
padding-top:20px;
padding-bottom:5px
}
.jumbotron p {
font-size: 30px;
color: white;
font-weight: bold;
text-align: left;
}
<div class="jumbotron">
<div class="container">
<h1>BOBLO</h1>
<p>Where every connection matters</p>
You can add a class to h1 and remove the margin-bottom, please see and try the code below. You can take my implementation and adapt to suit your needs.
HTML:
<h1 class="test">TEST HEADING</h1>
<header>HEADER</header>
CSS:
.test{
margin-bottom: 0 !important;
}
Hope this helps!
If you use Bootstrap (I guess), than you have to set <h1>tag the margin-bottom and padding-bottom to zero.
.jumbotron .container h1 {
text-align: left;
color: white;
font-size: 60px;
font-family: 'Shift', sans-serif;
font-weight: bold;
padding-top:20px;
padding-bottom:5px;
margin-bottom: 0;
padding-bottom: 0;
}
.jumbotron .container p {
font-size: 30px;
color: white;
font-weight: bold;
text-align: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container">
<h1>BOBLO</h1>
<p>Where every connection matters</p>
</div>
</div>
If the gap between <h1> and <p> again to large you can fix this with line-height.
I hope this will help you.
Removing the margin and padding in h1 is probably the cleanest solution. But sometimes that doesn't work, I then just always apply position:relative; top:-20px;. This moves the element 20px up from the position where it normally would have been:
.jumbotron .container h1 {
text-align: left;
color: white;
font-size: 60px;
font-family: 'Shift', sans-serif;
font-weight: bold;
padding-top:20px;
padding-bottom:5px;
}
.jumbotron .container p {
font-size: 30px;
color: white;
font-weight: bold;
text-align: left;
position:relative;
top:-20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container">
<h1>BOBLO</h1>
<p>Where every connection matters</p>
</div>
</div>
Related
I have a minimal example here: https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ
Containing the following:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
The horizontal padding only applies to the very beginning and end of the text where it wraps, but I want it to apply on every line. I'm OK with the border-radius not being at the line-break points of every line, but I need the padding to apply.
If I put padding-top into the .header-text class that applies to both lines, so I'm unclear why the points where lines wrap ignore the horizontal padding options.
Is there a way to do this in CSS?
What you want can be achieve using box-decoration-break and it will even work with border-radius:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
You should change .header-text display to either block or inline-block
you could try in another way
.header-text {
padding: 0;
word-spacing: 5px;
}
May it will help u out. Increase the width of the .wrapper so the padding will apply.
HTML PAGE
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
CSS Page
.wrapper {
width: 500px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
padding-top:12px;
padding-bottom:12px
}
I have a minimal example here: https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ
Containing the following:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
The horizontal padding only applies to the very beginning and end of the text where it wraps, but I want it to apply on every line. I'm OK with the border-radius not being at the line-break points of every line, but I need the padding to apply.
If I put padding-top into the .header-text class that applies to both lines, so I'm unclear why the points where lines wrap ignore the horizontal padding options.
Is there a way to do this in CSS?
What you want can be achieve using box-decoration-break and it will even work with border-radius:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
You should change .header-text display to either block or inline-block
you could try in another way
.header-text {
padding: 0;
word-spacing: 5px;
}
May it will help u out. Increase the width of the .wrapper so the padding will apply.
HTML PAGE
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
CSS Page
.wrapper {
width: 500px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
padding-top:12px;
padding-bottom:12px
}
I'm trying to design a Card but my <p> text is somehow inline. I don't want that. I tried display: block;and other options but that doesn`t work.
I work with Bootstrap and CSS but as far as I know, this is a plain CSS question.
Here is my Html for one card:
<div class="">
<div class="card">
<img class="card-img-top" src="../../../assets/images/offer_1.jpg">
<div class="card-body text-center">
<h1>{{offer.name}}</h1>
<p>{{offer.description}}</p>
<h2>{{offer.price}}€</h2>
</div>
And here my SCSS:
$font-serif: 'Playfair Display', serif;
$font-sans-serif: 'Raleway', sans-serif;
$color_price: #F96D00;
$color_description: #b8b8b8;
.card {
border-radius: 0;
.card-body {
padding: 3rem;
h1 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 26px;
}
h2 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 22px;
color: $color_price;
}
p {
font-family: $font-serif;
line-height: 1.45;
font-size: 18px;
color: $color_description;
height: 100px;
}
}
}
It looks like this:
Edit: The Problem is the paragraph has a flixible width but the text inside is somehow always inline and wider then the paragraph itself.
You don't need to use overflow:hidden or !important on text-align: center.
You need to set a maximum width on the card element that is the parent of the P.
Look at your styles rendered in a codepen:
https://codepen.io/NeilWkz/pen/vaaMoO
The name and price are left-aligned, and the description is center aligned.
This is because you've used a helper class 'text-center' I assume this comes from some framework that you have not mentioned in your question. The helper class will not cascade down if you have alignment set on the h1 or h2 element, in that case you need to apply it to the actual element:
HTML:
<div class="">
<div class="card">
<img class="card-img-top" src="../../../assets/images/offer_1.jpg">
<div class="card-body">
<h1 class="text-center">{{offer.name}}</h1>
<p class="text-center">{{offer.description}}</p>
<h2 class="text-center">{{offer.price}}€</h2>
</div>
</div>
SCSS:
$font-serif: 'Playfair Display', serif;
$font-sans-serif: 'Raleway', sans-serif;
$color_price: #F96D00;
$color_description: #b8b8b8;
.card {
border-radius: 0;
//Added width & background color for demo
width: 320px;
background: azure;
.text-center {
text-align: center;
}
.card-body {
padding: 3rem;
display: block;
h1 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 26px;
display: center;
}
h2 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 22px;
color: $color_price;
}
p {
font-family: $font-serif;
line-height: 1.45;
font-size: 18px;
color: $color_description;
height: 100px;
}
}
}
Here's a working pen with the styles above:
https://codepen.io/NeilWkz/pen/gjjJpw
I would like to reproduce the following image with CSS:
Especially important is to me that both lines have equal length:
I tried to recreate it with this code (jFiddle):
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
width: 150px;
text-align: justify;
}
.box .name {
color: #fff;
font-size: 24px;
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span><br>
<span class="sub">WEBDEVELOPER
</div>
But its not quite perfect:
Is there a good way how to achieve this with CSS so that both lines get the same lengths on any device. Or is it recommended to rather use a picture for this?
You can give a try to text-align-last:justify;
Beside, to avoid setting a width, you may turn the box into a block that shrinks on its content via display:table; . You can also avoid the <br> setting spans into blocks
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
display: table;
text-align: justify;
}
span {
display: block;
text-align-last: justify;
}
.box .name {
color: #fff;
font-size: 24px;
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEBDEVELOPER</span>
</div>
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEB-DEVELOPPER</span>
</div>
<div class="box">
<span class="name">Watch Out when top too long</span>
<span class="sub">single-short-breaks!</span>
</div>
You should remove the text-align: justify; on the container (.box) and give .name some extra letter-spacing so the 2 lines line up.
Be aware that this would be completely dependent on the font settings. Another font-family, size, etc. would change the size of both lines and make it different again. If people visiting your website changed their browser font size, then they won't see exactly what you see. If you want to avoid this (as much as possible) then look into font-size resets.
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
width: 150px;
}
.box .name {
color: #fff;
font-size: 24px;
letter-spacing: .3px;
/* added */
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEBDEVELOPER</span>
</div>
So, I'm trying to have two "halves" of the navigation thing under this title page thing, one floated left, the other right.
For some reason, They're not beside each other like they should be, unless I'm doing something wrong. Code is as follows:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Landing Mockup</title>
<link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="landing-container">
Hello. I'm Charles Baker.<br />
<span id="landing-codeblock">{ I design websites. }</span>
<div id="landing-links">
<div id="landing-links-left">
Small links here.
</div>
<div id="landing-links-right">
<ul>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
CSS:
body {
margin-top: 200px;
font-family: 'Roboto Slab', serif;
}
#landing-container {
width: 1000px;
margin: 0 auto;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
#landing-codeblock {
font-family: 'Droid Sans Mono', monospace;
font-size: large;
}
#landing-links {
width: 700px;
margin: 0 auto;
border: 1px solid blue;
}
#landing-links-left {
border: 1px solid orange;
float: left;
text-align: left;
font-size: x-small;
width: 200px;
}
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right;
}
#landing-links ul {
border: 1px solid green;
list-style-type: none;
}
#landing-links ul li {
border: 1px solid red;
display: inline;
}
#landing-links li a {
display: inline-block;
padding: 5px;
}
#clear {
clear: both;
}
I've got borders temporarily so I can see where things are, but...yeah. I need to float them next to each other, I think I'm doing something entirely wrong. Any thoughts?
Behold! http://jsfiddle.net/QHeDZ/
I added display:inline-block to your .landing-links-left and .landing-links-right css and removed your floats. I think this is what you were trying to do? If not, let me know! I can fix it up.
You're getting a wedge of top (and bottom) margin as a browser default. If you inspect your unordered list in Chrome you'll see from the user agent style sheet:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You can set the margins on your list to 0 to remove this default. Also, I would recommend having a look at http://necolas.github.io/normalize.css/ which provides a nice set of default rules for common elements, taking the pain away from these kind of issues.
Just add <div id="clear"></div> before closing this div <div id="landing-links">
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right; //modify this to left(so it could be next to the other container)
}
Hope this helped you!Cheers!
Technically they are on the same line, but margin and line-height values aren't being clearly defined for better aligning. Including the following properties:
#landing-links-left { line-height: 20px; }
#landing-links ul {
margin: 0;
line-height: 20px;
}