I am create a blog using blogger.com.When I click on a label (Or tag ) I get back to the homepage, while the relevant label posts should load. Ideally I want to load max posts 20 per page and pagination to see more.
My code is,
<b:widget id='HTML44' locked='false' title='Label' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:blog.searchLabel != ""'>
<h2 class='title' id='tit_h2'><img border='0' src='http://3.bp.blogspot.com/-uqDJqtNSkfY/UyElenxHsDI/AAAAAAAAAGk/4QaOO27tY0w/s1600/Heading+1.png' style='margin-top:-2px; float:left; margin-right:10px;'/><data:blog.searchLabel/></h2>
<div class='eggTray'>
<script src='http://helplogger.googlecode.com/svn/trunk/listbadge.js'>{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"http://www.foxbet.gr/feeds/posts/default/-/<data:blog.searchLabel/>"},
"hideHeader":"false","height":"auto","count": 20 }</script>
<div class='ycdr' style='font-family: arial, sans-serif; font-size: 9px;'><a href='http://helplogger.blogspot.com/2012/05/recent-posts-widget-with-thumbnails-for.html' target='_blank' title='Grab this widget'>Recent Posts Thumbnails</a> <a href='http://helplogger.blogspot.com/' target='_blank'>Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
<style type='text/css'>
.ybi{display:block;}
.eggTray {margin:10px 0px;padding:0px;}
.ybr li {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {display:none; background:transparent url(http://3.bp.blogspot.com/-oxTuqVj1ziA/T6P6wtxqsgI/AAAAAAAACBE/wWR0bb2gfuE/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
.pipesThumbnail{width: 70px !important; height: 50px !important;}
.pipesThumbnail img{width: 100% !important; height: auto !important;}
</style>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if> </b:if></b:if>
</b:includable>
</b:widget>
Any one please help me
Considering you have a pagination script in your template.
Now For pagination scripts to work on your labels aswell, you need to specify parameters in URL.
Example:
http://yourblog.blogspot.com/search/label/posts?&max-results=20
here posts will be replaced by your label name.
& parameter will enable pagination on your labels aswell.
max-results=20 will load 20 posts maximum (this can be changed by your choice)
Hope this helps.
Related
I have a div inside my HTML document for responsive signing:
<div class="header" style="line-height: 30px; font-size: 1em; background-color: #f9f9f9; padding: 37px 60px;"></div>
The color does NOT show up inside DocuSign's view, but when I export the document as a PDF, it shows up there just fine.
I have also tried background, with no success either.
This link says that background-color is supported.
https://developers.docusign.com/docs/esign-rest-api/esign101/concepts/responsive/setting-tabs/
EDIT:
Sorry, I might have been as clear as I should have. Here is a better example of the code I am trying to run:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body style="font-family: sans-serif; padding: 0px; margin: 0px; font-size: 12px; padding: 0px; color: #11263c;">
<div class="header" style="line-height: 30px; font-size: 1em; background-color: #f9f9f9; padding: 37px 60px;">
Some other divs with content are here...images, text, etc.
</div>
<div class='some-other-content-div'>Blah</div>
<div class='some-other-content-div-2'>Blah</div>
</body>
</html>
The div with the class header is the one that is not showing the color behind it and its children. The value of "pink" worked and its HEX value, the color WHiteSmoke and its HEX (#F5F5F5) worked as well...but not the color GhostWhite or its HEX value (#F8F8FF) or the color I actually want to use...#F9F9F9. Just examples of colors I have tried...I hope this clarifies a bit more!
This may be a bug, which I'll ask to be fixed.
From what I can tell, it's dropping empty divs until it finally gets to some content. Including any visible elements before their div, or an invisible div with content "<div style='display:none'>.</div>", seems to get it working correctly.
So this is the workaround for now.
I have a website I am creating for a school project. I am very new to html and css. I have created div containers for the different sections of my pages. On my index page, I have 5 containers including the header and footer.
The containers are working everywhere except in 1 location where I am floating images. For some reason, the box is shrink-wrapping under the 3 images. I thought by placing a position:relative in the .container css rule, it would behave like it is with paragraphs and other elements. I would like that container to surround the pictures just like it is with the other boxes on the index page.
Here is the html for that specific container that is not working:
<div class="container">
<article>
<h2>Meet the Staff:</h2>
<div class="gallery">
<figure class="staff"><img src="images/mary.jpg" alt="mary the librarian" />
<figcaption>Mary the Librarian</figcaption>
</figure>
</div>
<div class="gallery">
<figure class="staff"><img src="images/ruth.jpg" alt="mary the librarian" />
<figcaption>Ruth the Assistant</figcaption>
</figure>
</div>
<div class="gallery">
<figure class="staff"><img src="images/esther.jpg" alt="mary the librarian" />
<figcaption>Esther the Research Librarian</figcaption>
</figure>
</div>
</article>
</div>
And here is the css:
.container {
width: 1000px;
height: auto;
margin: auto;
margin-bottom: 25px;
padding: 0 20px;
position: relative;
background: #fff;
box-shadow: 0 0 10px #b5b2ab;
}
figure img {
border: 1px solid #666;
background-color: #fff;
padding: 4px;
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
figcaption {
font: Arial, sans-serif;
text-align: center;
margin: 10px 0 0 0;
}
figure {
display: block;
float: left;
width: 240px;
margin: 0 25px 25px 25px;
}
Here is the so you can see what is happening: http://www.ta5zc.com/
Thanks for any help you can provide. I can't seem to figure out what is wrong.
Embarrassing, but I figured it out. The container is acting just like it is supposed to. There was no elements below the images, so there was nothing to stay in place. Therefore, when I floated the images, the box moved up the page like it was supposed to. Like I said, I'm new at this ;-)
What i have
If I have two images (one includes frame and another includes the picture),
My question
can I show it in the same image by using Polymer? I think it looks like bitmap in android and I want to do in web but I really don't know how
Here is one example on how to place a picture over a picture. Since I didn't have any pictures i "faked" them with span tags. Plunkr
<style>
.pic-one{
background: red;
position: absolute;
height: 30px;
width: 30px;
}
.pic-two{
background: blue;
position: absolute;
margin: 5px 5px;
height: 20px;
width: 20px;
}
</style>
<div class='container'>
<span class='pic-one'></span>
<span class='pic-two'></span>
</div>
Trying layout inline elements I discover wierd behavior.
Can someone explain me why is there any different?
To both HTML I apply this css:
.time {
position: relative;
top:100px;
height: 5px;
background: red;
border-radius:5px;
text-align: justify;
font-size: 0.1px;
padding: 0px 10px;
}
.time > .snapshot {
position: relative;
display: inline-block;
width:2px;
height: 13px;
top: -5px;
background: red;
}
.time:after {
content:'';
width: 100%;
display: inline-block;
}
And now HTML
- Wierd behavior:
<div class="time" >
<div class="snapshot" ></div><div class="snapshot" ></div>
</div>
http://jsfiddle.net/FSLAJ/
Expect behavior:
http://jsfiddle.net/dXwjR/1/
Update
I play a little with inline-block and justify, and I have another wierd example:
<div style="text-align: justify;">
test test test
<div style="display: inline-block; width: 100%;">test test</div>
test test test
</div>
JSFiddle example
I just wonder why second anonymous inline element is not justify?
The difference is due to the fact that inline elements are sensitive to white space in the code, and that's what's providing the spacing in your "expected" example. Add some margin-right to your .snapshot tick marks in your other one and they'll spread out like the other example.
jsFiddle example
After many hours I figured out why the links within my pngs in IE6 do not work.
It's because Im using filter:progid:dximagetransform.microsoft.alphaimageloader within my CSS. Yet after many more hours I have not found a solution to fixing these links.
Here is my code...
HTML
<div id="fullwidth-header-wrapper">
<div id="header"> <strong class="logo"> Google </strong>
<div id="nav">
<ul>
<span>
<span style="color: white;">Prefer</span>
Google? Click
here!
</span>
</ul>
</div>
</div>
</div>
CSS
#fullwidth-header-wrapper {
height: 120px;
}
#header {
background:url(../images/header-bg.png) no-repeat 50% 0;
height: 138px;
width: 980px;
margin: 0 auto;
position: relative;
top:0;
}
.logo{
background:url(../images/logo.png) no-repeat;
display:block;
width:500px;
height:125px;
position:absolute;
top:40px;
left:85px;
}
.logo a{
display:block;
width:323px;
height:85px;
text-indent:-9999px;
overflow:hidden;
}
#nav {
background:url(none.gif);
filter:progid:dximagetransform.microsoft.alphaimageloader(src='images/nav.png', sizingmethod='crop');
display: inline;
position: absolute;
top: -8px;
right: 30px;
width: 350px;
height: 75px;
z-index: 150;
}
#nav ul {
position: relative;
top: 18px;
left: 0px;
color: rgb(87, 175, 237);
font-size: 96.8%;
z-index:200;
}
#nav span {
color: #fff;
position: absolute;
top: 18px;
left: 0px;
font-size: 96.8%;
}
#nav a {color: rgb(255, 255, 255);}
How do you fix this issue or avoid this and suggestions re: a possible solution for the above?
Thanks!
Try this: http://www.hrunting.org/csstests/iealpha.html
In short:
What matters is that the element with the filter has no position set and the link within the filtered element has a position set. If that's the case, links within the filtered element will work.
Since your #nav element has position: absolute, you'll need to add a wrapper div around that and absolutely position that instead.
This is often a problem with using a png fix on something that contains links, the Alpha version of the twinhelix png fix has apparently solved this issue. I have used it, its a little buggy still or at least it was a few months ago, but used right on small sites it is production ready http://www.twinhelix.com/css/iepngfix/.
I normally use the twinhelix 1.0 script for all our sites, I include an ie6.css stylesheet with a conditional comment aimed at IE6:
<!--[if lt IE 7]>
<link rel="stylesheet" href="/css/ie6.css" type="text/css" charset="utf-8">
<![endif]-->
Inside there you then in the CSS you just call it using the 'behavior' rule. IE 7 and 8 do transparent png's just fine. You do need to make sure you have a blank.gif 1px by 1px transparent gif somewhere and update the htc file (which really is just JS) to link to the path of that image.
#nav {
behavior: url(/css/iepngfix.htc);
}
I hope this helps
I had a similar problem, I was using a transparent background so I had to apply the png fix. I had a div and a link around it, like this:
<div id="bla"></div>
The links were not working at all in IE6. When I applied position: relative to that bla div, it worked! position: relative seems to work wonders on IE6, as well as float: left sometimes...