<header>
<div class="menu-toggler">
<div class="bar half start"></div>
<div class="bar half"></div>
<div class="bar half end"></div>
</div>
<nav class="top-nav" role='navigation'>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
Experience
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="landing-text">
<h1>Ali Temel</h1>
<h6>Junior Front-End Developer</h6>
</div>
</header>
Dear Stackoverflow users,
This my very first question. I am an intended web developer. I really tried to link my sections but i cannot jump into section when i click Experience or About section. I appreciate for your help. This is an awesome community. Now i can get a chance to sign up.
https://github.com/alitemel89/personalwebsite-v1
Sincerely,
Ali
In order for anchor links to work the structure needs to be like this:
About
<div id="about">About content</div>
Check this for more fancy stuff related to this.
https://css-tricks.com/hash-tag-links-padding/
I took a look at your code. The problem is that the menu screen doesn't go away.
For example,
When you click on the #about button it goes to the about section but the problem is that your overlay doesn't go away.
-You have to make it, so on click the overlay goes away.
-Your syntax for moving sections is good no need to change that
Related
Hello Im having problems with foundation 6. In my footer there is a social list with 4 icons(phone, email, twitter, facebook) I cant get them to stay centered on resize. On my PC it seems fine, however, uploaded onto the web and viewed on my phone(nexus 6) the icons are off center to the left. here is my footer code
<footer>
<!--social icons should be centered -->
<div class="row">
<div class="large-3 medium-centered columns">
<ul class="menu social">
<li>
<a href="http://www.twitter.com">
<i class="fi-social-twitter"></i>
</a>
</li>
<li>
<a href="http://www.facebook.com">
<i class="fi-social-facebook"></i>
</a>
</li>
<li>
<a href="tel:12345678901 ;="">
<i class="fi-telephone"></i></a>
</li>
<li>
<a href="mailto:info#example.com">
<i class="fi-mail"></i>
</a>
</li>
</ul>
</div>
</div>
<p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>
The site is www.gastromob.com. I could really use some suggestions on how to improve this site. I'm having several problems, but I'd like to fix this one first, thanks.
The class medium-centered that you use is meant to center a column within a row; it does not center the text inside that column.
Foundation 6 recommends using the <div class="menu-centered"> wrapper around the <ul class="menu">. If you're using Flexbox, you don't need the wrapper and can add the .align-center class to the ul element instead. Please click here for more information.
Using the row and column wrapper seems unnecessary here.
You could write your code this way to achieve what you need:
<footer>
<div class="menu-centered">
<ul class="menu">
<li>
<a href="http://www.twitter.com">
<i class="fi-social-twitter"></i>
</a>
</li>
<li>
<a href="http://www.facebook.com">
<i class="fi-social-facebook"></i>
</a>
</li>
<li>
<a href="tel:12345678901">
<i class="fi-telephone"></i>
</a>
</li>
<li>
<a href="mailto:info#example.com">
<i class="fi-mail"></i>
</a>
</li>
</ul>
</div>
<p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>
By the way, href="tel:12345678901 ;="" is incorrect and should be href="tel:1234567890" instead.
I've also looked at your site, and noticed that you set a fixed height for the element <div id="overlay">. As a result, when viewing the site on a small device, this overlay spills over and covers the elements below it. You should simply remove the fixed height to solve this problem.
The boat logo also obstructs the view when shrinking the size of the screen. You may want to make it responsive as well.
Other than that, all the other elements are responsive and look good!
I have a problem with Foundation 4 rendering on a small screen.
When on a local server i have the following html code, my custom css is turned of and so is my cutom js. All the needed libraries are loaded correctly as is the foundation library:
Why isnt my topbar showing in a very small browser window?
Below is a html snippet:
<div class="row show-for-touch show-for-portrait show-for-small">
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>title</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><h4>Dungeon</h4></li>
<li><h4>Pricing information</h4></li>
<li><h4>Contact</h4></li>
</ul>
</section>
</nav>
</div>
You won't be able to see your bar in a small browser if you add this visibility class: show-for-touch, which displays only on a real mobile environment.
If you like to see on a small browser, simply remove this class:
<div class="row show-for-portrait show-for-small">
It works on this plunk.
I'm having problems trying to align an image with a header inside a navigation menu. Ideally, everything should be align at the bottom. I have created a jsfiddle to reproduce the issue:
http://jsfiddle.net/graphicsxp/j2t9R/
<nav style="float: left">
<ul class="menu">
<li>
<a href="index.html" class="logo">
<img src="img/logo.png" alt="" class="brand logo_def" width="125" height="39" /></a>
</li>
<li>
<h4 >Sam</h4>
</li>
</ul>
<div class="clear"></div>
</nav>
<nav>
<ul class="menu">
<li class="current-menu-parent">ACCUEIL
</li>
<li>PAGES
</li>
</ul>
<!-- .menu -->
<div class="clear"></div>
</nav>
</div>
</header>
as is:
to be:
I solved the problem using your code, and honestly I couldn't tell you what I changed because there is way to much code going on for such a simple task. Here it is anyway
I also took the liberty of making a new one, showing how simple your code could look
Simple, clean, easy to read. All done with one <div>, and an unordered list.
Simplifying your code and making it easy to read should be a primary goal in coding no matter what, but it also helps users answer your questions quicker, easier, and better help you with questions you have.
Temp fix can be as:
add css for h4 element.... better to give id and then add.
I have seen your fiddle, please put below code in your css
h4{
margin-top:150px;
}
or
(Give id=hompageheaderUserName to h4 of sam)
h4#hompageheaderUserName
{
margin-top:150px;
}
Change width a/c to your need.
Screenshot from fiddle:
I am a bit stuck on how to section up a mega menu to use the HTML 5 outlining model.
I have created a jsfiddle to show the barebones markup (please ignore the css, it is just a brain dump for the purposes of this question) and will paste this html below as well.
My confusion hinges around the logical association of list items as compared to <section /> tags. In the html provided you will see I have only used <div />s and <ul />s for structuring the markup. If I run this through a outlining tool I get a mess of content, no clear structure. In the actual menu there are about 20 headings or so in the content areas. I have no real control over what these headings are (ie whether they are <h2 />s or <h3 />s etc).
Can anyone please give me some guidance on where to go from here. I have tried wrapping all anchors that have content within their dropdowns in <h2 /> tags, then wrapping these plus the drop content in <section/> tags. This makes the outline look correct but I am not sure if it is, in fact, correct.
I had thought I might be able to use some ARIA roles but, again, I'm confused about how this works with <section />s and headings and list items!
Any advice will be much appreciated!
Thanks
Basic html outline showing the different possible contents of the mega-menu
<nav>
<h2>Main menu</h2>
<ul>
<li class="has-mega">
Level 1 - Mix of varying content and children
<div class="mega">
<ul>
<li class="has-mega">
Level 2
<div class="mega">
<ul>
<li class="has-mega">
Level 3
<div class="mega">
<h2>Heading</h2>
<p>Any content can go here</p>
</div>
</li>
</ul>
</div>
</li>
<li class="has-mega">
Level 2
<div class="mega">
<h2>Heading</h2>
<p>Any content can go here</p>
</div>
</li>
<li>
Level 2
</li>
</ul>
</div>
</li>
<li class="has-mega">
Level 1 - Mix of children
<div class="mega">
<ul>
<li class="has-mega">
Level 2
<div class="mega">
<ul>
<li>
Level 3
</li>
<li>
Level 3
</li>
<li>
Level 3
</li>
</ul>
</div>
</li>
<li>
Level 2
</li>
</ul>
</div>
</li>
<li>
Level 1 - No drop content at all
</li>
</ul>
</nav>
I'm building a website using HTML 5 markup, but have hit a problem regarding where to place the the NAV element - because I'm using a SPRY 'Tabbed Panel' for both the navigation and the content:
<header>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Home</li>
<li class="TabbedPanelsTab" tabindex="0">Profile/li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
</div>
</div>
I thought the best place to insert the NAV element would be by wrapping the UL element, but this breaks the SPRY Tabbed panel (maybe I can just fix this by changing some file paths in the CSS?).
Also, seeming as the main content of the site will be held in the 'Content' areas of the tabbed panel, I'm wondering what the best approach is for building this site, with regards to NAV and ARTICLE etc, so that is semantically correct?
Perhaps I am going about this the wrong way?
I'm not familiar with SPRY, but you are probably correct in that you will need to edit the CSS if you wish to have more semantic markup.
Assuming each "tab" is it's own article, here is how I would mark this up:
<div id="TabbedPanels1" class="TabbedPanels">
<nav>
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Home</li>
<li class="TabbedPanelsTab" tabindex="0">Profile/li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
</nav>
<div class="TabbedPanelsContentGroup">
<article class="TabbedPanelsContent">Content 1</article>
<article class="TabbedPanelsContent">Content 2</article>
<article class="TabbedPanelsContent">Content 3</article>
</div>
</div>
It isn't a big change, but it adds at least some better semantics to the markup while still leaving the majority of the structure intact so that there don't need to be MASIVE changes to the SPRY framework code.