I am developing a website and i am making it RTL. the whole website is ok but i have a problem on 1 page
I am having trouble on making this page RTL.
Since other pages are ok, i am pretty sure the search form on this page is making this problem. even i used the following code to avoid scrolling but after clicking on search fields, the pages scrolls left again:
html, body {overflow-x: hidden; }
I might have discovered the problem. You have the following CSS declaration:
.single.options-hidden.selectator_element .selectator_input {
opacity: 0;
position: absolute;
left: -10000px;
}
That left: -10000px; seems to be the cause of your issue.
Related
I am working on this Wordpress website in which Kona theme is used. Someone already did some changes in the original theme after the installation. Hence, now I am having this issue where my menu bar is appearing on the slider itself in desktop mode. In mobile/tablet mode, it is working okay. However, desktop mode shows the menu like this as shown in the image below. I am not much experienced in WordPress, hence, I am finding it hard to separate the menu strip and slider and make it responsive.
Can someone guide me what can I do in this regard?
This is the image. Please click on the link to see the image.
Edit: Here's the website link --> https://www.pinsandpearls.com/
That's for the link. In your CSS you have something like this:
#header {
z-index: 1501;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Instead, try it:
#header {
z-index: 1501;
width: 100%;
position: relative;
}
I am having an issue with the mobile version of a site. I have managed to get the navigation to stay at the top of the page, but the logo moves down as the user scrolls.
I have tried various suggestions I have found on here and other sites including:
#masthead .site-header {
position: relative !important; }
#sticky_navigation {
position: relative;
top: 0;
}
These are all within a media query for mobiles.
I am pretty new to code, so I'm sure it's probably a rookie error!
This is a link to the site. http://coppercatphotography.co.uk/demo/wordpress/
Thank you!
The reason that your logo is moving down with the page is because your declaration .container_16 .grid_5 has position: fixed. You'll need to remove this or overwrite it. You could do:
#sticky_navigation .container_16 .grid_5 {
position: absolute;
}
That should overwrite it and resolve your issue. (I have used absolute instead of relative as relative seems to affect other elements on your page.)
I am a newbie and not expert with HTML and CSS.
I decide to do one project in which to take PSD and make it into HTML and CSS.
The file was 900 x 600 images with many layers and elements one above other.
I watched a few tutorials on how this happens, but never found a tutorial with so complex image.
To complete this task I use Brackets and use Live Preview all the time. When I was almost done I decide to run HTML file in some browsers and in all of the the result was the same- awful.
My Questions are:
How is possible to guide myself with Chrome Live Preview (Brackets) and everything is fine and still is, but when I open file in IE, Chrome and Safari the things are very very bad?
Am I wrong( or very dumb ) to use this very simple method of writing HTML and CSS.
My HTML look like this (Every div for himself and every div is equal):
<div id="woman">
<img src="/images/woman.png" alt="woman">
</div>
<div id="bgr-small">
<img src="images/bgr-small.png" alt="Beach">
</div>
<div id="lights" >
<img src="images/lights.png" alt="Projectors">
</div>
And my CSS like this (every div have id and modify them by id and positioning them by the method shown below) :
#woman {
padding-left: 20px;
position: absolute;
bottom: 35px;
left: 45px;
float: left;
z-index: 3;
}
#bgr-small {
position: absolute;
top: 147px;
bottom: 29px;
left: 115px;
right: 106px;
z-index: 2;
}
#lights {
position: absolute;
bottom: 723px;
left: 183px;
right: 170px;
}
Right now everything in the right position but only in Brackets Live Preview. In whole CSS i only use position: absolute; . Also I think that the fault is in this position: absolute;
How can I fix this? Where am I wrong? What i do wrong?
Here is a snippet from the PSD:
Snippet from PSD
Folder with my HTML/CSS/Images ( Where is my fault?)
How is possible to guide myself with Chrome Live Preview (Brackets) and everything is fine and still is, but when I open file in IE, Chrome and Safari the things are very very bad?
I think you should open up the PSD - and use the slice tool.
https://helpx.adobe.com/photoshop/using/slicing-web-pages.html
You can slice up the image in anyway you want - for example, if you are going to have a web-form (as I see in your screenshot), slice that section of the image in the PSD.
Once you're done slicing - you can save the file as a webpage - and move forward from there.
Am I wrong( or very dumb ) to use this very simple method of writing HTML and CSS.
You're not necessarily wrong, but I'd say its no where close to being the standard way of doing things. At least not anymore. As DA stated in the comments, PSDs are now generally used only as rough guides to create the wrappers and website entirely with HTML/CSS/JAVA/etc.
I used this blog post (see comments - I can't post more than two links because I am new to SO) to put a sticky (but not fixed) footer on my website.
It had been working everywhere on the website, until I used this blog post (see comments) to display my images on hover. Now the footer floats quite aways above the bottom of the page, but only on the pages with the image hover styles. Here is a broken page, and here is one where it is working.
I am guessing it has to do with the styles for the ul.enlarge span because when I remove those in the Chrome dev tools, the footer pops back into place, although it causes the enlarged hover images to all appear on the page (obviously not what I want).
Is there a way to both get my footer to stay on the bottom of the page (even when the content doesn't reach all the way to the bottom) and still enlarge my images when I hover???? What is causing that giant blank gap at the bottom of the page??
It's because full-sized gallery images on the broken page (hidden far left from the view window) are taking some space, you can fix the footer by changing position of the element containing those images from
ul.enlarge span {
left: -9999px;
position: absolute;
}
to
ul.enlarge span {
left: -9999px;
position: fixed;
}
So those images wont interfere with the rest of the page while 'hidden' as position: fixed; is positioning elements relative to the browser window
You can also check how and why it's broken via changing left value to 0 so u'll know what is happening in the background
edit: As suggested in the comments, you could also fix the page by fixing gallery styling
like that
ul.enlarge span {
display: none;
}
ul.enlarge li:hover span {
display: block;
position: absolute;
left: -20px;
top: -300px;
}
so it wont break your footer in the future
Here on this site, if you try any restaurant, you'll see a basket that is always visible on the right, and if you scroll down, then it's "magical": it stays like "sticky" on the top of the screen. http://takeaway.com
How did they do that, and do you have any good sites/tutorials to do such things (I don't know what to google actually!)?
When the browser scrolls past a certain point, this following CSS is applied to the basket:
position: fixed; top: 0px;
You can do this fairly easily using jQuery plugins like Waypoints, which has a special functionality for creating "sticky" elements.
Get the plugin and see tutorials here: http://imakewebthings.com/jquery-waypoints/
See the example here: http://imakewebthings.com/jquery-waypoints/sticky-elements/
You want exactly what I did in my project have a look at project we have used the similar thing with our shopping cart. We have used the following css key point is Position and z-index
#your wrapper{
margin:0 0 14px 0px;
/*margin: 30px auto;*/
}
.sticky{
position: fixed;
bottom:-30px;
width:74%;
left:13%;
z-index: 100;
}