I'm trying to get the "about 15 hours ago" text to the left, but can't seem to get it done. float left doesn't seem to work, and I can't decrease the margin left because then the "3 minutes ago" text will collide with the image.
Here's the html(sorry for the big mess):
<div class="comment_column_narrow">
<div id="comment_title_39" class="comment_title">
Do you like this song?
x
</div>
<div class="comment_content">
<img alt="Justin meltzer" src="/system/photos/45/tiny/Justin Meltzer.jpeg?1302075215">
<div class="textual_comment_content">
<div class="comment_text">
<span class="name_link">
Justin Meltzer
</span>
Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
</div>
<span class="comment_footer">
<ul>
<li class="list_style">about 15 hours ago.</li>
</ul>
<span>
</span></span></div></div></div>
And here's the corresponding CSS:
.comment_column_narrow {
float: left;
width: 295px;
margin-right: 5px;
}
.comment_content{
clear:both;
padding: 10px 5px;
border-top:2px solid #E2E2E2;
border-right:3px solid #E2E2E2;
}
.comment_text{
line-height: 120%;
}
.comment_image{
float:left;
margin-right: 10px;
}
.comment_footer{
}
.comment_footer ul{
margin-top: 5px;
}
.comment_footer ul li{
font-size: 10px;
color:gray;
float:left;
margin-right:25px;
}
.list_style{
list-style:none;
}
.name_link{
margin-left:-3px;
}
Instead of
this:
<div class="comment_text">
<span class="name_link">
Justin Meltzer
</span>
Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
</div>
<span class="comment_footer">
<ul>
<li class="list_style">about 15 hours ago.</li>
</ul>
</span>
Move the comment_footer span INSIDE the comment_text span, so that it wraps around the image as you desire. Then remove the <ul> and <li> as they are just getting in your way. You end up with:
<div class="comment_text">
<span class="name_link">
Justin Meltzer
</span>
Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
<span class="comment_footer">about 15 hours ago.</span>
</div>
Try changing to the comment section to this:
<div class="comment_content">
<img alt="Justin meltzer" src="/system/photos/45/tiny/Justin Meltzer.jpeg?1302075215">
<div class="textual_comment_content">
<div class="comment_text">
Justin Meltzer
Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
</div>
<div class="comment_footer">
about 15 hours ago.
</div>
</div>
</div>
Related
Doing a website recreation and trying to use bootstrap to do it. I ran into a problem of trying to position an image to the right of some text near the right edge of the web page.
Using margin-top and margin-right moves the picture how I want but using margin-bottom seems to have no effect... which is what I need. Any idea what I am doing wrong?
Here's a link to my codepen: https://codepen.io/gkunthara/pen/eRXmoP
And releveant code:
HTML
<div class="second-content">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p text-left"> Moving homes in Sydney is
stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not,
just notify us within 72 hours and we'll gladly return to reclean any
problem areas - free of charge.</p>
<img class="first-pic pull-right gap-right" src="firstpic.png">
</div>
CSS:
.second-content .first-pic {
width: 30%;
border: solid black;
margin-right: 100px;
margin-bottom: 50px; /* no effect /*
}
EDIT: updated codepen link just showing relevant code
As per your codepen you wanted image after text then need to add
float:left in this class second-header-p text-left.
.second-header-p.text-left{
float:left;
}
I add some section for your code. float:left and float:right help to do your task well.
<body>
<div class="second-content">
<div class="sec">
<h2 class="second-header"> Bond Back Guarantee</h2>
</div>
<div class="sec">
<p class="second-header-p text-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back ha
s never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning.
If not, just notify us within 72 hours and we'll gladly return to reclean any problem areas - free of charge.</p>
<img class="first-pic pull-right gap-right" src="https://thumb.ibb.co/iBF9Ea/firstpic.png" alt="firstpic" border="0">
</div>
</div>
</body>
css
.second-content {
height: 750px;
background-color: #fff;
border-style: solid;
}
.second-content .second-header {
font-size: 46px;
color: #3498DB;
margin-top: 100px;
margin-left: 150px;
}
.second-content .second-header-p {
width: 50%;
font-size: 120%;
margin-left: 150px;
line-height: 40px;
margin-top: 25px;
float:left;
}
.second-content .first-pic {
width: 30%;
border: solid black;
float:right;
}
.sec{
width:100%
}
Give pull-left class to your second-header-p.
.second-content {
height: 750px;
background-color: #fff;
border-style: solid;
padding: 20px;
}
.second-content .second-header {
font-size: 46px;
color: #3498DB;
}
.second-content .second-header-p {
width: 65%;
font-size: 120%;
line-height: 40px;
}
.second-content .first-pic {
width: 30%;
border: solid black;
}
<head>
<title> End of Lease Cleaning in Sydney</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="second-content">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p pull-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not,
just notify us within 72 hours and we'll gladly return to reclean any
problem areas - free of charge.</p>
<img class="first-pic pull-right gap-right" src="https://thumb.ibb.co/iBF9Ea/firstpic.png" alt="firstpic" border="0">
</div>
</body>
If you using bootstrap then use this code:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<section class="second-content">
<div class="col-md-8">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p text-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not, just notify us within 72 hours and we'll gladly return to reclean any problem areas - free of charge.</p>
</div>
<div class="col-md-4">
<img src="https://thumb.ibb.co/iBF9Ea/firstpic.png" />
</div>
</section>
</body>
</html>
I have a user managment block on my website and I'm trying to display a bit information there.
I think that nothing is better than example with pictures.
This is how the block looks now:
And this is how I want the block to look like:
Is there any good way to do that? I added those dashes manually, and this is not the way I'm looking for, I want it responsive.
Here is the block code:
<div class="account-box">
Welcome, guess. <br>
<hr>
Coins: <span style="float: right;">0</span> <br>
Points: <span style="float: right;">0</span> <br>
Total Referrals: <span style="float: right;">0</span> <br>
<hr>
Logged as [username] <span style="text-align: right;"><span class="fa fa-sign-out fa-fw"></span>Logout</span>
</div>
I recently had to do something similar. Here's what I came up with:
.entry {
display: flex;
align-items: center;
}
.entry>.spacer {
flex-grow: 1;
border-bottom: 1px dashed currentColor;
margin: 4px;
}
<div class="entry">
Label:
<ins class="spacer"></ins>
123
</div>
Adjust as needed!
I am having a bit of a problem with one of my containers. It is not expanding with my content. Here is the code:
<!--center section start-->
<div id="centerContent">
<!--center left begin-->
<div id="centerLeft">
<h2>
Special Disney Ticket Offer!
</h2>
<p class="specCont">
<img class="specImg" src="images/universal-main-offer.jpg" alt="Special Universal Studios Ticket Offer!" />
Super Value Disney 3 Day Touch of Magic Ticket! Just $219 for each ticket! Get 3 Days to visit the Disney Theme Parks (Magic Kingdom, Epcot, Hollywood Studios, Animal Kingdom) PLUS a 4th day at Disney Quest, Blizzard Beach or Typhoon Lagoon! For an unbelievable value! Call & ask for the Resort offer<br />(restrictions apply).<br /> <strong>Call us: 1-800-544-7646</strong>
</p>
</div>
<!--center left end-->
<!--center right begin-->
<div id="centerRight">
<a href="http://tix.greatorlandodiscounts.com/index.php?catid=106">
<img class="rightFrontImg" src="images/legoland-fl-front-ad.jpg" alt="Legoland Florida Discount Tickets" />
</a>
</div>
<div class="clear"></div>
<!--center right end-->
</div>
<!--center section end-->
CSS:
#centerContent {
width: 980px;
height: 100%;
background-image:url(../images/main-special-bg-strip.png);
background-repeat:repeat-y;
}
#centerLeft {
width: 572px;
height: 100%;
float:left;
}
#centerRight {
width: 408px;
height: 100%;
float:right;
}
What I am looking to do is have the centerContent div stretch with the two divs inside. I have a background strip on the centerContent that will allow the white background to expand 100%.
I hope that made some sort of sense and thank you in advance for any and all help.
Add overflow:auto; to #centerContent.
Since the child divs are floated, the parent collapses and acts like it has no content. Adding overflow:auto; restores the expected behavior.
EDIT: I have solved my own problem. I have commented my code below where the error was. I will add an answer as soon as I'm able.
I have a header bar on my page which could have up to three rows of data:
Page Title
Page Information
Page Badges
However, the page-info bar and the page-badges bar are shown dynamically; sometimes they're there (depending on the data coming in), and sometimes they're not.
Goal: I want to ensure that everything stays nice and vertically centered in the header area, if one or more of the aforementioned rows is not present because there's nothing to render.
I attempted to use display:table-cell and vertical-align:middle, but it doesn't seem to be working out. Here's my code:
Relevant HTML:
<div class="header-bar">
<div class="header-bar-wrapper">
<h1 class="page-title">Charity Challenge Golf Outing</h1>
<div class="page-info">
<h5 class="item"><span class="info-label">Project</span>US Asset</h5>
<h5 class="item"><span class="info-label">Project Manager</span>John Smith</h5>
<h5 class="item"><span class="info-label">Start Date</span>11/22/2013</h5>
<h5 class="item"><span class="info-label">End Date</span>12/25/2013</h5>
</div>
<div class="page-badges">
<span class="page-badge">
<span class="page-badge-icon"><i class="fa fa-coffee"></i></span>
<span class="page-badge-value">10</span>
<span class="page-badge-text">Cups Consumed</span>
</span>
<span class="page-badge">
<span class="page-badge-icon"><i class="fa fa-coffee"></i></span>
<span class="page-badge-value">3</span>
<span class="page-badge-text">Days Remaining</span>
</span>
</div>
</div>
</div>
Relevant CSS:
.header-bar {
display:table;
width:100%;
position:relative;
height:79px;
overflow:hidden;
border:1px solid black;
box-sizing:border-box;
padding:0 20px;
}
.header-bar-wrapper {
display:table-cell;
vertical-align:center; // THIS WAS MY ERROR. Should be vertical-align:middle
}
.page-title,
.page-info,
.page-badges {
display:block;
margin:0;
padding:0;
clear:both;
}
.page-title {
margin:0;
font-size:29px;
}
.page-info {
}
.page-badges {
bottom:0;
font-size:11px;
padding:5px 0;
}
Here is a Fiddle with the aforementioned code.
Turns out I was using vertical-align:center instead of vertical-align:middle. This fixed my code.
Here's an updated Fiddle with working code.
Try deleting either the page-badges or page-info block and you'll see how everything stays centered vertically.
I am relatively new to HTML/CSS and am having an impossible time making two pics line up with an ASP MVC website. The bookend pic we are using for the menu bar cannot line up with the rest of the background pics. Below is a screenshot of the problem, the HTML and the CSS. The bookend pic that is not adjusted correctly is NAV-Left-Corner, and it's id in the CSS is "#menuLeft." The rest of the nav bar uses a small blue pic repeated horizontally. That portion of the CSS can be found in the "ul#Menu" section. (I'm having the same problem with the right bookend, just wanted to simplify things for the sake of this post)
HTML
<body>
#using Monet.Common
<div class="page">
<header>
<div style="margin: 20px;">
#* Monet *#
<span href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span>
<span style="color: white; font-size: 18px; "> </span>
</div>
#* </a>*#
#* <div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>*#
<nav>
<ul id="menu">
<img src="../../Content/images/NAV-Left-Corner.gif" id="menuLeft" alt="mLeft"/>
<li id="mTop">#Html.MenuLink("Agents", "Index", "Agent")</li>
<li class="mProducts">#Html.MenuLink("Products", "Index", "Product")</li>
<li class="mPt">#Html.MenuLink("Product Training", "Index", "Course")</li>
<li class="mCe">#Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
<li id="mBottom">#Html.MenuLink("Help", "About", "Home")</li>
<img src="../../Content/images/NAV-Right-Corner.gif" id="menuRight" alt="mRight"/>
</ul>
</nav>
</header>
<img src="../../Content/images/TEST2body_top.png" id="topPic" alt="tag"/>
<section id="main">
#RenderBody()
</section>
<footer>
<span style="color: Gray;"> Copyright © 2012 For Internal Use Only. </span>
</footer>
</div>
</body>
CSS
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
#menuLeft
{
vertical-align:middle;
}
#menuRight
{
vertical-align:middle;
}
I agree with Nile in comment ("dont do it this way").
Anyway - you can just move anything up or down by adding some padding or margin. You can also use negative padding-top, to move image up, even outside its container.
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
/* HERE */
padding: -5 0 2px;
position: relative;
margin: 0;
text-align: right;
}
Im not sure that is recipe for you, but it may be good tip about positioning items.
Edit/added later:
Maybe you should not experiment with CSS in serious app like this. App "for internal use only" dont need fancy effects.
Read good tutorial about CSS and make some exercises (positioning, gradients, browser support) before you use it in work :)
The New Boston is very good website with most professional free courses and tutorials i ever saw.