9 svar · 342 visningar · startad av Dwarfen
Hur gör man för att lägga in en bild i stället för banner (runt e box)?
Ska man lägga den som en bakgrundsbild i boxen och ta bort bannern?
Re: Bild istället för banner?
Dwarfen skrev:
Hur gör man för att lägga in en bild i stället för banner (runt e box)?
Ska man lägga den som en bakgrundsbild i boxen och ta bort bannern?
Ursäka mig men: Va?!
banner = reklamskylt?
box = en cell i en tabell?
Är jag trött och missförstår dig totalt eller? Men jag förstår verkligen inte dig.
Du verkar ju ha en egen lösning på problemet, testa den och se om den fungerar?
Förlåt, var helt inne i en annan sak när jag skrev.
Menade border, inte banner.
Har provat, men det ger inte det resultat som jag vill ha
Hmm, du får nog förklara ännu mer ändå?
Vill du ha en bild som border istället för en standard border?
Om du har en fast bredd och höjd på tabellen kan du lägga en bild med samma bred och höjd.
Exakt, vill ersätta den "tråkiga" vanliga border med en bild, men jag lyckas inte.
Just nu ser mig kod ut.
Kod
[
#box1 {
background-color: #fcfcfc;
border-color: #26282A;
border-style: solid;
border-width: 1px;
height: 100px;
left: 200px;
position: absolute;
top: 10px;
width: 625px;
}
]
Har försökt att ersätta border-width: 1px;
med border-width="bildnamn">
Men utan resultat...
Såvitt jag vet är det inte möjligt. Och om du ska lägga in en bakgrundsbild till något med css ska du använda dig av background-image: url(bild.gif);
Det gick inget vidare det heller.
Men om det inte går att göra som jag har tänkt mig, hur ska jag då kunna göra en border som softar ut till bakgrundsfärgen bakom/brevid boxen?
Det får du lösa på grafisk väg, typ en ram som "softar" och lägga den som bakgrund.
Så jag får alltså göra en bakgrund som är "normal" färgad i mitten och har ram...
Finns det verkligen inget annat sätt att göra det?
Verka lite dumt att lägga en bild bakom alla text ?
Du kan meka om din kod lite så att du har en "box i boxen" och utnyttja en bakgrundsbild i den tillsammans med lite padding...
t.ex. såhär:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>Ett exempel</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {text-align:center}
#minruta {
border:none;
margin:auto;
width:300px;
}
.ramen {
background-image: url(testbild.gif);
padding: 3px;
}
.innehallet {
text-align:left;
padding: 10px;
background-color:white;
color:navy;
}
-->
</style>
</head>
<body>
<div id="minruta">
<div class="ramen">
<div class="innehallet">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas quam arcu, consectetuer a, venenatis eget, pharetra quis, tortor.
Nulla nec tortor. Ut hendrerit congue risus.
Vivamus lobortis mauris ut ligula.
Proin sed eros vel felis tristique imperdiet.
Curabitur a elit sit amet eros blandit tristique.
Nulla augue lectus, blandit at, vehicula nec, placerat ut, velit.
Pellentesque velit quam, posuere id, dictum sit amet, rutrum non, ipsum.
Nulla facilisi.
Nulla diam dui, placerat sit amet, dignissim sit amet, sagittis sed, sapien.
Phasellus interdum. Vestibulum dapibus tristique pede.
Duis ac elit id nibh tincidunt porttitor. Aenean ac felis. Integer tempor.
Etiam sagittis pede sed magna.
Phasellus magna purus, blandit id, iaculis eu, bibendum ut, sapien.
</div>
</div>
</div>
</body>
</html>
#minruta är en centrerad div a'la standardrecept.
.ramen är en div med en repeterande bakgrundsbild som täcker hela rutan - .ramen har en padding som sedan kommer att bli "ramens" bredd.
.innehallet är den div där innehållet ligger. En ev. bakgrundsfärg eller bakgrundsbild i .innehallet kommer att visas över bakgrundsbilden i .ramen
Du kan provköra koden på http://member.webforum.nu/2241/bildramruta.html om du vill