• Some users have recently had their accounts hijacked. It seems that the now defunct EVGA forums might have compromised your password there and seems many are using the same PW here. We would suggest you UPDATE YOUR PASSWORD and TURN ON 2FA for your account here to further secure it. None of the compromised accounts had 2FA turned on.
    Once you have enabled 2FA, your account will be updated soon to show a badge, letting other members know that you use 2FA to protect your account. This should be beneficial for everyone that uses FSFT.

HTML5 semantic element positioning

W

wtburnette

2[H]4U
Joined
Jun 24, 2004
Messages
3,580
I'm taking a course in Web development fundamentals and have to do a project where I create a small website. I need to use 5 semantic elements positioned appropriately on the page and use them consistently on all of the pages. The problem is, the videos for the class do not go into enough depth and I'm lost. I've got the elements on my page, but the positioning is off and I can't figure out why. I don't understand the fundamentals well enough and I was wondering if there were some free resources online that I could check out to get the concepts down? I've tried the tutorials at W3schools.net and HTML.net, but again, they didn't go into enough depth for me to understand them outside of the small examples they showed. Any assistance would be appreciated... ;)
 
Code: 
<!DOCTYPE html>
<html>
<head></head>
<body>
    <h1>My Website</h1>

    <nav>
        <a href="#part1">Part 1</a>
        <a href="#part1">Part 2</a>
        <a href="#part1">Part 3</a>
    </nav>

    <section id="part1">
        <h3>Part 1 of my story</h3>
        <p>A long long time ago</p>
    </section>

    <section id="part2">
        <h3>Part 2 of my story</h3>
        <p>A long long time ago</p>
    </section>

    <section id="part3">
        <h3>Part 3 of my story</h3>
        <p>A long long time ago</p>
    </section>

</body>
</html>
 
Thank you. Yes, I understand that the semantic elements are basically just replacing div containers with ID's, but I guess where I'm most confused is with positioning. I'm having a hell of a time getting stuff where I want it, like the sidebar. Can't seem to get it to the right side taking up the space I intend...
 
Positioning is a CSS task and has almost nothing to do with HTML5/XHTML/HTML4. As long as your markup itself is valid, your CSS should be doing all the heavy lifting. For positioning, float: and margin: are your best friends, but position:absolute is always there if you really need it.
 
Sorry, yes, CSS positioning is what I'm talking about. I'm trying to position the elements. So there is a header at the top and then a nav menu right under it. Under that I have a section that takes up about 70% of the screen starting on the left for a main body, then an aside starting on the end of that filling in the rest of the 30% of the page to the right. Underneath is my footer.

I ended up finding a good example page yesterday here:

http://net.tutsplus.com/tutorials/h...and-css-3-the-techniques-youll-soon-be-using/

The only problem with that is, they use table to display certain sections and I didn't want to use that, I wanted to try to position it another way. Not even sure if it's possible. The course I'm taking wasn't clear and the example I tried for myself was a mess.
 
You might be using an out of spec browser, that doesn't recognize html5 properly. Try using the modernizr jquery script to help with broswer compatibility.

http://modernizr.com/
 
The browser I was using was fine. I was testing in both the latest FireFox and the latest Chrome, but thanks for that info. I finally emailed a course mentor and she gave me some info on using float that helped me out. The layout still isn't perfect, but it's much better now and hopefully good enough to finish the project and get it turned in. Thanks for all the help and suggestions ;)
 
You must log in or register to reply here.
Back
Top