Notifikationer

Markér alle som læst Log ud

compac Seniormester

05. august 2006 - 11:09 Der er 14 kommentarer og
1 løsning

Billede i banner

Jeg har et banner, hvor jeg kunne tænke mig at få anbragt et billede til venstre - så det bliver en del af banneret.

Min css-kode ser såleddes ud:
#banner {
background:#ffffff url(img/header_bg.gif);
height:116px;
border:none;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
color:#000000;
}
html>body #banner {
height:116px;
}
hvor headder_bg.gif er en lodret smal streg, som danner banneret.
Mit billede heder oalogo.jpg - og liggger foreløbig i selve html-afsnittet:

<div id="banner">
<img alt="logo" src="img\oalogo.jpg">
</div>
</div

Synes godt om

mclemens Nybegynder

05. august 2006 - 11:46 #1

Eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type"

content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
#banner {
background:#ffffff url(img/header_bg.gif) 80px 0px;
height:116px;
color:#000;
}
</style>

</head><body>
<div id="banner">
<img alt="logo" src="img\oalogo.jpg">
</div>
</body></html>

eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type"

content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

#banner {
background:#ffffff url('img/header_bg.gif') 80px 0px;
height:116px;
}

#mlogo{
background:url('img/oalogo.jpg') no-repeat;
height:116px;
}

</style>

</head><body>
<div id="banner">
<div id="mlogo"></div>
</div>
</body></html>

... hvis ikke så hvordan ser billederne ud?

Synes godt om

mclemens Nybegynder

05. august 2006 - 11:50 #2

Ved ikke helt med det css voice famiy noget og height defineringerne?
height:116px; <-? 2x height
border:none; <- border:0px; ??? (bør ikke være nødvendigt andet end ved links?
voice-family: "\"}\""; /* Ved ikke om den del skal bruges? */
voice-family: inherit; /* Ved ikke om den del skal bruges? */
height:39px; <-? 2x height

html>body #banner {
height:116px; <-? height stilles til 116px for andre browsere end IE eller ?
}

... Hvis eksemplerne over dette indlæg er helt på sidespor så sig lige hvor høje og brede billederne er og om de skal gentages på x eller / og y led... i ovenstående forudsatte jeg at width på oalogo.jpg var 80px...

Synes godt om

compac Seniormester

05. august 2006 - 12:53 #3

Billedet er 116px i højde og 138px i bredden.
Skal sætningerne:
height:116px; <-? 2x height
height:39px; <-? 2x height

skrives ordret som du har svaret?

(voice-family har vist noget at gøre med at IE skal kunne læse det.)

Synes godt om

mclemens Nybegynder

05. august 2006 - 13:15 #4

[ Skal sætningerne:
height:116px; <-? 2x height
height:39px; <-? 2x height ]

Nej, jeg studsede bare over 2x height...
- Det du kan prøve med var 05/08-2006 11:46:30
... her er den lidt tilrettet ...

Eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
#banner {
background:#ffffff url(img/header_bg.gif) 138px 0px;
height:116px;
color:#000;
}
</style>

</head><body>
<div id="banner">
<img alt="logo" src="img\oalogo.jpg">
</div>
</body></html>

eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

#banner {
background:#ffffff url('img/header_bg.gif') 138px 0px;
height:116px;
}

#mlogo{
background:url('img/oalogo.jpg') no-repeat;
height:116px;
}

</style>

</head><body>
<div id="banner">
<div id="mlogo"></div>
</div>
</body></html>

Synes godt om

mclemens Nybegynder

05. august 2006 - 13:46 #5

... åh joh, så lige det der
voice-family: "\"}\"";
voice-family: inherit;
ind i css'en hvis det
er noget du skulle bruge.

Synes godt om

mclemens Nybegynder

06. august 2006 - 10:40 #6

... Hjalp det?

Synes godt om

compac Seniormester

06. august 2006 - 13:41 #7

Desværre giver ingen af dine mange forslag noget resultat. Billedet bliver stående fast uden at rokke sig i forhold til resten.
Jeg bliver nok nødt til at lave et banner i et billedbehandlingsprogram , hvor billedet bliver en del af selve banneret. Fylder jo nok nogle flere kB - og dermed længere svartid.

Synes godt om

mclemens Nybegynder

06. august 2006 - 14:35 #8

Baggrunds billedet rykkede sig fint her?
- Men nu siger du at det er billedet der skal
rykke sig - jeg læste spørgsmålet som at billedet
skulle stå til venstre for baggrunden...
- Her er et hvor billedet rykker sig istedet...

(i de tidligere udgaver med banner defineringen kan det godt ske at det havde været lettere at se at baggrunden rykkede sig hvis jeg havde husket at skrive no-repeat i slutningen af f.eks. background:#ffffff url(img/header_bg.gif) 138px 0px; -> background:#ffffff url(img/header_bg.gif) 138px 0px no-repeat; )

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
#banner {
background:#ffffff url(img/header_bg.gif) no-repeat;
height:116px;
color:#000;
}
#billedet{margin-left:116px;}
</style>

</head><body>
<div id="banner">
<img alt="logo" src="img\oalogo.jpg" id="billedet">
</div>
</body></html>

Synes godt om

mclemens Nybegynder

06. august 2006 - 14:42 #9

... Eventuelt kan man også place billedet med absolute i en relative div, men jeg mangler måske en uddybning af det for at vide præcis hvad du søger...

[ Billedet er 116px i højde og 138px i bredden. ]
- Baggrunden hvor stor er den?
- Skal billedet placeres udentil det reserverede plads i div boxen?
- Hvis Ja - til højre eller venstre for baggrunden?
- Hvis Nej - hvad skal stå først i div boxen baggrunden eller billedet (de to eksempler er postet - men ellers genposter jeg lige med tilretning efter baggrundsbilledets str.)
- Laver du en direkte test eller includer du et stylesheet der kan have css regler der påvirker?

Synes godt om

compac Seniormester

06. august 2006 - 15:58 #10

Nu sker der noget:

Banneret kommer ikke hvis jeg bruger no-repeat. (header_bg.gif er jo kun en smal streg)
Derefter kan der klares en del ting med padding kommandoen:
<style type="text/css">
#banner {
background:#ffffff url(img/header_bg.gif);
height:116px;
color:#000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
color:#000000;
}
html>body #banner {
height:116px;
}

#billedet {margin-left:10px; padding: 10px 0px 0px 0px;}
</style>
</dead>
<body>

<div id="banner">
<img alt="logo" src="img\oalogo.jpg" id="billedet">

</div>

-så kan jeg få billedet til at stå præsis hvor jeg vil have det i banneret.
¨
Nu viser der sig et lille problem: Banneret skulle jo dække jo hele skærmens bredde. Men det mangler ca. 10-15 px i høje side.

Synes godt om

mclemens Nybegynder

06. august 2006 - 16:50 #11

[ Banneret skulle jo dække jo hele skærmens bredde. Men det mangler ca. 10-15 px i høje side. ] Prøv at sætte denne linje ind i din css :)
html,body{margin:0px;padding:0px;}

Synes godt om

compac Seniormester

06. august 2006 - 19:18 #12

Det var lige hvad der skulle til.
Tak for hjælpen -læg et svar.

Synes godt om

mclemens Nybegynder

06. august 2006 - 19:56 #13

Kommer her :)

Synes godt om

roenving Novice

23. august 2006 - 10:53 #14

-- og så kan spørgsmålet vel lukkes !-)

Synes godt om

mclemens Nybegynder

08. oktober 2006 - 21:43 #15

Tak for point :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS