Statey
10 years ago | edited 10 years ago

0

I think ill suggest a reopen possibility if some problems occure again. ;)

same problem as in the last thread except that i tried to add a picture as background.

it worked but now my navbar hides behind my coloumns again.

Page again:
```<!DOCTYPE html>

Linkes Zentrum

<body>

    <div>  
        <img id ="hintergrund" src=http://www.hdwallpapers.in/walls/fantasy_space-wide.jpg>  
    </div>

    <div id="header">  
        <h2>Title</h2>  
        <div id="navbar">  
            <ul>  
                <li><a href = >A</a></li>  
                <li><a href = >B</a></li>  
                <li><a href = >C</a></li>  
                <li><a href = >D</a></li>  
                <li><a href = >E</a></li>  
            </ul>  
        </div>  
    </div>  

    <div class="text"></div>  
    <div class="info"></div>


Stylesheet

/ ________________ /

hintergrund {

position: fixed;
width:100%;
height:100%;
z-index:1;
}
/_______________/

navbar {

position: fixed;  
top:15px;  
left:50%;  
margin-left:-254px;

/________________/
z-index:10 ;
/________________/
}

header {

position: relative;  
top: 20px;  
background-color: #FFFF00;  
border-radius: 15px;  
width: 100%;  
height: 40px;  
text-align: center;

/______________/
z-index: 3
/______________/
}

ul{
list-style-type: none;
position: fixed;
margin: -10px;
}

li {
display: inline;
border: 2px solid #000000;
font-family: Futura, Tahoma, sans-serif;
color: #F8F8FF;
padding: 5px;
border-radius: 5px 5px;
background-color: #ff3030;
}

a:link {
font-family: Verdana,Arial;
font-size: 11px;
color: #000000;
text-decoration: none;
}

a:active {
font-family: Verdana,Arial;
font-size: 11px;
color: #000000;
text-decoration: none;
}

a:visited {
font-family: Verdana,Arial;
font-size: 11px;
color: #000000;
text-decoration: none;
}

a:hover {
font-family: Verdana,Arial;
font-size: 11px;
color: D9D9D9;
text-decoration: none;
}

.text {
position: relative;
float: left;
margin-top: 30px;
margin-left: 200px;
width: 40%;
height: 800px;
background-color: #008B00;
margin-bottom: 10px;
/_____________________/
z-index:5 ;
/_____________________/
}

.info {
position: relative;
float: right;
margin-top: 30px;
margin-right: 200px;
width: 25%;
height: 800px;
background-color: #ffffff;
margin-bottom: 10px;
/_________________________________/
z-index:5 ;
/_________________________________/
}
```

Changes are marked by “_________” comments.

Probably im just damned stupid, made a silly mistake and everybody will laugh later.

But ill join your laughter when the problem is fixed ;)

Thx again
Statey

Mystery [kapuccino]
10 years ago | edited 10 years ago

0

Let me move up this thread to the first page.

tortora23
10 years ago

0

i don’t understand what’s the problem … in my pc the navbar it’s clickable and visible.
can you explane?

Push pop change order stack frame FILO
filesystem inodes, all fall to my flow.

Cyan Wind [freewind1012]
10 years ago | edited 10 years ago

0

He already clearly stateyd (oops, stated) his problem.

[quote=Statey]my navbar hides behind my coloumns again[/quote]

![Image](https://www.hackthis.co.uk/user/userbar.png?user=freewind1012%20//%20Navigator)

tortora23
10 years ago

0

sy i tried the code on my pc and the navbar was ok, so i think that i don’t understand the problem

close OT ;)

Push pop change order stack frame FILO
filesystem inodes, all fall to my flow.

Cyan Wind [freewind1012]
10 years ago

0

@Statey: I don’t quite understand. Why didn’t you make it simpler?

![Image](https://www.hackthis.co.uk/user/userbar.png?user=freewind1012%20//%20Navigator)

Statey
10 years ago

0

How would you make it simplier freewind?

and tortora i wouldnt ask if it would work for me.

Cyan Wind [freewind1012]
10 years ago | edited 10 years ago

0

By using background property like this:
body { background-image: url('fantasy_space-wide.jpg') background-repeat: no-repeat background-attachment: fixed; ... }
You should download the background image and place it somewhere in your server.

For more info: CSS background property.

![Image](https://www.hackthis.co.uk/user/userbar.png?user=freewind1012%20//%20Navigator)

Statey
10 years ago

0

i use a downloaded version of the pic, also the navbar links are already filled with links (to nearly empty html documents) .

as the websiteis only for fun, its just on my pc. but ill try to include it to XAMPP.
But thanks freewind it now looks like this:

    background-image: url('/Applications/XAMPP/xamppfiles/htdocs/Hintergrund.jpg') ;  
    background-repeat: no-repeat;  
    background-attachment: fixed;  
    background-size: 100% 100%;  
    }

But my main problem is still not solved. the navbar is still hiding behind the coloumns and i dont know why and cant klick them.

Cyan Wind [freewind1012]
10 years ago | edited 10 years ago

0

Here are some comments for your code:
[list]
[*]
```

/ This is a comment in CSS /
Please don't f*** up the syntax of your CSS code by adding ****. [*] The position property is not necessary to .text and .info. If you are using it because of the float property, then no need to do that. [*] However, it should be kept in this case:
.header {
position: relative;
top: 20px; / Because of this property, the position property should be kept. Change 20px to another value to see what will happen. /
}
```
[/list]

I didn’t change anything more than that (and added the background image). Check this out:

![Image](https://www.hackthis.co.uk/user/userbar.png?user=freewind1012%20//%20Navigator)

Statey
10 years ago

0

The comments were just done while i was in a hurry but wanted to post the problem. they arent part of the actual code, only there to show where changes where made compared to last time.

After removing the both positions everything worked fine again.
Thanks :)

CSS Problem 2.0

0

hintergrund {

navbar {

header {

0

0

0

0

0

0

0

0

0

0