I have tried tried coding a comment list where the avatar is supposed to display on the left, and the name and comment are supposed to display on the right. Any help solving the issue is appreciated.
Outcome
Desired Outcome
HTML
<section>
<div class='friend'>
<h3>John Smith</h3>
<p>Just another comment</p>
<img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
</div>
<div class='friend'>
<h3>John Smith</h3>
<p>Just another comment</p>
<img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
</div>
<div class='friend'>
<h3>John Smith</h3>
<p>Just another comment</p>
<img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
</div>
</section>
CSS
body {
font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #333;
}
a {
color: #333;
text-decoration: none;
}
h1, h2, h3 {
font-weight: 400;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
img {
height: auto;
width: 100%;
}
section {
padding: 30px 60px;
}
.friend img {
height: 70px;
width: 100px;
display: block;
}
Place the <img>s before the paragraphs (where they seem to belong anyway). Then have them float: left. You can add a margin to the right of them as well to create more spacing if you like.
http://jsfiddle.net/Q8emr/
Related
I have a div containing images and text with a background I added in CSS. Then I want a new div with text. The text keeps showing over the first div and nothing seems to work. I have read up on all the position options in CSS and more. I don't just want to move it down because I'm trying to make the website as responsive as possible.
MY HTML:
DIV 1:
<div id="carousel">
<div class="gallery">
<img src="images/img1.jpg">
<div class="desc"> Title </div>
</div>
<div class="gallery">
<img src="images/img2.jpg">
<div class="desc"> Title </div>
</div>
<div class="gallery">
<img src="images/img3.jpg">
<div class="desc"> Title </div>
</div>
<div class="gallery">
<img src="images/img1.jpg">
<div class="desc"> Title </div>
</div>
<div class="gallery">
<img src="images/img2.jpg">
<div class="desc"> Title </div>
</div>
<div class="gallery">
<img src="images/img3.jpg">
<div class="desc"> Title </div>
</div>
<p id="carouselhead"> YOUR BUILDING IS OUR BUSINESS </p>
<p id="carouseltext"> We offer the complete package to create your own wealth with property. <br>
We have the expertise to deliver excellent construction projects. <br>
We combine this with a willingness to make a difference & add value to your business.</p>
<div id="library"> SEE MORE </div>
</div>
DIV 2:
<div id="about">
<p id="abouthead"> ABOUT INCICON </p>
<p id="abouttext"> <u>InciCon has the skills and expertise to: </u><br><br>
Undertake development from concept to complete construction. <br>
Project Management turnkey projects - to your needs. <br>
Provide valuable input on cost-effective design & construction. <br>
Provide a competent Quantity Surveying service. <br>
Negotiate the most competitive rates. <br>
Source & Manage the most suitable suppliers & subcontractors. <br></p>
</div>
CSS:
DIV 1:
#carousel {
background-image: url(images/carouselbackground.jpg);
width: 92%;
position: absolute;
margin-top: 1%;
padding-left: 4%;
padding-right: 4%;
}
.gallery {
width: 14%;
margin-top: 4%;
margin-left: 1%;
margin-right: 1%;
display: inline-block;
}
.gallery img {
width: 100%;
height: auto;
}
.desc {
padding: 5%;
text-align: center;
font-family: 'Montserrat', sans-serif;
}
#carouselhead {
font-family: 'Open Sans', sans-serif;
font-size: 300%;
text-align: center;
font-weight: 800;
color: #456eb0;
}
#carouseltext {
font-family: 'Montserrat', sans-serif;
font-size: 100%;
text-align: center;
}
#library {
margin-top: 4%;
margin-bottom: 4%;
text-align: center;
}
#library a {
text-decoration: none;
color: black;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 2%;
padding-right: 2%;
background-color: gray;
}
DIV 2:
#about {
position: relative;
background-color: white;
}
#abouttext {
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 120%;
}
#abouthead {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 200%;
font-weight: 800;
color: #456eb0;
}
remove position:absolute
from #carousel in your css file.
remove position: absolute; from #carousel in your css file. be
#carousel {
background-image: url(images/carouselbackground.jpg);
width: 92%;
margin-top: 1%;
padding-left: 4%;
padding-right: 4%;
}
because, positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
This question already has answers here:
H1 tag and P tag on the same line?
(6 answers)
Closed 2 years ago.
I have looked up various solution to put an h2 and p tag on the same line but none of them seem to work. I have tried using display: inline; but it just going to the next line. Below is my code in html and css code:
.NativeName {
display: inline-block;
vertical-align: top;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 28px;
}
<div className="NativeName">
<h2>Native Name:</h2>
<p>{country.nativeName}</p>
<h2>Population:</h2>
<p>{country.population}</p>
<h2>Region:</h2>
<p>{country.region}</p>
<h2>Sub Region:</h2>
<p> {country.subregion}</p>
<h2>Capital:</h2>
<p> {country.capital}</p>
</div>
Any help would be appreciated.
To avoid using a wrapper for each <h2><p> line, you can use the <br> tag and set the dispay of each <h2> and <p> to inline-block:
.NativeName {
vertical-align: top;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 28px;
}
h2,
p {
display: inline-block;
}
<div className="NativeName">
<h2>Native Name:</h2>
<p>{country.nativeName}</p>
<br>
<h2>Population:</h2>
<p>{country.population}</p>
<br>
<h2>Region:</h2>
<p>{country.region}</p>
<br>
<h2>Sub Region:</h2>
<p> {country.subregion}</p>
<br>
<h2>Capital:</h2>
<p> {country.capital}</p>
</div>
But I really recommend you to wrapp them in a div using display: flex:
.NativeName {
vertical-align: top;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 28px;
}
h2,
p {
margin: 0;
padding: 0;
}
.row {
display: flex;
align-items: flex-end;
}
<div className="NativeName">
<div class="row">
<h2>Native Name:</h2>
<p>{country.nativeName}</p>
</div>
<div class="row">
<h2>Population:</h2>
<p>{country.population}</p>
</div>
<div class="row">
<h2>Population:</h2>
<p>{country.population}</p>
</div>
<div class="row">
<h2>Region:</h2>
<p>{country.region}</p>
</div>
<div class="row">
<h2>Sub Region:</h2>
<p> {country.subregion}</p>
</div>
<div class="row">
<h2>Capital:</h2>
<p> {country.capital}</p>
</div>
</div>
You need to add styling to the elements inside the .NativeName div. By default, a h2 and p element are block. That means they will take the full width. To not do that, you need to set display: inline-block explicit.
.NativeName {
display: inline-block;
vertical-align: top;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 28px;
}
h2,
p {
display: inline-block;
}
<div className="NativeName">
<h2>Native Name:</h2>
<p>Some random name</p>
</div>
Edit
What would be even better is to make use of HTML's definition list (read about it at MDN), since that would make it semantically more correct.
.NativeName {
display: flex;
vertical-align: top;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 28px;
}
dt,
dd {
margin: 0;
}
<dl>
<div class="NativeName">
<dt>Native Name:</dt>
<dd>Some random name</dd>
</div>
<div class="NativeName">
<dt>Code Name:</dt>
<dd>Some random code</dd>
</div>
</dl>
I have a have blocks that I would like to be inline and then have the same height no matter how much text is going to be in the boxes. The amount of text could vary at any point. I have the blocks inline but the height I can not figure out how to have the same height for all of them.
HTML:
<div class="article_block">
<div class="article_block_content">
<div class="article_block_content_left">
<img class="article_image" alt="<%= headline %>" title="<%= headline %>" src="<%= media_path %>"/>
</div>
<div class="article_block_content_right">
<h5 class="article-tag"><%= category.name %></h5>
<h2 class="article-title"><%= headline %></h2>
<h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4>
</div>
</div>
</div>
CSS:
.article_block {
width: 33%;
display: inline-flex;
.article_block_content{
margin: 10px;
height: inherit;
.article_block_content_left {
}
.article_block_content_right {
padding: 20px;
.article-tag {
text-align: center;
color: #7d8a8f;
text-transform: capitalize;
font-size: 14px;
font-family: 'Open Sans';
padding-top: 15px;
}
.article-title {
text-align: center;
font-family: 'Merriweather';
color: #333;
}
.article-subtitle {
text-align: center;
font-family: 'Merriweather';
font-style: italic;
color: #464849
}
}
}
}
This is currently what is happening
Set display: flex on the parent of your .article-block divs. This will keep the three .article-block divs to be the same height (because align-items default is stretch).
* { box-sizing: border-box; }
.article-block-wrap {
display: flex;
margin: 0 -10px;
}
.article_block {
padding: 5px;
display: flex;
flex: 0 0 33.333%;
overflow: hidden;
}
.article_block_content{
background: rgba(0,0,0,0.2);
}
.article_block_content_left {
text-align: center;
}
.article_block_content_right {
padding: 20px;
}
.article-tag {
text-align: center;
color: #7d8a8f;
text-transform: capitalize;
font-size: 14px;
font-family: 'Open Sans';
padding-top: 15px;
}
.article-title {
text-align: center;
font-family: 'Merriweather';
color: #333;
}
.article-subtitle {
text-align: center;
font-family: 'Merriweather';
font-style: italic;
color: #464849
}
<div class="article-block-wrap">
<div class="article_block">
<div class="article_block_content">
<div class="article_block_content_left">
<img class="article_image" src="https://placekitten.com/150/275"/>
</div>
<div class="article_block_content_right">
<h5 class="article-tag">Category Name</h5>
<h2 class="article-title">This is a long headline</h2>
<h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4>
</div>
</div>
</div>
<div class="article_block">
<div class="article_block_content">
<div class="article_block_content_left">
<img class="article_image" src="https://placekitten.com/150/300"/>
</div>
<div class="article_block_content_right">
<h5 class="article-tag">Category Name</h5>
<h2 class="article-title">This is a much longer headline than either the first or third block</h2>
<h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4>
</div>
</div>
</div>
<div class="article_block">
<div class="article_block_content">
<div class="article_block_content_left">
<img class="article_image" src="https://placekitten.com/150/250"/>
</div>
<div class="article_block_content_right">
<h5 class="article-tag">Category Name</h5>
<h2 class="article-title">This is a slightly longer headline</h2>
<h4 class="article-subtitle">
This is the future home of the article headline. I hope this makes you want to read the article.
This is the future home of the article headline. I hope this makes you want to read the article.
</h4>
</div>
</div>
</div>
</div><!-- .article-block-wrap -->
I created an unslider http://unslider.com/ using this HTML code
<div class="un-slider" dir="rtl">
<ul>
<li>
<div class="span6">
<blockquote class="testimonial">
<p>Hello world i m arbaz mateen. like a little programmer.</p>
</blockquote>
<div class="testimonial-arrow-down"> </div>
<div class="testimonial-author">
<img src="" border="0" width="50" height="50">
<p><strong>Huzaifa Khalid</strong><br><span>BSCS Student at Iqra University</span></p>
</div>
</div>
</li>
<li class="flex-active-slide" style="width: 100%; float: left; display: block;">
<div class="span6">
<blockquote class="testimonial">
<p>MeriTaleem helped me find the right information at the right time. I was looking for admission updates and wanted to know the process of how to apply for admissions.</p>
</blockquote>
<div class="testimonial-arrow-down"> </div>
<div class="testimonial-author">
<img src="" border="0" width="50" height="50">
<p><strong>Huzaifa Khalid</strong><br><span>BSCS Student at Iqra University</span></p>
</div>
</div>
</li>
and I get the this result
paragraph looks like this
CSS
blockquote.testimonial {
background: rgba(177,227,172,0.9);
color: #000;
font-family: Georgia, serif;
font-style: italic;
font-size: 1.2em;
line-height: 1.3;
width: 80%;
border-radius: 10px;
border: 0;
margin: auto;
padding: 10px 50px;
position: relative;
display: block;
}
blockquote.testimonial p {
margin: 15px;
width: 90%;
padding: 20px 50px 20px 20px;
}
blockquote.testimonial:before {
color: #000;
content: "\201C";
font-size: 80px;
font-style: normal;
padding-right: 15px;
float: left;
}
blockquote.testimonial:after {
content: "\201D";
color: #000;
font-size: 80px;
font-style: normal;
float: right;
margin-top: -60px;
}
I don't know what the problem is with <p> tag.
It appear as that because in your html dir="rtl" change it to ltr or just delete it
Your document have right to left text orientation and this is why there is dot in the beginning of the sentence. Your quotations are however in English and therefore should have left to right text orientation.
To achieve this add parameter dir="ltr" to both <blockquote>s.
I have tried tried coding a comment list where the avatar is supposed to display on the left, and the name and comment are supposed to display on the right. Any help solving the issue is appreciated.
Outcome
Desired Outcome
HTML
<section>
<div class='friend'>
<h3>John Smith</h3>
<p>Just another comment</p>
<img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
</div>
<div class='friend'>
<h3>John Smith</h3>
<p>Just another comment</p>
<img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
</div>
<div class='friend'>
<h3>John Smith</h3>
<p>Just another comment</p>
<img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
</div>
</section>
CSS
body {
font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #333;
}
a {
color: #333;
text-decoration: none;
}
h1, h2, h3 {
font-weight: 400;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
img {
height: auto;
width: 100%;
}
section {
padding: 30px 60px;
}
.friend img {
height: 70px;
width: 100px;
display: block;
}
you would want to add float to your image
like
.friend img{
float:left;
}
here's a fiddle
Float your h3 and p tags to the right.
.friend h3, .friend p {
float: right;
}
Altneratively, have the image first and float it to the left.
http://css-tricks.com/all-about-floats/
https://developer.mozilla.org/en-US/docs/Web/CSS/float
I would recommend you to use inline-block instead of float in CSS with vertical-align, here you can see the result: http://jsfiddle.net/gG5uv/3/.
.friend img {
height: 70px;
width: 100px;
display: inline-block;
vertical-align: top;
}
.friend .data {
display: inline-block;
vertical-align: top;
}
I've also added a semantic separation between image and personal data of each item creating a div with class data.
Hey You can check your solution here at http://jsbin.com/edit/637/.
Just a few changes in your code.
HTML
<div class="friend">
<img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
<div id="friend-bio">
<h4>John Smith</h4>
<p>Just another comment</p>
</div>
</div>
<br>
<div class="friend">
<img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
<div id="friend-bio">
<h4>John Smith</h4>
<p>Just another comment</p>
</div>
</div>
<br>
<div class="friend">
<img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
<div id="friend-bio">
<h4>John Smith</h4>
<p>Just another comment</p>
</div>
</div>
and CSS
.friend #friend-image {
border: 1px solid #F0F2F8;
display: inline-block;
float: left;
height: 85px;
width: 84px;
}
#main #friend #friend-bio {
float: left;
font-size: 14px;
margin: -7px 0 0 20px;
width: 454px;
}
#main #friend #friend-bio h4 {
font-size: 18px;
font-weight: normal;
margin: 0 0 5px;
}