new here and I'm crossing fingers for help.
I'm working on http://www.catgriz.com
On the frontpage I have a slideshow that stacks all of the information on top of itself when you initially visit the page. But after a simple browser refresh, it displays correctly.
I was hoping someone could look at it and point me in the right direction of what I've done wrong. I'm using Joomla with a Yootheme.
Thank you so much in advance!
Some sliders can produce flickering effect during page load, depending on the amount of elements in each slide, caching, internet speed etc.
You should hide all slides, except first one via css.
.slides > li {
display: none;
}
.slides > li:first-child {
display: list-item;
}
Widgetkit plugin will do the rest after page loads.
ps. Like the others, I actually didn't saw any problem on your site.
Related
I'm new to everything and recently I made a website where I want to center align the main menu. I spent hours trying to find an option to do so but there isn't any.
The site address is: https://fleaprice.com/
I do not want anything about the top menu just the main menu. I want it center-aligned on bigger screens.
I checked all the theme options, read all the possible solutions listed here on this site and tried them all, almost all, but nothing seems to work.
Any help will be very much appreciated. I started my site in Wordpress because I read you do not need any coding knowledge, but now I realize you definitely need to have some knowledge.
Thanks a lot to everyone in advance.
Add this CSS to your theme's Custom CSS:
#media (min-width: 1000px) {
.main-nav.white_style {
text-align: center;
}
nav.top_menu ul li {
float: none;
}}
I have an image slider on a website I am currently working on:
http://scientized.com/ (first part on the main page)
As you can see it works beautifully. Now I am trying to put the same image slider on a page:
http://scientized.com/mathematics/
As you can see it becomes slightly misaligned. The images do not slide edge to edge. I have been at for some hours now and cant seem to find where the problem is occurring.
It is a wordpress site, and the slider is a widget I've been working on.
All content is currently dummy content - don't read too much into it.
Anyone can spot the error in my css code?
Your ul has a margin on it on the faulty page. Change to this ...
.entry-content ul {
margin-left: 0 ;
}
But be aware it will affect other ul on Wordpress pages. Target a different class if possible.
EDIT: it's in your code as .entry-content ul ul
EDIT 2: you can target .slides, like this:
.slides {
margin-left: 0;
}
I'm working on my navigation bar, and when I first started working on it, I figured out the display: none / display: blocked thing to make sure it worked, and then set everything to display so I could see what CSS changes were taking effect without having to go and re-hover over everything. Once I had things the way I wanted them, I went to go turn the display "off" but found it suddenly wasn't working. I managed to go back and re-tweak most of the levels, but my last level wont work, even though the same basic syntax works elsewhere in my CSS. What's going on?
Here's a JSfiddle:
enter code herehttp://jsfiddle.net/yu1p1fo6/
The two classes were incorrectly named drop-down instead of drop-menu
You have used wrong class name in that part. It is not drop-down, it is drop-menu:
http://jsfiddle.net/yu1p1fo6/2/
.sub-menu li .drop-menu {
display: none;
}
.sub-menu li:hover .drop-menu {
display: block;
}
I haven't touched anything, so I think it may have been a chrome update that happened recently. But my menu, which is div with nested ul's, randomly loads invisible.
If you open developer tools (F12) and mess with any of the css, it automatically reappears. I can add a style that is completely invalid css, just make stuff up, and the menu will re-appear.
Can anyone help me find what is causing this?
I'm on Chrome 33.0.1750.146 m
My guess is that your menu CSS or JS is improperly setting the heights of all the parent ul elements to height: 0. Upon hover, they expand.
Take my comment above to heart and restructure your menu with a single top-level ul, and make sure you're only hiding ul ul on load.
You might also try setting z-index on those top-level ul elements instead of their children:
#navbar ul {
position: relative;
z-index: 1;
}
This is your cuplrit. In css mc_grid3.css:
There is :
.container:after, .header:after, .header-bottom:after, .navbar:after, .main:after, .content:after, .content div:after, .subcontent:after, .subcontent div:after, .footer:after {
content: ".";
display: block;
height: 0; // Remove this
clear: both;
visibility: hidden; // Remove this too
}
Or remove .header-bottom:after from the above css rule.
Thanks for the input guys. I understand some of my html is bad, and I will take your advice to clean it up. However like I said, everything worked fine until recently w/ no code changes.
I decided to rip out the entire menu and replace it w/ modern html/css and in doing so, I discovered the problem. I was using font 'FuturaMedium' as my menu font, and the latest update to Chrome 33.0.1750.146 introduced some bugs with fonts. So even my brand new css menu wouldn't work with that font.
For now I pulled the font and I will figure out what I need to do to fix it. Again, thanks.
Link to bug
i'm working On a website for a client, and I've hit a snag. I don't quite know how to fix this one and google searching has done me no help.
I've got a nav as seen on This Site. If you hover over the logo to the top left, it behaves as a link, thus completing my desired goal. But, if you hover a few pixels below the image, no link. No cursor change or anything. Which is good, until you go down beyond that, in which there is a bit of space where you can hover to find the same link as the above image. This is not good, though I can't find a way to remove this without removing the tag, which defeats the purpose anyway. Can anyone help?
Style them correctly.
a {
cursor: default;
}
img {
cursor: pointer;
}
OR (Sass)
a {
cursor: default;
img {
cursor: pointer;
}
}
After a few hours of looking around other people's codes (bootstrap, materialize, etc) I found that changing the position and display values to absolute and inline-block of the link, it would make the link wrap the image. Hopefully this'll help anyone who had this weird problem too.