Hello guys,
I’ve been trying to add a logo image over my header.
My header is designed on css and the html is a regular image that will be a logo, I will use it because I wont have too many pages (if there’s a better alternative please say so thanks) any good way to add a logo over the header? thanks.
I’d like to ask you to post a bit more code so we can tell what you are trying to do. So far, it looks all wrong. <td> tags are not closed and a <body> tag is inside a <td>? Am curious to know why you appear to be framing the page with a table, too. That’s been out of vogue for a bunch of years.
Please post your code. Not a screen shot of your code.
You can add your code to a post by preceeding the code with three backticks on a line by themselves and ending with three backticks on another line by themselves after the code. Like this:
Rather than posting images of your code you can copy and paste the code into your post.
To format as code put three backticks ( ` ) on a line of their own before and after the block of code.
That way if we want to recreate your page, we don’t have to re-type it all from the image.
Or you can mock up a working page using Codepen.
You need to validate your code.
How can I say this, everything is wrong!
The validator will show mark up errors, but it won’t show poor coding practice. Fortunately, people here can.
No problem, we were all new once.
So what kind of layout are you trying to achieve?
I tried to make a guess based of what you posted, is this anything close?
(I don’t know wnat the images look like, but used placeholders)
It works fine, now when I try to upload the logo using the following -
<img src = url("logo.png") alt="My Logo">
While the file is in the same folder as website’s folder.
Btw, is there a way to create a folder inside the website’s folder named as images and direct it to that specific folder to get the image?
In that example the float property is not needed if the logo is the only thing in the header, because the in-line elements (img) will sit on the left by default. But if you were adding more to the header, you want it there.
If this is to be a foreground image, the <img> tag is wrong…
<img src="url or local path to your image" alt="alternate description" width="nn" height="nn">
Don’t forget the width and height attributes, numbers only, they are assumed to be pixels, any units of measure are invalid.
ninja’d. I’m about due for a nap. checking out now. Cheers.
Yep, right, it’s all messed up in my head, learned them both css and html in one night… thanks so much mate! It works well!
Btw, what actually did make it go on the header? The < header > tag?
And one more thing (hopefully also the last one) about the width 100%, it doesn’t really goes up to 100%, it doesn’t covers to the max.
To add the menu buttons, I could use a href with an image and each image will lead to other html page right?
So the buttons that I will use that will be on the header, I use the
aswell for them?
And if I want to edit the exact position of the logo, like to make it a bit more up or left etc, how can I do so?
You could use images, but text would be better if it’s text.
I see the background image in the header is a gradient, that would be much slicker done with css rather than an image.
background: linear-gradient(#231F1F, #040100);
You can make adjustments using margins or padding.
padding: 10px /* gives equal padding all round */
padding: 10px 20px /* gives 10 at top and bottom and 20 on the sides */
padding: 10px 20px 30px 30px /* 10 top, 20 right, 30 bottom and left */
padding-top: 10px /* just alter the top (or W/E side) */
