I've noticed an odd loading issue on a site that I built. When the navigation links load at the top of the page, they are displayed in the left hand corner of the browser in their un-stylized form, with bullets, underlines, etc. before loading. Is there a way that I can code this differently so that it hides the loading process?
Here's a couple of images showing the problem during the page load:
Nav Loading:
Nav Loaded:
Here's a copy of the CSS:
/*Header Link Wrap & Align*/
#nav-wrap {
width: 100%;
overflow: hidden;
height: 52px;
background-image: url(/images/hlink-bg.jpg);
background-repeat: repeat-x;
}
#nav {
text-align: center;
margin:0px;
padding:0px;
}
#nav li {
list-style: none;
display: inline-block;
vertical-align: middle;
padding: 0px 10px 0px 0px;
}
#nav a {
color: #FFFFFF;
display: inline-block;
font-family:arial;
margin: 0;
padding: 9px 18px 9px 18px;
text-decoration: none;
vertical-align: middle;
}
#nav a:hover {
background-color: #ffa500;
color: #fff9;
}
.head-divider {
list-style: none;
vertical-align: middle;
display: inline-block;
margin: 0;
width:2px;
height:52px;
background-image:url(/images/h-divider.jpg);
background-repeat: no-repeat;
}
The HTML:
<div id="nav-wrap">
<ul id="nav">
<li>Custom Homes</li>
<li class="head-divider"></li>
<li>Inspection Services</li>
<li class="head-divider"></li>
<li>Energy Audits</li>
<li class="head-divider"></li>
<li>Complete Services</li>
<li class="head-divider"></li>
<li>Contact</li>
<li class="head-divider"></li>
<li>Blog</li>
</ul>
</div>
</div>
Your help is greatly appreciated!
You need to move your script calls so that they come after your CSS calls. What's happening is that when the page is being loaded, the browser is waiting for the scripts to be loaded before it moves on to reading your stylesheets, causing a flash of unstyled content.
It may be your server is slow. Is your stylesheet for the #nav is in a different host or something?
Try adding those styles to your <head> section and see. If you have images, but still basic HTML, CSS must load fast.
Thank you for the help, I realized that my Header PHP inclusion was loading after the Scripts & CSS,
So I placed it at the very top of the page, it's loading much faster now. Thank you for your help!
Related
I am trying to follow some online HTML CSS course and tried to code an website like this website
https://www.w3schools.com/w3css/tryw3css_templates_band.htm#
When I tried to see the hided button Merchandise, Extras, Media 's information, I saw the Elements and I saw that the padding is 8px 16px, as you can see in this picture
But when I coded like them, used their information, the block became small. Like this picture
Here is some of my code
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
</div>
My styles.css file is here
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav li:hover .subnav {
display: block;
}
#nav .subnav {
/*display: none;*/
position: absolute;
background-color: #fff;
top :100%;
left :0;
}
#nav .subnav a {
color: #000;
padding: 0 16px;
}
My question is, why I set padding exactly they display but it became fell in ?
Thank you very much for your time.
If I understand correctly, your question is why the widths of your <li> elements are shorter than the example.
In short, add min-width: 160px; under your #nav .subnav a CSS selector.
#nav .subnav a {
min-width: 160px;
color: #000;
padding: 0 16px;
}
Explanation:
As in your screenshot, the original example has CSS "width: 100%" which I believe you've tried but didn't work as expected. In fact, that 100% means it will follow the father <div> width (shown in following screenshot), which is set to "min-width: 160px;". Instead of following the exact structure, you may want to keep it simple, so just add "min-width" to <a>!
CSS of example page
I'm running into issues on my first ever website. I have successfully created a navigation bar at the top which looks and acts somewhat how I want it to (other than the color scheme but that can come later). The issue is that whenever I click a different link on the bar I want that box to change color, but it is currently stuck highlighted on the homepage. I think this is something super simple but i cannot find it. Thank you for the help.
body
{
font-family:sans-serif;
width: 100%;
margin: 0px;
}
/* upper strip holding the tabs*/
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position:fixed;
top: 0px;
width: 100%;
background-color: #328CC1
}
li
{
float:left;
border-right:3px solid #30FFE3;
}
li a
{
display: block;
color: whitesmoke;
text-decoration: none;
padding: 14px 16px;
text-align: center;
}
li a:hover:not(.active)
{
background-color: #111;
}
a.active
{
background-color: #EAB126
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Academics</li>
<li>Athletics</li>
<li>Contact</li>
</ul>
Change this:
a.active
background-color: #EAB126
}
to this:
li a:focus {
background-color: #EAB126
}
Here is the JSFiddle demo
This does what you ask BUT if this is a navigation bar then bear in mind that the control will lose focus as soon as you change page. It would be better if you use Javascript/JQuery to handle that much more easily.
A typical way of handling this is to have each page have a class that includes the page name: <div class="academics"> for example.
Now modify your header (within the page div) as follows:
<ul>
<li><a class="for_home" href="#home">Home</a></li>
<li><a class="for_academics" href="#academics">Academics</a></li>
<li><a class="for_athletics" href="#athletics">Athletics</a></li>
<li><a class="forcontact" href="#contact">Contact</a></li>
</ul>
this would be followed by the css as follows:
.home .for_home, .academics .for_academics, .athletics .for_athletics, .contact .for_contact {
background-color: #EAB126;
}
Then the menu item for the current page will be highlighted.
Congratulations on your first website!
I have built this Vertical Menu with hidden submenus however I cannot get the submenu to display when the user hovers. How could I go about doing this? Also how can I get the text to be formatted all the way left, since they are lists I can get rid of the bullets, however I cannot get the text to go where the bullets used to be. Also, I am wondering what the best way would be to set the width of the "main-nav". I don't want anything to be over the text except the logo. The body of the site would be next to the navigation. I want the side of the logo to also line up with the left side of the text, and I cannot figure out how to do this. The red border is just for testing purposes (obviously).
Here is the link to my codepen.
[BONUS] I am trying to create my own site from scratch with wordpress and a custom theme. How does one create it so that the logo image is taken from the site identity tab in the customize sidebar? And also just display text if no logo is chosen in the identity bar. Would it be some wordpress php function? Also, I would want the logo to be apart of the main-navigation by default. I have the register_nav_menu() function in my functions.php file and it assigns a menu to Main Navigation, also giving it a class main-navigation. How could I get the logo to by default appear above this menu? Any tips on this would be greatly appreciated. (Wordpress/coding noob here)
HTML:
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
<ul>
<li class="active">Overview</li>
<li>About</li>
<li>Submenu</li>
<ul class="sub-menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<li>Contact</li>
</ul>
</nav>
CSS:
.main-navigation {
bottom: 2%;
margin-left: 4%;
display: block;
float: left;
border: 1px solid red;
position: fixed;
overflow: hidden;
width: 15%;
}
.main-navigation li, .main-navigation a {
list-style-type: none;
text-align: left;
text-decoration: none;
color: black;
text-transform: lowercase;
font: 16pt helvetica, sans serif;
padding: 1%;
}
.main-navigation a:hover, .main-navigation .active {
color: tan !important;
font-weight: bold !important;
}
.main-navigation .sub-menu {
display: none;
}
.main-navigation .sub-menu:hover {
display: block;
}
#container {
height: 10000px;
}
.logo-branding {
display: block;
position: fixed;
margin-top: 8%;
transform: rotate(90deg);
width: 15%;
}
JS:
/* No JS */
I believe that this is your desired behaviour?
To do this, you need to place your ul submenu inside the li for the menu item that is displayed. This is the only change I made to the HTML.
You can then add a CSS rule so that when you hover over the li, its ul child becomes visible. i.e: .main-navigation li:hover {display: block; }.
The reason it didn't work when you did .main-navigation .sub-menu:hover is because when it is not being displayed, you cannot hover over it, so the hover state is never triggered. In the rule which I added, it is triggered when you hover over the containing li.
.main-navigation {
bottom: 2%;
margin-left: 4%;
display: block;
float: left;
border: 1px solid red;
position: fixed;
overflow: hidden;
width: 15%;
}
.main-navigation li,
.main-navigation a {
list-style-type: none;
text-align: left;
text-decoration: none;
color: black;
text-transform: lowercase;
font: 16pt helvetica, sans serif;
padding: 1%;
}
.main-navigation a:hover,
.main-navigation .active {
color: tan !important;
font-weight: bold !important;
}
.main-navigation .sub-menu {
display: none;
}
.main-navigation li:hover ul {
display: block;
}
#container {
height: 10000px;
}
.logo-branding {
display: block;
position: fixed;
margin-top: 8%;
transform: rotate(90deg);
width: 15%;
}
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
<ul>
<li class="active">Overview
</li>
<li>About
</li>
<li>Submenu v
<ul class="sub-menu">
<li>Item 1
</li>
<li>Item 2
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
EDIT: I may have made a mistake regarding WordPress, so I deleted that part of the answer so that I do not mislead anyone. E. Shio, however, found a link which explains it almost step by step. I'll summarise what this link says, just in case it someday gets deleted or the page url gets moved.
First, you check if there is a custom logo, for which you use has_custom_logo (). You then output that custom logo with the_custom_logo(). This is a relatively new feature to Wordpress though, so to maintain backwards compatibility, you should check if the function exists with function_exists( 'the_custom_logo' ). If there was no custom logo, you can output the text to display inside an else statement. Here's an example:
if( function_exists('the_custom_logo') ) {
if( has_custom_logo() ) {
the_custom_logo();
} else {
$blogname = get_bloginfo('name');
echo "<h1>$blogname</h1>";
}
}
If you have any questions about the CSS for the menu, I'm more than happy to help! (I'm no expert in Wordpress though, so I probably can't help with any Wordpress specific things, but I can try! XP)
I'm VERY new to programming and am probably using a totally old way to program my site, but so far it's been frustrating at times, but has worked for me.
Now I have 2 problems that I can't seem to fix
First: background images. I've been checking it using Chrome, but when I open the page in IE, my background is not showing up. I've checked the syntax (some sites seem to indicate that I needed to add spaces) and I don't see where I've got a problem. I also tried saving the image as a png instead of jpg and that didn't work.
Here's what my code looks like:
body {
background-image: url('images/backrings.jpg'), url('images/backrings2.jpg');
background-position: left top, right top;
background-repeat: no-repeat;
}
Second: I'm getting a blue border around my footer navigation bar - I don't know why and have tried everything that I can think of to get rid of it.
Here's what the code for that looks like:
#footermenu ul {
background-color: #fff;
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
text-align: right;
border: none 0px;
}
#footermenu ul li {
display: inline;
}
#footermenu ul li a {
font-family:verdana;
font-style:normal;
font-size:12px;
text-decoration:none;
margin: 0;
padding: 5px 20px 5px 20px;
color: #fff;
background-color:83AFC7;
}
<div id="footermenu">
<ul>
<li class="first">home</li>
<li>about</li>
<li>gallery</li>
<li>contact</li>
</ul>
</div>
Any help would be GREATLY appreciated - thanks!
I am doing a website for school, and it's been going well. The only problem I am stuck on is this: The navbar changes size on different sized screens. It's most readily apparent when zooming out, but it is slightly off on different screens.
Here is a screenshot of what I mean:
https://docs.google.com/a/g.ccsd.net/file/d/0B_Sda_-LouAKbnVKVHhMSW5yeXc/edit?usp=sharing
Please note that the left side, which is the problem, moves around a lot depending on the scale. The above image is only one example.
This is my CSS:
ul {
font-family: 'Open Sans', Times;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
z-index: 150;
/* min-width: 739px;
max-width: 739px; */
}
ul li {
display: block;
position: relative;
float: right;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 7px solid #CC4D4D;
padding: 25px 26.45px 30px 26.45px; /*top right bottom left*/
background: #333333;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }
This is my HTML:
<ul id="menu">
<li>Showcase</li>
<li>Contact</li>
<li>FAQ</li>
<li>Faculty
<ul>
<li>Mrs. Rosarita Olvina</li>
<li>Mrs. Christine Pavesich</li>
<li>Mr. Francisco Virella</li>
<li>Mrs. Susan Williams</li>
</ul>
</li>
<li>Program Areas
<ul>
<li>Graphic Design</li>
<li>Photography</li>
<li>Video Production</li>
<li>Animation</li>
<li>Art</li>
</ul>
</li>
<li>About
<ul>
<li>What We Do</li>
<li>Where We Go</li>
</ul>
</li>
<li>Home</li>
</ul>
Thank you for any help.
***I tried first answer, it didn't work, but I may be doing it very wrong.
The problem is not necessarily within the menu. Rather the whole menu (or its container) needs to be placed properly.
As far as I can tell from the code you've given, the floats may also play a part in fixing this. The whole menu and nested ULs are floating. My suggestion would be to avoid these floats and work with "display: inline-block" instead to get the horizontal arrangement.
After streamlining the menu entries like that, you can properly position your whole menu container in the surrounding HTML.
In case you don't already use it: Firebug or Chromebug plugins are really handy for identifying errors like this.