Watch a noob learn HTML and CSS by trial and error!

[sixlxvi]

I'm working on a large overhaul of my website and brand, enough to consider it a 2.0.

One of the many things on my to-do list is to redesign the site and add some things with HTML and CSS. Thing is, I'm a total beginner and this is my first "big" project. This is something I would normally pay someone for but I really want to take the time to learn and do it myself.

I figured I would occasionally share progress updates here so you can watch my fail and then learn.

-----

Part of the my old design that I want to improve the most is the header. I'll put a photo of the old header below for reference and then if you scroll through this thread you should be able to see what I'm aiming for with the new one.

 

[Adam]

In the 'old days' when we didn't worry about responsive design these kinds of wacky shapes were much more common. The reason you don't see them as much nowadays other than in dividers is because it is hard to make them scale well to be pixel perfect across many both screen sizes and DPI levels.

That being said, I think you could certainly achieve this affect for your desktop view without tooo much trouble. I'd probably use Flexbox to create two divs, one for the main section of the header and another smaller column that pushed the log in down and contain the overlay image. I'd then make an SVG to position in the smaller right section over the top to join up the gap.

You'll then need negative margin on the top of the category container to pull it up in line where it should be else it will be sat below the lowest header section. The sidebar is separate so those spacings are mostly irrelevant to the header build.

That way will be responsive down a little way to tablet or so sizes where you'll need to reshuffle the menu.

Re: attachments. Currently uploads are limited to gold members but you should be able to use the images as a direct URL with the image BB code. This will be changing with V2 in couple weeks.

 

[sixlxvi]

In the 'old days' when we didn't worry about responsive design these kinds of wacky shapes were much more common. The reason you don't see them as much nowadays other than in dividers is because it is hard to make them scale well to be pixel perfect across many both screen sizes and DPI levels.

That being said, I think you could certainly achieve this affect for your desktop view without tooo much trouble. I'd probably use Flexbox to create two divs, one for the main section of the header and another smaller column that pushed the log in down and contain the overlay image. I'd then make an SVG to position in the smaller right section over the top to join up the gap.

You'll then need negative margin on the top of the category container to pull it up in line where it should be else it will be sat below the lowest header section. The sidebar is separate so those spacings are mostly irrelevant to the header build.

That way will be responsive down a little way to tablet or so sizes where you'll need to reshuffle the menu.

Re: attachments. Currently uploads are limited to gold members but you should be able to use the images as a direct URL with the image BB code. This will be changing with V2 in couple weeks.

Thanks. I actually understand what you're describing and it sounds like something I can handle with enough trial and error.

I know this stuff is tricky with responsive design so I usually just ditch the fancy stuff as soon as it hits a tablet-ish width, lol.

 

[Gummibeer]

I agree on the responsive part. My approach would be a SVG as background which holds the two lines and curve.
Important: it should be a regular <IMG/> tag to let the surrounding div scale.
Then I would use two docs holding the two menu sections and use absolute position top&bottom to put them where they belong.

That said: you will have the painful time of your life doing it. 😅

An idea: move the menu itself up or below but outside the curve so that you can use a single linear/horizontal menu container. And add the curve as a divider image.
I'm doing similar at https://astrotomic.info (the wave section dividers) and they work perfectly.
But adding text on them would never work in a responsive Design.

 

[sixlxvi]

I agree on the responsive part. My approach would be a SVG as background which holds the two lines and curve.
Important: it should be a regular <IMG/> tag to let the surrounding div scale.
Then I would use two docs holding the two menu sections and use absolute position top&bottom to put them where they belong.

That said: you will have the painful time of your life doing it. 😅

An idea: move the menu itself up or below but outside the curve so that you can use a single linear/horizontal menu container. And add the curve as a divider image.
I'm doing similar at https://astrotomic.info (the wave section dividers) and they work perfectly.
But adding text on them would never work in a responsive Design.

Great info, thanks!

I know I’m in for it with this, especially as a beginner, but I prefer the challenge of going for it rather than sticking with something standard. Having the suggestions in this thread are already a helpful start.

 

[sixlxvi]

I managed to get this header working with HTML and CSS. Surprisingly, it wasn't too hard, especially considering I'm a total beginner.

Instead of running into trouble getting things to work, I actually found too many ways to get this to work, and as a result I'm not entirely sure what the best method would be. I assume if the code is clean, if it works in all browsers, and if it works properly in general, then that method is fine.

My next challenge will be the SVG stuff. I have never created or converted anything to SVG, nor do I know much about how it works. I know the image of the truck should be a background image and SVG (right?) and I know the diagonal lines should be SVG as well. I don't even know how I should make the lines. I guess, just open GIMP, make some pretty looking lines, and resize them with CSS for the SVG?

Here is the working responsive header so far:

 

[Lee]

Looks good far, keep going and i'm sure you'll figure out the SVG's.

 

[sixlxvi]

I managed to get this header working with HTML and CSS. Surprisingly, it wasn't too hard, especially considering I'm a total beginner.

Instead of running into trouble getting things to work, I actually found too many ways to get this to work, and as a result I'm not entirely sure what the best method would be. I assume if the code is clean, if it works in all browsers, and if it works properly in general, then that method is fine.

My next challenge will be the SVG stuff. I have never created or converted anything to SVG, nor do I know much about how it works. I know the image of the truck should be a background image and SVG (right?) and I know the diagonal lines should be SVG as well. I don't even know how I should make the lines. I guess, just open GIMP, make some pretty looking lines, and resize them with CSS for the SVG?

Here is the working responsive header so far:

This idea is mostly scrapped because it just doesn't seem practical. But I've been busy with a new route which I've been really digging so far.

Original style currently on my site:

New concept:

The new logo and the area the logo is sitting in are kind of placeholders. There a bunch of bugs/broken stuff and other things not yet configured properly (like the navigation links); just ignore that.

But this is the route I'm headed in.