Gå til innhold

Hvordan sette inn grafikk/bilde i .css?

Nitrius

Av Nitrius
i Programmering og webutvikling

Anbefalte innlegg

Nitrius

Nitrius

Skrevet
Skrevet (endret)

Hvordan gjøres dette? har prøvd diverse ting nå, men det ender opp med at noe ikke vises.

Har blant annet prøvd å sette inn en headergrafikk som aldri har funka så langt.

 

 

.css koden min ser slik ut for øyeblikket:

BODY { height: 8.5in } /* Required for percentage heights below */
#header {
position: absolute;
text-align: center;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
background-color: #000000;
}
#sidebar {
position: absolute;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
background-color: #009933;
}
#main {
position: absolute;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
margin-left: 20px;
background-color: #FFFFFF;
}
h1 {
color: #FFFFFF;
}

Slik ser .html koden ut

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<DIV id="header">
<h1>Lorem Ipsum</h1>
</DIV>
<DIV id="sidebar"> 
 <ul>
 <li><a href="this.html">This</a></li>
 <li><a href="that.html">That</a></li>
 <li><a href="theOther.html">The Other</a></li>
 <li><a href="theNext.html">The Next</a></li>
 <li><a href="The Scary">The Scary</a></li>
 <li><a href="theNextGen.html">The Next-Gen</a></li>
 <li><a href="theLast.html">The Last</a></li>
 </ul>
</DIV>
<DIV id="main">
<h3>Dolor Sit Amet</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Quisque viverra mi et orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
Nunc sit amet lacus. Aenean ac augue a arcu ultricies dictum. Mauris ligula lorem, egestas quis, auctor at, dignissim ut, neque. Quisque a nisl.
Sed feugiat. In adipiscing semper arcu. Mauris bibendum felis id ipsum. Aliquam ullamcorper pede in ligula. 
Morbi vel neque id lorem ullamcorper sollicitudin. Vivamus accumsan mi vitae libero. Sed a massa eu mi pulvinar molestie. Morbi nec dolor at tortor pharetra varius.
Aenean vel ipsum. 
In leo mi, eleifend rutrum, congue ut, pharetra eu, enim. Sed pede. Sed sit amet purus. Sed ornare justo. Ut ornare mauris non mi. 
Aenean fringilla, nulla ac scelerisque congue, lorem lectus faucibus ipsum, fermentum vestibulum eros nisl sit amet risus. 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed vitae mauris. 
Duis mi. Donec ipsum massa, mattis quis, aliquet non, vestibulum in, pede. Mauris vehicula.</p> 
</DIV>
</body>
</html>

Driver bare å tester meg frem så dette er ikke i nærheten av noe som skal være ferdig.

 

Uansett hvis du har noen tips kast dem ut.

 

 

Edit: Lagt ut en annen .css kode jeg har prøvd å jobbe med plus .html filen

Endret av Nitrius
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Nitrius

Nitrius

Skrevet
  • Forfatter
Skrevet

Har oppdatert første posten nå.

 

Hvis du nå hadde tatt å limt inn alt dette og og sett på det som en .html fil fille du se at "main" er hvit med tekst, "header" som dekker hele toppen som for øyeblikket er svart, "sidebar" som da skal være menyen som for øyeblikket er grønn.

 

Det jeg da f.eks vil, er å sette inn grafikk i headeren istede for en farge, altså grafikk i form av noe jeg lager i photoshop f.eks.

 

Hvordan gjøres dette? er hva jeg lurer på.

 

Vet ikke helt om jeg greier å forklare det noe bedre enn dette, håper det er nok og at noen forstår hva jeg prøver å få til.

Lenke til kommentar
Nitrius

Nitrius

Skrevet
  • Forfatter
Skrevet
Det er det som anbefales om du skal bruke header-grafikk. Nettopp fordi dette er header-dekorasjon, bør det settes settes i en h1, så kan du egentlig bare kopiere koden fra Mezzoblue, tilpasse bredde og høyde, samt sti til bildet, og kjøre på.

7375354[/snapback]

 

 

Okay, skal prøve meg litt frem, så får vi se hvordan det blir.

Takker nok en gang.

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