Gå til innhold

Hvordan få meny foran bilde?

Pnilsen

Anbefalte innlegg

Pnilsen

Pnilsen

Skrevet
Skrevet

Driver med et lite prosjekt her, men har møtt på et problem jeg ikke helt skjønner hva jeg skal gjøre med. Vedlagdt ligger bilde som forklarer det meste.

 

Jeg vil altså ha sideoppsettet som vist, med bakgrunn, midtstilt bilde på bakgrunnen, og på bildet skal det være en transparent meny.

 

Hvordan bør jeg gå fram?

post-343456-0-95918200-1395334044_thumb.jpg

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Gjest Slettet+1523

Gjest Slettet+1523

Skrevet
Skrevet

opacity kombinert med z-index.

 

Ikke så lurt, for da dras opacity på teksten ned også. Bruk heller en rgba-farge for gjennomsiktighet.

Lenke til kommentar
Gjest Slettet+1523

Gjest Slettet+1523

Skrevet
Skrevet

 

 

opacity kombinert med z-index.

 

Ikke så lurt, for da dras opacity på teksten ned også. Bruk heller en rgba-farge for gjennomsiktighet.

 

 

Man lærer så lenge man lever, men z-index stemmer vel?

 

Det er vel helt avhengig av om bildet settes som en bakgrunn eller ikke; hvis det er en bakgrunn så har det ikke noe i si, hvis det er et faktisk bilde med img-tag, så ja. z-index er mer om du skal ha en sibling til å vises over en annen.

Lenke til kommentar
Pnilsen

Pnilsen

Skrevet
  • Forfatter
Skrevet

 

 

 

opacity kombinert med z-index.

 

Ikke så lurt, for da dras opacity på teksten ned også. Bruk heller en rgba-farge for gjennomsiktighet.

 

 

Man lærer så lenge man lever, men z-index stemmer vel?

 

Det er vel helt avhengig av om bildet settes som en bakgrunn eller ikke; hvis det er en bakgrunn så har det ikke noe i si, hvis det er et faktisk bilde med img-tag, så ja. z-index er mer om du skal ha en sibling til å vises over en annen.

 

Kan jeg sette to bilder som bakgrunn?

 

Hvordan får jeg menyboksen og knappene til å plassere seg riktig?

Lenke til kommentar
Oyand

Oyand

Skrevet
Skrevet

z-index, som fatcat sier, er for å fortelle hviklet element som skal vises før et annet når de er i det samme nivå i hierarkiet. Av og til er det greit å sette indeksen uansett nivå, da det byr på problemer visst du senere skulle endre litt på ting.

 

Jeg hadde kanskje brukt et bilde (2x2px) feks med en senket opacity som bakgrunnsbilde på hele elementet (repeat-all). Eneste minus er kanskje det å måtte lagre nytt bilde visst du vil endre på det. Det vil iallfall ikke påvirke andre elementer under det elementet (mtp. opacity).

Lenke til kommentar
Pnilsen

Pnilsen

Skrevet
  • Forfatter
Skrevet

Hva kan gjøres annerledes her? Det er noe som ikke stemmer. F.eks så følger ikke innholdet størrelsen på vinduet - det bare blir borte, uten at man kan scrolle seg til det. Hvordan kan man løse det?

Og en ting til, er at på Safari så virker det som om "OM", "UTSALG",og "KONTAKT" ligger bak transbox og ikke får full farge. På Chrome går det fint. Hvorfor?

<head>
<style>
body{
	background:#f7c200;
	background-size:100%;
	position: fixed;
}

div.background {
	background:url(111.jpg) no-repeat;
position:fixed;
width:980px;
height:640px;
margin-left:25px;
margin-top:25px;
z-index:-1;
}


div.transbox{
	position:fixed;
	float:left;
	left:120px;
	top:33px;
	width:250px;
	height:640px;
	background-color:rgba(255, 255, 255, 0.6);
}
ul
{
	margin-top:100px;
	list-style-type:none;
padding:0;
}

a{
	line-height:200%;
	font-size:36px;
	text-decoration:none;
	display:block;
	font-family: desdemona;
	font-weight: bolder;
	color: #1b3982;
	text-align: center;
	z-index:1;
}

a:hover, a:active{
	color:white;
}

div.header{
	background-color:rgba(255,255,255,0.6);
	margin-left:450px;
	margin-top:120px;
	width:430px;
	text-align:center;
}

h1{
		font-size:36px;
	text-decoration:none;
	display:block;
	font-family: desdemona;
	font-weight: bolder;
	color: #1b3982;
}
	
	
div.content{ 
background-color:rgba(255,255,255,0.6);
margin-left: 450px;
margin-top: 0px;
width:400px;
max-height:300px;
padding:1em;
overflow-y:auto;
}
</style>
</head>

<body> 
<div class="background">
<div class="header">
<h1> OM </h1>
</div>
<div class="content">
<p> bla bla bla </p>
</div>

<div class="transbox">

<ul>
<li><a href="index.html"><img src="hjem.gif" alt="Hjem" width="180px" height="auto"/></a></li>
<li><a href="about.html">Om</a></li>
<li><a href="where.html">Utsalg</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>

</div>
</div>
</body>
</html>
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...