This is kind of hard to explain but I'm trying to place a text next to another text. A picture is worth a thousand words so here's what I'm trying to achieve.
Here's a picture of what it should look like
http://imgur.com/hc3dNJx
http://i39.tinypic.com/24kxft3.jpg
And this what I have so far. As you can see, the text that I want to place next to this text is not where it should be. I'm talking about the bold text that should be on right "9.1, Date, Author".
JSFiddle
http://jsfiddle.net/NmUaX/20/
HTML
<li class="post" >
<article class="in-column" style="height:300px;"> <p class="article-title" style="font-size:26px; padding-bottom:10px;">Grumpy Cat</p><img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" height="200" width="300" style="float:left; padding-right:20px;">
<p class="excerpt" style="width:700px; line-height:20px;">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism. Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism.</p>
<p class="excerpt" style="float:right; font-size:70px; font-family:Segoe UI;"><b>9.1</b></p>
<p class="excerpt" style="float:right; font-size:14px; font-family:Segoe UI;"><b>Date: </b>2 June 2012<br/><b>Author: </b> John Smith</p>
</article>
</li>
</section>
</section>
CSS
article.in-column {
border-bottom: 1px solid #dddddd;
text-align: left;
padding-left: 25px;
padding-right: 25px;
padding-top: 15px;
}
article.in-column .excerpt {
color: #2f2f2f;
font-size: 11px;
margin: 0px;
padding-bottom: 5px;
}
p.article-title{
line-height: 19px;
margin: 5px 0px;
color: #151515;
font-weight:bold;
font-size:16px;
}
that content <p> Element you need to give width:500px; float:left
and the bold text 9.1 you need to give a line-height:50px
Check this fiddle http://jsfiddle.net/NmUaX/21/
I tried replacing your HTML (and some CSS) on the right-floating element:
<div style="float:right;">
<div class="excerpt" style=" font-size:70px; font-family:Segoe UI;">
<b>9.1</b>
</div>
<div class="excerpt" style="font-size:14px; font-family:Segoe UI;">
<b>Date: </b>2 June 2012
<br/><b>Author: </b> John Smith
</div>
</div>
if you want to float an element to the right top, it would be best to place it before the article content. Also, it would be best to wrap both elements (the 9.1 and the date) into one container before floating them to the right.
Related
I'm trying to make a little indie game site, and I'd like to make the section of each entry that contains the title and tags of the game a lighter green than the portion holding the description and picture.
body {
margin: 0;
padding-top: 150;
padding-bottom: 0;
}
.fixed-header {
width: 100%;
position: fixed;
background: #75b478;
color: black;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: large;
top: 0;
z-index: 1;
margin: 0;
}
.container {
width: 100%;
background-color: #589c5b;
overflow: auto;
margin: 0;
}
nav a {
color: rgb(255, 255, 255);
text-decoration: none;
padding: 5px 35px 10px;
display: inline-block;
width: 20%;
height: 25px;
line-height: 25px;
margin: 0;
}
a:link, a:visited, a:hover, a:active {
text-decoration: none;
color: rgb(255, 255, 255);
}
article {
background-color: #67aa69;
text-align: center;
width: 30%;
padding: 2;
position: relative;
border-radius: 10%;
}
.section {
text-align: center;
margin-top: 50px;
font-family: 'Andika', sans-serif;
}
.tags {
font-style: italic;
font-family: 'Source Sans Pro', sans-serif;
}
.games {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 50px;
margin-bottom: 50px;
}
img {
width: 100%;
height: 250px;
border-radius: 15%;
}
p {
font-family: 'Lato', sans-serif;
}
h2 {
padding-left: 2px;
padding-right: 2px;
}
<DOCTYPE! html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="en-US">
<head>
<link rel="stylesheet" href="page.css">
<title>Indie Games List</title>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital#1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Andika:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div class="fixed-header">
<h1>Indie Games</h1>
<div class="container">
<nav>
To Play
Reviews
Indie-x
Favorites
</nav>
</div>
</div>
<h1 class="section" id="platformers">Platformers</h1>
<div class="games">
<article>
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p>
<hr>
<p>"Forge your own path in Hollow Knight! An epic action adventure through a vast ruined kingdom of insects and heroes. Explore twisting caverns, battle tainted creatures and befriend bizarre bugs, all in a classic, hand-drawn 2D style."</p>
<img src="hollow-knight.png">
</article>
<article>
<h2>Celeste</h2>
<p class="tags">Difficult, Amazing Soundtrack</p>
<hr>
<p>"Help Madeline survive her inner demons on her journey to the top of Celeste Mountain, in this super-tight platformer from the creators of TowerFall. Brave hundreds of hand-crafted challenges, uncover devious secrets, and piece together the mystery of the mountain."</p>
<img src="celeste.png">
</article>
<article>
<h2>Ori and the Blind Forest/Will of the Wisps</h2>
<p class="tags">Amazing Soundtrack, Metroidvania</p>
<hr>
<p>"Ori and the Blind Forest tells the tale of a young orphan destined for heroics, through a visually stunning action-platformer crafted by Moon Studios for PC."</p>
<img src="ori.png">
</article>
</div>
<div class="games">
<article>
<h2>Cuphead</h2>
<p class="tags">Difficult, Hand-Drawn</p>
<hr>
<p>"Cuphead is a classic run and gun action game heavily focused on boss battles. Inspired by cartoons of the 1930s, the visuals and audio are painstakingly created with the same techniques of the era, i.e. traditional hand drawn cel animation, watercolor backgrounds, and original jazz recordings."</p>
<img src="cuphead.png">
</article>
</div>
<hr>
<h1 class="section" id="horror">Horror</h1>
<div class="games">
<article>
<h2>Omori</h2>
<p class="tags">Psychological Horror, RPG, Amazing Soundtrack</p>
<hr>
<p>"Explore a strange world full of colorful friends and foes. When the time comes, the path you’ve chosen will determine your fate... and perhaps the fate of others as well."</p>
<img src="omori.png">
</article>
<article>
<h2>Needy Streamer Overload</h2>
<p class="tags">Psychological Horror, Visual Novel, Streaming</p>
<hr>
<p>"NEEDY STREAMER OVERLOAD is a “multi-ending ADV” depicting daily life with “OMGkawaiiAngel”, a young girl with a rather extreme need for approval attempting to become the #1 “Internet Angel” (streamer)."</p>
<img src="nso.png">
</article>
<article>
<h2>Little Nightmares 1 & 2</h2>
<p class="tags">Psychological Horror, Platformer, Puzzle</p>
<hr>
<p>"Immerse yourself in Little Nightmares, a dark whimsical tale that will confront you with your childhood fears! Help Six escape The Maw – a vast, mysterious vessel inhabited by corrupted souls looking for their next meal."</p>
<img src="ln.png">
</article>
</div>
<div class="games">
<article>
<h2>Sally Face</h2>
<p class="tags">Psychological Horror, Hand-Drawn, Mystery</p>
<hr>
<p>"Delve into a dark adventure following the boy with a prosthetic face and a tragic past. Unravel the sinister mysteries of Sally's world to find the truth that lies hidden beneath the shadows."</p>
<img src="sallyface.png">
</article>
<article>
<h2>FAITH: The Unholy Trinity</h2>
<p class="tags">Psychological Horror, Retro, Supernatural</p>
<hr>
<p>"What you are about to do has not been approved by the Vatican. As a young priest, struggle against demons, insane cultists, and your own weakening faith in this pixel horror game inspired by the era of classic 8-bit gaming and the "Satanic Scare" of the 1980s."</p>
<img src="faith.png">
</article>
<article>
<h2>Carrion</h2>
<p class="tags">Psychological Horror, Villain Protagonist, Lovecraftian</p>
<hr>
<p>"CARRION is a reverse horror game in which you assume the role of an amorphous creature of unknown origins, stalking and consuming those that imprisoned you."</p>
<img src="carrion.png">
</article>
</div>
<div class="games">
<article>
<h2>Milk inside a bag of milk inside a bag of milk</h2>
<p class="tags">Psychological Horror, Psychedelic, Visual Novel</p>
<hr>
<p>"A short story about what sort of challenges everyday little things can be. Help the girl buy milk, be the first not to disappoint her."</p>
<img src="milk.png">
</article>
<article>
<h2>Iron Lung</h2>
<p class="tags">Psychological Horror, Underwater, Walking Simulator</p>
<hr>
<p>"A short horror game where you pilot a tiny submarine through an ocean of blood on an alien moon."</p>
<img src="ironlung.png">
</article>
<article>
<h2>Madison</h2>
<p class="tags">Psychological Horror, Supernatural, Exploration</p>
<hr>
<p>"MADiSON is a first person psychological horror game that delivers an immersive and terrifying experience. With the help of an instant camera, connect the human world with the beyond, take pictures and develop them by yourself. Solve puzzles, explore your surroundings and most importantly, survive."</p>
<img src="madison.png">
</article>
</div>
<div class="games">
<article>
<h2>Bendy and the Ink Machine/Dark Revival</h2>
<p class="tags">Survival Horror, Unique Art Style, Adventure</p>
<hr>
<p>"Bendy and the Ink Machine is the first person puzzle action horror game that will forever ruin your childhood love of cartoons."</p>
<img src="bendy.png">
</article>
<article>
<h2>Choo-Choo Charles</h2>
<p class="tags">Survival Horror, Open-World, FPS</p>
<hr>
<p>"Navigate an open-world island in an old train, upgrade it over time, and use it to fight an evil spider train named Charles."</p>
<img src="choo.png">
</article>
<article>
<h2>Don't Starve</h2>
<p class="tags">Survival Horror, Open-World, Unique Art Style</p>
<hr>
<p>"Don't Starve is an uncompromising wilderness survival game full of science and magic. Enter a strange and unexplored world full of strange creatures, dangers, and surprises. Gather resources to craft items and structures that match your survival style."</p>
<img src="ds.png">
</article>
</div>
<div class="games">
<article>
<h2>The Mortuary Assistant</h2>
<p class="tags">Survival Horror, Supernatural, Mystery</p>
<hr>
<p>"Alone with the dead... Embalm corpses, banish demons, save your soul."</p>
<img src="tma.png">
</article>
<article>
<h2>Endoparasitic</h2>
<p class="tags">Survival Horror, Third-Person Shooter, Space</p>
<hr>
<p>"Three limbs ripped off, infected with a deadly parasite, you must save your research. Drag yourself through the corridors of a secret research lab on a remote asteroid, fight off horribly mutated monsters, inject countless syringes of vaccines, and survive at all costs."</p>
<img src="endo.png">
</article>
</div>
</body>
I've tried changing the background color of my h2 and .tags elements, but that just sends a light green line across the entire screen. Ideally, I'd like to keep the shape of my boxes and simply change the color above the < br>. All suggestions appreciated!
Put the h2 and p tag in a div and change the background color of that, rather than the individual tags.
So change this
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p></div>
To this
<div class="upper-section">
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p>
</div>
Set the upper section CSS to
.upper-section {
background-color: #39cb34;
}
You should get something like this.
.upper-section {
background-color: #39cb34;
}
p {
font-family: 'Lato', sans-serif;
}
h2 {
padding-left: 2px;
padding-right: 2px;
}
.tags {
font-style: italic;
font-family: 'Source Sans Pro', sans-serif;
}
article {
background-color: #67aa69;
text-align: center;
width: 30%;
padding: 2;
position: relative;
border-radius: 10%;
}
<article>
<div class="upper-section">
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p>
<hr>
</div>
<p>"Forge your own path in Hollow Knight! An epic action adventure through a vast ruined kingdom of insects and heroes. Explore twisting caverns, battle tainted creatures and befriend bizarre bugs, all in a classic, hand-drawn 2D style."</p>
<img src="hollow-knight.png">
</article>
I want an image on the left with my article wrapped around the image AND my caption at the bottom. But when I enter my code, it ends up looking like this:
https://i.ibb.co/8Nhk44B/Untitled.png
Notice the caption is up top instead of underneath the image.
How would I correct this? I apologize for the rather ominous topic
.square {}
.square img {
float: left;
padding: 0px 20px 20px 0px;
}
.box {
font-size: x-small;
vertical-align: top;
display: inline-block;
width: 100%;
}
.caption {
font-family: Arial, Helvetica, sans-serif;
display: block;
font-size: x-small;
position: relative;
}
<div class="card">
<h2>
Is this the skull of Mary Magdalene?
</h2>
<h5>Jonathan Milano, May 1, 2021</h5>
<div class="box">
<div class="square">
<a href="post003.html">
<img src="https://milanothan.files.wordpress.com/2021/05/disn_d5xcaazpjz-1-1.jpg" width="50%" style="float: left;" alt="Mary Magdalene’s skull on
display in France" />
<p class="caption" style="vertical-align: bottom; !important">Mary Magdalene’s supposed skull on display in Southern France.<br> Copyright © 2021 Magdalene Publishing
</p>
</a>
<p>Although Mary Magdalene’s historic existence is still under debate today, Christian text from sources including the New Testament tell us that Mary of Magdala (her home village on the shore of the Sea of Gailee) played a significant role in the
life of Jesus Christ and the foundations of Christianity as it is known today.
<br><br> According to legend, Mary was one of the women that stayed with Jesus even up to crucifixion. She is said to be the first one whom Jesus appeared to after resurrection. Other early Christian texts raise her status even more in that after
the death of Christ she is considered almost an apostle rivaling the status of Saint Peter.</p>
<p>The New Testament tells us that the followers of Christ were prosecuted from the Holy Land after his death and many of them were forced out to sea in small ships without sail or rudder where they were left to perish on their own. The most common
version of the legend states that Mary Magdalene was sent with Mary Salomé, Mary Jacobé, Martha, Lazarus, Maximin, and their Egyptian servant Sara into one of these ships.</p>
</div>
</div>
</div>
One of the options:
add float and width for the .caption
.square {
}
.square img {
float: left;
padding: 0px 20px 20px 0px;
width:50%;
}
.box {
font-size: x-small;
vertical-align: top;
display: inline-block;
width: 100%;
}
.caption {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
position: relative;
float:left;
width:50%;
padding:0 20px 0 0;
}
a{color:#333;}
<div class="card">
<h2>Is this the skull of Mary Magdalene?</h2>
<h5>Jonathan Milano, May 1, 2021</h5>
<div class="box">
<div class="square">
<a href="post003.html">
<img src="https://milanothan.files.wordpress.com/2021/05/disn_d5xcaazpjz-1-1.jpg" width="50%" style="float: left;" alt="Mary Magdalene’s skull on
display in France" /><p class="caption" style="vertical-align: bottom; !important">Mary Magdalene’s supposed skull on display in Southern France.<br>
Copyright © 2021 <a href="http://www.magdalenepublishing.org/skull-mary-magdalene/" class="ulLink"
target="_blank">Magdalene Publishing</a></p></a>
<p>Although Mary Magdalene’s historic existence is still under debate today, Christian
text from sources including the New Testament tell us that Mary of Magdala
(her home village on the shore of the Sea of Gailee) played a significant role
in the life of Jesus Christ and the foundations of Christianity as it is known today.
<br><br>
According to legend, Mary was one of the women that stayed with Jesus even up to
crucifixion. She is said to be the first one whom Jesus appeared to after resurrection.
Other early Christian texts raise her status even more in that after the death of Christ
she is considered almost an apostle rivaling the status of Saint Peter.</p>
<p>The New Testament tells us that the followers of Christ were prosecuted from the Holy Land after his death and many of them were forced out to sea in small ships without sail or rudder where they were left to perish on their own. The most common version of the legend states that Mary Magdalene was sent with Mary Salomé, Mary Jacobé, Martha, Lazarus, Maximin, and their Egyptian servant Sara into one of these ships.</p>
</div>
</div>
</div>
Another one option:
.square {
}
.square img {
float: left;
padding: 0px 20px 20px 0px;
width:50%;
}
.box {
font-size: x-small;
vertical-align: top;
display: inline-block;
width: 100%;
}
.caption {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
position: relative;
float:left;
width:50%;
padding:0 20px 0 0;
}
a{color:#333;}
<div class="card">
<h2>Is this the skull of Mary Magdalene?</h2>
<div class="box">
<div class="square">
<a href="post003.html">
<img src="https://milanothan.files.wordpress.com/2021/05/disn_d5xcaazpjz-1-1.jpg" width="50%" style="float: left;" alt="Mary Magdalene’s skull on
display in France" /><p class="caption" style="vertical-align: bottom; !important">Mary Magdalene’s supposed skull on display in Southern France.<br>
Copyright © 2021 <a href="http://www.magdalenepublishing.org/skull-mary-magdalene/" class="ulLink"
target="_blank">Magdalene Publishing</a></p></a>
<p>Although Mary Magdalene’s historic existence is still under debate today, Christian
text from sources including the New Testament tell us that Mary of Magdala
(her home village on the shore of the Sea of Gailee) played a significant role
in the life of Jesus Christ and the foundations of Christianity as it is known today.
<br><br>
According to legend, Mary was one of the women that stayed with Jesus even up to
crucifixion. She is said to be the first one whom Jesus appeared to after resurrection.
Other early Christian texts raise her status even more in that after the death of Christ
she is considered almost an apostle rivaling the status of Saint Peter.</p>
<p>The New Testament tells us that the followers of Christ were prosecuted from the Holy Land after his death and many of them were forced out to sea in small ships without sail or rudder where they were left to perish on their own. The most common version of the legend states that Mary Magdalene was sent with Mary Salomé, Mary Jacobé, Martha, Lazarus, Maximin, and their Egyptian servant Sara into one of these ships.</p>
<h5>Jonathan Milano, May 1, 2021</h5>
</div>
</div>
</div>
Hello i am new for css and html.. I need to remove the space between body and footer. Any help ?
I want to add an image at the same lines with paragraph
<!DOCTYPE html>
<html lang="en">
<head>
<title>Neotic</title>
</head>
<body>
<div>
<center><img src="{{STATIC_URL}}Neoticlogo.png" height="200" width="400" alt="Logo" ></center>
<center> <font face="Arial" size="14.18" color=" #587974" >Beat the markets with AI </font></center>
</div>
</br>
</br>
<div class='row' style="background: #3CB371" >
<div class="col-lg-4">
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> Neotic is a trading support platform, that allows traders to test trading strategies and provides related trading recommendations leveraging artificial intelligence, without writing a single line of code.</p>
</br>
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> The artificial intelligence is based on a machine learning algorithm that incorporates corporate fundamentals, historical prices and financial news</p>
<b> <p style=" color:#EDEDED; font-family: Arial; font-size:+10; padding-left: 90px; width:400px" align="justify"> We are upgrading our services and revamping our brand</p> </b>
</div>
<div class="well">
<center> <p class="text-muted" style="color:#EDEDED; font-family: Arial; font-size:+2" >©2017 Neotic. All rights reserved </p> </center>
</div>
</footer>
</body>
Okay. Fist of all... Please give all of your code and use up-to-date HTML5 code...
Using the poorly written code you provided, I made a JSFiddle.
<div class="well">
<center> <p class="text-muted" style="color:#EDEDED; font-family: Arial; font-size:+2" >©2017 Neotic. All rights reserved </p> </center>
</div>
</footer>
the div with the class well had a height of who knows what, so when I set the background color and the height at 20px, I came out with a result just like your picture.
PS: I removed the outdated center tags and added a text-align:; to the div style. I also fixed your </br> tags which were incorrect and reset them to <br/>. I also added missing starting elements like <footer> because of the </footer> in your code. Thanks to James and j08691 who pointed out that the <font> tags are also outdated. I fixed your code, but next time please check your HTML for outdated tags.
<title>Neotic</title>
<body>
<div>
<img src="{{STATIC_URL}}Neoticlogo.png" height="200" width="400" alt="Logo" style>
<h1 style="text-align: center;">
<font face="Arial" size="14.18" color=" #587974">Beat the markets with AI </font>
</h1>
</div>
<br/>
<br/>
<div class='row' style="background: #3CB371" >
<div class="col-lg-4">
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> Neotic is a trading support platform, that allows traders to test trading strategies and provides related trading recommendations leveraging artificial intelligence, without writing a single line of code.</p>
<br/>
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> The artificial intelligence is based on a machine learning algorithm that incorporates corporate fundamentals, historical prices and financial news</p>
<b> <p style=" color:#EDEDED; font-family: Arial; font-size:+10; padding-left: 90px; width:400px" align="justify"> We are upgrading our services and revamping our brand</p> </b>
</div>
<footer>
<div style="background-color:#333; height:20px;">
<p style="font-family: Arial; font-size:+2; text-align:center;color:#fff;" >©2017 Neotic. All rights reserved </p>
</div>
</footer>
How do I get rid of the white bottom padding in the P element that I have labelled the pic with in this code pen with?
I have tried making the padding 0 in it and everything round it but that hasn't worked
Thanks
body {
margin: 60px 60px 60px 60px;
font-size: 100%;
}
h1 {
font-family: lobster, Monospace;
text-align: center;
font-size: 5em;
/* 80px/16=5em */
text-decoration: underline;
margin-bottom: 60px;
border-style: ;
}
blockquote {
font-size: 20px;
font-family: 'Puritan', cursive;
color: black;
}
.img-r {
/* other definitions */
width: 100%;
}
.padding {
padding-top: 0px;
padding-bottom: 0px;
}
li {
font-family: Monospace;
text-align: center;
font-size: 2em;
/* 80px/16=5em */
text-decoration: ;
margin-bottom: 50px;
border-style: ;
word-wrap: break-word;
}
#media (max-width: 700px) {
.jumbotron p {
font-size: 5px;
}
}
.pad {
padding: 0px;
}
<head>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<h1>
Dame Stephanie "Steve" Shirley
</h1>
<div class="container-fluid">
<div class="jumbotron">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-9 col-md-6">
<h2 style="color: #645340; text-decoration: underline;" class="text-
center">AboutDame Stephanie "Steve" Shirley </h2>
<ul class="text-center pad">
<li class="text-center"><em>Dame Stephanie "Steve" Shirley
was born as Vera Buchthal to a Jewish father, a judge in Dortmund who lost his post to the Nazi regime, and a non-Jewish Viennese mother.</em>
</li>
<li class="text-center"><em>In July 1939, at the age of five, Shirley arrived, together with her nine-year-old sister Renate, to Britain as a Kindertransport child refugee.She was placed in the care of foster parents living in the Midlands town of Sutton Coldfield.</em>
</li>
<li class="text-center"><em>After leaving school Vera decided not to go to university (botany was the "only science then available to my gender") but sought employment in a mathematics/technical environment. At the age of 18, she became a British citizen and changed her name to Stephanie Brook.</em>
</li>
<li class="text-center"><em>After leaving school Vera decided not to go to university (botany was the "only science then available to my gender") but sought employment in a mathematics/technical environment. At the age of 18, she became a British citizen and changed her name to Stephanie Brook.</em>
</li>
<li class="text-center"><em>In the 1950s, Stephanie worked at the Post Office Research Station at Dollis Hill, building computers from scratch and writing code in machine language. She took evening classes for six years to obtain an honours degree in mathematics. In 1959, she moved to CDL Ltd, designers of the ICT 1301 computer.</em>
</li>
<li class="text-center"><em>After marriage to a physicist, Derek Shirley, in 1962, Shirley founded, with a capital of £6, the software company Freelance Programmers</em>
</li>
<li class="text-center"><em> She wanted to create job opportunities for women with dependents, and predominantly employed women, with only 3 male programmers in the first 300 staff,[8] until the Sex Discrimination Act 1975 made that practice illegal.</em>
</li>
<li class="text-center"><em>She adopted the name, Steve, to help her in the male-dominated business world.[9] Her team's projects included programming Concorde's black box flight recorder.</em>
</li>
<li class="text-center"><em>Shirley retired in 1993 at the age of 60 and has since focused on her philanthropy.</em>
</li>
<li class="text-center"><em>Shirley was appointed Officer of the Order of the British Empire (OBE) in the 1980 Queen's Birthday Honours, for services to industry and promoted Dame Commander (DBE) in the New Year Honours, 2000 for services to Information Technology.</em>
</li>
</div>
<div class="col-xs-3 col-md-6">
<div class="thumbnail padding">
<img class="img-responsive img-r center-block padding" src="https://ichef.bbci.co.uk/images/ic/480xn/p014nf75.jpg">
<div>
<p class="text-center">
Dame Stephanie "Steve" Shirley
</p>
</div>
</div>
</div>
</div>
</div>
</div>
This is due to a browser specific rule. Not sure about others, but to get rid of it in Chrome, use:
-webkit-margin-after: 0px;
I'm assuming the rest follow the same vendor prefix pattern, but I haven't tested.
I added this to my css and applied the class to the p element.
It gets rid if the spacing below the p element. But the p element displays bunched up when the window is made smaller, which it didn't do before.
How do I fix that?
.margin {
padding-top: 18px;
line-height: 0;
}
Thanks,
R
Don't have the reputation to comment..
If your intent is just to have the text centered in the p, all these hacky rules aren't needed..Just set a proper line-height and pad however you want;
.jumbotron p {
font-size: 21px;
font-weight: 200;
padding: 0px; /* adjust freely */
margin: 0px;
line-height: 1em;
}
You could just go with only line-height as well, it will stay vertically centered..
I'm trying to place the text that's currently below the picture next to the image but I can't seem to figure it out. I tried a bunch of things but it screwed it up. I'm pretty sure this is an easy fix but I'm a noob. :D
http://jsfiddle.net/NmUaX/5/
HTML
<li class="post" >
<article class="in-column" style="height:300px;"> <p class="article-title" style="font-size:20px; padding-bottom:10px;">Grumpy Cat</p><img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0"; height="200" width="300">
<p class="excerpt" style="float:left;">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism. <b>[READ MORE]</b></p>
<p class="excerpt">Born: April 4, 2012, Morristown, AZ</p>
</article>
</li>
</section>
</section>
CSS
article.in-column {
border-bottom: 1px solid #dddddd;
text-align: left;
padding-left: 25px;
padding-right: 25px;
padding-top: 15px;
}
article.in-column .excerpt {
color: #2f2f2f;
font-size: 11px;
margin: 0px;
padding-bottom: 5px;
}
p.article-title{
line-height: 19px;
margin: 5px 0px;
color: #151515;
font-weight:bold;
font-size:16px;
}
Use style="float:left;" on your image, not on your text.
Also, remove the stray semicolon in your img tag.
As shown here:
<img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0"; height="200" width="300">
JSFiddle
I think you need something like this:
<ul style="list-style:none; width:700px">
<li style="float:left; margin:5px;width:310px;">
<ul style="list-style:none">
<li>
<span style="font-size:20px; padding-bottom:10px;">Grumpy Cat</span>
</li>
<li>
<a href="http://yahoo.com" style="float:left;margin-right:5px">
</li>
<li style="float:left;width:380px;">
<ul style="list-style:none">
<li>
<span style="font-weight:700" >Born: April 4, 2012, Morristown, AZ</span>
</li>
<li>
Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism. <b>[READ MORE]</b>
</li>
</ul>
</li>
</ul>
see http://jsfiddle.net/NmUaX/15/