I have the following RSS feed:
https://jsfiddle.net/yhtf36a1/
Right now, it gets displayed one below the other.
How do I use CSS to make it display two items per row, so that it looks like the following?
I tried using display:inline-block but that didn't work.
Use the following CSS:
.entry-wrapper {
float:left;
width: 48%;
background: lightblue;
margin: 1%
}
See the example here: jsfiddle.net/GillesCoeman/5e8z00z1
Hope this helps
*{font-family:arial}
.rssRow{display:flex}
.entry-wrapper{display:inline-block; margin:.25em;background:#f3f3f3; border:3px solid #f1f1f1; background:#FFF;padding:10px;border-radius:5px;}
.entry-wrapper:hover{background:#edfdff;border:3px solid #f4f4f4}
.entry-image{float:left;}
.entry-text{float:left;}
.entry-title h4{margin:0; font-size:1.5em;font-weight:bold;}
.entry-title h4 a {color:#333; text-decoration:none;}
.entry-title h4 a:hover{text-decoration:underline;}
.entry-date{color:#999; padding-bottom:.75em;font-size:.75em}
Preview at https://jsfiddle.net/itsselvam/yhtf36a1/3/
Let me know for any query on this
Related
I need to create a filmstrip kind of div which contains images in a single line without wrapping over. As a trial I am trying to create a div in which I can have text which does not wrap over. Sadly I am unable to figure out how to do it, I am not very good with CSS... Can anyone help?
So far I have done:
<style>
.filmstrip
{
background-color:silver;
padding:20px;
overflow-x:scroll;
display: inline-block;
}
</style>
<div class='filmstrip'>
This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
</div>
I want "This is a test" to come in a single line. (Like how it is in SO). However in my page, it wraps around...
I am now able to show text without scroll from help in comments section...Im adding original problem statement here about showing images without wrap
I have an array of images inside $images. I want to show these images in single line inside div. I tried following based on comments here:
<style>
.filmstrip
{
background-color:silver;
padding:20px;
overflow:scroll;
white-space: nowrap;
}
</style>
<div class='filmstrip'>
<?php
foreach($images as $image)
{
echo "<div><img src='".$image->thumbnail."'></div>";
}
?>
</div>
But this is still coming as separate lines...
Try like this: Demo
.filmstrip {
width:80%;
border:2px solid #000;
overflow:auto;
white-space:nowrap;
}
.filmstrip img {
margin:20px 10px 0 10px;
width:140px;
height:140px;
}
Updated demo without margin:
.filmstrip {
width:80%;
background-color:silver;
overflow:auto;
white-space:nowrap;
padding:20px;
}
.filmstrip img {
width:140px;
height:140px;
border:1px solid #000;
}
If you want all the text to come in a single line, then you have to add
white-space:nowrap;
To see all the text in a single line you have to add overflow: scroll
According to my knowledge this fiddle will help you.
Code
.filmstrip
{
background-color:silver;
padding:20px;
overflow-x:scroll;
display: inline-block;
width: 600px;
overflow: scroll;
white-space:nowrap;
}
<div class='filmstrip'>
This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
</div>
If you want the images to come in a single line, simply you have to add all the img tags inside the div.
By default is a inline element, so it will align in a same line, adding white-space:no-wrap, you will get all images in a same line without break.
Fiddle for image in single line.
Check this out:
https://jsfiddle.net/0cddc72t/5/
CSS
.filmstrip
{
background-color:silver;
padding:20px;
overflow-x:scroll;
display: inline-block;
width: 600px;
overflow: scroll;
white-space:nowrap;
}
.filmstrip > div {
display: inline-block;
background-color: #333;
}
Is this what you want?
I am still a novice and would appreciate any assistance you can provide.
I am trying to prevent an HTML table from exceeding the length of the page. I am currently parsing a csv with PHP and looping the array information into an HTML table.
The table is to be shown on a static 1080p screen so the table itself needs to resize by shrinking cells instead of going off the page horizontally or vertically. I dont mind how squashed the cells become as they are colour coded with CSS.
I have too many lines of code to post here so I will just post my CSS style code which I have attempted to use to contain my table.
<style>
html,body {
background-color: #F4F4F4
margin: 0;
padding: 0;
height: 100%;
border: 0;
}
table{
height:100%;
width:100%;
overflow: hidden;
white-space: nowrap;
}
td {
border: 1px solid black;
resize: both;
overflow: hidden;
}
th {
resize: both;
overflow: auto;
}
</style>
I have tried different variations of the above to no avail e.g. overflow settings, resize settings etc this is just my current test.
I do not care whether I have to use HTML, CSS, Javascript, JQuery or PHP for this. I would rather not have to completely start over however.
Try to include this for your tags:
td.wordbreak {
word-break: break-all;
width: NNNpx;
}
This should sort the problem of cells spiting out your table horizontally.
Replace the NNN by a number in pixels, that could be a fraction of the total you need.
So let's say you had only 2 columns, it would be:
table {
table-layout: fixed; width: 100%;
}
td
{
word-break: break-all;
width: 540px;
}
try to use
table {
table-layout: fixed;
width: 100%;
}
For more check Fixed Table Layouts.
Hope this will help.
Well, I have sidebar but text(in my case tables) inside sidebar are not aligned like I want.
From one .php I call another inside sidebar, like this:
<div id="sidebar2"> <?php include("tiket.php");?></div>
Here is it CSS of sidebar:
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
text-align:justify;
}
An this is how it looks:
How to put text on the left of the sidebar?
It would help a lot if you gave us the complete source code of the sidebar, or told us where it was located.
I think that the reason why the text is not aligned to the left is because you put in text-align:justify;. Remove that line.
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
}
What justify does is spread the text out evenly, which can be unhelpful if you don't have much text.
You can nest with CSS3
#sidebar2 table {
text-align: left;
}
you can read more about it over here
https://www.w3schools.com/css/css_combinators.asp
I am using a bunch of divs (created with PHP) to generate a block of clickable elements. What I need to do is apply some styles to these generic elements, rather than to specific ones, yet using the code below seems to be invalid.
#Container {
height: 80%;
width: 60%;
background-color: green;
}
#Container div:hover {
background-color: blue;
}
<div id="Container">
<div style="background-color: red; width: 100px; height: 100px;">
</div>
http://jsfiddle.net/XD2eZ/
So I am not sure if it is an issue that a generic div element cannot be styled as a sub-element AND have a :hover attribute that operates properly. I know that classes or id's can be specified to handle this, but have thousands of unique divs. I also cannot use
#Container:hover div{ background-color: blue;}
As it ALSO seems to be invalid, but I need to select the one element from a block, and not all at once.
Any ideas here? Thanks in advance.
This will work if you remove the background color from the HTML, and apply it using css:
#Container {
height: 80%;
width: 60%;
background-color: green;
}
#Container div {background-color: red;}
#Container div:hover {
background-color: blue;
}
Example: http://jsfiddle.net/XD2eZ/1/
The reasone is CSS Specificity - a style attribute rule is much more specific (stronger) than an ID + element rule.
I've having trouble understanding whats going wrong in the css on this page.
On the left sidebar there a h3 element called testimonials with a 3px green border underneath it.
http://goo.gl/L7Lio
For some reason the border goes right up to the text in the next column next to it.
However on this page which use's exactly the same css it doesn't have that problem everything is aligned in the left sidebar correctly.
http://goo.gl/oL3km
Your CSS class of the content is floatright posts and its width is 500px. The rule is set here:
.single-page-testimonial .posts {
width: 500px;
}
The CSS class of the content of the correct page is post floatright sidebar-exist (with the additional sidebar-exist class) and its width is 490px. The rule is here:
.single-page-no .post.sidebar-exist {
width: 490px;
}
So your main content is wider than the correct one 10px. I think you may miss the class sidebar-exist somewhere.
The content DIV has 490px vs 500px (here it is the space of 10px)
.post h1, .mid-title {
border-bottom: 3px solid #004732;
color: #004732;
font-size: 18px;
line-height: 30px;
margin: 10px 0;
padding: 0;
} this css style is overwriting your h3 style,dude to which your facing that problem.
Solution:
just replace margin: 10px 0; with margin: 10px;. this will solve the problem, i`ve checked in firebug :)
Happy coding :)