I saw that there's a module called Floating block that should do what I'm searching for: but it duplicates the floating block, making it totally unusable.
Can you please tell me some other ways to accomplish that?
By "float" do you mean have the CSS attribute "float" applied to it?
You can do this easily by looking at the HTML source code to get the Block div's id (usually "block-block-3" or something) then adding a new style is the CSS to float it.
Look for this in the HTML source to identify the correct block ID:
<div id="block-block-4" class="yadda yadda">
My block content
</div>
Then in your active theme's CSS file add an entry like this:
#block-block-4 { float: left; }
If you mean you want it to float in the same position as the user scrolls, you can use a jQuery plugin pretty easily to do that. I have used StickyFloat before with good success. Use the trick above to identify the correct block id to bind it to. Include jQuery and the plugin scripts, then bind it like so:
$('#block-block-4').stickyfloat({ duration: 400 });
Even better, if you use CSS correctly you can accomplish this without any additional modules or plugins.
The "Floating Block" module really only selets the block and set's it's position to fixed.
With the example above:
#block-block-4 {
position: fixed;
top: 100px;
left: 100px;
}
position: [fixed, absolute, relative]
these values override float:
if you need to force it, use
position: inherit !important;
then you should be able to use
float: [left, right];
Related
I'm trying to use window.loaction.replace() and discovered unwanted behavior.
The redirect works fine but it messes up my html structure.
It redirects to the wanted site but the top panel becomes a ghost. As far as I can tell the body structure behaves like it has a "negative margin the size of the panelheight". If I double the size of the panel with firebug it comes down.
The whole page looks like there is no panel at all after redirecting.
redirector: function(e){
window.location.replace(e);
}
The top panel is a nav element containing to ul's from which the right one is floated right. It is not fixed:
.panel{
display: block;
height: 42px;
position: relative;
z-index: 9998;
}
Even after manually reloading the page the bug doesn't disappear.
EDIT:
Same problem occurs if i redirect with PHP header: location...
The complete html,body moves up.
If I had to describe this bug in css it would look like:
html{
height:100%
position: absolute;
top:-40px;
bottom:40px;
}
Maybe it's useful for someone else:
The problem occurs if the calculated height of the content inside the body,html tags is higher than the body,html itself.
If the html,body have 100% height and inside the body are for example three elements:
Top Navigation Panel
Content Wrapper
Footer
And the calculated CSS height for these three element is higher than the body height it leads to this problem.
I don't know why it does only show up after a redirect but not if I navigate through links.
I have undefined (php determines how much) amount of divs appearing in another div. What i want is, the divs to appear that they are somehow collected. I don't know the right words to explain so i just made a little photomontage:
What I have:
What I want:
How can i achieve this effect. Do I need any other libraries or frameworks or something like that?
Seems like you want a 'masonry' style layout, checkout the isotope plugin by David DeSandro. Particularly the masonry layout style. http://isotope.metafizzy.co
I think you're looking to use the float CSS property. So add to your .post CSS class the following:
float: left;
.post {
vertical-align: top;
display: inline-block;
}
Remove center alignement otherwise the blocks are all centred.
.siteContainer {
text-align: center;
}
I have wordpress sidebar with:
<h3 class="widget-title">TITLE OF SIDEBAR</h3>
and I need show small icon before "TITLE OF SIDEBAR. Can I do with CSS?
Or I must manually add image into code? like:
<h3 class="widget-title"><img src="">TITLE OF SIDEBAR</h3>
Pseudo elements will do what you want. Using the :before pseudo element, your CSS would look like this:
h3.widget-title:before {
content: url('/path/to/image');
}
This will place an image before the text content of the <h3>, however this won't change the DOM at all which is important to note.
A good explanation of how pseudo elements work can be found here, on CSS Tricks.
If your image is 10px wide, you could try this:
.widget-title {
background: url(smallicon.png) left top no-repeat;
padding-left: 10px;
}
Keep your h3 tag without including img tag, and do the following:
h3.widget-title {
position: relative;
padding-left: <width of the icon image>;
}
h3.widget-title:before {
content: '';
width: <width value>;
height: <height value>;
position: absolute;
left: 0;
display: block;
background: url(<path of the icon image>) no-repeat;
}
.widget-title:before {
content: url(path/to/image.png);
}
You can find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/content.
h3:before {
content: url('https://www.google.com/images/srpr/logo4w.png')
}
Sample http://jsfiddle.net/KCXVM/
Yes, you can do it in CSS.
Simply use the :before pseudo-selector, like this:
widget-title:before {
content:url('imagename.png');
}
Or, of course, use h3:before { ... } for it to apply to all h3 elements.
Here's a working example for you
Browser compatibility: This works in all common browsers, except IE7 or earlier.
Why not simply apply the image as a background?
.widget-title {
background: url(...) no-repeat 50% 0;
padding-left: 20px;
}
So, at first, I thought a <span> thing would work.
Then, I tried this, and it worked seamlessly:
h3:before{
content: url('your url');
}
You can add icon before each h3 heading in CSS by following these ways below (via OIW Blog):
- Use Glyphicons of Bootstrap
If you are using Bootstrap then you can use Glyphicons to add icons to the desired title or text.
Bootstrap contains a diverse set of icons, to pick up a suitable icon you can take a look at here: https://getbootstrap.com/docs/3.3/components/. Once choosing a desired icon, adding it to theme is a piece of cake. You just need to add the card after the location that you want your icon to be displayed
<span class="glyphicon glyphicon-ok"></span>
Notice that the icon I added is “ok” so its class shall be “glyphicon-ok”. Each icon (in the list I mentioned above) is compatible to a different class.
- Use icons of existing Cheatsheet of the currently used Font or third party
If your website don’t use Bootstrap or the current set of icons of Bootstrap doesn’t meet your need (despite containing a lot) (Glyphicons of bootstrap has displaying errors on IE10 of Window Phone OS). After that you can check what font of the website you are using is and find out if it has an icons Cheatsheet library or not. For example: Elusiveicons, Fontisto, Material Design… are some of the fonts that have icons Cheatsheet which are for immediate use.
If your currently used font of the website has Icons Cheatsheet then you can have a set of icons of the third party. Here I would like to introduce “Font Awesome Icons”. This is a good-looking and popular set of icons.
To use this set of cons, you need to add this code to the head section in your website:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
– After adding CSS, you can use this code to put in the HTML which shows icons (you can apply this method to the part you use Cheatsheet of the font as mentioned above. Some fonts have unique way of using)
<i class="fa fa-edit"></i>
– If you don’t want the code in the HTML, you can just use CSS. With CSS you need to find the Class or ID of the part that displays icon and after that use the below CSS code to display it. Here I display the EDIT icon of the third party “Font Awesome Icons” before (::before) the title, along with 2 properties of padding-right and font-style (you can also display it after the title by using after property):
span.last-updated-time::before {
font-family: "FontAwesome";
content: "\f044";
padding-right: 5px;
font-style: normal;
}
Notice: the code of content is hexadecimal code. You can find and replace it with the code of the currently used icon. With “Font Awesome Icons” you can find it here: https://fontawesome.com/cheatsheet
Is it possible to set the default zoom level on a site? For instance, could I code my site in such as a way that it is zoomed to 125% when a user opens it?
My website body has this code
<body ID="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
How to put this zoom code inside?
Add zoom: 125%; to body style
body {
color: #536482;
background-color: white;
zoom: 125%;
}
This does not directly answer your question, but is an alternative that I recommend considering.
If you use relative sizing for your page (such as em), then you can set the base size of the site in one place, and the whole page will scale up and down accordingly.
For instance, if I want 125% of default size:
body { font-size: 1.25em }
Then, suppose I want a reasonable amount of margin around a header <div>:
#header { margin: 1em }
If I then go back and change that base size on the body to something else, the margin on my header will scale with it. If you do your entire page in relative units, this becomes very easy to do.
You might want to check the zoom CSS attribute. Bear in mind however that it is part of CSS3 and that, therefore, you might find it to behave oddly on old IEs. This is also completely separate from the interface zoom.
webView.setInitialScale((int) getResources().getDimension(R.dimen._50sdp));
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webView.loadDataWithBaseURL(null,htmlContent,"text/html","UTF-8", null);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDisplayZoomControls(true);
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
I'm having Sticky footer issues with this site:
http://dev.epicwebdesign.ca/allshipsrise/events/
For some reason or another, The #page div is limiting itself to the header.
I can't figure this out. All tags are closed, etc. The W3C Conformance checker only complains about "the acronym element is obsolete. Use the abbr element instead.". That is wordpress's doing.
It's similar to Footer isn't at the bottom of the page However I have set clear:both on the footer.
The footer is fine when the page is too tall. I need it on the bottom even when it's not.
There were a couple underlying issues, mostly from trying to compensate for the real issue. (Not setting body height:100%) They're all sorted out now.
In your body set the height to 100% and your footer will be displayed until the end of your page :)
Or another work around would be changing the margin-top: to 100%
You have a few problems. With element.style you are using absolute positioning and raising it up 85px. Change that to position="relative" and remove the bottom attribute.
This:
element.style {
bottom: 85px;
position: absolute;
}
Becomes:
element.style {
bottom: 0px;
position: relative;
}
Removing position:relative solves the problem. Just remove this element using firebug and you will get the result.