I need some help with html and CSS

[BurningDesire]

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!

 

[BurningDesire]

edit: Updated with a image

 

[BurningDesire]

bump. I really need some help

 

[mashers]

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?

--------------------- MERGED ---------------------------

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

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?

 

[BurningDesire]

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?

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.

 

[mashers]

See my edit above

 

[BurningDesire]

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?

--------------------- MERGED ---------------------------

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

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?

View attachment 48508

It still is not fixed on my end. I am using fire fox windows 10

--------------------- MERGED ---------------------------

See my edit above

Nevermind I fixed it i was stupid lmao

 

[mashers]

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.

 

[BurningDesire]

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.

Yee. I added a spelling error in the process because my brain does not like me haha. Huge thanks to you man!

 

[mashers]

Yee. I added a spelling error in the process because my brain does not like me haha. Huge thanks to you man!

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.

 

[BurningDesire]

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.

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?

 

[Deleted member 370671]

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:

 

[BurningDesire]

You need to remove the max-width line 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:

I use code writer on the windows 10 appstore thanks for the help even though you got ninjad lmao

 

[mashers]

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?

Yeah no problem, I'm subscribed to this thread now so just post any questions you've got

 

[BurningDesire]

Yeah no problem, I'm subscribed to this thread now so just post any questions you've got

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

 

[mashers]

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]

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.

Okay I will try what you suggested. I will also start looking into using PHP. Again man thanks a bunch

--------------------- MERGED ---------------------------

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?

 

[mashers]

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]

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

Yee don't worry fam. I won't steal your code. xD

 

[mashers]

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?

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.