css - tekst komme ude over den hvid box - Udvikleren.dk - Programmering, webdesign og grafik

Tags: css

<< < 1 2 > >>

Bruger #17136 @ 04.07.12 03:47

hejsa

det er sådan at jeg arbejder lige på min hjemmeside men det er sådan at jeg har 2 box som skal ligge ved siden af hinanden men det er sådan på f.eks bruger_opret_box og quoteBox skal ligge ved siden af hinanden men det er sådan at jeg har utroligt meget tekst på quoteBox div boxen.

sådan her ser min css-kode ud til de 2 boxe

CSS kode

 #boxMidt {
     padding:5px;
     margin:5px;
     width:700px;
     min-height:500px;
     float:left;
 }
 #bruger_opret_box {
     float:left;
     padding:5px;
     width:210px;
 }
 #bruger_opret_box h2 {
     color:#333;
     font-size:20px;
     text-align:center;
 }
 #bruger_opret {
     text-align:center;
     color:#000;
     width:200px;
     padding:5px;
     margin:0 auto;
     background:#E5E5E5;
     
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
 }
 #bruger_opret b {
     text-align:center;
 }
 #bruger_opret li {
     list-style-image:url(../img/bruger/ok.png);
     margin-left:4px;
     margin-right:4px;
 }
 button.css3button {
     width:200px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     color: #123d54;
     padding: 5px 15px;
     background: -moz-linear-gradient(
         top,
         #afd9fa 0%,
         #588fad);
     background: -webkit-gradient(
         linear, left top, left bottom, 
         from(#afd9fa),
         to(#588fad));
     border-radius: 6px;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
     border: 1px solid #003366;
     -moz-box-shadow:
         0px 1px 3px rgba(000,000,000,0.5),
         inset 0px 0px 1px rgba(255,255,255,1);
     -webkit-box-shadow:
         0px 1px 3px rgba(000,000,000,0.5),
         inset 0px 0px 1px rgba(255,255,255,1);
     text-shadow:
         0px -1px 0px rgba(000,000,000,0.7),
         0px 1px 0px rgba(255,255,255,0.3);
 }
 #quoteBox {
   display:block;
   padding-top:1px;
   position:relative;
 }
 #quoteBox h1 {
     color:#000000;
       font-family:'Segoe UI';
       font-size:2em;
       font-weight:normal;
     text-align:center;
 }
 #quoteBox p {
     text-align:center;
     color:#333;
 }
 #quoteBox span.alignTop {
   padding-top:0;
 }
 #quoteBox span.alignTop img {
     padding-left:30px;
     padding-right:30px;
 }
 #quoteBox span {
   display:inline-block;
   position:relative;
 }
 #quoteBox span div {
   display:block;
   padding:5px;
   position:relative;
 }
 #quoteBox span.alignMiddle {
   padding-top:1px;
   vertical-align:middle;
 }
 #quoteBox span {
   display:inline-block;
   position:relative;
 }

og jeg har en box ude over det som gøre at det er hvid background

som jeg har skrevet her

CSS kode

 #content_alt {
     min-height:500px;
     background:#FFF;
     padding:5px;
     border-radius:1px solid #3C4042;
     border-bottom:1px solid #3C4042;
     border-left:1px solid #3C4042;
 }

Her kan du se hvad jeg sådan helt mener med det hele!..

KLIK HER

Har du spørgsmål eller andet så skrive det

14 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #13010 @ 04.07.12 14:00

440

Efter din <div id="boxMidt">...<div> så tilføj en <div style="clear:both;"></div>

dan > De løsninger jeg fandt ser ikke særlig rene ud syntes jeg. Ok man slipper for at tilføje HTML men det vil jeg næsten hellere end at skulle lave content med at sætte et tegn ind og sætte højden til 0 det syntes jeg ikke er en ren løsning.

Bruger #13010 @ 04.07.12 14:15

440

Sådan her...

HTML kode

 <div id="boxMidt">
 ...
 <div>
 <div style="clear:both;"></div>

Bruger #13010 @ 04.07.12 14:46

440

Også kør siden igennem en validator : http://validator.w3.org/check?uri=http%3A%2F%2Fdjinfo.dk%2Fbeta-jesper-version%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Bruger #17072 @ 04.07.12 09:22

152

Hej Jesper
Du kan prøve at indsætte dette, i CSS, ved de to elementer der er problemet:

Kode

word-wrap: break-word;

Bruger #17136 @ 04.07.12 10:16

det hjælper overhovedet ikke men hvis jeg ligge en hvid background på hvor sin box så går den helt ned med teksten

som jeg har skrevet her

CSS kode

 #boxMidt {
     padding:5px;
     margin:5px;
     width:700px;
     min-height:500px;
     float:left;
     word-wrap: break-word;
     background:#FFF;
 }
 #bruger_opret_box {
     float:left;
     word-wrap: break-word;
     padding:5px;
     width:210px;
     background:#FFF;
 }

og det her virker ikke rigtigt..

CSS kode

 word-wrap: break-word;

sådan her ser min html ud ;

HTML kode

 <div id="content_alt">
 <div id="bruger_opret_box">
 <h2>blabla</h2>
 <div id="bruger_opret">
 <p>infomation her</p>
 </div>
 <div id="boxMidt">
 <div id="quoteBox">
 <p>hej</p>
 </div>
 </div>

Indlæg senest redigeret d. 04.07.2012 10:38 af Bruger #17136

Bruger #17081 @ 04.07.12 11:55

1.258

hvis det der, er alt din html ... så mangler der lidt lukke div (</div>

så ryd lige op i det først, kan være det hjælper på det.

Tips / Tricks:
Formater din kode .. så er det meget nemmere, at læse:

HTML kode

 <div id="content_alt">
     <div id="bruger_opret_box">
         <h2>blabla</h2>
         <div id="bruger_opret">
             <p>infomation her</p>
         </div>
         <div id="boxMidt">
             <div id="quoteBox">
                 <p>hej</p>
             </div>
         </div>

Det samme kan med fordel gøres i din CSS:

CSS kode

 #quoteBox {
     display:block;
     padding-top:1px;
     position:relative;
 }
     #quoteBox h1 {
         color:#000000;
         font-family:'Segoe UI';
         font-size:2em;
         font-weight:normal;
         text-align:center;
     }
     #quoteBox p {
         text-align:center;
         color:#333;
     }
 
     #quoteBox span {
         display:inline-block;
         position:relative;
     }
 
         #quoteBox span div {
             display:block;
             padding:5px;
             position:relative;
         }
 
     #quoteBox span.alignTop {
         padding-top:0;
     }
         #quoteBox span.alignTop img {
             padding-left:30px;
             padding-right:30px;
         }
 
     #quoteBox span.alignMiddle {
         padding-top:1px;
         vertical-align:middle;
     }

Indlæg senest redigeret d. 04.07.2012 11:56 af Bruger #17081

Bruger #13010 @ 04.07.12 13:12

440

Prøv med <div style="clear:both;"></div> efter den tekst som står udenfor boksen.

Ellers må det være fordi du har sat height et sted så boksen ikke må være højere.

Men det er meget nemmere for mig og sikkert også andre hvis du kommer med link til siden så kan man hurtigt teste sig fra til hvor problemet ligger.

Ellers kan du selv prøv med Firefox firebug for eksempel så højre klikke du bare og vælger "Inspect element" der hvor problemet er så kan du komme til at se HTML og CSS kode og rediger i CSS koden live og slå ting til og fra, det er rigtig godt til at finde sådan nogen fejl.

Bruger #17081 @ 04.07.12 13:23

1.258

scootergrisen ... det du implementere der er det man kalder et clearfix. Det kan også klares uden, at tilføje flere elementer. Prøv, at søge på google efter "clearfix"

Bruger #17136 @ 04.07.12 13:36

Her kan jeg give en beta version som jeg arbejder på lige nu og her

Klik her!

Prøv med <div style="clear:both;"></div> efter den tekst som står udenfor boksen.

Ellers må det være fordi du har sat height et sted så boksen ikke må være højere.

Men det er meget nemmere for mig og sikkert også andre hvis du kommer med link til siden så kan man hurtigt teste sig fra til hvor problemet ligger.

Ellers kan du selv prøv med Firefox firebug for eksempel så højre klikke du bare og vælger "Inspect element" der hvor problemet er så kan du komme til at se HTML og CSS kode og rediger i CSS koden live og slå ting til og fra, det er rigtig godt til at finde sådan nogen fejl.

jeg har download det til google browser og der kan jeg se det.

altså Inspect element eller hvad det hedder til google browser.. altså det her

Indlæg senest redigeret d. 04.07.2012 13:39 af Bruger #17136

Bruger #17136 @ 04.07.12 14:13

okay men hvordan vil du gøre det?

det hjælper ikke rigtigt ser det ude til lige nu. hmm

som du kan se på link som jeg har skrevet lige før

<< < 1 2 > >>

tekst komme ude over den hvid box

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler