Avatar billede Firezar Nybegynder
22. november 2012 - 22:08 Der er 11 kommentarer og
1 løsning

Tekst fylder mere end hvad det ser ud til?

Hej!!

Jeg er ved at lave en hjememside. Bare for sjov.

Jeg har bare det lille problem, at min tekst fylder meget mere end den gør visuelt. Ved ikke lige hvordan jeg skal forklare det.

I hvert fald blokerer teksten for et billede som jeg gerne vil have op på siden af teksten.

Her er et billede af situationen: http://s14.postimage.org/3zq3xzqwh/html.png

Håber i kan hjælpe mig :)

på forhånd, tak.
Avatar billede olebole Juniormester
22. november 2012 - 22:48 #1
<ole>

Du har formodentlig lagt din tekst i et block element (f.eks. et DIV), og sådan et fylder den tilgængelige bredde og laver linjeskift før og efter elementet ... derfor 'block'

/mvh
</bole>
Avatar billede herlevsen123 Nybegynder
23. november 2012 - 01:44 #2
Hvis du smider din kode op, så kan vi bedre hjælpe dig (:
Avatar billede Firezar Nybegynder
23. november 2012 - 07:57 #3
Hej Ole!

Det kan godt være noget i den stil... Er bare ikke sikker.

Her er koden:

<div id="text_wrapper">
  <div id="text">
      <p>Dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <img src="images/650d.png" />
</div>

Og css'en:

#page #text_wrapper {
    width: 720px;
    float: left;
    margin: auto;
}

#page #text_wrapper #text {
    width: 360px;
    clear: both;
}

#page #text_wrapper img {
    width: 320px;
    float: right;
    margin-right: 10px;
}

Har slettten ting som text-formatering og linjeskift. Går ikke ud fra at der har nogen betydning.

Tak for jeres svar!
Avatar billede herlevsen123 Nybegynder
23. november 2012 - 15:37 #4
Det er pga. din div "text". Div er et block element, så for at gøre det på den måde skal du også floate den.

I øvrigt skal du ikke skrive parent elementet i din css. Da du bruger et id, kan den alligevel ikke indtræde flere steder i din kode. dvs. istedet for #page #text_wrapper skriver du bare #text_wrapper (:
Avatar billede Firezar Nybegynder
23. november 2012 - 15:59 #5
Yes!!

Tusind tak herlevsen123, det virkede :)
Havde ikke tænkt på hvilke slags element jeg havde med at gøre.

Og tak for hintet med parent elementerne. Troede de skulle med.

Smider du et svar så jeg kan give dig point? :)
Avatar billede herlevsen123 Nybegynder
23. november 2012 - 16:14 #6
Så lidt (: Fortsat god dag!
Avatar billede olebole Juniormester
23. november 2012 - 18:04 #7
Det er ikke en god fremgangsmåde at floate sine elementer 'ukritisk'. Float er beregnet til at lave tekstomløb - f.eks. omkring et billede.

Float er ikke beregnet eller egnet til generelt at lægge block elementer ved siden af hinanden. Et af problemerne med float er, at man flår elementet ud af det naturlige sideflow og derefter må 'hacke' sig ud af følgevirkningerne med clear. Faktisk blive float ofte i udviklerkredse omtalt som tabellens afløse, når det kommer til abuse  *o)

Til at lægge block elementer ved siden af hinanden har man i stedet forsynet os med en speciel værdi til display property'en: inline-block.

Tildeler du et block element display:inline-block, vil det udadtil opføre sig som et inline element - men indadtil som et block element. Den slags elementer vil altså lægge sig ved siden af hindanden - mens de samtidig kan indeholde block elementer
Avatar billede herlevsen123 Nybegynder
23. november 2012 - 18:50 #8
Enig. Derfor kan du med fordel, bare smide dit billede ind i din paragraph og bruge float: right. Men det kommer an på om billedet har relation til teksten. Ellers ville jeg også gøre som olebole skriver, at bruge inline-block istedet. (-:
Avatar billede olebole Juniormester
23. november 2012 - 19:27 #9
Til gengæld ville du nok ikke bruge så mange 'stå- og slavefejl', som olebole brugte i #7 ... OMG!  *D
Avatar billede Firezar Nybegynder
23. november 2012 - 20:41 #10
Wow... Tak for jeres gode forklaringer :)

Inline-block... Hvorfor har jeg ikke tænkt på det? Det virker jo logisk.

Jeg skal prøve at tænke mere over mit valg koder næste gang ;)

Tusind tak og go' weekend!
Avatar billede olebole Juniormester
23. november 2012 - 21:43 #11
Selvtak, men du skal lige være opmærksom på én ting: To inline elementer med et linjeskift i koden, vil altid have et mellemrum mellem sig i browseren  *o)

Når jeg f.eks. anbefaler inline-block til en horisontal UL/LI menu, brokker folk sig ofte over, at når LI elementerne får en border eller baggrundsfarve, vil de ikke lægge sig helt ved siden af hinanden med inline-block - men det vil de med float. Løsningen er:

<ul>
    <li>Punkt 1</li><li>Punkt to</li><li>Punkt 3</li>
</ul>

- eller:

<ul>
    <li>Punkt 1</li><li>
        Punkt to</li><li>
        Punkt 3</li>
</ul>

- eller:

<ul>
    <li>Punkt 1</li><!--
    --><li>Punkt to</li><!--
    --><li>Punkt 3</li>
</ul>

- hvoraf den første jo giver sig selv, hvis menuen udskrives dynamisk på serveren.

Under alle omstændigheder er det ikke spor mystisk - og ingen vil undre sig over, at koden:

<span>Ole</span>
<span>Bole</span>

- renderes som: Ole Bole og ikke som OleBole. Det er bare stenalder HTML, når det er smukkest  *D
Avatar billede herlevsen123 Nybegynder
23. november 2012 - 22:03 #12
Og lige for Prins Knud så smider du bare en comment (<!-- -->) imellem </div> og <div> for undgå dette ;) Eksempel følger:
<div>
  <div style="display: inline-block;"></div><!--
 
  --><div style="display: inline-block;"></div>
</div>

Eller du kan:

<div>
  <div style="display: inline-block;">
  </div><div style="display: inline-block;"></div>
</div>
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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