Member Avatar for kyllle

I have created a jpg of a banner design I want to use

I have started coding the design but have a few probs that I dont know how to correct http://www.glen-lodge.co.uk/learning.html

basically can you offer me your advise on how I achieve the following:

1) position the main links in the center instead of the left hand side
2) how I properly position the little home box I have at the side of 'EVENTS' without it tampering with the other links
3) how do I position the sub links above the page banner on the left hand side?
4) and how do I place the 2 links 'BUY TICKETS' and 'ALL EVENTS' in the black section of the banner that I have left??

basically I cant get my head round positioning the text on images and above images etc so it would be great to gain some knowledge from everyone through your help and advise.

It would be great if you could also give me advice on my current code and maybe pointers on how I could achieve better results.

Thanks for looking

Kyle

  • 7 Contributors
  • 7 Replies
  • 126 Views
  • 11 Months Discussion Span
  • Latest Post Latest Post by abhicary

Dani AI

Generated

For the four layout tasks you listed there’s a clear, robust approach that keeps HTML semantic and uses CSS for placement — this avoids image-only links and fragile pixel-perfect positioning.

As suggested, move your CSS into an external file and use real anchor text instead of images for primary links. Center the main nav with Flexbox so it will remain centered regardless of screen width (MDN: Flexbox guide). Make each nav item a normal list item and only use absolute positioning for small, local tweaks.

Example structure and styles (conceptual):

<nav class="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Events <span class="home-box">[icon]</span></a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>
.main-nav ul { display:flex; justify-content:center; list-style:none; margin:0; padding:0; }
.main-nav li { position:relative; }
.home-box { position:absolute; right:-18px; top:50%; transform:translateY(-50%); }

For the banner, treat the JPG as a background on a container and place links in an overlay element inside that container. That keeps links selectable, indexable, and styleable:

<header class="banner">
  <div class="banner-overlay">
    <a class="cta" href="#">BUY TICKETS</a>
    <a class="cta" href="#">ALL EVENTS</a>
  </div>
</header>
.banner { position:relative; background:url("banner.jpg") center/cover no-repeat; height:220px; }
.banner .banner-overlay { position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:12px; }

Avoid using image maps for the nav — ’s speed point is valid, but is also right: image-map links are bad for SEO and accessibility (MDN: map element). Use percent-based widths, max-widths and media queries to handle low resolutions, and only use position:absolute when its effect is local; read up on positioning (MDN: position) and background images (MDN: background-image). If a positioned element disappears, check that the parent has position:relative, confirm z-index, and test at several viewport sizes.

Recommended Answers

All 7 Replies

Member Avatar for kyllle

Hey all again,

Iv managed to position the sub nav links above the banner and position the main links at the top of the page so I feel Im on the right track although I would love someone to have a glance over the page just for some much needed advice.

My main difficulty is positioning the two links at the bottom of the banner, all advise welcomed!!

Thanks all!!

http://www.glen-lodge.co.uk/learning.html

Member Avatar for macneato

Hi Kylle,

The first thing I would sugguest is placing your css in a separate document.

Secondly I personally wouldn't use "buy tickets" and "all events" as images. I would probably go with text. Since you already have it in a DIV why don't you just list them?

Member Avatar for MidiMagic

This doesn't work very well on screens with low resolution, unless you prefer the page to be scrolled horizontally.

The page can keep its identity better if you define sizes in percent and points, instead of pixels.

Member Avatar for Tlhokomelo

Hi Kylle,

The first thing I would sugguest is placing your css in a separate document.

Secondly I personally wouldn't use "buy tickets" and "all events" as images. I would probably go with text. Since you already have it in a DIV why don't you just list them?

This doesn't work very well on screens with low resolution, unless you prefer the page to be scrolled horizontally.

The page can keep its identity better if you define sizes in percent and points, instead of pixels.

... Two day later and you still have not changed anything. Makes it nasty for anyone else to advise. Anywhatnot! Using absolute positioning causes too many resolution problems, you need to use wireframes to planing before you code your web pages.

Your mark up has useless divs(home, wrapper...) and an empty anchor. Don't just ask questions, search for answers too.

Member Avatar for txwebdesign

I know that the rage is to do everything with css and while I code using it on many things, the tried and true method, if you're going to use an image is to do this with an image map. This really is a matter of choice, I stay very busy with design and find it quicker and simpler to image map then worry about positioning with css.

Best of luck

Member Avatar for cyberduck

Image map can be a quick fix but this definitely not the best option, as this is not search engine optimized at all. Search engine can barel read image map and the links will not described the content... So take more time to code in css, it will be beneficial in the long term

Sylvain / Cyber-Duck

Member Avatar for abhicary

I know that the rage is to do everything with css and while I code using it on many things, the tried and true method, if you're going to use an image is to do this with an image map. This really is a matter of choice, I stay very busy with design and find it quicker and simpler to image map then worry about positioning with css.

Best of luck

I also walk on the same path.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.