nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

making a div float over an image

grahamor

Hi,

Im making a site that needs to be very search engine friendly.

The header is basically an image with the logo over to the left of the image. The logo is just text with a background colour so i want to make this a separate object to the image so i can make the text a h1 tag which is meant to be great for search engines.

The site is centered in the browser. If i make the logo a div how can it appear on top of the image and move if the browser is resized.

I never really understood all the absolute relative position stuff.

Thanks

Find more posts tagged with

Quick Links

Comments

Serbian

One of the ideas behind semantic markup is that all decorative images should be background images. With that in mind, why not make the header image the background of the header div and then place the logo inside that div using padding / margin. It would look something like this:

/* Stylesheet */

#header {
   width: 750px;
   height: 50px;
   background: #fff url(/path/to/background.png) no-repeat top left;
}

#header h1 {
   margin: 10px;
   padding: 0;
   color: #333;
}

<!-- HTML -->
<div id="header"><h1>Logo Text in Here</h1></div>

grahamor

excellent idea Serbian, ill do exactly that.

Thanks