I uploaded the WordPress few days ago and found out that the one on local host and the one on the website www.noteid.com are different.
The one on the website has the white-space on the right hand side:
So I did test it with my theme and the one that WP has: Twenty-Fourteen
All the others theme work fine but two of those.
It seem like: html { overflow-x: hidden } work but I want to find what cause the problem. I took 2 days do the research and feel like nothing work out.
Can anyone help me to point out what happening to my website?
Thank in advance.
This is CSS: http://jsfiddle.net/n9zqygcj/
The reason this is happening is that the #footer width is 105% of the page.
You need to change:
#footer {
padding-left:0;
}
#colophon {
margin-left:5%
}
So that the footer isn't longer than it should be.
EDIT:
Here is the updated CSS.
http://jsfiddle.net/n9zqygcj/2/
The <a> tag which is wrapped around the <div id="footer"> should be assigned a class, for e.g. <a href="#" class="footerlink"> and then the following styles should be added to inside your stylesheet:
.footerlink {
display: block;
width: 100%;
overflow: hidden;
}
Apart from this, also add the following style to your stylesheet:
.metaslider {
overflow: hidden;
}
Hopefully this will eliminate the problem of extra white space on the right side which you're facing on your website.
Related
This is my WordPress Starter Theme: http://starter.devurl.net/
Relevant HTML:
<html>
<body>
<ul class="skiplinks">...</ul>
<div id="site-wrap">
<!-- content here -->
</div>
</body>
</html>
Relevant CSS:
body {
direction: rtl;
overflow-x: hidden;
}
#site-wrap {
position: relative;
min-height: 100%;
transform: translateX(-250px);
}
Viewing the website in mobile (in Chrome's Devtools).
body has overflow-x: hidden;
div#site-wrap has transform: translateX(-250px);
As far as I grasp the idea, #site-wrap suppose to move to the left and leave a blank space at the right, without any horizontal scroll to the sides.
Notice the website direction is RTL, but it's not supposed be a problem, and I'd like to keep it that way without using ltr anywhere in the document.
Thank you!
In my experience with mobile, due to the way they render various things, you sometimes need to address the html element as well to ensure things work properly.
This is what it looks like (before fix) on a Samsung Galaxy (I've added borders to elements to illustrate what's happening):
Black: html element
Green: Body element
Red: site-wrap element
Blue: skiplinks element
Notice that the body and html are actually only the right 250px.
By adding this:
html {
overflow-x: hidden;
}
the problem seems to be resolved:
I'm sure someone smarter than I am will be able to explain why!
I try to solve this problem for hours ...
I tried a few tricks, some small hack, I also tried to add positions "relative, absolute...Etc", some "top", top add a invisible not fixed div behind the fixed and others, but I want the cleanest solution possible and to know WHY have I got this problem.
: I have a menu "fixed" to the top, and a header.
The header is behind the menu (normal), but the problem is that when I add a margin to the header, it adds a margin to the body, while I want to add margin to the header INSIDE the body, just place the header under the menu without position:relative+top:Xpx.
And use "box-sizing: border-box" doesn't change anything
http://jsfiddle.net/WdNz4/
<div id="menu">
</div>
<div id="header">
test1(Success)<br>test2<br>test3(Lose)<br>test4<br>test5
</div>
(can't post my css, little bug, go to jsfiddle)
Thanx in advance for your help !
Add top:0; property to your #menu:
#menu {
height: 40px;
width: 100%;
position: fixed;
background-color: red;
top:0;
}
JSFiddle: http://jsfiddle.net/WdNz4/4/
Just use float:left; this will set your block outside the body structure, so that way you can position it anyway you want.
Can someone help me I'm searching for css/html code example:
I have a webpage with 3 buttons(top, middle, bottom) each specified to 1 div section on my page, lets say my first div section is in the middle of that page div id='middle'.
If I click this button(middle) my page would automatically scroll down from the top
of my page to the div #middle section.
same for the other buttons refered to div id='top', and div id='bottom'
Thanks in forward! I really couldnt find any solution on the internet.
Is there a way to keep my buttonlist on a fixed position so it stays on screen while
moving through sections?
try this:
<input type="button" onClick="document.getElementById('middle').scrollIntoView();" />
For something really basic use this:
Go To Middle
Or for something simple in javascript check out this jQuery plugin ScrollTo. Quite useful for scrolling smoothly.
There is a much easier way to get the smooth scroll effect without javascript.
In your CSS just target the entire html tag and give it scroll-behavior: smooth;
html {
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: black;
}
#down {
margin-top: 100%;
padding-bottom: 25%;
}
<html>
Click Here to Smoothly Scroll Down
<div id="down">
<h1>You are down!</h1>
</div>
</html
The "scroll-behavior" is telling the page how it should scroll and is so much easier than using javascript. Javascript will give you more options on speed and the smoothness but this will deliver without all of the confusing code.
HTML
Top
Middle
Bottom
<div id="top">Top</div>
<div id="middle">Middle</div>
<div id="bottom">Bottom</div>
CSS
#top,#middle,#bottom{
height: 600px;
width: 300px;
background: green;
}
Example http://jsfiddle.net/x4wDk/
Try this:
Scroll to top
If you want smooth scrolling:
html {
scroll-behavior: smooth;
}
http://buttonspace.com/
I want to put equal space between the 4 buttons at the top, but I'm having trouble. At first the "social-buttons" id was in a DIV floating left, but that caused the slider to get pushed to the right.
So I changed everything to and now the padding style doesn't seem to have any effect.
I then tried adding "display: inline-block;" since I read that from another StackOverflow question but that didn't help.
Here's the current code (ignore the PHP):
<!-- Social Buttons -->
<span id="social-buttons">
<fb:like href="<?php echo $url; ?>" send="false" layout="box_count" width="60" show_faces="false" font="verdana" class="fb-like"></fb:like>
Tweet<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
<g:plusone size="tall" callback="callback" href="<?php echo $url; ?>" class="google-plus-one"></g:plusone>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=<?php echo $url; ?>"></script>
</span>
<!-- End Social Buttons -->
#social-buttons { display: inline-block; padding: 0 0 0 100px; }
.fb-like { padding: 3px 0 0 0; border:none; overflow:hidden; width:60px; height:90px; }
.twitter-share-button { padding: 6px 0 0 0; }
.google-plus-one { display: inline-block; padding: 0 0 0 10px; }
Any ideas? Ideally I want the best suggestion to not only space the buttons evenly, but to use proper code for putting the buttons on that header bar in the first place ;) I'm sure my code could use lots of improvement.
Updated:
Something like this:
http://jsfiddle.net/MjFmN/1/
#social-buttons div,
#social-buttons iframe {
float:left !important;
display:inline-block !important;
margin:0 10px 0 0 !important;
border:none;
overflow:hidden;
}
.fb-like {
width:50px!important;
}
Please note that the Google+ button doesn't appear in the Fiddle. I did test it with the actual Google+ html that the script generates and it appears to work for me on Firefox8, Window 7.
You can leave the HTML you have like it is now for this to work.
Another edit:
Just tried it in IE9, for some reason the FaceBook button displays in my local language causing the width to change and thus you only see part of the image ( overflow:hidden and all that ). If you can force a language setting on the FaceBook button this is solvable, but I have no experience with it to say if that is or isn't possible.
http://forum.developers.facebook.net/viewtopic.php?id=58989 seems to have some tips on how to do that.
This is not really the answer, but might help a bit down the road:
No block elements in inline elements (you have the and inside it some divs etc. make it a div).
Validation:
try fixing the validation (though most of it is probably the fb stuff):
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbuttonspace.com%2F
Try reducing the problem to the bare minimum. Eg. make a page with just the header part in it. and remove as much html as you can, with the error still there. then try to fix it from there. sometimes it's hard to see if the problem is really an issue from some faulty css/html before it.
The different boxes are styled differently (or at least they have different classes etc.) Try unifying it. Thought maybe the boxes are made with some javascript (I'm not sure, I haven't used thoses boxes before)?
Try doing this, with just some colored divs and see if you can make them be padded properly, then switch to the social buttons one by one.
I hope this can help you get started.
Edit: I think the problem is the FB button... try removing that or looking at the .fb_iframe_widget class there.
I saw a similar question here, and did not see an answer. I'm having an issue where an element is floated right, inside a parent div, and it's causing the div to stretch the entire width of the page in IE7. This does not happen in any other browsers (Firefox and Chrome). I've also posted pictures after the question, for reference. The HTML I'm using is below:
<div id="journal" class="journalIE">
<div class="title_bar">
<div>
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
</div>
The CSS I'm using for these tags is below as well. One thing I noticed consistent between the other person's question referenced above, and my issue, is that both parent div's have positioning applied (person above has absolute, I have fixed).
#journal
{
z-index: 1;
}
.journalIE
{
right: 1px;
bottom: 18px;
position: fixed;
}
#journal .title_bar
{
background: #F3F3F3;
border: 1px solid #C5D6E8;
color: #363638;
font-size: 11pt;
font-weight: bold;
height: 20px;
padding: 4px;
margin-bottom: 4px;
}
#journal .title_bar .actions
{
float: right;
}
.clear
{
clear: both;
}
Notice that the 'actions' class is floated right. If I take away that float, my box looks like this. But with the float added, it stretches the entire screen, and looks like this. Is this a known IE bug, because it's not happening in any other browser, and it's driving me crazy.
For those wondering, I did have content in the 'actions' div, but have stripped away everything down to the root problem.
Any assistance would be greatly appreciated. Thanks very much.
You need a width: *A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). *
via: W3C
Do this
<div id="journal" class="journalIE">
<div class="title_bar">
<div class="Test">
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
and then add a Css class
.Test
{
float:right;
}
should do it, let us know if it does not work.
MNK
I'm not entirely sure what you want, as you didn't explain what you wanted to do with the "actions" div, but if you wanted the "actions" div to float right next to the "Testing" div, I just tried making a separate .floatr class, or it will also work if you just apply style directly to div.
.floatr {
float: right;
}
with .floatr class, apply that to "actions" div:
<div class="actions floatr"></div>
I don't know why, but it seems to me that "actions" div is ignoring the float setting in the class you set in that manner. I personally prefer to apply multiple classes to divs, which allows me to reuse that class over other divs for which I want that effect, but I've heard that some browsers will ignore any classes declared after the first one. Oh well, I haven't run into that problem yet with major browsers...
Oh wait.
I looked over code again, and I think you just had a problem with how you set your classes. Your "actions" div was missing out on the action, try adding a comma to CSS:
#journal .title_bar, .actions
{
float: right;
}
I guess sometimes to figure something out you gotta apply effect directly to make sure it can behave in the manner you expect it to, and then probably figure it's some sorta syntax error if it does work. heh.