Søg
Avatar billede NielsErikP Mester
03. oktober 2011 - 01:31 Der er 14 kommentarer og
1 løsning

Indlæg "Exceed'er" indlægs div???

Hej...
Jeg har et problem, når et indlæg gemt i databasen(MySql), skal sættes ind i mit indlægsfelt som består af en div overskrider(Exceed'er) det min border.

Se problem :
 
    www.nielsgjern.dk/epson/nl2br.jpg

Jeg bruger Php funktionen nl2br().

Min kode ser sådan ud :


echo "<div id=\"indlaeget\">";
            echo nl2br($data["besked"]);  //nl2br = newline oversættes til html breaktag.   
            echo "</div>";



Og Css :


#indlaeget {
    padding:15px 10px 10px 10px;
    width:420px;
    font-size:14px;
    color: white;
}   



Håber der er en "HardCore" der kan give lidt hjælp!!

PÅ forhånd tak!!
Avatar billede inteeeL Nybegynder
03. oktober 2011 - 09:51 #1
Det sker ofte, når man har en div inde i en div, og det første div's width er kortere end det andet div. Eksempel:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
#box {
    padding:0px 10px 10px 10px;
    width:380px;
    font-size:14px;
    color: black;
    border : 1px solid #000000;
}
#indlaeget {
    padding:15px 10px 0px 0px;
    width:420px;
    font-size:14px;
    color: black;
}
</style>
<body>
<div id="box">
    <div id="indlaeget">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>
</body>
</html>


Du vil se, at teksten vil overskride kanterne, da længden på #box er kortere end længden på #indlægget. Det ville være mit gæt, men da du ikke har vist mere kode, kan jeg ikke være sikker.
Avatar billede JensPeterSvensson Nybegynder
03. oktober 2011 - 10:17 #2
Prøv at tilføje overflow:auto til din css:

http://www.w3schools.com/cssref/pr_pos_overflow.asp
Avatar billede inteeeL Nybegynder
03. oktober 2011 - 10:32 #3
Overflow:auto bør i denne situation ikke have nogen effekt, da den i princippet laver sætninger på ny linje - det sker bare for sent, da den når at overskride kanterne. Det kan skyldes af enten padding eller width - det to ting plejer som regel at høre sammen. :-)
Avatar billede inteeeL Nybegynder
03. oktober 2011 - 11:01 #4
Og lige en anden ting. Jeg har opdaget, at der er end stigende tendens til at smide et svar, selvom andre faktisk allerede har kommet med løsningsforslag. Det er i mine øjne lidt at stjæle kredit fra folk. Lad dog personen selv bestemme, hvem der skal have kredit.

Jeg ved godt, at personen, der har oprettet indlægget, har mulighed for at annullere svaret og acceptere et andet svar. Det er dog meget sjældent, jeg har oplevet dette tilfælde. Det er lidt som om at svar uanset andre indlæg af selvfølgelig bare skal accepteres som et svar.
Avatar billede JensPeterSvensson Nybegynder
03. oktober 2011 - 11:16 #5
Nu er jeg relativ ny her, men jeg antog at ideen med svar var, at senere personer kunne se, hvilken post der var svaret på spørgsmålet.

Hvis dette ikke er tilfældet kan jeg godt se logikken i ikke at gøre min post til en svar post og så senere, i tilfælde af at spørge acceptere min post som svar, oprette en svar post.
Avatar billede inteeeL Nybegynder
03. oktober 2011 - 11:32 #6
Der skal naturligvis være plads til alle, såvel nye som gamle. Jeg synes dog stadig, at det sker - både af nye, men også af brugere, der har været her i flere år. Nu gik klagen udover dig, men den er bestemt rettet mod alle.
Avatar billede majbom Novice
03. oktober 2011 - 19:57 #7
-> #5 - jeg tror de fleste (i hvert fald dem som har været her noget tid) skriver kommentarer uanset hvad, indtil spørger skriver "Det virker - smid et svar".

sådan har jeg det i hvert fald selv og der er mange andre der også gør det på den måde.

det kunne egentlig være meget smart hvis der kun var mulighed for at smide kommentarer og så kunne spørger bare vælge at acceptere en eller flere kommentarer som svar - på den måde er der ingen der "kommer til" at smide et svar og det er nemmere for spørger at lukke et spørgsmål.
Avatar billede NielsErikP Mester
03. oktober 2011 - 21:53 #8
Hej..
#1: Det løste mit problem, ved egentligt ikke, hvorfor jeg ikke tænkte på det...
Men jeg havde en ydre <div> med en width på 420px.. og så <div>'en "indlaeget" på også 420px.. Den satte jeg ned efter at have læst dit indlæg til 418px.. og så for at visiualiserer det for mig selv satte jeg lige en "border: 1px solid red" på :
 
  www.nielsgjern.dk/epson/nl2br_1.jpg

Hvorfor den flyder så megt udover kanten, kan jeg ikke lige se, når begge var på 420px i width, men løsningen blev 398px til "indlaeget"!

Så inteeeL, vil du venligst lægge et svar, og så tusind tak for hjælpen :-)
Avatar billede olebole Juniormester
03. oktober 2011 - 23:03 #9
<ole>

Hvis du giver et DIV width:100px og samtidig padding:10px, så bliver DIV'et 120px bredt (10 + 100 + 10)

Det er lige efter CSS standardens box model

/mvh
</bole>
Avatar billede inteeeL Nybegynder
03. oktober 2011 - 23:10 #10
Godt at høre, du fik det til at virke. Læg mærke til (lige mht. dine røde border), at padding går ind og har en betydelig effekt.

Det er måske lettere at smide et lille eksempel op: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
#box {
    width:420px;
    color: black;
    border : 2px solid #000000;
}
#indlaegget {
    width:420px;
    padding : 5px 0px 0px 10px;    
    border : 2px solid #000000;
}
</style>
<body>
<div id="box">
    <div id="indlaeget">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>
</body>
</html>


Ovenstående vil give nogenlunde samme resultat, som det billede, du har henvist til. Width er begge 420, men da padding-left er på 10px, vil #indlaegget være 10px længere. Derfor skal du gøre width på #indlægget 10px kortere. Så style-delen ser således ud:


<style type="text/css">
#box {
    width:420px;
    color: black;
    border : 2px solid #000000;
}
#indlaegget {
    width:410px;
    padding : 5px 0px 0px 10px;    
    border : 2px solid #000000;
}
</style>


Håber det hjalp på forståelsen. :-)
Avatar billede olebole Juniormester
03. oktober 2011 - 23:27 #11
@inteeeL: Du må da vist mene: width:406px  *o)
Avatar billede NielsErikP Mester
03. oktober 2011 - 23:34 #12
Hej...
Tak inteeeL, jeg har forstået.... Sad netop lige selv og tænkte på det olebole siger i #11, du har jo 4px(2px x 2px) border på også...
Tak også til dig, OleBole... :-) smid et svar også, hvis du vil have lidt af pointene.

Tusind tak til jer begge :-)
Avatar billede olebole Juniormester
03. oktober 2011 - 23:36 #13
Lige præcis  =)

Ellers tak. Jeg samler ikke på points  =)
Avatar billede olebole Juniormester
03. oktober 2011 - 23:43 #14
Som du sikkert ved, prædikes der ofte om altid at begynde et HTML dokument med en DTD. Box modellen er netop noget af det, der sættes ud af kraft, når IE ikke fodres med en (korrekt) DTD.

Prøv dette dokument i IE - og fjern så DTD'en og reload browseren  =8-O


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
div {
    width: 200px;
    height: 200px;
    background: yellow;
}
.border {
    border: 50px solid red;
}
</style>
</head>
<body>

<div></div>
<div class="border"></div>

</body>
</html>

Avatar billede NielsErikP Mester
08. oktober 2011 - 22:16 #15
Hej...
Lidt sent ude er jeg...Gik lige lidt i stå, men nu kommer point og tak for hjælpen :-)

#14:
Ja Ole, det kan jeg da se på dit eksempel!! Der er stor forskel, tak for oplysningen, den var da til at tage og føle på :-)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra PHP kategorien

Titel Indlæg Oprettet Seneste aktivitet
MS Graph vis kalenderaftaler Af dane022 i PHP 0 06/11/202508:43 -
Hente data fra DEVICE via websocket Af nemlig i PHP 6 25/06/202512:37 25/06/202519:17
Login og redirect Af hrole i PHP 3 24/06/202518:52 24/06/202523:37
Batflat CMS Af sabumnim i PHP 0 06/06/202512:37 -
Hvad gør et @ før en funktion Af KurtG i PHP 3 01/06/202513:20 01/06/202518: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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 21:03 Forlænge ringetid Af 1Dorte i Apps til Android
17/0117:38 Video ikoner Af Malm i Windows
17/0117:27 Video ikoner Af logbuilders i Windows
16/0110:29 Negativ billeder på samsung Af ALICE i Småopgaver
15/0115:45 HJÆLP - Lopslag, Indeks? Hvad gør jeg! Af Eva i Excel
White papers
Flere white papers »