I have a website coded with HTML responsive and the sidebar navigator element of the site disappears on mobile. The following is what I currently have in terms of code for this. I would like to have the sidebar work on mobile, would be grateful to anyone who can help.
<header id="header" class="skel-layers-fixed">
<img src="/images/logo.jpg" alt="" style="width:64px;height:48px;border:50;">
<nav id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Platform</li>
<li>Photos</li>
<li>Endorsements</li>
</ul>
</nav>
</header>
Your nav-element is inside your header-element. That means, that perhaps, depending on your CSS-styling, your nav-element can be hidden behind the image. Start by inspecting your source-code in the browser and se if it even generates correctly. Then go on from there... Try also to avoid inline-css-styling, by experience this can mess up your workflow and makes it harder to debugging, and for other to understand and read your code.
Related
I've learned to make the main navigation with a list like that:
<ul>
<li>nav-item</li>
</ul>
Now additionally, I need two top navigations, one left for social buttons and another right for other things. Someone told me better to build those top navigations by 2 like that:
<div>
top-nav-item
</div>
And I'm confused. Why is that better? Could someone tell me the advantage of the second way?
Thank you~
I would recommend using <nav> elements, which is HTML5 spec (see also here). Semantically it fits better with navigational elements, and it might help understand search engines better what elements of your website they are looking at. You can put <a> elements inside the <nav>. A search engine might be able to better understand that those are links to other pages, because that is what anchor elements are made for (linking to other pieces of content).
For how it looks, it doesn't matter; pretty much all elements can be made to look like a menu with buttons. Furthermore, search engines are pretty smart nowadays, and they will probably understand most of your website anyway, even if you don't use the proper elements all the time.
That being said, those elements are there for a reason, so why not use them?
The mozilla developer network's example that I reference above uses the following, but to me personally it does not necessarily always make sense to put everything in a <ul> element.
<nav class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
Why is that better?
It isn't.
HTML is a semantic markup language. It is designed to describe the semantics of your data.
You have a list of links.
The markup should express that it is a list of links not a series of generic blocks with links in them.
I have created example that you want please check below link.
Click on Run.
.nav{float:left;}
.nav li,.social li{float: left;margin-right: 22px;list-style: none;}
.social{float:right;}
<header>
<ul class="nav">
<li>Home</li>
<li>About us</li>
<li>Contact</li>
</ul>
<ul class="social">
<li>Facebook</li>
<li>Google</li>
</ul>
</header>
I am trying to add navigation to different sections of a page. However, it seems that's not working... I have made plenty of research, but I really cannot get why this code is not working.
Just to note I am a very beginner in front-end development.
This is the navigation:
<nav>
<ul class="menu">
<li class="menu">About me</li>
</ul>
</nav>
and this is where I try to navigate the user:
<section id="about">
<h1>About me</h1>
<p>some text about me</p>
</section>
Is there is something that I am missing?
Here is the entire code in codepen.
Thanks in advance :)
I just thought to copy/paste my code in codepen and there it works. So, the problem happens when I am actually trying to see the code on the browser.
I'm using a hybrid HTML/CSS/Java coding sheet that I copied and modified for my own use. So far, the customization has gone well except for trying to link images. The weird thing about it is, it only messes up when I link the first image.
When I link the first image, none of them will show up. If I link only the second and third, all of the images show up and the last two slides even link. I have looked through many times and I still can't understand why it won't work. There isn't anything in the Javascript (that I can see) that doesn't allow links and being that they're simple <li> it seems like it should work normally. Any ideas?
This is the part I'm having issues with:
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src="/assets/SLC_SewingMachineThread_banner.jpg"></li>
<li><a href="Teddy-Bear-Pattern-Pack">
<img src="assets/SLC_TeddyBear_Pattern_Banner.jpg"></a>
</li>
<li><a href="Leather/Pre-Cut-Leather-Pieces/Oil-Tan-Pre-Cuts">
<img src="assets/SLC_OilTan_PreCut_banner.jpg"></a>
</li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
newbie self learning web design. In theory, I've learned html and css. In practice I've hit a snag. Here is the barebones code so far.
<header>
<a id="site-logo" href="/"><img src="#" alt="Dot Design" /></a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<form id="search">
<input type="search" placeholder="Search" />
</form>
</header>
<div id="content>
<!-- content goes here -->
</div>
Here is the template I'm referencing for practice: http://min.us/i/braxZb11KQjfD
The problem is I'm not quite sure if:
everything in the red box should go in the header
only the jquery slider should go in the header
everything in the red box should not be in the header
or it doesn't matter and just a matter of preference
Since I have no experience, I'd like some feedback as to which method is correct? Or more generally accepted and preferred?
Thank you very much for your input.
Everything in the red box should not be in the header unless that content describes the page content. Which at this point it does't look like it does. It's just homepage content. Unless the intro is directly related to the slider there's no reason to combine the two.
<header></header>
<div id="content">
<figure class="hero"></figure>
<p class="lead"></p>
...
</div>
Would work fine as a setup. The HTML offers a way to group elements semantically (for instance the section and header) or to provide hooks for styling (#content and .hero etc).
I am planning to have a page control in my html Application.
Is there a page control in HTML/CSS which looks and works like UIPageControl in iOS?
Yes there is, it is called the nav element.
<nav>
<ul>
<li>.</li>
<li>.</li>
<li>.</li>
</ul>
</nav>
I'll leave the details up to you.