Results 1 to 9 of 9
  1. #1
    Symbol of Order
    Banana Cannon
    Carpe Vexillum's Avatar
    Join Date
    Feb 2011
    Location
    WI
    Posts
    1,456
    Blog Posts
    67
    Livestreams
    View Channel: CarpeVexillum

    HTML5 and Me (HW help!)

    So I've got this final project for my Interactive design class. We have to make a website. One that has a fluid design. I have hit a brick wall and need some assistance from some good fellow who might know a good amount of HTML5.

    Now my end goal is to have the user click on one of the titles/graphic on the nav bar and to have a box with information appear in the content area of the website. When they close it, or click another link it will disappear or the information that they clicked will appear. And I want to do all of this without Java Script.

    This is the skeleton for my site. It has a main navigation on the left that is fixed to the top.
    site1.PNG

    This is what I have using a :target operator for my div's content to appear in a CSS stylized box.
    site2.PNG

    The main problem I am having is that when I switch to an almost identical style (For my first Box I had to add a -margin hack to keep the hyper link from jumping down to the top of the appearing box) for my second, third, fourth, and fifth navigation headings, it snaps the page down to below the content area because I am assuming it wants to put the box there. And so on down the page. Plus, nothing actually appears. . . Does/can anyone help me get this working or at least point me in the right direction? I have provided my wip code if necessary.
    stie3.PNG

    CSS ------------------- HTML
    48hour.txt ///////// index.txt
    Last edited by Carpe Vexillum; 11-20-2014 at 02:02 AM.


    I am Tsundere.
    (ツンデレ) a character type that describes a person who is initially cold and even hostile towards another person before gradually showing their warm side over time.


  2. #2
    Symbol of Order
    Banana Cannon
    Carpe Vexillum's Avatar
    Join Date
    Feb 2011
    Location
    WI
    Posts
    1,456
    Blog Posts
    67
    Livestreams
    View Channel: CarpeVexillum

    Re: HTML5 and Me (HW help!)

    Set the position to absolute and fixed it. . . This always happens, I ask for help and then figure it out a few minutes later. Now I just need to get the scaling down correctly. Media Q awaaaaayyy!


    I am Tsundere.
    (ツンデレ) a character type that describes a person who is initially cold and even hostile towards another person before gradually showing their warm side over time.


  3. #3
    Website Administrator
    Skynet is PARTIALLY ACTIVE
    RIP Cyberdyne
    RIP Net of the Sky

    Mythonian's Avatar
    Join Date
    Dec 2009
    Location
    Atlanta, Georgia
    Posts
    6,178
    Blog Posts
    26
    Livestreams
    View Channel: Mythonian

    Re: HTML5 and Me (HW help!)

    Quote Originally Posted by Carpe Vexillum View Post
    Set the position to absolute and fixed it. . . This always happens, I ask for help and then figure it out a few minutes later. Now I just need to get the scaling down correctly. Media Q awaaaaayyy!
    lol... I wish I had read your reply before looking over your CSS and trying to figure it out (half impossible to go through it without formatting...). After a minute of going over it, I was about to suggest you do exactly that.
    Having trouble on the site? Need an Admin?
    PM me or Metkil5685, we're always online...

  4. #4

    Re: HTML5 and Me (HW help!)

    Are you using Dreamweaver?
    "Gamers always believe that an epic win is possible and that it's always worth trying, and trying now."













  5. #5
    Symbol of Order
    Banana Cannon
    Carpe Vexillum's Avatar
    Join Date
    Feb 2011
    Location
    WI
    Posts
    1,456
    Blog Posts
    67
    Livestreams
    View Channel: CarpeVexillum

    Re: HTML5 and Me (HW help!)

    Sublime text.


    I am Tsundere.
    (ツンデレ) a character type that describes a person who is initially cold and even hostile towards another person before gradually showing their warm side over time.


  6. #6
    Senior Citizen Silko's Avatar
    Join Date
    Apr 2011
    Location
    In a galaxy far far away.....
    Posts
    3,490
    Blog Posts
    1

    Re: HTML5 and Me (HW help!)

    I saw those imgs and this is how I felt

    Last edited by Silko; 11-21-2014 at 02:20 AM. Reason: Fuck you double post bug!

    REDD or BLUE Resistance comes through!
    Quote Originally Posted by Mythonian View Post
    Silko isn't an innate troublemaker, and doesn't intentionally break the rules.
    Co-Founder of the Resistance
    Undefeated on Reach

  7. #7
    Violent by Design
    bl4yze's Avatar
    Join Date
    Jan 2013
    Location
    Santa Barbara, CA
    Posts
    842

    Re: HTML5 and Me (HW help!)

    You could also fix this by having a container div with 100% width, and nesting two divs within, one for your menu and one for content. You'd have to add some media queries for mobile/tablet use with this method though, as your menu would fill a bit of space on top of your content on smaller devices.

    - - - Updated - - -

    webflow has a really easy to use site which can help with getting responsive layouts set if you're unfamiliar with coding something like that. From there you can have a look at the html and css and see why it works like it does.

    edit: nvm I see you've done this after looking at your code. ignore what i've said
    Last edited by bl4yze; 11-23-2014 at 03:23 AM.

  8. #8
    Violent by Design
    bl4yze's Avatar
    Join Date
    Jan 2013
    Location
    Santa Barbara, CA
    Posts
    842

    Re: HTML5 and Me (HW help!)

    Quote Originally Posted by Mythonian View Post
    lol... I wish I had read your reply before looking over your CSS and trying to figure it out (half impossible to go through it without formatting...). After a minute of going over it, I was about to suggest you do exactly that.
    Opening in wordpad > notepad retains formatting.

  9. #9
    Symbol of Order
    Banana Cannon
    Carpe Vexillum's Avatar
    Join Date
    Feb 2011
    Location
    WI
    Posts
    1,456
    Blog Posts
    67
    Livestreams
    View Channel: CarpeVexillum

    Re: HTML5 and Me (HW help!)

    Quote Originally Posted by bl4yze View Post
    You could also fix this by having a container div with 100% width, and nesting two divs within, one for your menu and one for content. You'd have to add some media queries for mobile/tablet use with this method though, as your menu would fill a bit of space on top of your content on smaller devices.

    - - - Updated - - -

    webflow has a really easy to use site which can help with getting responsive layouts set if you're unfamiliar with coding something like that. From there you can have a look at the html and css and see why it works like it does.

    edit: nvm I see you've done this after looking at your code. ignore what i've said
    Yeah, you should have seen it before I tried to get my teachers help. Before I even got a word out of my mouth he was like, "Whoa okay first before you add anything else, organize your div's and containers." Which gave me the thought to create two separate columns.

    On another note I have ran into another wall that I haven't figured out over the past few days.

    With my media queries I'm running into trouble getting my :target box to behave. Even though it's in the Content container it doesn't seem to want to obey size proportions of that container. I actually have a demo here of the issue, I turned on the background to the container so it can actually be seen. None of my div's in the content area want to stay inside of it. Which is understandable because they are all going to the same place. But I cant figure out why. Any suggestions?



    I am Tsundere.
    (ツンデレ) a character type that describes a person who is initially cold and even hostile towards another person before gradually showing their warm side over time.


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Website maintained by Metkil5685 and Mythonian.