I need some help with html and CSS

Discussion in 'Computer Programming, Emulation, and Game Modding' started by BurningDesire, May 9, 2016.

  1. BurningDesire
    OP

    BurningDesire GBAtemp Psycho!

    Member
    4,964
    5,822
    Jan 27, 2015
    United States
    Behind a screen reading news
    Html
    https://docs.google.com/document/d/1SxYajbqk9e36n1b7C7yvHUcq_3hCiJH_o9aDxKWezqQ/edit?usp=sharing

    Css
    https://docs.google.com/document/d/1vE_p10QSq9RVnf5xNmYxyFiYSudjbxrGNccCHUmHUW8/edit?usp=sharing


    So if you run the code you'll notice the header is off and the text goes down. I was originally trying to accomplish a modern drop down menu that goes like Project Diva Games - PDFT:CT PDFT: FT etc. However doing that and then going back because i couldn't screwed up my code. My header is now in the left and not one hundred percent and as i mentioned before the text goes down and not across. Any help would be thanked deepfully!


    Capture.PNG
     
    Last edited by BurningDesire, May 9, 2016
  2. BurningDesire
    OP

    BurningDesire GBAtemp Psycho!

    Member
    4,964
    5,822
    Jan 27, 2015
    United States
    Behind a screen reading news
    edit: Updated with a image
     
  3. BurningDesire
    OP

    BurningDesire GBAtemp Psycho!

    Member
    4,964
    5,822
    Jan 27, 2015
    United States
    Behind a screen reading news
    bump. I really need some help :cry:
     
  4. mashers

    mashers Stubborn ape

    Member
    3,837
    5,156
    Jun 10, 2015
    Kongo Jungle
    I'll try to help with this. I've done quite a bit of CSS stuff recently: http://itrainapp.com

    First thing's first, can you explain what you're expecting it to look like and how you're expecting it to respond?

    — Posts automatically merged - Please don't double post! —

    Ok I think I've figured it out actually. Your header class in index.css looks like this:

    Code:
    header {
            max-width: 100px;
            height: 49px;
            background-color: #5c5c5c;
            opacity: 0.93;
           
    }
    
    The problem is the line 'max-width: 100px;'. This is restricting your header bar to just 100 pixels in width. If you remove that line, the header bar spans the entire width of the browser window and the text links are then displayed horizontally. Is that what you wanted?

    Screen Shot 2016-05-09 at 13.56.13.png
     
  5. BurningDesire
    OP

    BurningDesire GBAtemp Psycho!

    Member
    4,964
    5,822
    Jan 27, 2015
    United States
    Behind a screen reading news
    Well. I am trying to get it back to it's full width header. As you can in the image the header is very small for some odd reason and the text goes down and not across
    I
    ------------------------------------------------------------
    Home Project Diva Future Sound Project Diva Colorful
    ------------------------------------------------------------
    ^
    Is what I am trying to get it back to
    --------------------------------------------------------------
    however in the end I am trying to add a drop down menu that is full width like this
    ------------------------------------------------------------
    Home Games
    ------------------------------------------------------------
    Project Diva Colorful Tone
    Project Diva Future Sound

    Or something that could look nice.
     
  6. mashers

    mashers Stubborn ape

    Member
    3,837
    5,156
    Jun 10, 2015
    Kongo Jungle
    See my edit above ;)
     
    BurningDesire likes this.
  7. BurningDesire
    OP

    BurningDesire GBAtemp Psycho!

    Member
    4,964
    5,822
    Jan 27, 2015
    United States
    Behind a screen reading news
    It still is not fixed on my end. I am using fire fox windows 10

    — Posts automatically merged - Please don't double post! —

    Nevermind I fixed it i was stupid lmao
     
  8. mashers

    mashers Stubborn ape

    Member
    3,837
    5,156
    Jun 10, 2015
    Kongo Jungle
    It works in Firefox in my Mac by removing the max-width attribute in the header class. Maybe you need to explicitly specify width:100% to get it to work in Firefox for Windows.
     
  9. BurningDesire
    OP

    BurningDesire GBAtemp Psycho!

    Member
    4,964
    5,822
    Jan 27, 2015
    United States
    Behind a screen reading news
    Yee. I added a spelling error in the process because my brain does not like me haha. Huge thanks to you man!
     
  10. mashers

    mashers Stubborn ape

    Member
    3,837
    5,156
    Jun 10, 2015
    Kongo Jungle
    Ahh I see! Well I'm glad it's working now buddy :) You should look into the display attribute and div positioning to get your popup menus to display. I also recently learned a bit about jQuery. I resisted for quite a long time (because it was new to me), but I used it in my latest site and it makes things like animation and DOM element appearance/disappearance so much easier.
     
  11. BurningDesire
    OP

    BurningDesire GBAtemp Psycho!

    Member
    4,964
    5,822
    Jan 27, 2015
    United States
    Behind a screen reading news
    yee man I'll definitely take a look actually now that I gotcha on a line think you can help me figure out one more feature to help the site clean up?
     
  12. TheKawaiiDesu

    TheKawaiiDesu Ball of Kawaiiness

    Member
    1,432
    1,506
    Aug 23, 2015
    Korea, North
    Lowee
    You need to remove the max-width line (in the header options) from your CSS file.
    You also forgot to "close" some tags, both in your HTML file and your CSS file.
    And by the way, *all* the "visible" code for your page needs to be in the <body> :)
    I attached a kinda fixed version.
    (Also, use an editor like Sublime Text, it will *really* help you out)

    EDIT: :ph34r:
     

    Attached Files:

    • BD.zip
      File size:
      848 bytes
      Views:
      28
    BurningDesire likes this.
  13. BurningDesire
    OP

    BurningDesire GBAtemp Psycho!

    Member
    4,964
    5,822
    Jan 27, 2015
    United States
    Behind a screen reading news
    I use code writer on the windows 10 appstore :P thanks for the help even though you got ninjad lmao
     
    TheKawaiiDesu likes this.
  14. mashers

    mashers Stubborn ape

    Member
    3,837
    5,156
    Jun 10, 2015
    Kongo Jungle
    Yeah no problem, I'm subscribed to this thread now so just post any questions you've got :)
     
    BurningDesire likes this.
  15. BurningDesire
    OP

    BurningDesire GBAtemp Psycho!

    Member
    4,964
    5,822
    Jan 27, 2015
    United States
    Behind a screen reading news
    I wanna make a drop down menu

    -----------------------------------------------
    Home Games
    ----------------------------------------------

    Then Under Games are

    Project Diva Coloful Tone
    Project Diva Futre Sound

    I tried looking at some codepens for advice but always ended up screwing my self over lol
     
  16. mashers

    mashers Stubborn ape

    Member
    3,837
    5,156
    Jun 10, 2015
    Kongo Jungle
    Ok, well I don't have time to provide the full code for that but I can give some pointers for where to look.
    1. Define a css class for <div> which is hidden by default and contains what you want to popup
    2. Create <div>s which implement that class and populate them with the content for each menu option
    3. Each of your top level links should be changed so they call a Javascript/jQuery function which toggles the visibility of the content div appropriate to the link which was clicked

    Try Googling those topics and see what you can come up with. If you get stuck or have specific questions post here and I'll take a look :) In general it's best to look into the background of what you're trying to do (i.e. how the css 'display' attribute works, how to call Javascript from an <a> tag etc) rather than trying to copy and paste from examples without fully understanding what the code is doing.

    My final recommendation is not to write your code directly in HTML. All of the HTML code for my sites is generated by PHP scripts. I do not have a single .html file on any of my web sites. It's just too inefficient. Using PHP means you can write functions which generate HTML for a particular purpose, and then call that function over and over again wherever you need it. It's so much easier when you get the hang of it.
     
    BurningDesire likes this.
  17. BurningDesire
    OP

    BurningDesire GBAtemp Psycho!

    Member
    4,964
    5,822
    Jan 27, 2015
    United States
    Behind a screen reading news
    Okay I will try what you suggested. I will also start looking into using PHP. Again man thanks a bunch :D

    — Posts automatically merged - Please don't double post! —

    Oh. Also I am going to have a bit of trouble using the li tag as I currently use it for keeping my images inline and not wonky. Can you apply a class to li?
     
  18. mashers

    mashers Stubborn ape

    Member
    3,837
    5,156
    Jun 10, 2015
    Kongo Jungle
    No problem! If you would like an example, you could look at my main web site: http://www.mashley.net/

    Of course you won't be able to see the PHP script (only the server can see that), and that particular site is HTML/CSS/JavaScript (no jQuery) but it might help you to have a look at the code anyway. Obviously I would prefer if you didn't just use the code I wrote, but if it helps to see a working example then by all means take a look at the source code :)
     
    BurningDesire likes this.
  19. BurningDesire
    OP

    BurningDesire GBAtemp Psycho!

    Member
    4,964
    5,822
    Jan 27, 2015
    United States
    Behind a screen reading news
    Yee don't worry fam. I won't steal your code. xD
     
    mashers likes this.
  20. mashers

    mashers Stubborn ape

    Member
    3,837
    5,156
    Jun 10, 2015
    Kongo Jungle
    You can:

    http://www.w3schools.com/css/css_list.asp

    I prefer to use good old tables for keeping images and text in line though.
     
    BurningDesire likes this.