How can i match the height of the h1 with the p tag?
I want to set the h1 to the left followed by the p on the same base line
.row_cont {
float: left;
width: 33.33333333%;
overflow: hidden;
border-left: 0.5px solid rgba(0, 0, 0, 0.37);
padding-right: 15px;
padding-left: 15px;
}
.row_cont h1 {
font-size: 70px;
float: left;
margin-right: 10px;
}
.row_cont p {
font-size: 12px;
margin: 0;
padding: 0;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="page_container">
<div class="row">
<div class="col-md-12">
<div class="row_cont">
<h1>1</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="row_cont">
<h1>2</h1>
<p>Aenean massa. Cum sociis natoque penatibus </p>
</div>
<div class="row_cont">
<h1>3</h1>
<p>Cras dapibus. Vivamus elementum semper nisi. </p>
</div>
</div>
</div>
</div>
I've tried vertical-align but it's not working, here is my fiddle
you could use the sibling css selectors...
h1, h1 + p {
line-height: 1.5;
font-size: 2rem;
font-weight: bold;
display: inline;
}
<h1>Title</h1><p>Paragraph</p>
EDIT:
this will only be possible by trial and error with the vaules, since the line (and the highest characters in a font) extends above the top of the digits you are using in H1. Basically, use display: inline-block; and vertical-align: top on both containers, then adjust the margin-top settings of both:
.h1_cont, .p_cont {
display: inline-block;
vertical-align: top;
}
.h1_cont h1 {
margin-top: 0;
}
.p_cont p {
margin-top: 5px;
}
https://fiddle.jshell.net/rk7nap5u/3/
Related
I could get the result I want in many other ways, but I want to understand if it is possible to fix the layout while keeping the grid system.
Check the result first to get a better understanding
$(document).ready(function() {
$('#opt1').on('click', function() {
$('.item').css('grid-template-columns', 'minmax(110px, 1fr) auto');
});
$('#opt2').on('click', function() {
$('.item').css('grid-template-columns', 'minmax(110px, 1fr) max-content');
});
$('#opt3').on('click', function() {
$('.item').css('grid-template-columns', 'auto 1fr');
});
});
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px 25px;
margin-top: 25px;
}
.item {
position: relative;
display: grid;
grid-template-columns: minmax(110px, 1fr) auto;
background-color: #2f3138;
color: #ffffff;
padding: 15px;
}
.description {
display: grid;
grid-template-rows: auto 25px;
}
.price {
width: 100%;
font-size: 22px;
line-height: 25px;
text-align: right;
}
/* styles not important */
.item::before {
position: absolute;
font-family: monospace;
font-size: 18px;
font-weight: bold;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
border: solid 5px #2f3138;
top: -8px;
right: -8px;
}
.item:nth-child(1)::before {
content: "1";
}
.item:nth-child(2)::before {
content: "2";
}
.item:nth-child(3)::before {
content: "3";
}
.item:nth-child(4)::before {
content: "4";
}
input[type="button"] {
background-color: #000000;
border: solid 2px #2f3138;
color: #ffffff;
outline: none;
margin: 5px 15px 5px 0px;
padding: 5px 15px 8px 15px;
font-family: monospace;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="opt1" type="button" value="Original: minmax(110px, 1fr) auto" />
<input id="opt2" type="button" value="option 2: minmax(110px, 1fr) max-content" />
<input id="opt3" type="button" value="option 3: auto 1fr" />
<div class="container">
<div class="item">
<img src="https://placeimg.com/100/120/any" />
<div class="description">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet mauris semper, interdum lacus a, fermentum risus.
</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<div class="description">
<span>Short Text</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/100/121/any" />
<div class="description">
<span>Short Text</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<div class="description">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet mauris semper, interdum lacus a, fermentum risus.
</span>
<div class="price">€ 3.33</div>
</div>
</div>
</div>
The layout represents a list of items. The HTML is generated on the server side, and I can have an item with the image and an item without an image. My goal is to get all items with the text always left aligned and the price on the right.
The key is this grid-template-columns: minmax (110px, 1fr) auto; the text will be auto with the image and 1fr without image. It always occupies the space it needs, but in item 3 the text is short and space it needs is little, I would like it to extend as in item 1.
The javascript part to show some attempts that still generate non optimal results.
I hope I was clear.
Thank you
Rely on implicit grid creation. Define your template for the text and price only then an extra column will be created for the image if there:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-top: 25px;
}
.item {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-auto-columns: 110px; /* this is the width of the extra column */
background-color: #2f3138;
color: #ffffff;
padding: 15px;
}
img {
grid-column-end:-2; /* create an implicit column at the beginning */
}
.description {
display: grid;
grid-template-rows: auto 25px;
}
.price {
font-size: 22px;
line-height: 25px;
text-align: right;
}
/* styles not important */
.item::before {
position: absolute;
font-family: monospace;
font-size: 18px;
font-weight: bold;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
border: solid 5px #2f3138;
top: -8px;
right: -8px;
}
.item:nth-child(1)::before {
content: "1";
}
.item:nth-child(2)::before {
content: "2";
}
.item:nth-child(3)::before {
content: "3";
}
.item:nth-child(4)::before {
content: "4";
}
input[type="button"] {
background-color: #000000;
border: solid 2px #2f3138;
color: #ffffff;
outline: none;
margin: 5px 15px 5px 0px;
padding: 5px 15px 8px 15px;
font-family: monospace;
cursor: pointer;
}
<div class="container">
<div class="item">
<img src="https://placeimg.com/100/120/any" />
<div class="description">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet mauris semper, interdum lacus a, fermentum risus.
</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<div class="description">
<span>Short Text</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/100/121/any" />
<div class="description">
<span>Short Text</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<div class="description">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet mauris semper, interdum lacus a, fermentum risus.
</span>
<div class="price">€ 3.33</div>
</div>
</div>
</div>
image
So I have a div full of main article content with a width of 600px and I would like to have these links as well at the side, I imagine it would be in the same div but I can't seem to get the right effect and need some help with this.
Thanks a lot.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
<div id="pagewrap">
<div id="logos">
<img id="logo" src="img/logo.png">
<h1 id="name">Company Name</h1>
<img class="socialmedia" src="img/facebook.png">
<img class="socialmedia" src="img/twitter.png">
<img class="socialmedia" src="img/googleplus.png">
</div>
<div id="header">
<div id="menu-outer">
<div class="table">
<ul id="horizontal-list">
<li>Home</li>
<li>eBooks</li>
<li>Magazines</li>
<li>Movies</li>
<li>Help</li>
<li>Login</li>
</ul>
</div>
</div>
</div>
<div id="content">
<h2>Lorem Ipsum Dolor Sit</h2>
<p id="article-information">posted on 15 May 2015 by Author</p>
<img id="main-article-image" src="img/placeholder.png">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fermentum. Integer
fringilla. Integer fringilla. Pellentesque acturpis. Sed elementum, felis quis porttitor
sollicitudin, augue nulla sodales sapien, amet posuere quam purus at lacus. Nam id neque. Morbipulvinar nulla sit amet nisl. Etiam pharetra lacus sed velit
imperdiet bibendum. ed quis elit. In hac habitasse platea dictumst. Maecenas
justo. Donec interdum vestibulum libero. Nam laoreet dui sed
magna. Nam consectetuer mollis dolor. Aenean ligula.
liquam sed erat. Donec interdum vestibulum libero. Mauriset dolor.</p>
<div id="more-links-list">
<p>list</p>
<p>items</p>
<p>lol</p>
</div>
</div>
<div id="sidebar">
<h3>A guide to snoopsetting</h3>
<img class="aside-images" src="img/placeholder.png">
<h3>Welcome to the Surveillance State</h3>
<img class="aside-images" src="img/placeholder.png">
</div>
<div id="footer">
</div>
</div>
</bo
dy>
CSS
body {
font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
color: #669;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#logo {
width: 20%;
height: auto;
position: relative;
right: 25px;
top: 50px;
}
#name {
position: relative;
bottom: 60px;
left: 170px;
font-style: italic;
font-size: 55px;
height: 30px;
}
.socialmedia {
position: relative;
width: 8%;
bottom: 155px;
height: auto;
float: right;
}
#main-article-image {
width: 600px;
height: 450px;
}
.aside-images {
width: 340px;
height: 255px;
}
#more-links-list {
display: inline;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
padding: 5px;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#logos {
height: 160px;
}
#header {
height: 50px;
}
#content {
position: relative;
width: 600px;
float: left;
text-align: justify;
}
#more-links-list {
float:right;
padding: 10px;
margin-left:10px;
margin-bottom:10px;
background:#ddd;
}
#sidebar {
width: 340px;
float: right;
position: relative;
bottom: 34px;
}
#footer {
clear: both;
width: auto;
height: 100px;
}
#article-information {
margin: 0px;
}
h2 {
margin: 0px;
padding-top: 56px;
}
h3 {
margin: 0px;
padding-top: 38px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
width: 16.65%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
#media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
#media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
#media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
/* border & guideline (you can ignore these) */
#header, #content, #sidebar {
margin-bottom: 5px;
}
#footer {
background-color: #eee;
border-style: solid;
border-width: 1px;
}
You can do this by placing a div with float:right; style inside the div that holds your content (article text), I created this example for you:
https://jsfiddle.net/davoscript/tjf56jLw/4/
<p>
<!-- The floating box -->
<div id="more-links-list" style="float:right;">
<p>list</p>
<p>items</p>
<p>lol</p>
</div>
<!-- The article content -->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fermentum. Integer...
</p>
Let me know if that works.
You should probably put the links into an <aside>. This could go below the code for the text in your div and then styled with either a float or positioning. It would then be a matter of getting your styling to allow the text to wrap under the links.
I am using Bootstrap with a sticky footer and off-canvas menu. Sticky footer works fine on desktop view, but footer begins to overlap content on mobile view. I think it is due to the .row-offcanvas position being set to relative on mobile media query. If I remove the offcanvas menu the sticky footer works as expected on mobile devices. The other issue is when you scroll down in mobile view white space appears under the footer.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/master-simple.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<header>
<div class="container">
<div class="row">
<div class="col-xs-4 headerLinks">
Coverage Details
<div id="drawerNavigationID" data-toggle="offcanvas" class="hidden-sm">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4 text-right headerLinks">
<!-- Click to call on Mobile Device -->
Contact Us
</div>
</div>
</div>
</header>
<!-- Off Canvas Menu -->
<div class="container">
<div class="row">
<div class="col-sm-6 sidebar-offcanvas visible-xs">
<ul>
<li>Coverage Details</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<!-- Page Content -->
<div class="container mainWrapper">
<div class="row">
<div class="col-md-10 col-centered" id="confirmationWrapper">
<h2 class="noBorderBottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet tempor nisl, ut rutrum lacus vulputate vel.</h2>
<h3>CLAIM NUMBER: 12345678954</h3>
<p class="claimNumberText">Nulla libero enim, consequat at pulvinar eu, ultrices a risus.</p>
<p>Nulla libero enim, consequat at pulvinar eu, ultrices a risus. Mauris bibendum enim non magna maximus, non tempor lacus lacinia. Fusce vestibulum tincidunt vulputate. Suspendisse eu erat et neque facilisis consequat id in quam. Cras convallis massa at ornare hendrerit.</p>
<div class="row text-center">
Shop
</div>
</div>
</div>
</div><!-- End Page Content -->
<footer>
<div class="container">
<ul>
<li>Terms of Use | </li>
<li>Privacy Policy</li>
</ul>
<p>© 2015 ANulla libero enim</p>
</div>
</footer>
</div><!-- End Container-fluid Row -->
</div><!-- End Container-fluid -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/offcanvas.js"></script>
</body>
</html>
CSS:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 196px;
}
* {
font-weight: normal!important;
margin: 0;
padding: 0;
outline: 0;
outline-style: none;
}
header {
font-family: 'aig_futura_medregular', aig_futura_medregular, Arial, Helvetica, sans-serif;
position: absolute;
top:0;
z-index: 100;
height: 92px;
width: 100%;
padding-top: 15px;
color: #fff;
background-color: rgba(0,164,228,0.9);
}
header a {
font-family: "aig_futuraregular", Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
text-transform: uppercase;
color: #fff!important;
}
header a:hover {
border-bottom: 1px solid #fff;
}
header .headerLogo {
width: 116px;
height: 63px;
cursor: pointer;
background: url(../img/aigLogo.png) no-repeat center bottom;
}
.headerLinks {
margin-top: 20px;
}
footer {
font-size: 14px;
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 186px;
padding: 40px 20px 20px;
color: #fff;
background-color: #252525;
}
footer ul {
margin: 0 0 20px;
padding: 0;
list-style: none;
}
footer ul li {
display: inline;
}
footer li a {
color:#fff;
}
.mainWrapper {
margin-top: 92px;
}
#media screen and (max-width:768px){
#drawerNavigationID{
padding-left: 10px;
}
#drawerNavigationID span {
display: block;
width: 25px;
height: 3px;
background: #fff;
margin-bottom: 7px;
}
.row-offcanvas {
position: relative;
bottom: 0;
min-height: 100vh;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-left .sidebar-offcanvas {
left: -85%;
padding: 0 0 0 20px;
background-color: #54565b;
}
.row-offcanvas-left .sidebar-offcanvas ul li {
font-size: 18px;
padding: 15px;
text-transform: uppercase;
border-bottom: 1px solid #696b6f;
}
.row-offcanvas-left .sidebar-offcanvas a {
text-decoration: none;
color: #ffffff;
}
.row-offcanvas-left.active {
left: 85%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
bottom:0;
width: 85%;
}
}
I have a block of code that is solid. Works fine. Except for the footer of my site. No idea why but the heading bars are not showing for the footer but they are everywhere else?
here is a pen of the working code
http://codepen.io/VincentStephens/pen/EjyJKP
Here is a screenshot of the not working site:
https://www.dropbox.com/s/y3oxrvzvdvyaai6/Screen%20Shot%202015-05-19%20at%2019.07.47.png?dl=0
This works by creating a :before element. Putting the menu text into a span, then using z-index to position the span on top of the :before.
You can see the element there (see photo), everything is the same but just won't show unless I change the z-index to 0 or higher but then the line is above the heading text in the span???
h1.heading {
color: $light-gold;
text-transform: uppercase;
font-size: 32px;
font-weight: 300;
line-height: 40px;
font-family: SourceSansPro;
span {
background-color: $golden-black;
display: inline-block;
z-index: 1;
padding-right: 10px;
}
}
h1.heading:before {
content: "";
background-color: $light-gold;
display: block;
position: relative;
top: 23px;
width: 100%;
height: 6px;
z-index: -1;
}
HTML - working
<h1 class="heading"><span>The Team</span></h1>
HTML - Footer, not working
<div class="fluid-container footer">
<footer class="container">
<div class="col-lg-4">
<h1 class="heading"><span>About</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bestiarum vero nullum iudicium puto. Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; De illis, cum volemus. Duo Reges: constructio interrete. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere.</p>
</div>
<div class="col-lg-4">
<h1 class="heading"><span>Address</span></h1>
<p class="address">
address<br>
</p>
<p class="address">
Tell: 0207 374 6141 <br>
Email: enquiries#company.com
</p>
</div>
<div class="col-lg-4">
<h1 class="heading"><span>Connect</span></h1>
<img src="img/social-media.png" width="186" height="46">
<h1>Payment Options</h1>
<img src="img/payment-cards.png" width="267" height="56">
</div>
</footer>
</div>
Thanks for the moment on sanity.... it was indeed a position issue.
The footer also has a background colour. so that entire element needed to have a position: relative; and z-index: -1; added to it.
full code for anyone else in same situation:
SCSS - wil need compiling
.fluid-container.footer {
position: relative;
z-index: -1;
background-color: $light-golden-black;
footer {
h1.heading {
color: $light-gold;
text-transform: uppercase;
font-size: 32px;
font-weight: 300;
line-height: 40px;
font-family: SourceSansPro;
position: relative;
span {
background-color: $light-golden-black;
display: inline-block;
z-index: 1;
padding-right: 10px;
position: relative;
}
}
h1.heading:before {
content: "";
background-color: $light-gold;
display: block;
position: absolute;
top: 23px;
width: 100%;
height: 6px;
z-index: -1;
}
}
}
Using the following markup, I'm creating an image with two floated text overlays, one for the heading and one for the summary text. It's rendering how I wish and I'm able to use the entire image as well as the headline & summary to access the link except for the area immediately to the right of the 'headline' up to the end of the 'summary'. This happens in all browsers (except IE9 and lower). Any ideas why and how I can get around it?
HTML:
<div class="image">
<img src="Assets/Images/Picture.jpg" alt="Picture" />
<div class="overlay">
Headline
Summo eirmod appareat ex mel. Vim odio error labores ex. Mea alii abhorreant et. Ad has nominati constituam. Sit falli nominati suavitate in.
</div>
</div>
CSS:
body {
border: 0;
color: #5B6064;
font-family: Helvetica, Arial, Sans-Serif;
font-size: .75em;
line-height: 1.6em;
margin: 0;
padding: 0;
background-color: #a5a5a5;
}
a {
text-decoration: none;
color: #5B6064;
}
a:visited {
text-decoration: none;
}
img {
border: 0;
}
.image {
position: relative;
width: 100%;
/* For IE6 */
display: block;
overflow: hidden;
}
.overlay {
position: absolute;
bottom: 10px;
left: 0;
display: block;
}
.headline {
color: #FFF;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: #e87b10;
/* Fallback for older browsers */
background: rgba(232,123,16,0.8);
padding: 10px;
float: left;
clear: left;
}
.summary {
max-width: 350px;
margin-top: 3px;
color: #FFF;
font: 14px/14px Helvetica, Sans-Serif;
letter-spacing: 0;
background: #e87b10;
/* Fallback for older browsers */
background: rgba(232,123,16,0.8);
padding: 10px;
float: left;
clear: left;
}
.summary a {
color: #FFF;
}
I'd wrap the whole thing in an a tag (cleaner code). You would need to adjust a bit of your css.
EDIT
I changed the div elements to span so it is syntactically correct (thanks for the reminder Phrogz). Since your css already had display: block for the div elements, changing them to span is not an issue.
<a href="Default.aspx">
<span class="image">
<img src="Assets/Images/Picture.jpg" alt="Picture" />
<span class="overlay">
<span class="headline">Headline</span>
<span class="summary">Summo eirmod appareat ex mel. Vim odio error labores ex. Mea alii abhorreant et. Ad has nominati constituam. Sit falli nominati suavitate in.</span>
</span>
</span>
</a>
The headline is being floated left. If you remove the float and add display:block; to the anchor, it will take up the full image width.