I am trying to get rid of unwanted space in a WordPress page. Here is the link to the page: http://lectorbookclub.com/current-conversations/. I'm trying to use CSS to fix it because I only have access to editing the CSS and HTML.
I used Firebug to gather this code:
<div id="content" role="main">
<article id="post-12581" class="post-12581 post type-post status-publish format- standard hentry category-fall-2013 category-uncategorized tag-end-of-year-post clear-fix">
<div class="featured-image">
<a href="http://lectorbookclub.com/2014/05/01/eng-202b-summary-post/" title="Permalink to Eng 202B Summary Post" rel="bookmark">
<img src="http://s0.wp.com/wp-content/themes/pub/oxygen/images/archive-thumbnail-placeholder.gif?m=1335191815g" alt="" class="attachment-archive-thumbnail" scale="0"/>
</a>
</div>
<header class="entry-header">
<h1 class="entry-title">
<div class="entry-meta">
<span class="entry-date">
<span class="byline">
<span class="comments-link">
<span class="edit-link">
</div>
</header>
<div class="entry-summary clear-fix">
Read Article →
You have a few options depending on how you want to go about this.
My first suggestion is simple just based off of what you have shared. (that said this does not mean this is the only way, or the best way or the clean way)
You may want to adjust your CSS to move the individual entries a few pixels from the right by adding a right margin.
.entry-summary {
margin-right: 45px;
}
Or you may want to add a left margin to .entry-header
.entry-header {
margin-left: 15px;
}
There are various other options as well. Hope this helps.
(try to be more concise and direct in the future. ask your question with all needed details for others to understand so that you may receive an answer more quickly and that others may feel more motivated to help!)
In your CSS stylesheet:
#page {max-width: 960px; }
Substitute 960px for whatever size you want it to be.
Okay, I realized it had to do with the article tag (which wraps around the date and the entries). I played around with the width of the article tag in CSS and this seemed to be the answer. Thank you all so much for looking at this problem!
I would consider making the text in entry-header align right.
header.entry-header { text-align: right; }
I don't know how else header.entry-header is used in your theme, but on the page you provided, that would probably produce the alignment you are looking for.
Related
I have my profile image and below it I want to place my name and a few things about me. I don't know what to use for the image div or if I even need a div for it. Are the h1 and p elements used properly?
Snippet
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Full Body HTML
<body>
<div class="page">
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
<div class="sites">
<ul>
<li><img src=""> <img src=""></li>
</ul>
</div>
</div>
</body>
The rest of the site are just app icons taking to my social media sites. There's no other content. My site also doesn't have a header or footer. Not sure if my profile class should be considered the header at this point for good SEO.
You do not need to put the div around the image. Just style it to display: block (img defaults to display: inline)
<div class="profile">
<img style="display: block" src="profile_image.jpg">
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Otherwise, the rest of the code is perfectly fine.
It does depend of what exactly you want to do with it but if I understand your question.
You don't need divs for your image just set up different image classes in your CSS.
.image1
{
width:100px;
height:100px;
}
Then your HTML would look like
<img src="profile_image.jpg" class="image1">
Check out http://www.w3schools.com/css/css_align.asp for more information about how to actually set up alignments in your CSS
It might be worth using a div to style your text into a block or format it to look nice, etc. But you don't need to do it
http://www.w3schools.com/tags/tag_div.asp for div styling .
And finally abit of personal experience, spend an hour or 2 looking through W3Schools CSS section and learning the basics of styling it's a great way to learn the basic tools you need to work with CSS and make your pages look good !
Edit styling text
<h1>first last</h1>
<p>Coffee snob.</p>
so first you could style them in your css as the elements they are
h1
{
text-align:left;
padding-left: 10px;
text-decoration: underline;
}
p
{
text-align: right;
}
Doing thing your HTML would look exactly as it is you wouldn't have to change anything. Obviously this is something you can only do once for all <p> and <h1> content and every time you use those tags without specifying a class for them it'll look exactly like whatever the above CSS is.
The other option is to do what I suggested with the image and give them a unique class.
p.body
{
text-align: right;
}
Here you'll need to add class to <p> jsut like you did for image which will look like
<p class="body">Coffee snob.</p>
Hope that helps !
The main structure I'm using is:
<div class="portfolio-thumbs">
<div class="col-md-4 thumb-item">
<a href="#">
<div class="thumb-img">
<img src="./img/portfolio/rocksea.jpg" class="img-responsive" />
<div class="thumb-overlay"></div>
</div>
</a>
</div>
...
</div>
I've created a full JS Fiddle here
I'm looking to add a semi-transparent overlay to the image (will later be adding transition and some content to slide in from bottom of each image), yet can't seem to get it to appear.
Have compared to couple of other articles on SO but none seemed to fit the bill.
I've done this a thousand times before, any idea what's going wrong with this?
With help of #ZachSaucier , adding 100% height to all elements in tree. Also adding:
div.latest-work div.portfolio-thumbs div.thumb-item a div.thumb-img div.thumb-overlay {
position: absolute;
top: 0;
}
Made the overlay sit on top of the img.
Updated fiddle here
Hey guys I'm trying to implement Paper unfoding effect in a webpage of a wesite I'm developing. Im using the pfold jquery plugin, but I want a text to appear on hover and I did it many times but doesnt work. Here is my code:
HTML:
<div class="uc-container">
<div class="uc-initial-content">
<!--<img src="fm.png" alt="FM" /> -->
<img src="fm.png" alt="Fm" title="Fm" id="hoverFm">
<p class="textSponsor">92.7 BIG FM</p>
<span class="icon-eye"></span>
</div>
<div class="uc-final-content">
<img src="fm.png" alt="FM" />
<div class="title"><h4>FM</h4> </div>
<span class="icon-cancel"></span>
</div>
</div>
And This is the CSS For same:
#hoverFm .textSponsor{
position: relative;
margin-right: auto;
margin-left: auto;
visibility: hidden;
}
#hoverFm:hover .textSponsor{
visibility: visible;
}
When Im doing this the text just simply comes below my picture . I'm not getting where I'm going wrong. And when I'm creating a new div which contains only <img> and <p> tag then my image is getting small (I guess its because of the code I wrote for resizing and paper folding effect which is gettin hampered due to this and then also text on hover is not coming)
If you guys wanna see what actually I'm making :
The link to the demo site is: http://tympanus.net/Development/PFold/index3.html
and the code for same is available at link: http://tympanus.net/codrops/2012/10/17/pfold-paper-like-unfolding-effect/comment-page-2/#comment-450779
And the github link for code is: https://github.com/codrops/PFold
I tried it a lot to figure out but was unable so please help someone. It will really be appreciated. Thanks in Advance!!
#hoverFm:hover .textSponsor
This does never really happen, because .textSponsor is not a child of #hoverGM, it is a sibling. You need to use the next selector, which is +:
#hoverFm:hover + .textSponsor
You could also change the structure to
<div class="uc-initial-content" id="hoverFm">
<img src="fm.png" alt="Fm" title="Fm">
<p class="textSponsor">92.7 BIG FM</p>
Then your original selector would work because now it really is a child.
http://healthybodyguru.com
If you load the site and wait 3 seconds you'll see the attentionGrabber bar appear in the header. It has shortcodes to add the social buttons (FB, Twitter, G+1), but for some reason the Google +1 button is too high.
I've tried adding custom CSS to lower it by adding margin/padding to the top but that didn't make a difference.
Any ideas what CSS I can use to make it line up with the other social buttons?
Thanks!
Try setting:
#___plusone_0 {
font-size: default; !important
}
Override inline CSS styles with !important.
The solution was to add:
#attentionGrabberWrap .plusoneBtn iframe{
margin-bottom: -3px !important;
}
I got help from the plugin creator :)
try putting a span tag around the google +1 button and pad that top.
<span style="padding-top:5px;">[shortcode]</span>
I don't know if you tried this with custom css but if not give it a shot and see what happens. a style tag in the html should override any styling that the stylesheet is giving the element.
As you can see I like divs and not spans. I've always gotten better results from divs than spans when css is playing around.
<div id="attentionGrabber">
<div id="centeredPart" style="width: 575px; margin:0 auto">
<div style="float:left;" class="facebookBtn">
...like code....
</div>
<div style="float:left;" class="twitterBtn" >
...twitter code...
</div>
<div style="float:left;" class="plusoneBtn">
...+1 code...
</div>
<div style="float:left;" class="linkToForums">
Check out our new forums:
<a class="link" href="http://healthybodyguru.com/forum/">go!</a>
</div>
<div style="clear:both"></div>
</div>
<div id="closeAttentionGrabber"></div>
</div>
I just put an invisible letter behind mine. A bit hacky but it worked for me.
<br><div class="g-plusone" data-annotation="none"></div><span style="font-size:33px;opacity:0;">G</span>
I want to create an optimized structure for following output in HTML.
rite now i m using this structure :
<div>
<div style="float:left; padding:5px;">
<img src="avatar_url">
</div>
<div style="float:left; padding:5px;">
Name <br />
Current Mood
</div>
<div class="clr"></div>
<div align="right">
Online Status
</div>
</div>
but in some cases i have to display thousands of friends on one single page thats why i m trying to optimize the structure and remove unnecessary tags from the code.
Can you not paginate the results?
<div class="user">
<img src="avatar.gif" class="user-avatar" />
<h1 class="user-name">Name</h1>
<h2 class="user-mood">Current mood.</h2>
<div class="user-status">Online Status</div>
</div>
This is technically a few less tags however...
This is quite a bit simpler. Depending on how fancy you need to get, almost everything can be stripped away:
<div class="friend">
<img ... />
<hx>FULL NAME</hx>
<p>Current Mood</p>
<p class="status">Online Status</p>
</div>
The hx part is just a stand-in for whatever level of heading you would want to use for their name.
Here's some very minimal CSS to go with that:
.friend img { float:left; margin-right:5px; }
.status { text-align:right; }
Aside from removing the div around the avatar img (can you set the float/padding on the img element itself?), there isn't a lot you can do.
However, you can optimise the amount of text by creating a class for float: left; padding: 5px and using that class instead of the full style thousands of times.
You can't delete a lot there, but you surely can replace the style attribute with a class one
class="left"
with
.left { float:left;padding:5px; }
And you can also replace
<div class="clr"></div>
with
<div class="clr" />
Anyway, not much will change in the loading times.