Logo Position CSS Solution

HTML & CSS
1

Afternoon from 10° sunny York, UK.

LOGO-here
LOGO-here680×513 28.8 KB

The above screenshot illustrates where I’d like a logo to appear in my site https://www.website-project-manager.co.uk/ but its been an age since ive done this and my approach of image replacement may cause a tonne of problems so here are some specific questions for any member should they have the time.

#1 How could i get a logo to be placed where it says Artemis in the left nav with CSS?
#2 What’s the best file format to tick the responsive box?
#3 Since my design dept is little me if I downloaded a paid for vector logo e.g
https://www.vectorstock.com/royalty-free-vector/unique-artemis-logo-template-vector-34047737 could i edit wit an online with a solution such as vectr.com ?

Thanks in advance,
David

2

I’d place it there as an image instead the you can have the alt attribute on place for screen readers. The image is really content in this instance and should not really be in the background.

If its a simple logo then svg is the best format as it scales well and looks good on all devices (even Retina devices).

If the logo is too complicated for an svg then an optimised png or jpg will be fine. You will need a good quality image if you want to scale it up and down and if you need retina (double density or more) support then you need even better quality still.

3 Likes
3

Hi there Nightwing,

and a good afternoon from 11° light rain Chertsey, Surrey. :winky:

Check out the attachment, it may help to get you going. :winky:

artemis.zip (43.6 KB)

coothead

2 Likes
4

Wow exceptionally helpful :slight_smile: Working on this now!

1 Like
5

Perfect this helps a lot thank you :slight_smile:

1 Like
8

[off-topic]
You should never use Click Here as link text. It is not accessible; it is not good for SEO and it is not informative.
[/off-topic]

2 Likes
9

Good point, what’s a better way?

10

Use the document title as the link text.

3 Likes
11

I’ll have a crack at this tomorrow :slight_smile:

1 Like
12

I’ve actioned your advice, thank you :slight_smile:

1 Like
13

Your solution worked, thank you soooo much :slight_smile:

14

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