I have a small Perl script the loads some external images to page. The images links (50 of them) are all within an array which I iterate through to dump to screen. While I am reasonably good at Perl I have never done any web dev before so I am a complete noob with CSS. I have the following code in the html template
[% FOREACH dvd IN dvd_chart %]
<div class="thumbnail">
<img src="[% dvd.thumbnail %]" />
<br>
</div>
[% END %]
The CSS is this:
.thumbnail
{
float: left;
width: 120px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}
EDIT:
Generated HTML looks like this:
<div class="thumbnail">
<img src="http://content9.flixster.com/movie/11/16/78/11167831_pro.jpg" />
<br>
Taken 2
</div>
<div class="thumbnail">
<img src="http://content9.flixster.com/movie/11/16/86/11168615_pro.jpg" />
<br>
The Possession
</div>
<div class="thumbnail">
<img src="http://content7.flixster.com/movie/11/16/80/11168037_pro.jpg" />
<br>
Won't Back Down
</div>
<div class="thumbnail">
<img src="http://content9.flixster.com/movie/11/16/51/11165143_pro.jpg" />
<br>
To Rome with Love
</div
The problem is the images start to load perfectly, the first two rows are fine, but then there will be a few rows with just one image, followed by more good rows. There are no missing URLs. Can anyone suggest what might be going wrong or even a good tutorial for loading dynamic images into div -that wraps!
I took a look at your HTML and CSS in a JS fiddle, and I saw right away that it's an issue with the height of any item with a longer movie title. A quick Google search for "CSS gallery variable height" brings up this tutorial: http://jonathanweatherhead.com/2012/12/31/how-to-make-a-flowing-css-gallery-layout/
I would follow that. Otherwise, you may have to set a height for all gallery items (not the best plan) or limit the length of the movie titles (also not great).
Related
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>
This is Wordpress-related question, but since desired solution is purely CSS-related, I posted it in here, not at wordpress.stackexchange.com.
In my current style, if image has no following caption, it is placed using HTML code like that:
<p>
<a href="http://cnn.com/file.jpg">
<img src="http://cnn.com/file-300x225.jpg" alt="" width="300" height="225" class="aligncenter size-medium wp-image-55">
</a>
</p>
In my current style, it is styled like that:
img {
display: block;
padding: 5px;
background-color: #eee;
border: 1px solid #ddd;
}
Which draws simple border around it.
If there is a caption following image, entire HTML in this part is a little bit more complex:
<div id="attachment_55" class="wp-caption aligncenter" style="width: 310px">
<a href="http://cnn.com/file.jpg">
<img src="http://cnn.com/file-300x225.jpg" alt="" width="300" height="225" class="size-medium wp-image-55">
</a>
<p class="wp-caption-text">Caption</p>
</div>
Currently caption is not styled at all (as per my currently selected theme).
What I would like to achieve is to have entire div styled (image and caption), if there is any caption. If I'm not mistaken, that would require to style img (as currently) only, if it is not followed by <p class="wp-caption-text">. If it is, then img should not be styled at all and it second-in-row parent (<div class="wp-caption">) should be styled instead.
That's all for the algorithm. But how to code this in CSS (and whether it is possible at all) -- I don't know.
The simpliest solution would be to never style img and always style <div class="wp-caption"> instead, no matter if there is caption following image or not. But the problem is, that Wordpress is adding that div only, if there is a caption. So styling only it, would result in no border at all, if there is only image.
if you can use Jquery.
you can manipulate the markup then. if the pattern of your img and img with caption is going to be like that, you can do this.
$('img').each(function(){
if($(this).parent().parent().hasClass("wp-caption")){
$(this).parent().parent().addClass('img');
}
});
am sure this code can be optimized even better, but it should give you an idea.
see this fiddle
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.
I'm helping an artist maintain her website and have inherited some pretty outdated code. Have moved lots of redundant common code to include files and am now working on moving from inline styles to more CSS-driven styles.
For the gallery pages, e.g. http://artistsatlaketahoe.com/abstract.html, a lot of inline styling is used to force the current layout. My preference would be to replace this entirely with CSS that presents the following table-like layout within the "content" div:
[image] [image descriptives and purchase button]
[image] [image descriptives and purchase button]
[image] [image descriptives and purchase button]
I'd like to middle-align the image descriptives & purchase button relative to the image if possible. And then apply some padding above and below each row to stop using tags for vertical spacing.
Any ideas how to create a div that I can use to get this kind of layout?
Thanks!
Using inline style for simplicity, move to CSS to accomplish your goal.
<div>
<img src="#" style="float: left; padding: 10px 10px 10px 0;" />
<div>
<p>Text</p>
<input type="submit" value="Submit" />
</div>
</div>
<div id="container">
<div id="row" style="display:table-row; margin:5px 0; outline:red solid 1px;">
<div id="image" style="float:left; outline:blue solid 1px;"><img src="#" /></div>
<div id="content" style="display:table-cell; padding:5px; outline:green solid 1px; vertical-align:middle;">
Image Description<br />
<input type="button" value="Button" />
</div>
</div>
</div>
Which method is best?
<div id="header">
<a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
<h1>slogan of company</h1>
</div>
<div id="header">
<a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
<p>slogan of company</p>
</div>
<div id="header">
<a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
<span>slogan of company</span>
</div>
<div id="header">
<div id="logo">
<img width="172" height="80" src="logo.jpg" alt="Clevex logo">
slogan of company
</div>
</div>
I would think a better approach would be to have the slogan as a span. The slogan is not truly the first header of your document. Think if it were a table of contents would you see the slogan as the first entry?
The slogan is probably subject to some design rules (e.g. the position relative to the logo). As the slogan probably makes little sense in a content / SEO way anyway, and it's more important it looks right, I would recommend putting the slogan into the image.
Looks good, apart from the fact that a slogan isn't really a heading, hence a <span> or something without semantic meaning should be used instead of <h1>
I guess not;
It's better to do it like this:
<h1 onclick="document.location='/';"><span>CompanyName</span></h1>
<h2>Slogan here</h2>
Since your logo is part of the layout and not a image in context (for example a product picture) you should put it in the h1 background.
Do your CSS like this:
h1 {
background-image: url(logo.png);
width: 200px;
height: 80px;
cursor: pointer;
}
h1 span {
display: none;
}
This way it is both readable for the and user and a search engine.
No, something like the following would be better:
<div id="header">
<h1>Company</h1>
<h2>Slogan</h2>
</div>
h1 { text-indent: -90000px; background: transparent url(/img/logo.png) no-repeat left top; width: 172px; height: 80px; }
h1 a { display: block; width: 172px; height: 80px; }
The h1 is only used once, for the company itself. Then you replace that logo text with an image using CSS. This way you keep the markup within your CSS.
In general, I think you'll see everyone's slogan as an image rather than text (with the text as the alt attribute). And href="#" means "go to the top of this page." It should probably be a link to the home page instead.
...As long as you use alt, search engines will index it properly. If this is the home page, that might justify having the name and slogan in h1 and h2 elements, but elsewhere it's probably not necessary. It's probably better to drive traffic based on the actual content of the page and not try to make every page the same in the eyes of search engine spiders. The company name is probably already in the url, which is plenty.