Notifikationer

Markér alle som læst Log ud

kurdo Novice

29. februar 2008 - 15:30 Der er 25 kommentarer og
1 løsning

<div> fylder 100% (ikke meningen)

hej eksperter! :)

når jeg laver en <div></div> så vælger den at fylde hele siden, altså width: 100%.

men det er ikke det jeg vil have, jeg er igang med et photoblog, og den skal kun fylder så meget som billederne fylder.

men som sagt fylder den 100% og vis jeg sætter fx width til 1px, også skal den strække sig ud efter billedet, men det gør den ikke. billedet går ud af <div>'en mens diven står stille! :) nogen der har en ide til at den skal kun strække sig ud efter størrelse af indholdet? :) da jeg nemlig ikke gider bruge tabeller..

Synes godt om

roenving Novice

29. februar 2008 - 15:34 #1

Tjah, tabeller kunne være en rimelig løsning, men du kan jo også sætte den i et inline element med break-rules efter ...

Synes godt om

olebole Juniormester

29. februar 2008 - 15:59 #2

<ole>

Det er nok en dårlig idé at vælge elementer udfra, hvad du 'gider at bruge'. Det ville nok være hensigtsmæssigt at vælge udfra nogle andre kriterier ;o)

Hvad du bør gøre er svært at udtale sig om, når man ikke kan se koden. En mulighed kunne dog være at bruge et inline-element, som roenving skriver, men det kræver jo, at koden, der skal være indeni ikke består af block-elementer. Prøv at lægge et link :)

/mvh
</bole>

Synes godt om

kurdo Novice

29. februar 2008 - 16:15 #3

hmm, jeg har desværre ikke noget da det er over localhost, men alt hvad det går ud på er:

<div align="center" style="border: 10px solid #fff;">
<a href="http://kurdo.dk"><img src="kurdo.dk" border="0px"></a>
</div>

så det der sker er at divet fylder hele siden og billedet er centreret.
og hvad mener du med inline element? :) kan i forklare og måske give et eksempel? :)

Synes godt om

kurdo Novice

29. februar 2008 - 16:20 #4

<div style="display:inline; border: 10px solid #fff;"> virkede! :)
tak til begge 2 da jeg søgte på google efter inline div så kom dette frem! :b

smid lige et svar hver, så kan i få point..

Synes godt om

roenving Novice

29. februar 2008 - 16:22 #5

-- men du kan bare bruge et native inline-element, her vil en span være ret indlysende:

<span style="border: 10px solid #fff;">
<a href="http://kurdo.dk"><img src="kurdo.dk" border="0"></a>
</span>

-- els velbekomme '-)

Synes godt om

roenving Novice

29. februar 2008 - 16:22 #6

;O)

Synes godt om

kurdo Novice

29. februar 2008 - 16:25 #7

ups, jeg var vist for hurtig, det må i undskylde! :)
den kommer ikke rundt om hele billedet, men kun om det nedeste ligne, se her:

http://img513.imageshack.us/img513/6485/72119926ls4.jpg

Synes godt om

kurdo Novice

29. februar 2008 - 16:27 #8

ps, span gør det samme som billedet i sidste indlæg.

Synes godt om

olebole Juniormester

29. februar 2008 - 16:29 #9

Du må skrive den helt nøjagtige kode, du bruger. Et billede oplyser ikke meget :)

Synes godt om

kurdo Novice

29. februar 2008 - 16:32 #10

okay, det her har jeg:

<div align="center" id="photo">
<a href="index.php?showimage=<IMAGE_PREVIOUS_ID>">
<img src="images/<IMAGE_NAME>" alt="<IMAGE_TITLE>" border="0px" title="<IMAGE_TITLE>"/></a>
</div>

css:

#photo
{
background: #FFF;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 0px;
border: 0px;
}

Synes godt om

jokkejensen Novice

29. februar 2008 - 16:34 #11

hvorfor ikke bare:

<img style="border:10px solid white;border-bottom:0px;" />

Syntes den er unødvendig den container..

/JJ

Synes godt om

jokkejensen Novice

29. februar 2008 - 16:35 #12

men

<div style="margin:0 auto">
<img style="border:10px solid white;border-bottom:0px;" />
</div>

Burde gøre det..

husker du en at deklarer dit dokument, med en fornuftigt dtd ?

Synes godt om

kurdo Novice

29. februar 2008 - 16:46 #13

hvad mener du med deklarer med en fornuftigt dtd? :)

det her er præcist jeg vil have, men forklarede mig på en anden måde fra starten:

<div style="margin:0 auto">
<img style="border:10px solid white;border-bottom:0px;" /><br>
<div style="float: left; width: 30px;">knap1</div><div style="float: left; width: 100%;">knap2</div><div style="float: right; width: 30px;">knap3</div>

så jeg får 3 divs under billedet i den samme div som billedet ligger i, men mit problem er at den øveste div stadig fylder hele siden, og det er præcis det den ikke skal gør! :)

Synes godt om

kurdo Novice

29. februar 2008 - 16:50 #14

du mener sikkert:

<!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" lang="en" xml:lang="en">

Synes godt om

roenving Novice

29. februar 2008 - 16:53 #15

Måske er det noget i stil med:

<span style="margin:0 auto;text-align:center;">
<img style="border:10px solid white;border-bottom:0px;width:160px;"><br>
<span style="margin:0 10px;">knap1</span><span style="margin:0 10px;">knap2</span><span style="margin:0 10px;">knap3</span>
</span>

Synes godt om

kurdo Novice

29. februar 2008 - 16:58 #16

desværre span virker slet ikke, det er ligesom billedet jeg viste! :)

Synes godt om

jokkejensen Novice

29. februar 2008 - 16:58 #17

hehe det er godt nok noget af en gætte leg :)

Har du ikke et link, eller en copy paste af hele kilden ?

/JJ

Synes godt om

kurdo Novice

29. februar 2008 - 17:06 #18

uploade lige det hele, så kan i se! :)

www.kurdo.dk

den tynde hvide strege som fylder 100% skal kun være omkring billedet, og glem de tabeller længere nede, dem har jeg ikke kigget på endnu! :)

Synes godt om

olebole Juniormester

29. februar 2008 - 18:01 #19

<ole>

Såvidt jeg kan se, skal du prøve med en helt ny approach. Du kan ikke bruge et inline-element - og samtidig centrere det. Derfor må du over i at sætte en passende bredde på dit div. Noget i stil med:

<div style="width:960px;margin:0 auto;border:1px solid #fff;">
<a href="index.php?showimage=5">
<img src="images/20080229171305_fotobasen2.jpg" alt="vandmiloner" border="0px" title="vandmiloner" id="photo"/></a></div>

- og læg mærke til, at jeg har lagt dit div-sluttag helt op i slutningen på dit a-sluttag ... det er vigtigt!

/mvh
</bole>

Synes godt om

jansangill Nybegynder

29. februar 2008 - 22:26 #20

Ole, må jeg spørge hvorfor det er vigtigt at slut div'en ligger op ad a-sluttag? Og ikke bare næste linie?

Det må der være en god grund til, som ville være dejlig at vide:)

Synes godt om

kurdo Novice

01. marts 2008 - 00:27 #21

olebole

det er som om du ikke har forstået mit spørgesmål? :) den der width:960px udlægger jo det hele. meningen er at den skal fylder så meget som billedet! :) og ikke 960px ligemeget hhvilket størrelse billedet har! :)

Synes godt om

olebole Juniormester

01. marts 2008 - 17:43 #22

Når du i slutningen af et block-element har et linjeskift efter et inline-element, introducerer IE ekstra whitespace i slutningen af linjen. Derfor skal div-slut-tagget op i måsen på a-slut-tagget.

Nej, jeg har ikke misforstået dig. Naturligvis skal de 960px ikke være statisk. Du skifter selvfølgelig bredden, hvergang du loader et nyt billede :)

Synes godt om

kurdo Novice

01. marts 2008 - 19:45 #23

som jeg har forstået dig så skal jeg hver gang jeg sætter et nyt billede ind, skal jeg skifte width ? :)

fordi jeg bruger et photoblog system, så det kan jeg ikke bare for hver af dem! :b men det er iorden, tak for hjælpen , jeg ved ikke hvem jeg skal giver point til, men ingen har sådan fået svare på mit spørgesmål selvom der var mange der kom med gode ideer! :) jeg tror vare jeg giver til roenving, da han svarede først og også fordi jeg skifter til tabeller, og det var også det han sagde jeg skulle! :)

Synes godt om

olebole Juniormester

01. marts 2008 - 20:01 #24

Ja, det er ofte problemet med færdige libraries som LightBox ... de er besværlige at tilpasse på en fornuftig måde. Somom det ikke var nok, den slags libs somregel består af tussegammel, uhensigtsmæssig og invalid kode :)

Synes godt om

kurdo Novice

01. marts 2008 - 20:24 #25

det gør de helt sikkert! :) jeg har ikke meget forstand på sådan noget udover html og css! :) så ved ikke hvornår man kan sige de er gamle eller nye jacascripts!: )

Synes godt om

roenving Novice

03. marts 2008 - 15:55 #26

Taqk 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