Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Please i have make something but when I add more one line i get the error
Style code
#wrapper {
max-width: 980px;
margin: 0 auto;
padding: 0 5%;
}
#posts {
margin: 0;
padding: 0;
list-style: none;
}
#posts li {
float: left;
width: 28%;
margin: 2.5%;
background-color: #2183B9;
}
#posts li img {
max-width: 100%;
}
#posts li a{
text-decoration: none;
}
#posts li a p{
font-family: 'Gloria Hallelujah', cursive;
color: #ccc;
text-decoration: none;
margin: 0px;
padding: 5%;
font-size: 0.75em;
}
When i delete some words it's back to his place .... Please who can help me to fix the error and thank you all so much
That’s how float works.
If you want them all aligned by their top edge, then don’t use float, but display:inline-block and vertical-align:top.
If you don't mind some of the excess text being hidden you could use a fixed height and set overflow to hidden.
This is happening because the text you are including is increasing the size of the anchor tag used for the text pushing the other post down below. Make the position of the anchor tag that you are using for displaying the text absolute and fix it to the bottom of every post relative to the post bottom:0px; and set a box-sizing property on the post box so that the anchor tag if grows in size grows above and not below.
Here's complete working code for a similar example. Hope this simplifies your problem :)
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.wrapper{
width: 1200px;
margin: 0 auto;
}
.post{
display: inline-block;
margin: 2em;
position: relative;
}
.caption{
position: absolute;
bottom: 0px;
background-color: blue;
width: 100%;
padding: 0 2em;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="post">
<div class="thumbnail">
<img src="300.gif">
</div>
<div class="caption">
<p>This is the caption for the image and this one is quite long for it.</p>
</div>
</div>
<div class="post">
<div class="thumbnail">
<img src="300.gif">
</div>
<div class="caption">
<p>This is the caption for the image and this one is very very very very very long and should be taken care of.</p>
</div>
</div>
<div class="post">
<div class="thumbnail">
<img src="300.gif">
</div>
<div class="caption">
<p>This is the caption for the image</p>
</div>
</div>
<div class="post">
<div class="thumbnail">
<img src="300.gif">
</div>
<div class="caption">
<p>This is the caption for the image</p>
</div>
</div>
<div class="post">
<div class="thumbnail">
<img src="300.gif">
</div>
<div class="caption">
<p>This is the caption for the image</p>
</div>
</div>
<div class="post">
<div class="thumbnail">
<img src="300.gif">
</div>
<div class="caption">
<p>This is the caption for the image</p>
</div>
</div>
</div>
</body>
</html>
Keep in mind the images used should be optimised and should be of same sizes otherwise the code will break.
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 years ago.
I want to create header of website. When I started create it, I notice one weird behavior of text tags (from h1 to p, spans and etc.). It adds that whitespace on the side of image where text is located.
header {
padding-top: 10px;
}
header .container-fluid .row>* {
height: 8rem;
}
header .logo>* {
vertical-align: middle;
}
header .logo .img {
height: 100%;
}
header .logo .title {
display: inline-block;
padding-left: 0.5rem;
}
<header>
<div class="container-fluid">
<div class="row">
<div class="logo col-12 col-md-auto">
<img class="img" src="https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477__340.jpg">
<p class="title">Any text causes strange behavior</p>
</div>
</div>
</div>
</header>
If you still don't understand what I'm talking about, here is screenshot:
See this blue line? This is that weird whitespace.
UPD 1:
I changed padding-left: 0.5rem; to margin-left: 0.5rem; but whitespace is still here.
UPD2:
Also found a solution thanks to Matt Croak for link.
Solution is to add font-size:0 to logo block and set font-size: initial; or font-size: 16px; to header .logo .title.
It has to do with your img and your HTML being on on multiple lines. If you put your img and p HTML on the same line (no space between) it goes away. img's are rendered as display: inline-block; by default. Items that are inline-block behave like words in a sentence and therefore have inherent white space between them.
You can read more about it here.
header {
padding-top: 10px;
}
header .container-fluid .row>* {
height: 8rem;
}
header .logo>* {
vertical-align: middle;
}
header .logo .img {
height: 100%;
}
header .logo .title {
display: inline-block;
padding-left: 0.5rem;
}
<header>
<div class="container-fluid">
<div class="row">
<div class="logo col-12 col-md-auto">
<img class="img" src="https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477__340.jpg">
<p class="title">Any text causes strange behavior</p>
</div>
</div>
</div>
</header>
Remove the whitespace in your code between the paragraph and image:
header {
padding-top: 10px;
}
header .container-fluid .row>* {
height: 8rem;
}
header .logo>* {
vertical-align: middle;
}
header .logo .img {
height: 100%;
}
header .logo .title {
display: inline-block;
padding-left: 0.5rem;
}
<header>
<div class="container-fluid">
<div class="row">
<div class="logo col-12 col-md-auto">
<img class="img" src="https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477__340.jpg"><p class="title">Any text causes strange behavior</p>
</div>
</div>
</div>
</header>
Padding seems to be ok.
The so called whitespace is caused by the spaces/newline between the img and the p tag.
If you change your html format like below, the whitespace is gone.
<header>
<div class="container-fluid">
<div class="row">
<div class="logo col-12 col-md-auto">
<img class="img" src="https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477__340.jpg"><p class="title">Any text causes strange behavior</p>
</div>
</div>
</div>
</header>
I am trying to write a description below an image on a html page, but the text is automatically aligned to right side of the image.
I am a beginne, please help!
Thamks in advance!
.images {
margin-left: auto;
margin-right: auto;
width: 40%;
}
#my_freaking_id {
color: red;
font-size: 50px;
}
<h1>Pictures</h1>
<div class="images">
<img src="https://picsum.photos/200/200?random">
<p>Image 1</p>
</div>
<div class="images">
<img src="https://picsum.photos/200/200?random">
<p>Image 2</p>
</div>
<div id="my_freaking_id">
It has been a long day, without you my friend and I will tell you all about it when I see you again!<br>I hope our friendship lasts forever!
</div>
Maybe just add to css?
.images img, .images p {
display:block;
}
I want to set the height of the section based upon the child elements but unfortunately I don't know what's wrong with my code. When I try to decrease the size of the screen the content in the paragraph and the img is overflowing.
HTML
<div id="section2" class="about">
<div class="container-section">
<div class="about-content col-lg-6">
<p></p>
</div>
<div class="about-pic col-lg-2">
<img />
</div>
</div>
</div>
CSS
.about{
height: auto;
margin: 0;
}
.about .container-section{
padding: 0;
height: auto;
position: relative;
}
.about .container-section .about-content p{
padding-bottom: 15px;
font-family: 'Lato', sans-serif;
text-align: justify;
}
.about .container-section .about-pic img{
height: auto;
width: 100%;
padding-bottom: 25%;
}
Any suggestions?
Ok, it looks like you're using Bootstrap, right? And Bootstrap is adding some floats, which removes elements from the page flow, and thus the container behaves as if those elements aren't in it. Try adding a cleared div in various places and see if it solves your issue, like so:
<div id="section2" class="about">
<div class="container-section">
<div class="about-content col-lg-6">
<p></p>
</div>
<div class="about-pic col-lg-2">
<img />
</div>
</div>
<div style="clear:both;"></div>
</div>
I have an issue that I'm running into. I'm using the grid.css file. The classes that are not mentioned are empty.
So the problem is that when there are 3 columns with images that (in pixels) are realy big in the MAIN ARTICLE AREA. They go over the size of the container. And into the SIDEBAR area. How could I fix this issue?
I hope I'm clear enough, if not let me know, I fill fix it. :)
EDIT I figured out the issue. I had to add this to the css and now the images don't go over their size.
.related articles img{
width: 100%;
}
With this it works fine.
<section class="article">
<div class="row">
<!--MAIN ARTICLE AREA-->
<div class="col span-2-of-3 col-left">
<div class="related-articles">
<div class="col span-1-of-3">
<a href="#">
<img src="img/test_img.jpg" alt="test-img">
<h3>This is a test article, I'm just trying out new things and lets see how this goes.</h3>
</a>
</div>
<div class="col span-1-of-3">
<a href="#">
<img src="img/test_img.jpg" alt="test-img">
<h3>This is a test article, I'm just trying out new things and lets see how this goes.</h3>
</a>
</div>
<div class="col span-1-of-3">
<a href="#">
<img src="img/test_img.jpg" alt="test-img">
<h3>This is a test article, I'm just trying out new things and lets see how this goes.</h3>
</a>
</div>
</div>
</div>
<!--SIDEBAR STARTS-->
<div class="col span-1-of-3 col-right">
</div>
</div>
</section>
And the CSS
.row{
max-width: 1140px;
margin: 0 auto;
}
.article .col {
display: block;
float:left;
margin: 0.5% 0 0.5% 0;
}
.span-2-of-3 {
width: 66.13%;
}
.span-1-of-3 {
width: 32.26%;
}
.col-left{
border-top: 2px solid #f5f5f5;
float: left;
}
.col-right{
float: right;
/*THE HEIGHT AND COLOR IS JUST SO I KNOW HOW IT WILL LOOK*/
height:800px;
color:aqua;
}
JSfiddle:
https://jsfiddle.net/ua7o3pf9/
Corrected Code:
.col {
display: block;
float:left;
margin: 1% 0 1% 1%;
}
.span-2-of-3 {
width: 64.6%;
}
.span-1-of-3 {
width: 31.6%;
}
You calculated your widths and margins false. Fixed it for you. It must be 100% or below in total.
Edit:
Also fixed sidebar color for you: https://jsfiddle.net/ua7o3pf9/1/
Edit 2: Fixed Code for your edited question:
Fiddle:
https://jsfiddle.net/ua7o3pf9/9/
Code:
<div class="related-articles article">
You forgot to add the class article, this is why the float:left wasnt added to your cols.
Change your .col style to:
.col {
display: block;
float:left;
margin: 1% 0 1% 1%;
}
So what I'm trying to do is create a mock up for my own little website in HTML. So everything been going good until just now. What I want to do is display an image and then a title and description next to it, sort of like what youtube does.
Example:
So the way I have it right now it works perfectly if the text doesn't have to drop down to a new line.
Example of it working:
However, if one of them is too long, everything gets messed up, example of messed up:
I set up a JS fiddle to make it easier for you guys. However remember I'm designing with bootstrap so the reason the CSS is so long is because it includes the full bootstrap, however only the first 57 lines is my custom written css. Anyway, if anyone could help me so that when my title or my description is too long it will drop onto the next line like youtube does.
My HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<title>Comments</title>
</head>
<body>
<div class="logo">
<img height="70" width="200" src="/img/logo.png">
</div>
<div class="container">
<div class="leftBar">
<div class="well">
<div class="title">
<h3>Mini Title</h3>
</div>
<hr/>
<div class="contentLink">
<div class="smallContentImage">
<img src="http://i.imgur.com/zesaMhG.gif">
</div>
<div class="smallContentText">
<h5>Title Goes Here</h5>
<em>
Other Informati
</em>
</div>
</div>
</div>
</div>
<div class="rightBox">
<div class="well">
<div class="title">
<h1>Title For Content</h1>
</div>
<p> CONTENT CONTENT CONTENT </p>
</div>
</div>
</div>
</body>
</html>
MY CSS
body {
background #FAFAFA;
}
.title {
text-align: center;
}
.logo {
margin-right: auto;
margin-left: 2%;
padding-top: 2%;
}
.leftBar
{
margin-right: auto;
float: left;
width: 30%;
overflow: hidden;
}
.rightBox
{
margin-left: 0;
float: right;
width: 70%;
}
.contentLink
{
padding-left: 1%;
padding-right: 1%;
width: auto;
height: auto;
}
.smallContentImage {
width: 100px;
height: 100px;
margin-left: 0;
margin-right: auto;
float:left;
}
.smallContentText {
float: right;
width: auto;
margin-left: auto;
margin-right: 0;
width: fixed;
}
JS Fiddle: http://jsfiddle.net/BjSv8/
Thank you
There is no such thing as width:fixed. You need to make sure the widths of the two content items add up to the width of the parent.
Is there any reason you used em instead of div.
If you could use 'div' instead of 'em' and define the width , then your problem could be solved.
<div style="word-wrap:break-word;border:1px solid red; width:100px">
Other Information goes here
</div>
See this fiddle: http://jsfiddle.net/BjSv8/1/