I am doing css/html for a school assignment, but I got stuck. I am trying to build a newsoverview but I don't know how to build this in the good/qualitative way.
Problems:
Is this a good way to put 'Laatste nieuws' in that position?
I want to get rid of the div's because I think it will be better to
use ul/li, but I don't know how I can use it in this case.
Positioning title and description of each article like the 1st
picture.
I need:
http://i.imgur.com/vz51zyA.png
I have:
http://i.imgur.com/4wTmtXu.png
<div id="newsListContainer">
<div id="newsListHeader"><h1>Laatste nieuws</h1></div>
<div class="newsListItem">
<img src="img/item3.jpg" width="100" height="75">
<h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
CSS:
#newsListContainer {
float:left;
width:100%;
background: url("img/body_bg.png") repeat-y;
}
#newsListHeader{
float:left;
width:690px;
height:40px;
margin-top:10px;
margin-bottom:10px;
border-bottom:1px solid #d6d6d6;
margin-left:133px;
}
.newsListItem {
margin-left:150px;
}
.newsListItem img{
float:left;
}
HTML UPDATED:
<div id="newsListContainer">
<div id="newsListHeader"><h1>Laatste nieuws</h1></div>
<ul><li class="newsListItem">
<img src="img/item3.jpg">
<h2> Lorem Ipsum is simply dummy text of </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</li></ul>
<ul><li class="newsListItem">
<img src="img/item3.jpg">
<h2> Lorem Ipsum is simply dummy text of </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</li></ul>
</div>
CSS UPDATED:
#newsListContainer {
float:left;
width:100%;
background: url("img/body_bg.png") repeat-y;
}
#newsListHeader{
float:left;
width:690px;
height:40px;
margin-top:10px;
margin-bottom:10px;
border-bottom:1px solid #d6d6d6;
margin-left:133px;
}
.newsListItem {
/*margin-left:150px;*/
padding-left: 115px;
}
.newsListItem img{
float:left;
width: 100px;
margin-left: -115px; /* SAME AS PADDING ABOVE */
In answer to your questions, and trying not to do your assignment for you:
Yes, the header is outside the 'list' of items which is good. Do you need the <div id="newsListHeader"> container though?
A list would be better, try it and see how you get on (<ul><li class="newsListItem">News item here</li></ul>).
This can be tricky at first and there's many ways of doing it (css html news list creation little help please). My preferred technique if I know the width of the image, is to add a padding to the .newsItemContainer and then negatively margin back the image by the same width. That means that the text will always line up along that padding line.
Code snippet:
.newsListItem {
padding-left: 115px;
}
.newsListItem img {
float: left;
width: 100px;
/* Added */
margin-left: -115px;
/* SAME AS PADDING ABOVE */
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="newsListItem">
<img src="http://placehold.it/100x75" width="100" height="75">
<h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="newsListItem">
<img src="http://placehold.it/100x75" width="100" height="75">
<h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</body>
</html>
.newsListItem img{
float:left;
margin-right:16px;
}
Related
I'm trying to create a page using css grid and flex. I have defined the grid areas and positioned them.
When I'm adding content to blog-post-list section contents goes beyond <section> the specified area.
I'm expecting 3rd and 4th blog-card boxes to go to next row rather than going across the aside. Shouldn't it act like a container if it has more content its height get increase ?
TIA
body{
color: #000;
text-align: center;
}
.content{
display:grid;
grid-template-columns: repeat(12,1fr);
grid-auto-rows: minmax(50px, auto);
grid-gap: 2px;;
max-width:960px;
margin: 0 auto;
}
.content > *{
background: #3bbced;
padding: 30px;
}
header{
grid-column: 1/13;
}
nav{
grid-column: 1/13;
}
section{
grid-column: 1/8;
grid-row: 3/9;
}
aside{
grid-column: 8 /13;
grid-row: 3/9;
}
footer{
grid-column: 1 / 13;
}
.blog-post-list{
display: flex;
}
.blog-card{
border: 1px solid black;
padding: 20px;
margin: 15px;
min-width: 38%;
}
<div class="content">
<header>
header
</header>
<nav>
Navigation
</nav>
<section>
<div class="blog-post-list">
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
</div>
</section>
<aside>
aside
</aside>
<footer>
Footer
</footer>
</div>
You should change this part with flex-wrap. If you want to have all in same row then you should give smaller percentage for child elements
.blog-post-list{
display: flex;
flex-wrap: wrap;
}
body{
color: #fff;
text-align: center;
}
.content{
display:grid;
grid-template-columns: repeat(12,1fr);
grid-auto-rows: minmax(50px, auto);
grid-gap: 2px;;
max-width:960px;
margin: 0 auto;
}
.content > *{
background: #3bbced;
padding: 30px;
}
header{
grid-column: 1/13;
}
nav{
grid-column: 1/13;
}
section{
grid-column: 1/8;
grid-row: 3/9;
}
aside{
grid-column: 8 /13;
grid-row: 3/9;
}
footer{
grid-column: 1 / 13;
}
.blog-post-list{
display: flex;
flex-wrap: wrap;
}
.blog-card{
border: 1px solid black;
padding: 20px;
margin: 15px;
min-width: 38%;
}
<div class="content">
<header>
header
</header>
<nav>
Navigation
</nav>
<section>
<div class="blog-post-list">
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
</div>
</section>
<aside>
aside
</aside>
<footer>
Footer
</footer>
</div>
My issues:
I am creating a webiste with articles and I have to make that site for responsive.
I am using CSS GRID for my site. I have a problem on mobile devices.
I have two types of articles (picture on the left and picture on the right). But when viewed on mobile devices, these two pictures are not under the articles. The image from the first articles should be at the bottom.
#news_content {
padding: 215px 15px 0px 15px;
}
#news_content>.row {
grid-template-columns: repeat(12, 8.533333%);
}
#news_content>.row>.col-1 {
grid-column: span 6;
}
#news_content>.row>.col-1>.col-1-padding {
padding: 20px 0px 0px 30px;
}
#news_content>.row>.col-2 {
grid-column: span 6;
}
#news_content>.row>.col-2>.col-2-padding {
padding: 20px 0px 20px 30px;
}
#media (max-width: 720px) {
#news_content>.row>.col-1,
#news_content>.row>.col-2 {
grid-column: span 12;
}
}
#media (max-width: 720px) {
#news_content {
padding: 50px 45px 0px 15px;
}
}
<div id="news_content" class="grid">
<div class="row">
<div class="col-1">
<div class="col-1-padding">
<img src="https://via.placeholder.com/300x200" id="Image_style">
</div>
</div>
<div class="col-2">
<div class="col-2-padding">
<h1>Lorem Lorem?</h1>
<p class="news">
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
</div>
</div>
<div id="news_content" class="grid">
<div class="row">
<div class="col-1">
<div class="col-1-padding">
<h1>Lorem Lorem?</h1>
<p class="news">
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
<div class="col-2">
<div class="col-2-padding">
<img src="https://via.placeholder.com/300x200" id="Image_style">
</div>
</div>
</div>
</div>
<div id="news_content" class="grid">
<div class="row">
<div class="col-1">
<div class="col-1-padding">
<img src="img/poco.jpg" id="Image_style">
</div>
</div>
<div class="col-2">
<div class="col-2-padding">
<h1>Lorem Lorem?</h1>
<p class="news">
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
</div>
</div>
<div id="news_content" class="grid">
<div class="row">
<div class="col-1">
<div class="col-1-padding">
<h1>Lorem Lorem?</h1>
<p class="news">
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
<div class="col-2">
<div class="col-2-padding">
<img src="img/video.jpg" id="Image_style">
</div>
</div>
</div>
</div>
#news_content
{
padding: 215px 15px 0px 15px;
}
#news_content > .row
{
grid-template-columns: repeat(12, 8.533333%);
}
#news_content > .row > .col-1
{
grid-column: span 6;
}
#news_content > .row > .col-1 > .col-1-padding
{
padding: 20px 0px 0px 30px;
}
#news_content > .row > .col-2
{
grid-column: span 6;
}
#news_content > .row > .col-2 > .col-2-padding
{
padding: 20px 0px 20px 30px;
}
#media (max-width: 720px)
{
#news_content > .row > .col-1, #news_content > .row > .col-2
{
grid-column: span 12;
}
}
#media (max-width: 720px)
{
#news_content
{
padding: 50px 45px 0px 15px;
}
}
I would like to make my page responsive, on a smaller screen.
I haven't used bootsrtap for this, here is how it is now. Probably I should but not sure if I can :
Is it possible to use bootstrap for this absolute positioning?
Thanks a lot, I hope it s clear enough with the drawings
<div class="container-map">
<div class="top-container">
<div class="map-background">
</div>
<div class="map-filter">
</div>
</div>
<div class="map-search-results">
</div>
</div>
and the css
.top-container{
height:100%;
position:relative;
}
.map-background {
z-index: 10;
width: 100%;
height: 100%;
}
.map-filter {
z-index: 1000;
top:5%;
left:7%;
min-height:50px;
min-width:200px;
position: absolute;
}
.map-search-results{
width: 100%;
}
And here is what I would like:
This might be helpful.
body, html{
padding:0;
margin:0;
}
.top-container{
height:100%;
position:relative;
}
.map-background {
z-index: 10;
width:100%;
height: 500px;
background:lightblue;
}
.map-filter {
z-index: 1000;
top:5%;
left:7%;
min-height:50px;
min-width:200px;
position: absolute;
border:5px solid red;
}
.map-search-results{
padding:20px;
border:5px solid orange;
}
#media (max-width:767px){
.map-filter{
position: relative;
left:0;
top:0;
margin-top: 20px;
margin-bottom: 20px;
padding:20px;
}
}
<div class="container-map">
<div class="top-container">
<div class="map-background">
</div>
<div class="map-filter">
<h2>map filetr</h2>
</div>
</div>
<div class="map-search-results">
<h2>map search</h2>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.map-bg {
background: url('https://www.ryansleeper.com/wp-content/uploads/2018/05/Tableau-Sales-by-State-Symbol-Map-with-Background-Map.png');
background-size: cover;
padding: 100px 20px;
}
.key-results {
padding: 40px 20px;
}
#media screen and (max-width: 767px) {
.map-bg {
background: none !important;
padding: 40px 20px !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<section class="map-bg">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-lg-6 col-12">
<p>
What is Lorem Ipsum?
<br>
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
</section>
<section class="key-results">
<div class="container">
<div class="row">
<div class="col-12">
<p>
What is Lorem Ipsum?
<br>
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
</section>
</body>
</html>
If you need that map background on small devices just remove the media query.. Hope it'd help :)
I am styling a list outputted by a CMS. I can only insert classes on the outer div. Structure of HTML if fixed.
I used before/after trick in order to give a font-awesome icon as a bullet point but when the viewport is constrained and the point overflows to the second line it can look bad, especially when just one or two words overflow.
Is there any way I can maintain the indent for the overflow text?
Here is my markup:
.green-tick-list li:before {
font-family: 'FontAwesome';
content:"\f00c";
margin:0 5px 0 -15px;
color: #33cc33;
}
.green-tick-list li{
list-style: none;
font-size: 1em;
line-height: 1.6em;
}
#responsive{
width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="fl-module fl-module-rich-text fl-animation fl-slide-right green-tick-list fl-node-56ec97eb4d7e1 fl-animated" data-node="56ec97eb4d7e1" data-animation-delay="0.5">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<ul>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply.</li>
<li>Lorem Ipsum is simply dummy text of the printing.</li>
<li>Lorem Ipsum.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
</ul>
</div>
</div>
</div>
<h3>Simulating restricted viewport</h3>
<div id="responsive">
<div class="fl-module fl-module-rich-text fl-animation fl-slide-right green-tick-list fl-node-56ec97eb4d7e1 fl-animated" data-node="56ec97eb4d7e1" data-animation-delay="0.5">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<ul>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply.</li>
<li>Lorem Ipsum is simply dummy text of the printing.</li>
<li>Lorem Ipsum.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
</ul>
</div>
</div>
</div>
</div>
I'd like the indent of the overflow text to be in line with the start start of the text. Is that possible?
Ok so I set my wordpress content to all float left of each other. So it will be 3 columns.
Now when the title of one div is longer, the boxes are all over the place. Here is what I mean (see image below)
Notice that the james brown title is longer and the other two boxes fall way down.
How can I get them to float up no matter how long a title is.
I have tried vertical-align:top; but that doesn't work
You can get it by two ways.
If you want your boxes top-aligned on each row : simply use a .clear element.
h2 {
font-weight: bold;
clear: left;
}
.box {
width: 50px;
min-height: 50px;
background: #ccc;
margin: 3px;
padding: 3px;
float: left;
}
.clear {
clear: both;
height: 0px;
}
<h2>Without columns</h2>
<div class="box">1 Lorem Ipsum</div>
<div class="box">2 Lorem Ipsum Lorem Ipsum</div>
<div class="box">3 Lorem Ipsum</div>
<p class="clear"> </p>
<div class="box">4 Lorem Ipsum Lorem</div>
<div class="box">5 Lorem Ipsum</div>
<div class="box">6 Lorem Ipsum</div>
<p class="clear"> </p>
<div class="box">7 Lorem Ipsum</div>
<div class="box">8 Lorem Ipsum</div>
If you want your boxes stucked to the above one, use colums (you'll need to modify a little bit your PHP code)
h2 {
font-weight: bold;
clear: left;
}
.box {
width: 50px;
min-height: 50px;
background: #ccc;
margin: 3px;
padding: 3px;
float: left;
}
.column {
width:60px;
float: left;
}
<h2>With columns</h2>
<div class="column">
<div class="box">1 Lorem Ipsum</div>
<div class="box">4 Lorem Ipsum Lorem</div>
<div class="box">7 Lorem Ipsum</div>
</div>
<div class="column">
<div class="box">2 Lorem Ipsum Lorem Ipsum</div>
<div class="box">5 Lorem Ipsum</div>
<div class="box">8 Lorem Ipsum</div>
</div>
<div class="column">
<div class="box">3 Lorem Ipsum</div>
<div class="box">6 Lorem Ipsum</div>
</div>
Using the new nth-child() selector, you can do this:
div:nth-child(3n+1) {
clear:left;
}
This way, the 1st, 4th, 7th, etc, children will move the left of the box 'clearing' all other elements.
The advantage of using this method is that you can adjust the layout responsively. For example, on mobiles you can have two in every row, on large desktops 4 in every row. There's also no non-semantic markup.
The disadvantage is that it doesn't work in IE before version 9, but you can get around that with JavaScript. e.g. jQuery:
// polyfill for browsers that don't support nth-child() CSS selectors
$('.box:nth-child(3n+1)').style('clear', 'left');
See: http://jsfiddle.net/rVHgR/