I can't figure out why this happens. The second image is somehow located below the level of the first one, but the next lines of images are OK.
Screenshot: http://i.stack.imgur.com/e1P2t.jpg
The code for each linked image is :
<a style="display: block; float: left; padding: 5px;" target="_blank" href="_link_">
<img src="_link_" width="300" height="200" />
</a>
What should I do to correct this?
Live example can be found here http://chemica.ru/thread/1433
Welcome to stackoverflow...
You have <br/> tags after each linked image. If you get rid of those, that should help.
Get rid of the <br> between the <a> tags when they're on the same line - that is the problem.
Related
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.
**Note all <> tags have been removed to allow code to display
**
i have been playing around with this for hours and am not really getting it to work without using a workaround at the design end of things (ie Corel draw)
*Before i go any further,
First, website URL is AdventistAviation.com.au
Second, can i just say...i know this can be done with style sheets...however, in this case...i am not doing it that way!!! (so please dont bother pestering me with that option unless there is absolutely no way the method below can work)
Third, a workaround to my problem below, is to create the image already centered in its own background (the same size as the logo next to it) then import it (this is a bad idea because if in the future someone changes the main header background to a different color other than white...its gonna look awful!)
First i add the image (this works no problem)
However because the Logo on the left in the avada theme is approx 250×250 square, Tagline text is no longer centered in the header (as you can imagine comparing above with logo below)
I am using the themeforest AVADA Theme. In theme options>Banner Code For Header #4…
I would like to add the following inline css styling in an iframe for example, to vertically centre the Tagline (ie bring it down level with the middle of the logo)
style="vertical-align: middle;"
<iframe src="http://image_URL.png" style=”vertical:align: middle;” width="200" height="200"></iframe>
This doesnt seem to do anything different to the method in 1.
<div style="vertical-align: middle;"><iframe src="http://image_URL.png" width="200" height="200"></iframe></div>
I was hoping that if i place the iframe inside a tag containing the styling i might achieve my goal...alas it still doesnt work.
I have got to the point where my head is so full of nonworking methods i cant progress further.
Can someone help with this one?
p.s i have tried to find some inline css styling tutorials (specifically about vertical alignment styling) for the tag in html 5 without any luck.
damn w3c for depreciating the html vertical alignment method in html5!
# adam:
A simple solution is to change this code:
<div id="header-banner">
<div style="vertical-align: middle;" height="170" width="500">
<img src="https://googledrive.com/host/...etc..." width="400" height="200">
</div>
</div>
To just this:
<div id="header-banner" style="margin-top: 70px;">
<img src="https://googledrive.com/host/...." width="400" height="200">
</div>
There's no good reason to use inline styles for this, but anyhow, I've edited a chunk of your HTML with inline styles that will get what I think you want:
<div class="avada-row" style="margin-top:0px;margin-bottom:0px; display: table; width: 100%">
<div class="logo" style="display: table-cell;margin-right:0px;margin-top:0px;margin-left:0px;margin-bottom:0px; vertical-align: middle;">
<a href="http://adventistaviation.com.au">
<img src="http://adventistaviation.com.au/wp-content/uploads/2014/02/AAA-QLD-LogoType5_outlinedSQC1-e1398740621697.jpg" alt="Adventist Aviation Association" class="normal_logo">
</a>
</div>
<div id="header-banner" style="display: table-cell; vertical-align: middle; float: none; text-align: right;">
<div style="/* vertical-align: middle; */" height="170" width="500">
<img src="https://googledrive.com/host/0B7IkcUtUKfX8SkpLS1NuTlR4cDA/AAA_Tagline.png" width="400" height="200">
</div>
</div>
</div>
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.
Something is definetly wrong with my ul and li. I know I made a huge mistake but I cannot find it. When you go here:
http://icpy.webs.com/text/Mass.htm
You will see both thumbnail images are different but both pop ups have the same bigger image as the first thumbnail.
Why are these before doctype? What are those custom elements?
<link rel="stylesheet"type="text/css"href="../text/aboutleft.css">
<img src="http://icpy.webs.com/content/masslayout.png"/><br>
____________________________________________________________________________<br><br>
<x><re>colors available</re></x><br>
<x><gre>available to unlimited users </gre></x><br>
<x>Changes available: box, link, username</x><br><br>
Why don't you use a relative link for the masslayout.png?
Have you ever heard of the <hr> element in HTML?
I don't see any thumbnails, neither popups and I don't know what you are talking about.
jQuery is stored on Google and it is in cache for most of the users. Why do you store and link another one?
Your CSS:
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
body {
max-width: 700px;
margin: 0 auto;
#cas ul {
list-style-type: none;
}
}
What is this?? What did you want?
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe>
Href attribute needs a close quote mark.
Look at your source code and after that into the inspector and please correct as many errors as you can.
I think the reason it's like that, because both boxes are within the same <a>-Tag, which of course links to only one of the big images:
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/BEA01.png"/>
<div id="inlineframe" style="width: 1040px; height: 785px; display: none;">
</div>
</a>
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/JAK01.png"/>
<div id="inlineframe" style="width:1040px;height:785px;display: none;">
</div>
</a>
I have an image that is floated to the left that wraps text around it fine, however, I have a problem when a Ul and Li come into play. I wasn't quite sure how to explain this, so here is a picture:
code:
<div style="overflow:auto;">
<center>
<h2>Ultimath V. 1.6.1 Released</h2>
</center>
<img align="left" src="images/ultimath_quadratic_tablet_land.png">
<center>Many new features and updated features, such as:</center><br>
<ul margin-left="15px">
<li>Changed Search function to no longer bring you to homepage if not activated</li>
<li>Multiple UI Fixes and upgrades</li>
<li>Tablet specific layouts! (example to left)</li>
<li>All inputs now automatically accept numbers (no more fumbling with switching to number keyboard!)</li>
<li>Major Step by Step revamp! All solvers are now MUCH more specific!</li>
</ul>
</div>
<br>
<hr>
Thanks in advance!
WRONG:
<ul margin-left="15px">
CORRECT SYNTAX:
<ul style="margin-left: 15px">
Also try set up margin-right: 15px; for your image.
Instead of float: left, you should using display:inline-block.
Live Demo