The following is my first cut at coding-up a reddit-like comment in html+css. I have a few questions about css and the general structure:
How do I get the comment body ("The King took off his hat...") to align with the comment head ("Nathan, posted...") and the comment tail ("reply permalink ...")? I tried making the margin-bottom for .comment-left a little longer but that didn't fix the issue.
I know I've been a little trigger-happy with the tags. Which ones are redundant?
Is there a better/tighter way to get the same structure?
Thanks all, Nathan
ps I used the handy information here for stacking my voting arrows on top of each other.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>CSS sandbox: comments</title>
<style type="text/css">
.vote {
width: 15px;
float: left;
clear: left;
}
.vote img {
display: block;
float: none;
clear: both;
width: 15px;
}
.userpic img {
width: 60px;
}
.comment-contents li {
list-style-type: none;
margin-bottom: 10px;
}
.comment-left {
float: left;
}
.head {
margin-left:10px;
}
.tail-list li {
display: inline;
}
img {
border: 0;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="comment">
<span class="comment-left">
<span class="vote">
<img alt="^" title="vote up" src="http://www.reddit.com/static/aupgray.gif">
<img alt="v" title="vote down" src="http://www.reddit.com/static/adowngray.gif">
</span>
<span class="userpic">
<a href="#">
<img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
</a>
</span>
</span>
<span class="comment-main">
<ul class="comment-contents">
<li class="head">
Nathan, posted 2 hours ago
[-]
</li>
<li class="middle">
<p>The king took off his hat and looked at it. Instantly an immense
crowd gathered. The news spread like wildfire. From a dozen leading
dailies,reporters and cameramen came rushing to the scene pellmell in
highpowered monoplanes. Hundreds of reserves,responding without
hesitation to a riotcall,displayed with amazing promptness quite
unparalleled inability to control the everincreasing multitude,but
not before any number of unavoidable accidents had informally
occurred.</p>
<p>Chapter 1 - untitled (eecummings)</p>
</li>
<li class="tail">
<ul class="tail-list">
<li>reply</li>
<li>permalink</li>
<li>offensive?</li>
</ul>
</li>
</ul>
</span>
</div>
</body>
</html>
Update your css with a left padding on ".comment-contents li" and a remove the margin on ".head"
.comment-contents li {
list-style-type: none;
margin-bottom: 10px;
padding-left: 60px;
}
.head {
margin-left:0px;
}
While you are at it, just use padding instead of margin for ".comment-contents li":
.comment-contents li {
list-style-type: none;
padding: 0 0 10px 60px;
}
I recommend not using padding and margin on a class unless absolutly necessary.
Don't have time to do CSS at the moment (maybe later), but you should be able to achieve the look with this markup:
<div class="comment">
<p class="user">
<a href="#">
<img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
</a>
Nathan, posted 2 hours ago
[-]
</p>
<p>The king took off his hat and looked at it. Instantly an immense
crowd gathered. The news spread like wildfire. From a dozen leading
dailies,reporters and cameramen came rushing to the scene pellmell in
highpowered monoplanes. Hundreds of reserves,responding without
hesitation to a riotcall,displayed with amazing promptness quite
unparalleled inability to control the everincreasing multitude,but
not before any number of unavoidable accidents had informally
occurred.
</p>
<p>Chapter 1 - untitled (eecummings)</p>
<ul class="commentTools">
<li class="voteUp">vote up</li>
<li class="voteDown">vote down</li>
<li>reply</li>
<li>permalink</li>
<li>offensive?</li>
</ul>
</div>
And the CSS
.comment {
position:relative;
padding-left:75px;
}
.comment p {
}
.comment .user img {
float:left;
margin-left:-60px;
}
.comment .commentTools {
padding-left:0;
}
.comment .commentTools li {
display:inline;
}
.comment .commentTools .voteUp, .comment .commentTools .voteDown {
position:absolute;
display: block;
left:0;
}
.comment .commentTools .voteUp {
top:0;
}
.comment .commentTools .voteDown {
top:15px;
}
.comment .commentTools .voteUp a, .comment .commentTools .voteDown a {
display:block;
width: 15px;
height: 15px;
text-indent:-5000em;
}
.comment .commentTools .voteUp a {
background: url(http://www.reddit.com/static/aupgray.gif) no-repeat;
}
.comment .commentTools .voteDown a {
background: url(http://www.reddit.com/static/adowngray.gif) no-repeat;
}
I haven't tested this so there may be some bugs. Let me know if youwant any of the CSS explained.
How about setting the p margin-left to be set at 30px?
Related
I'm currently working on an old website that was created with some old crappy WYSIWYG editor. I'm new to web-dev and still trying to get my head around positioning elements properly. My current issue is, from what I have read, using absolute positioning is BAD, but how would you change this?
So this is the old code:
<div id="wb_Text1"
style="margin:0;
padding:0;
position:absolute;
left:187px;
top:24px;
width:83px;
height:147px;
text-align:left;
z-index:1;
border:0px #C0C0C0 solid;
overflow-y:hidden;
background-color:transparent;
">
<div style="font-family:'.Helvetica Neue DeskInterface';font-size:15px;color:#000000;">
<div style="text-align:left">
<span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
<strong>W</strong>
</span>
</div>
<div style="text-align:left">
<span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
<strong>A</strong>
</span>
</div>
<div style="text-align:left">
<span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
<strong>C</strong>
</span>
</div>
</div>
And what I have come up with to replace it is:
HTML
<div class="logo-ul">
<ul>
<li>W</li>
<li>A</li>
<li>C</li>
</ul>
</div>
CSS
.logo-ul {
list-style-type: none;
color: white;
font-size: 2em;
z-index:24;
float: right;
margin-right: 80%;
}
Which looks fine until you collapse the window and it falls apart :( lol.
You can see what I'm doing here http://media.wacmotorcycles.co.uk/
How should I be writing this please?
Thanks.
Try changing #logo to
#logo {
max-width: 165px;
max-height: 171px;
margin: 0.75em 0;
float: left;
}
And, .logo-ul to
.logo-ul {
list-style-type: none;
color: white;
font-size: 2em;
z-index: 24;
float: left;
}
There is nothing inherently wrong with absolute positioning. If used incorrectly, it can have unexpected results when working with responsive layouts.
In your specific case, the W A C might be better implemented as part of the logo image itself rather than text. It's not offering any semantic or SEO benefit to include the letters in a list. Short of that, this is one way to implement what I think you're after:
.logo {
height: 6rem;
padding-left: 50px;
}
.logo-letter {
display: block;
height: 2rem;
}
<div class="logo">
<span class="logo-letter">W</span>
<span class="logo-letter">A</span>
<span class="logo-letter">C</span>
</div>
ETA: Thanks for all the help, everyone! These all worked beautifully. Thanks so much for your time!
I'm coding a newsletter (live preview here and my goal for it here) and am trying to get the navigation buttons ('Join Meet Learn Support') to sit about halfway down the logo. When I try top-margin in the navButtons class I'm not seeing any success. I suspect it's a display issue, but I'm not sure --- changing from inline to inline-block didn't really help.
<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>
<style>
div
{
display: inline;
}
a
{
text-decoration: none;
}
p
{
text-align:left;
margin-left: 130px;
margin-right: 130px;
max-width: 600px;
}
#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
position:relative;
}
#navButtons
{
position:relative;
right:-240px;
}
#announcementImage
{
margin-left: 120px;
margin-right: 120px;
}
a.joinButton
{
margin-left:40%;
color:white;
background-color: #f7853e;
font-size: 30px;
}
a.navButton
{
color:#494541;
font-size: 22px;
}
</style>
</head>
<body>
<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>
<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url"> Meet </a>
<a class = "navButton" href="url">Learn </a>
<a class = "navButton" href="url">Support </a>
</div>
<br>
<br>
<br>
<br>
<br>
<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>
<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by
showing how making art and making money don't have to conflict.
Have a comment on a workshop you've attended or a session you'd like to see in our remaining
Design and Launch weeks? Galen would love to hear from you!</p>
</div>
</body>
Try this
#logo {
display: inline-block;
vertical-align: middle;
}
#nav {
display: inline-block;
vertical-align: middle;
width: 100%;
}
I think what your looking for is:
#logo {
vertical-align: middle;
}
Try adding bottom of something like 60px to div with id nav buttons.
Since this element is position: relative, it's placement can be controlled with left, right, top, bottom, like so:
#nav#buttons {
bottom: 50px;
}
Floating the logo left, and adding margin to the #nav will do the trick.
#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }
You're almost there. Inline-Block is what I'd use with absolute positioned nav, but you have a generic div {position:inline;} that applies to everything on the page inside of a div. You should be more specific for your logo and nav and just get rid of the generic styling by giving each a class like <div class="WHATEVER"> so you can target the div you want to work on.
Then try this:
#logo {
width: 240px;
display: inline-block;
#nav buttons {
margin: 0px 0px 0px 80px;
display: inline-block;
position: absolute;
top: 80px;}
First of all, here are some images explaining what exactly I'm trying to do:
How it should be:
This is how it is right now:
This is the markup:
<div class="info">
<img src="http://placehold.it/40x40" class="img-rounded avatar">
<h5 class="name">John Doe</h5>
<time>2 days ago</time>
<a class="follow"><i class="fa fa-twitter"></i>Follow me</a>
<a class="like">112 likes</a>
</div>
CSS:
.info {
border:1px solid #E6E6E6;
padding-top:20px;
padding-bottom:20px;
}
img.avatar {
float:left;
padding-left:20px;
padding-right:20px;
}
h5.name {
margin:0;
}
span.date {
font-size:12px;
}
a.like {
float:right;
padding-right:20px;
}
Here's a jsbin example with what I'm trying to do.
Any suggestions on how can I align them as in the screenshot?
Instead of assigning various classes to hyperlinks, nest them in the block element.
I changed your code, and updated the jsbin, is this what you were seeking?
http://jsbin.com/lajugiciyi/1/edit
.info {
border: 1px solid #E6E6E6;
padding: 20px 0
}
.avatar {
float: left;
padding: 0 20px;
}
.name {
display: inline-block
}
.name h5 {
margin: 0;
padding: 3px 0 0;
}
.like {
float: right;
padding: 0 20px;
}
.follow {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
You want the follow/like buttons to be aligned with the name, right?
HTML:
<div class="info">
<img src="http://placehold.it/40x40" class="img-rounded avatar" />
<div>
<h5 class="name">John Doe</h5>
<a class="follow"><i class="fa fa-twitter"></i>Follow me</a>
<a class="like">112 likes</a>
</div>
<time>2 days ago</time>
</div>
CSS:
h5.name {
margin:0;
display:inline;
}
http://jsfiddle.net/1319Lw2r/1/
Add the following:
a.follow {
margin-left: 10%; /* adjust to your liking */
}
I would recommend using margin instead of padding where you have it in your example, as well.
For example, padding is pushing the text inside the <a> tag which makes the anchor wider than it needs. By using margin instead it pushes the anchor while keeping it's size constrained to the content. You can test this by putting a border around the <a> tag.
i'm trying to write a div box with headings and links below to it, but somehow i can't get the links to display next to eachother, i've tried using display:inline, but it did no effect, i've also tried float, position etc, but just can't get what i want without messing up.
my code is here: http://jsfiddle.net/dfc8gceg/2/
<div style="background:#E1ED9D; width: 25%;height:250px; position: relative; float: left;">
<h3 style="text-align:center; margin:0;">I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
<a href="">
<h4 style="background:blue; width:50%; color:#0e8dbc; text-align:center; margin:10% 0 0 0; ">Link1</h4>
</a>
<a href="">
<h4 style="background:orange; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link2</h4>
</a>
<a href="">
<h4 style="background:purple; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link3</h4>
</a>
<a href="">
<h4 style="background:red; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link4</h4>
</a>
</div>
Sorry for the repetition of code, it's because i can't use CSS or put code into head section, only body section of html due to my task requirement,
i would appreciate alot if someone can show me the answer without too much change on my code
I got rid of the h4 tags and used divs instead
http://jsfiddle.net/dfc8gceg/8/
<div style="background:#E1ED9D; width: 50%;height:150px; position: relative; float: left;">
<h3 style="text-align:center; margin:0;">I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
<a href="">
<div id="div1">hej</div>
</a>
<a href="">
<div id="div2">hej</div>
</a>
<a href="">
<div id="div3">hej</div>
</a>
<a href="">
<div id="div4">hej</div>
</a>
</div>
I also added some css to the jsfiddle
you should look more into how to use css and html
Hope this works out for you!
I made a JSFiddle, is this what you were aiming for?
http://jsfiddle.net/dfc8gceg/7/
Here is the HTML
<div id="container">
<h3>I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
<h4>Link1</h4>
<h4>Link3</h4>
<h4>Link2</h4>
<h4>Link4</h4>
</div>
With accompanying CSS
#container {
background: #E1ED9D;
width: 25%;
height: 250px;
position: relative;
float: left;
}
h3 {
text-align: center;
margin:0;
}
a {
display: inline-block;
}
.link {
width: 50%;
color: #0e8dbc;
text-align: center;
display: inline-block;
float: left;
}
#link1 {
background: blue;
margin: 10% 0 0 0;
}
#link2 {
background: orange;
margin: 3% 0 0 0;
}
#link3 {
background: purple;
margin: 10% 0 0 0;
}
#link4 {
background: red;
margin: 3% 0 0 0;
}
I think I achieved what you were looking for.
Hope this helps! :D
PS: I'm a noob at Stack Overflow, did I format this correctly? It wanted the code in the answer so...
EDIT: I kept the H4 elements for you, but feel free to change them (I didn't want to change any of your code, I kept it all just made it neater)
A preferred method would be instead to use an unordered list (<ul><li></li></ul>), and then add css to the list, display: inline; to remove the default block level display. Alternatively, you can use display: block; float: left;, which you would need in order to give a width to the li.
Moreover, you should not be using inline CSS, but rather a stylesheet.
Like this:
CSS:
.container {
background: #E1ED9D;
width: 25%;
height: 250px;
position: relative;
float: left;
}
.container h3 {
text-align:center;
margin:0;
font-size: 14px;
font-family: arial;
font-weight: normal;
}
.list {
width: 100%;
padding: 15px 0 0 0;
margin: 0;
}
.list li {
style-type: none;
display: block;
float: left;
width: 50%;
margin: 15px 0 0 0;
padding: 10px 0;
text-align:center;
}
.list li a {
color:#0e8dbc;
}
#first-link {
background:blue;
}
#second-link {
background:orange;
}
#third-link {
background:purple;
}
#fourth-link {
background:red;
}
HTML
<div class="container">
<h3>I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
<ul class="list">
<li id="first-link">Link1</li>
<li id="second-link">Link2</li>
</ul>
<ul class="list">
<li id="third-link">Link3</li>
<li id="fourth-link">Link4</li>
</ul>
</div>
Also, as above, you don't need the H4s because that is poor coding to put into a menu (what you have is essentially a menu). H4 is better used as a header tag. By instead defining css classes to the LI elements, there is no need for a specific html tag like h4.
EDIT: I improved the CSS code from what I had before. I changed the ID elements to classes (class is used if there will be more elements using the same class), and moved the link classes into the LI. I also changed the li classes to IDs because ID is to be used when it appears only one time on the page. Given the specificity of the IDs, these will likely not be used again. If they are, you should change it back to a class.
jsfiddle: http://jsfiddle.net/Lxyjjfx2/1/
I bought before-after jQuery plugin, and I made a simple WordPress-theme. But few things don't work. I wanted to make this slider as my background so I made div in which slider is fit to page, but it doesn't fit. That is my first problem.
My second problem is that gravity forms make some strange things, they are blocking some functions, but I'll fix that.
Here is code:
css:
html {
width: 100%;
}
body {
background-color:#A6B8CC;
margin: 0px!important;
}
.titlelogo {
background-image:url(../images/sitelogo.png);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
padding-top:35px;
margin-top:20px;
margin-bottom:-5px;
display:block;
width:250px;
height:98px;
}
#big_divider {
margin-top:150px;
}
#example{
margin: auto;
padding: 0px!important;
}
#example img {
max-width: 100vw;
max-height: 100vh;
}
#after {
max-height: 100vh;
max-width: 100vw;
}
ul {
margin:0px!important;
}
#secondary {
display: none;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 0em!important;
-webkit-margin-after: 0em!important;
-webkit-margin-start: 0px!important;
-webkit-margin-end: 0px!important;
-webkit-padding-start: 0px!important;
}
#ext_ext_after {
margin: 0 auto;
}
html:
<div id="example" class="beforeafter_slider shadow1">
<ul>
<!-- THE 1. SLIDE -->
<li><img src="<?php bloginfo('template_url'); ?>/img/extralightgethaldus2.jpg" alt="<?php bloginfo('template_url'); ?>/img/withglassesgethaldus2.jpg">
<div id="textbox_1" class="before">
<div id="title_1b" class="fadeup">BEFORE</div>
</div>
<div id="textbox_1" class="after">
<div id="title_1b" class="fadeup">AFTER</div>
</div>
<div id="textbox_snw">
<div id="title" class="fadeup">Don't let the sun be your enemy!</div>
<div id="title2" class="fadeup">Do you consider yourself unique?<br>Your glasses should be as well.</div>
<div id="description" class="fadeup">We are soon lounching a new eyeware webshop<br>like you've never seen before across all Europe.<br><br>
Right now we cannot say anithing else, but if you want<br> to be among the firs to be noticed what it's all about<br>
leave your e-mail adress below and join our community.</div>
</div>
</li>
</ul>
</div>
And here is link: http://svinaweb.hr/gethaldus-lp/
The div will not always fit everyone's screen so to overcome this problem it might be a good idea to change your CSS style to this one below...
#example img {
width: 100%;
height: auto;
overflow: hidden;
}
Please comment back if you need more help or this is not what you are looking for.