Avatar billede netcodericeo Nybegynder
25. november 2008 - 22:16 Der er 3 kommentarer og
1 løsning

Hvorfor går teskten uden for diven

Hejsa er der nogen løsning hvor teksten kan skubbes selv ned på næste linie i forhold til div'ens størelse.

min html ser således ud:

------------HTML Starter------------------------
<!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" >
<head>   
    <title>Untitled Page</title>
    <style type="text/css">@import "style.css";</style>       
</head>
<body>
    <form id="form1" runat="server">           
        <div id="page">
       
            <div id="logo">
           
            </div>
           
            <div class="clear">
           
            </div>
           
            <div id="menu">
                <ul>
                    <li><a href="#">Tester</a></li>
                    <li><a href="#">Nice</a></li>
                </ul>
            </div>                       
           
           
            <div class="clear">
           
            </div>
           
            <div id="content">
                fsdffsfdfdfsdffsfdfdfsdffsfdfdfsdffsfdfdfsdffsfdfdfsdffsfdfdfsdffsfdfdfsdffsfdfdfsdffsfdfdfsdffsfdfdfsdffsfdfdfsdffsfdfdfsdffsfdfdfsdffsfdfd
            </div>
           
        </div>         
    </form>
</body>
</html>


----------------------------HTML SLUT---------------------


---------------------CSS FIL STARTER----------------------
#page {
    width: 600px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 10px solid #330010;
}

#logo {
    height: 200px;   
}

#menu {
    height: 50px;
    background: #330010;
}

#menu ul {
    margin: 0;
    list-style: none;
}

#menu li {
    display: inline;
}

#menu a {
    display: block;
    float: left;
    margin-left: 20px;
    padding: 20px 0 2px 0;
    border-bottom: 4px solid #330010;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
}

#menu a:hover {
    border-bottom-color: #FFFFFF;
}

#menu .active a {
    border-bottom-color: #FFFFFF;
}

#menu .first a {
}

#content
{
    position:relative;   
    height: auto;   
    padding: 3px;
}

.clear
{
    clear:both;
}

-----------------------------CSS FIL SLUTTER----------------

Håber nogen kan hjælpe mig med en løsning.
Avatar billede micc Nybegynder
25. november 2008 - 22:43 #1
Det sker kun fordi det er et langt ord. Hvis du skriver en normal tekst, så vil den selv skifte linie hver gang et ord ville overskride div'ens grænser.
Avatar billede micc Nybegynder
25. november 2008 - 22:48 #2
Men hvis du rent faktisk ønsker at kunne skrive ord der er længere end en linie så har nogle browsere allerede understøttelse for css3-attributen:
  word-wrap: break-word;
Den vil jeg dog ikke anbefale at bruge i øjeblikket. :)
Avatar billede netcodericeo Nybegynder
25. november 2008 - 22:53 #3
okey mange tak for det :) siden du anbefaler det så vil jeg ikke bruge word-wrap,  kan du lige ligge et svar tak
Avatar billede micc Nybegynder
25. november 2008 - 23:38 #4
Hermed et svar... :)
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