Image href'd

Hello,
I would like to know how to make it adjust to any device, using position : fixed ; is fixing a bit but when I try to zoom in it just goes everywhere, is that ok or?

If it were OK you wouldn’t be here, would you.

While exceptions exist, the human equation is usually pretty simple:
A lack of sensible effort (including conversation) on your part usually equals diminished interest on our part,

I notice that you have not acted on Mittineague’s post #4. He gave you some changes that only required individually copying and pasting them, and he recommended that you run your test code through the HTML validator.

Mittineague’s recommendations will not directly address your new requirement for responsive behavior, but for all I know the gray dot is still a problem that has not been fixed. There has been no follow-up from you.

Your requirement to put the shapes in the top menu into a responsive layout is actually quite challenging. Adding responsiveness to the mix will require you to talk about how you expect the page to behave at different widths because that menu will not simply “shrink to fit” a small device. It will have to change to fit a smartphone, for example.

I think I can assume that the footer is not a fixed footer but a “sticky footer” instead, one that moves below the bottom of the browser window if the content requies it to do so. Is that assumption correct or not?

Your on-line test page is an active part of this conversation. Our recommendations are based on what we see that you have or have not done. Please keep the communication active.

First question, are you attempting to learn how the HTML and CSS code behaves so you can become a better coder or are you looking for someone else to do the work for you so all you have to do is copy and paste to build your page? If the latter, then hire someone to write it for you.

First assignment, follow Mittineagues recommendations in post #4.

While you are doing that, we will be overhauling your code.

3 Likes

Thanks for that reply,
Yes I already did use his fix code and no it didn’t really help by fixing that dot, I used the { text - decoration: none }
And it seems like its fixed.

And yes, of course I’m attempting to learn how the HTML and CSS code behaves me to become a better coder.
The purpose of my website is to learn and gain experience, I’m experiencing a few issues that I can’t fix that’s why I’m here.

1 Like

I do not see Mittineague’s repaired HTML on your test page, yet.

Your test page is very short and simple, yet if flags 32 HTML errors. That’s ridiculous. If you do not know what a property does or how to use it, LOOK IT UP.

What browser do you use? If Firefox, it highlights the errors for you when you “View Page Source…”

3 Likes

I notice that the menu is positioned toward the right end of the header bar. Do you plan to put something else in the header bar to the left of the menu?

Wait what? positioned at the end right of the header bar?
It looks like its in the center to me…

My mistake. I do not use a full widescreen browser window, so the menu looked like it was sitting toward the right end of the bar. Knowing that it is centered make the design easier to code.

Thanks.

@Minnow

Would you be good enough to post your sample layout again? I was using it to be sure my attempt looked as much like yours as I could.

I trust you will have repaired the bad code. If you cannot be bothered to repair your code, then please let me know because I have many other things I could be doing with my life, too.

To post both the index & css?

Post a URL to the index page will be fine.

There are more errors and warnings than there are lines of code. That is quite a feat.
https://validator.w3.org/nu/?doc=http%3A%2F%2Flinexcsgo.netne.net%2Find.html
Most relate to the in-line styling which you should remove to css. No one (worthwhile) will want to help you code that way.

Things need to change. I mentioned in another thread about using margins and padding.
These should be used (with set unit values) only for small adjustments, to create gaps between elements or white-space around content.
Don’t use them for page scale layout positioning like this.

padding:0px 0px 15px 622px;

That will only ever work on one size screen.
To centre the menu, create a container with side margins set to auto- margin: 0 auto or if it’s all inline elements use 'text-align: center`.

Some screen shots for your entertainment.

Wide screen view, menu centered. (The menu is centered in all views.)

Top of next group… Just before Logo is moved from menu. (Pink background color is my temporary :hover color so you can see the shape of the buttons.)

Second from Top: is an intermediate width view with Logo above menubar.

Bottom-Left: Narrowest {table-layout:fixed}, just before menu shifts to {table-layout:auto;}

Bottom-Right: 300px page width.

Its all used without photoshop? I mean the header was an image in my files / code…

Can I have the cod so I could learn?

Thanks btw O_O

I expect he downloaded the images from your demo page.
But I already showed you how to replace the background image with a css gradient.


If I were making that, I would have done the icons/logos in Illustrator rather than Photoshop and made them SVGs. So there is nothing in it so far that would require Photoshop.

1 Like

The header image and icon images were downloaded from your site.

Yes, I will be glad to post the code… after you demonstrate an interest in learning rather than leeching “copy and paste” “do-it-for-me” code.

You can do this by cleaning up the 32 errors in your original example as you were asked to do several times.

4 Likes

I’m really not here for copy - pasting codes, the main goal of this website is for me learning.
You can see that my code is shit, that’s why I came here.
And I guess I already fixed half of them on my local files… not uploaded yet.
I’m really not going to fix it just for you and for the code but of myself.

Waiting… patiently… as long as it takes…

4 Likes

Hi, Minnow.

This is the complete “package” for your menu. The zipped file contains your images and a slightly modified version of the logo image, Logo2. I just moved the image about 3 pixels up and to the right… it’s more centered now.

Download the file, unzip the bundle, double-click the html file and it will open in your browser. That’s as close to “plug and play” as I can manage.

If you have any questions about how it works, you can post them here and someone will answer them.

Cheers

Minnow.zip (26.6 KB)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.