Css

2010-05-10 12:54

Permalänk

Tallkotten

Medlem

Plats: Järfälla
Registrerad: Okt 2007

●

Hej.

Jag håller på att göra en hemsida och har valt att förgrundsbilden (den som ligger över alla andra) täcker hela skärmen med transparens i mitten så man ser sidan. Vad detta medför är att jag inte kan klicka på länkar eller markera text på sidan, vet någon en läsning på problemet utan att behöva dela upp hela sidan i massa bilder?

MVH
Johan

Visa signatur

| MacBook Pro 2016 Touch Bar 15" |

CITERA FÖR SVAR

Rapportera Redigera

Citera flera Citera

2010-05-10 12:56

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Använd en bakgrundsbild istället för allt utanför innehållet.
Exempel:

<style>
body {
	margin:0;
	background-image: url('bild.jpg');
}
#wrapper {
	background-color:#000;
	width:960px;
	height:700px;
	margin: 0 auto;
}
</style>
</head>

<body>
<div id="wrapper"> </div>
</body>

Alternativt att du delar in sidan i tre sektioner för att spara några skickade kB för bakgrundsbilden.

Senast redigerat 2010-05-10 13:03

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-05-10 13:02

Permalänk

Tallkotten

Medlem

Plats: Järfälla
Registrerad: Okt 2007

●

Men grejen är att bilden jag har längst fram är en gardin som ska täcka vissa delar utav sidan, det är liksom det snygga med det. :/

Visa signatur

| MacBook Pro 2016 Touch Bar 15" |

CITERA FÖR SVAR

Rapportera Redigera

Citera flera Citera

2010-05-10 13:05

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Skrivet av Jooh4n:

Men grejen är att bilden jag har längst fram är en gardin som ska täcka vissa delar utav sidan, det är liksom det snygga med det. :/

Gå till inlägget

Då får du möjligtvis dela in den och täcka över med hjälp av bakgrundsbilder på de divar som ska påverkas.
Har du någon länk så vi kan kika på koden eller skiss för designen, finns kanske annat sätt att lösa det på med z-index och flytande boxar.

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-05-10 13:14

Permalänk

Tallkotten

Medlem

Plats: Järfälla
Registrerad: Okt 2007

●

Skulle kunna ladda upp en bild om du vill se ett exempel?

Bild

Tänk er att Hela gardinen är en bild med full opacity i mitten. Det går alltså inte att klicka igenom.

Skulle kunna köra upp lite kod också.

URKLIPP FRÅN INDEX.PHP
<div id="panel">
<?php include "meny.php"; ?>
	<div id="main">

MENY.PHP KOD

<div id="meny">

<div class="start"><a href="Index.php"></a></div>
<div class="projekt"><a href="Projekt.php"></a></div>
<div class="kontakt"><a href="Kontakt.php"></a></div>
<div class="omoss"><a href="Omoss.php"></a></div>



<img src="images/Start.png" class="hidden" />
<img src="images/Start_hover.png" class="hidden" />
<img src="images/Projekt.png" class="hidden" />
<img src="images/Projekt_hover.png" class="hidden" />
<img src="images/Kontakt.png" class="hidden" />
<img src="images/Kontakt_hover.png" class="hidden" />
<img src="images/Omoss.png" class="hidden" />
<img src="images/Omoss_hover.png" class="hidden" />

</div>

'
LITE CSS KOD

.start a {width: 81px; height: 83px; background: transparent url("images/Start.png") no-repeat; float: left; display: block;}
.start a:hover {width: 81px; height: 83px; background: transparent url("images/Start_hover.png") no-repeat; float: left; display: block;}
.projekt a {width: 98px; height: 83px; background: transparent url("images/Projekt.png") no-repeat; float: left; display: block;}
.projekt a:hover {width: 98px; height: 83px; background: transparent url("images/Projekt_hover.png") no-repeat; float: left; display: block;}
.kontakt a {width: 81px; height: 83px; background: transparent url("images/Kontakt.png") no-repeat; float: left; display: block;}
.kontakt a:hover {width: 81px; height: 83px; background: transparent url("images/Kontakt_hover.png") no-repeat; float: left; display: block;}
.omoss a {width: 121px; height: 83px; background: transparent url("images/Omoss.png") no-repeat; float: left; display: block;}
.omoss a:hover {width: 121px; height: 83px; background: transparent url("images/Omoss_hover.png") no-repeat; float: left; display: block;}

.hidden { display: none;}

Visa signatur

| MacBook Pro 2016 Touch Bar 15" |

CITERA FÖR SVAR

Rapportera Redigera

Citera flera Citera

2010-05-10 14:07

Permalänk

Tallkotten

Medlem

Plats: Järfälla
Registrerad: Okt 2007

●

Never mind.. får lösa det genom en fullösning.. delar upp alla bilder som du först föreslog.. var min nödutgång ^^

Tack för visat intresse ändå!

Senast redigerat 2010-05-10 14:23

Visa signatur

| MacBook Pro 2016 Touch Bar 15" |

CITERA FÖR SVAR

Rapportera Redigera

Citera flera Citera

2010-05-10 14:17

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Det bästa är om du delar upp bilden, vänster, topp och höger och placera dem som bakgrundsbilder. Menyn kan ju vara vanliga länkade <img />. Annars kommer du få göra onödiga fulhack.

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-05-10 17:18

Permalänk

HarmlessWarrior

Avstängd