In that one you donāt turn on the toggle at all.
You need to turn it on in your 800px max-width:media query.
.toggle {display:block}
I gave you a fully working nav in your other thread so you should work from that,
I suggest that you start again and get the nav correct before moving on to other things and keep the code more structured. Keep the nav code together and then move on to the next element in a structured mannerā¦
You declare things all over the place even globally for elements like p and h1 so you can never find the problem. You should use class names to change elements and not just say p{background:red} or similar as that is a global change and affects them everywhere.
You can define some global properties in your initial rest sheet but only things like making the margin consistent. on some elements such as headings and p tags etcā¦ The styles heet should start with your reset and global characteristics and then start with body styling and work your way logically down the code so its easy to follow. (e.g. Header, main, and footer styles should be placed roughly in hrml source order so you always know where they are. These should be the consistent elements that are used on most pages).
If other pages have some different elements then comment those at the end in an easily identifiable block. Donāt just mix them in with the default main page styles.
On that page you have put index.css last in source and so the following rule undoes anything that went before.
.toggle,
[id^="drop"] {
display: none;
}
The rules in styles.css have been overwritten with that rule.
Why are you duplicating rules in different srylesheets?
Your main stylesheet which should be the first in source should have all the rules for the reset and initial setup and all the rules for the common elements.such as nav, header and footer etc. There is no need to mention them again unless you need to modify them for a page that has a slightly different design. This main styleheet must always be the first in source.
got it i thinkā¦ code that can be applied on every page, Header, main, and footer styles, should be in its own style sheet
you know, i suspected that works
i saw you had a designated section for the media queriesā¦ i assume that wher they belong?
no good reason, honestlyā¦ i was having trouble getting my index.css transfered to my style.css
bingoā¦ that makes sense
kindly explain
kindly explain
what does
mean? maybe an example, please
ok, listenā¦ seriously, i know i always thank you when you help me, but i want to tell you again THANK YOU SO MUCH for your time, trouble and PATIENCE
youve been SO good to me!
i am not the sharpest tool in the shed, and thank you for not saying that to me! not calling me stupid or belittling
In the head of your document you list your css files such as index.css and styles.css or whatever. The order of those style sheets is important because the styles cascade just like normal rules.
If say in styles.css you override some styles from the previous index.css you canāt then change the order of those files in the html. If you moved the link to the index.css after the styles.css then all your overrides are undone. Which is what you did to your toggle.
You canāt change the order of those files. I donāt really see the need for multiple style sheets on a small site anyway but if it suits you better that way itās ok but keep the order logical and consistent.
I thought I already had :).
Iām on a mobile at the moment but when I get back to my desktop on Sarurday (im travelling al day tomorrow ) Iāll show you where it all goes wrong :).
I just mean that you should group styles together logically as I mentioned before. Start with all the main elements and donāt jump up and down the stylesheet with rules that donāt belong there.
For example you styled the p element globally in different places in the stylesheet. I think one was the margin and another had something else. Thatās pointless and confusing :).
If the stylesheet is relatively small then you donāt need a new css file for say your contact page or info page but make sure you group the css for each page together clearly marked with comments in the css. Then donāt go and mix other stuff in there.
/* Reset and main page elements styles here */
stuff...
stuff...
stuff...
/* Page 2 styles here */
stuff ..
stuff...
stuff...
/* Page 3 styles here */
More stuff ..
etc...
Unfortunately my home computer wonāt let me access that site.
Malwarebytes Browser Guard blocked this page because it may contain malicious activity.
We strongly recommend you do not continue. You may be putting your safety at risk by visiting this site. For more information, visit Malwarebytes Support.
Looking at the css files (as they arenāt blocked by Malawarebytes) the main problem apart from you changing their order is that you seem to be duplicating some rules for no reason. I suggest you go back to one stylesheet and get that right before testing other pages.
quote=āOBXjuggler, post:10, topic:438401ā]
i have a style.css and index.css
[/quote]
Yes and why do they share about 70% of the same code?
Go through and use just the one css file. In both files style.css and index.css you comment them both as index.css anyway?
Go through line by line and make one logical css file. The two files you have make maintenance a nightmare as you have the exact same styles in both pages so changing one set will not change the other and if you are changing the order of the css files as mentioned before then its not maintainable.
Start again with just the one css file and get that right first.
You wonāt see anything unless you have Malawarebytes installed on your computer. Its a virus detection program.
You probably need to ask your host and also scan your files for any problems. If there are no problems found then it may be a false positive but generally there is some sort of problem when Malwarebytes flags something.
Itās not really my area so would be a question for another forum
you suggest i go through both (present) style.css AND index.css, get rid of whatever is repeated and THEN use 1 .ccs file to style my index.html
when i add more pages what is your advice? keep the 1 css file and add new css, from the new pages? and you suggest i comment for clarity? i thought i saw the word ācommentā from you prior
the key is to have 1 stylesheet, correct?
to use the same code, say for my nav, footer and use classes and ids to where the code is unique to that specific page?
On a small site where most pages are using the same elements you can get away with one stylesheet. If the site however has hundreds of pages all with completely different css then you will need a different approach.
On a small site the benefit of the one css file is that it is cached straight away and subsequent pages donāt need to load it again.
Yes just add the css to the same file clearly commented and marked up. If however you are adding a page that is completely different to everything else then you can create a new stylesheet for that page. However designs should be consistent so having pages that do not have common elements can be confusing.
I would keep the box sizing rules together as you put the html part of it down the page and I thought youād missed it. I would also tidy up the gradient as mentioned in the other thread.
I also notice that you still have the drop down menu code in place. Thatās fine if you are going to use one but if not then remove it as it is a lot of clutter.
