Improve or transform technical structure of two absolute positioned elements

[farzadina]

I have a background image. I want my navigation menu and the H1 element to place on a specific position of this background. For example I want my navigation to place on a flower and the menu on the road…

I made a Jsfiddle to show you what I really want: http://codepen.io/anon/pen/mzaGb

As you saw, I made it by using absolute positioning, but not a smart solution. I’m looking to find better ways to do that. The page is fixed and no need to have a responsive design, so I gave the #wrapper a min-width property in order to scroll the page when the window sides reach my menu.

[farzadina]

I can describe it more, if it’s not understandable enough.

[Nishant]

If i am getting right that you want to say then use background image to body instead of wrapper .

like :

body {
        background: url(http://desktop.freewallpaper4.me/view/original/5952/blur.jpg) no-repeat center center fixed;
        text-align: center;
        min-width: ________;
            width:100%;
}

h1 {
     font-family: Helvetica;
     font-size: 4em;
     text-shadow: 0 2px 2px #000000;
}
.neon {
     position: relative;
     top: 9.4em;
}
.navigation {
     padding: 0 0 0 1.4em;
     position: relative;
     top: 17.5em;
}
.navigation a {
     font-size: 1.07em;
     padding: 0.5em 0.1em;
     text-transform: uppercase;
     text-shadow: 0 2px 2px #000000;
}
.navigation a:hover {
     color: wheat;
     cursor: pointer;
}

apply all wrapper properties to body……. MAY BE IT WORK.

[farzadina]

Oh thanks, but the is no “problem” to solve. I just want to know did I maid it on a “fine” structure?
Test your CSS, it will make a problem: The menu goes out of its position in small browser window widths. Please make a fiddle (or codepen), because I couldn’t use your code and just guess that problem.

[Author]

Posts