Hvordan få meny foran bilde?

Pnilsen · 20. mars 2014

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?

cronbach alpha · 20. mars 2014

Får ikke laget et eksempel nå, men du kan ta å sjekke ut disse linkene:

http://www.w3schools.com/css/css_image_transparency.asp

http://www.css3.info/introduction-opacity-rgba/

oddeh · 20. mars 2014

opacity kombinert med z-index.

20. mars 2014

opacity kombinert med z-index.

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

oddeh · 20. mars 2014

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?

20. mars 2014

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.

Pnilsen · 20. mars 2014

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?

Oyand · 20. mars 2014

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).

Pnilsen · 23. mars 2014

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>

Logg inn

Hvordan få meny foran bilde?

Anbefalte innlegg

Pnilsen

Lenke til kommentar

Videoannonse

cronbach alpha

Lenke til kommentar

oddeh

Lenke til kommentar

Gjest Slettet+1523

Lenke til kommentar

oddeh

Lenke til kommentar

Gjest Slettet+1523

Lenke til kommentar

Pnilsen

Lenke til kommentar

Oyand

Lenke til kommentar

Pnilsen

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer