html - tekst kommer over boxen - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

<< < 1 2 3 > >>

Bruger #16353 @ 15.01.12 12:29

Hej

det er sådan at jeg er i gang med at lave en hjemmeside til bruger system men det er sådan at når man klik inde på bruger osv. så kommer tekst ude over boxen så det ser "grimt".

CSS kode

 #djbox {
     width:300px;
     min-height:325px;
     margin:5px;
     background:#CCC;
     float:left;
     
     border-radius:7px;
     -moz-border-radius:7px;
     -webkit-border-radius:7px;
 }
 #djbox a {
     text-decoration:none;
     color:#000;
 }
 #djbox a:hover {
     border-bottom:1px #000 solid;
     text-decoration:none;
     color:#00F;
 }
 #djnavn {
     background:url(../img/bruger/top-navn.png) repeat-x #F90;
     padding:4px;
     
     border-top-left-radius:7px;
     border-top-right-radius:7px;
     -moz-border-radius-topleft:7px;
     -moz-border-radius-topright:7px;
     -webkit-border-top-right-radius:7px;
     -webkit-border-top-left-radius:7px;
 }
 #djnavn li {
     margin:1px;
     list-style-image:url(../img/bruger/music-icon.png);
 }
 #djtekst {
     padding:2px;
     margin:5px;
     height:250px;
 }
         #faceicon {
             list-style-image:url(../img/bruger/FaceBook-icon.png);
             margin:4px;
             float:left;
         }
         #webicon {
             list-style-image:url(../img/bruger/site.png);
             margin:4px;
             float:left;
         }
         #landicon {
             list-style-image:url(../img/bruger/verden.png);
             margin:4px;
             float:left;
         }
 h2 {
     color:#FFF;
     background:#999;
     padding:5px;
     
     border-radius:7px;
     -moz-border-radius:7px;
     -webkit-border-radius:7px;
 }
 #profilinfo {
     float:left;
     background:#CCC;
     padding:10px;
     margin:2px;
     border:1px #000 solid;
     
     border-radius:7px;
     -moz-border-radius:7px;
     -webkit-border-radius:7px;
 }

sådan ser det ud men hvad har jeg gøre galt siden det vise sig sådan. kan man ikke gøre sådan at sæt et max på det og så vise den kun det eller hvad?,, kan man gøre med det?

http://d.localhostr.com/file/37VTk1j/capture.png

HTML kode

 <div id="djbox">
         <!--Djnavn-->
             <div id="djnavn">
                 <li><a href="profil.php?djz=<?php echo $row["id"];?>"><?php echo $row["djnavn"];?></a></li>
             </div>
             <!--profiltekst-->
                 <div id="djtekst">
                     <?php echo $row["profiltekst"];?>
                 </div>
                 <!--website-facebook-->
                     <li id="faceicon"><a href="http://www.facebook.com/ (...) echo $row["facebook"];?>" target="_blank">Fan side</a></li>
                     <li id="webicon"><a href="<?php echo $row["site"];?>" target="_blank">Website</a></li>
                     <li id="landicon"><?php echo $row["land"];?></li>
         </div>

sådan ser kode ud når det er

hvad kan jeg gøre så det ser rigtigt godt ud da

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

Sorter efter stemmer Sorter efter dato

Bruger #10216 @ 15.01.12 12:58

4.283

dine li'er mangler nogle ul'er...

http://www.w3schools.com/tags/tag_ul.asp

Bruger #16353 @ 15.01.12 13:01

-108

Det fucking hele min side op..

Bruger #10216 @ 15.01.12 13:03

4.283

Det er muligt... men overholder du ikke generelle standarder er det:

1) Forkert!
2) Mere forkert!
3) Fucking forkert!

Det er den eneste måde at løse størstedelen af dine udfordringer.

Indlæg senest redigeret d. 15.01.2012 13:05 af Bruger #10216

Bruger #16977 @ 15.01.12 13:03

Det er fordi at #djbox floater og #djtekst har en fast defineret størrelse som teksten går ud over.

Du kan enten ændre height på #djtekst til min-height eller sætte overflow-y: scroll på boksen, så der kommer scrollbar når teksten går udover height.

Bruger #16353 @ 15.01.12 13:09

-108

Det er fordi at #djbox floater og #djtekst har en fast defineret størrelse som teksten går ud over.

Du kan enten ændre height på #djtekst til min-height eller sætte overflow-y: scroll på boksen, så der kommer scrollbar når teksten går udover height.

http://d.localhostr.com/file/2zeQb1k/capture.png

det er når jeg har sæt overflow-y:scroll;

Der ske det samme hvis jeg skrive min-height

Det er muligt... men overholder du ikke generelle standarder er det:

1) Forkert!
2) Mere forkert!
3) Fucking forkert!

Det er den eneste måde at løse størstedelen af dine udfordringer.

Det er fordi jeg har et billede på li,
så kommer det til at se sådan her ud ;

http://localhostr.com/files/LxqG650/capture.png

Hvordan kan jeg gøre det pænt igen?

Indlæg senest redigeret d. 15.01.2012 13:13 af Bruger #16353

Bruger #13010 @ 15.01.12 14:16

440

Har du ik et webhotel/hjemmeside hvor du kan uploade det ?

Det er meget lettere for mig at hjælpe end at se et billede og koden.

Bruger #16353 @ 15.01.12 14:22

-108

Ja men jeg ligger det helt ikke op så om vi kan gøre det via TW?.

Bruger #13010 @ 15.01.12 14:40

440

Jeg ved ikke hvad TW er.

Du behøver heller ikke lægge det hele op.
Det drejer sig kun om HTML og CSS så barber din kode sådan at det kun er det som du lægger op.

Og hvis din HTML kode er forkert kan du bruge http://validator.w3.org/ til at blive gjort opmærksom på fejl som manglende <ul> tags.

Vi kan heller ikke se hvad doctype du bruge.

Så hvis du lægger lidt mere arbejde i at lave sådan et eksempel på en side hvor man kan se fejlen så er det lettere at hjælpe.

Ligesom jeg laver de her test sider, for eksempel :
http://scootergrisen.dk/test/test0097.html

Så kan andre hurtig se hvad man snakker om og der er kun den nødvendige kode. I dit første indlæg der inkluder du PHP som ikke er nødvendig at have med, mellem være bedre hvis du kun viste det efter PHP koden var blevet udført.

Men prøv med :

HTML kode

 <div id="djbox">
     <!--Djnavn-->
     <div id="djnavn">
     <li><a href="profil.php?djz=<?php echo $row["id"];?>"><?php echo $row["djnavn"];?></a></li>
     </div>
     <!--profiltekst-->
     <div id="djtekst">
     <?php echo $row["profiltekst"];?>
     </div>
     <!--website-facebook-->
 <ul>
     <li id="faceicon"><a href="http://www.facebook.com/ (...) echo $row["facebook"];?>" target="_blank">Fan side</a></li>
     <li id="webicon"><a href="<?php echo $row["site"];?>" target="_blank">Website</a></li>
     <li id="landicon"><?php echo $row["land"];?></li>
 </ul>
     </div>

... nu kan jeg se så du har ændret i koden og kommer med flere screenshots.
Men man har jo ikke en chance for at vide hvordan din kode nu ser ud. Derfor ville det være bedre så kunne du opdater koden og sige at nu har du lavet det og det om.

Indlæg senest redigeret d. 15.01.2012 14:45 af Bruger #13010

Bruger #16353 @ 15.01.12 14:44

-108

PHP kode

 <?php include ("database/database.php");?>
 <!DOCTYPE HTML>
   <html>
   <head>
   <meta charset="utf-8">
   <title>Djinfo.dk | Alt til dig! | Fed musik</title>
   <link rel="stylesheet" type="text/css" href="style/style.css">
   <link rel="stylesheet" type="text/css" href="style/djbruger-style.css">
   </head>
   <body>
   <!--topmenu-->
   <?php include("include/topmenu.php");?>
   <!--Logo-->
   <?php include("include/logo.php");?>
   <div id="wrapper">
       <!--Menu-->
       <?php include("include/menu.php");?>
       <!--Banner-->
       <?php include("include/banner.php");?>
       <div id="loginbox">
       <form action="login.php" method="post">
        <input type="text" name="brugernavn" placeholder="Brugernavn">
        <input type="text" name="password" placeholder="Password">
        <input type="submit" value="Login" id="inputlogin">
        </form>
        <form action="opret.php" method="post">
         <input type="submit" value="Opret" id="inputopret">
         </form>
       </div>
       <div id="content">
           <?php
         $result = mysql_query("SELECT * FROM brugere");
         while($row = mysql_fetch_array($result))
         {
         ?>
         <div id="djbox">
         <!--Djnavn-->
             <div id="djnavn">
                 <li><a href="profil.php?djz=<?php echo $row["id"];?>"><?php echo $row["djnavn"];?></a></li>
             </div>
             <!--profiltekst-->
                 <div id="djtekst">
                     <?php echo $row["profiltekst"];?>
                 </div>
                 <!--website-facebook-->
                 <ol>
                     <li id="faceicon"><a href="http://www.facebook.com/pages/<?php echo $row["facebook"];?>" target="_blank">Fan side</a></li>
                     <li id="webicon"><a href="<?php echo $row["site"];?>" target="_blank">Website</a></li>
                     <li id="landicon"><?php echo $row["land"];?></li>
                     </ol>
         </div>        
         <?php
         }        
         ?>
       </div>
   
   
   <div id="footer">
   <li><a href="http://jesperbok.dk/">Lavet af Jesper Petersen</a> - Design & kode af Jesper Petersen &copy;</li>
   </div>
   </div>
   </body>
   </html>

CSS kode

 #djbox {
     width:300px;
     min-height:325px;
     margin:5px;
     background:#CCC;
     float:left;
     
     border-radius:7px;
     -moz-border-radius:7px;
     -webkit-border-radius:7px;
     
     box-shadow:0px 0px 7px #000;
     -moz-box-shadow:0px 0px 7px #000;
     -webkit-box-shadow:0px 0px 7px #000;
 }
 #djbox a {
     text-decoration:none;
     color:#000;
 }
 #djbox a:hover {
     border-bottom:1px #000 solid;
     text-decoration:none;
     color:#00F;
 }
 #djnavn {
     background:url(../img/bruger/top-navn.png) repeat-x #F90;
     padding:4px;
     
     border-top-left-radius:7px;
     border-top-right-radius:7px;
     -moz-border-radius-topleft:7px;
     -moz-border-radius-topright:7px;
     -webkit-border-top-right-radius:7px;
     -webkit-border-top-left-radius:7px;
 }
 #djnavn li {
     margin:1px;
     list-style-image:url(../img/bruger/music-icon.png);
 }
 #djtekst {
     padding:2px;
     margin:5px;
 }
         #faceicon {
             list-style-image:url(../img/bruger/FaceBook-icon.png);
             margin-left:5px;
             float:left;
         }
         #webicon {
             list-style-image:url(../img/bruger/site.png);
             margin-left:5px;
             float:left;
         }
         #landicon {
             list-style-image:url(../img/bruger/verden.png);
             margin-left:5px;
             float:left;
         }
 h2 {
     color:#FFF;
     background:#999;
     padding:5px;
     
     border-radius:7px;
     -moz-border-radius:7px;
     -webkit-border-radius:7px;
     
     box-shadow:0px 0px 7px #000;
     -moz-box-shadow:0px 0px 7px #000;
     -webkit-box-shadow:0px 0px 7px #000;
 }
 #profilinfo {
     float:left;
     background:#CCC;
     padding:10px;
     margin:2px;
     border:1px #000 solid;
     
     border-radius:7px;
     -moz-border-radius:7px;
     -webkit-border-radius:7px;
 }

Bruger #13010 @ 15.01.12 14:46

440

Prøv og kom med et link så vi kan se siden.

<< < 1 2 3 > >>

tekst kommer over boxen

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler