Avatar billede RasmusSOlsen Nybegynder
15. november 2011 - 16:13 Der er 1 kommentar og
1 løsning

problem med siden bliver for bred

Er igang med mit første forsøg i css og jeg ender ud med en alt for bred side. Det er lidt nemmere at se end at forklare så her er koden;

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ (...)
<html xmlns="http://www.w3.org/ (...)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lotus Yoga</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
   
    <div id="page-wrap">
   
    <ul id="nav">
        <a href="#">Forside</a>
        <a href="#">Om Lotus Yoga</a>
        <a href="#">Yoga former</a>
        <a href="#">Skema</a>
        <a href="#">Priser</a>
        <a href="#">Rejser</a>
        <a href="#">Kontakt</a>
    </ul>
   
    <div id="main-content">
       
        <div id="left-col">
           
            <div id="quick-jumps">
            <h3>Noget tekst</h3>
            <p>Her skal der stå noget tekst det må vi finde ud af...!</p>
            </div>       
            <h1>Overskrift skal stå her</h1>
           
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta enim eget metus cursus convallis. Cras vehicula, dui a aliquam semper, elit enim sollicitudin lacus, et semper nulla sapien non est. Praesent ligula dolor, porta et bibendum in, fermentum nec lectus. Nullam lorem neque, ultricies vel sodales semper, laoreet quis nulla. Aliquam venenatis rutrum elit, a adipiscing libero vestibulum nec. Etiam pellentesque, nisi nec mollis bibendum, lectus arcu tincidunt nisi, quis mattis libero dolor eu ligula. Nulla diam dui, venenatis eu convallis ornare, accumsan iaculis lacus. Suspendisse potenti. Curabitur varius aliquet lorem eget vestibulum. Nullam tortor nulla, fringilla id sollicitudin in, pharetra sit amet felis. Suspendisse mollis lorem in ligula auctor ut tincidunt tortor tincidunt. Etiam ultricies dapibus dolor, vel vulputate felis dignissim bibendum. Aliquam erat volutpat.</p>
       
       
       
       
       
        <p>Pellentesque ultrices feugiat neque ut ultricies. Cras justo lectus, tempor at convallis sed, tempor nec nisi. Curabitur pharetra nulla quam, quis malesuada urna. Nulla facilisi. Pellentesque condimentum, arcu non ullamcorper aliquam, dolor dui viverra justo, nec bibendum ipsum lorem non nulla. Nam ut purus hendrerit odio convallis scelerisque. Proin porttitor purus sit amet felis pretium sagittis. Proin sem turpis, luctus id suscipit at, mattis nec nulla. Nam odio lorem, posuere non mollis vel, mollis ac velit. Cras ac neque nisl, eget volutpat nulla. Ut arcu augue, hendrerit quis sollicitudin et, faucibus sagittis augue. Pellentesque non est et enim scelerisque blandit nec in mi.</p>
       
        <p>Nulla rhoncus fringilla dapibus. Sed quis lacus ac augue pulvinar luctus. Ut luctus fringilla aliquam. Donec commodo enim quis nisl tincidunt iaculis. Aliquam congue sollicitudin feugiat. Aenean ac neque ligula. Sed erat nisi, tristique a dictum nec, feugiat et nulla. In hac habitasse platea dictumst. Ut mollis dignissim orci eu facilisis. Nulla varius scelerisque ipsum, non pellentesque elit egestas ut. Mauris eu nibh orci. Cras nisl lacus, sollicitudin sed ornare vel, vulputate sit amet eros. Etiam mi sem, fermentum eu tincidunt eu, tincidunt nec orci. Suspendisse ligula nibh, eleifend vitae ultricies quis, ultrices et lectus. Suspendisse potenti.</p>
            </div><!--END left-col-->
        <div id="right-col">
            <h2>nyheder</h2>
           
            <p>Her skal der stå hvad der sker af forskellige ting</p>
        </div>
       
        <div class="clear"></div>

    </div> <!--END main-content-->
   
    </div> <!--End page-wrap-->
    <div id="footer">
        <p>&copy; 2011 Lotus Yoga</p>
        </div>
</body>
</html>


CSS:


style {
    margin: 0;
    padding: 0;
    }

body {
    font-size: 62.5%;
    font-family: helvetica, sans-sarif;
    }
   
a {
    font-size: 120%;
    margin-bottom: 1.0m;
}
p {
    font-size: 1.3m;
    line-height: 1.4m;
    margin-bottom: 0.8m;   
}

h1 { font-size: 3.0m; margin-bottom: 0.8m; }
h2 { font-size: 2.0m; text-transform: uppercase; margin-bottom: 0.8m; }
h3 {font-size:1.6m; text-transform: uppercase; font-style: italic; letter-spacing: 2px; background: #00416a; color: white; padding: 5px; margin-bottom: 0.5px; }
   
.clear { clear: both; }
   

   
div#page-wrap {
    width: 1280px;
    margin: auto;
}

ul#nav {
    height: 361px; width: 1280px;
    margin: -8px;
    background: url(images/logo.jpg) no-repeat;
    padding-left: 305px;
   
}
    ul#nav a {
        display: block;
        width: 90px;
        float: left;
        margin-top: 320px;
        color: white;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
    }

div#main-content {
    padding-bottom: 50px;
    }
    div#main-content div#left-col {
        float: left;
        width: 800px;
    }   
    div#main-content div#left-col div#quick-jumps {
        padding-top: 20px;
        padding-left: 50px;
        padding-bottom: 50px;
        width: 200px;
        float: left;
        margin-right: 15px;
        text-align: center;
    }
    div#main-content div#left-col div#quick-jumps p {
        text-transform: uppercase;
        font-weight: bold;
        letterspacing: 1px;
    }
   
   
    div#main-content div#right-col {
        margin-top: 30px;
        float: right;
        width: 250px;
        border-top: 10px solid #00416a;
        padding-top: 15px;
    }
    div#main-content div#right-col h2 {
        padding-left: 20px;
    }
   
    div#main-content div#right-col p {
        font-size: 90%;
        color: black;
        padding-left: 20px;
    }   
div#footer {
    background: url(images/footer.png) repeat-x;
    color: white;
    padding: 10px 0 10px 0;
    text-transform: uppercase;
    border-top: 2px solid black;
    text-align: center;
   
}
Avatar billede RasmusSOlsen Nybegynder
15. november 2011 - 17:33 #1
efter mange forsøg fandt jeg ud af at der skulle slettes 2 bredder.
div#page-wrap {
    width: "1280px";
    margin: auto;
}

ul#nav {
    height: 361px; width: "1280px";
    margin: -8px;
    background: url(images/logo.jpg) no-repeat;
    padding-left: 305px;
Avatar billede olebole Juniormester
15. november 2011 - 22:21 #2
<ole>

Derudover er meter ikke en valid størrelsesangivelse for skrift eller margin. Da en pixel er skærmens mindste 'byggesten', får du heller ikke noget ud af at angive margin-bottom til 0.5px  =)


h1 { font-size: 3.0m; margin-bottom: 0.8m; }
h2 { font-size: 2.0m; text-transform: uppercase; margin-bottom: 0.8m; }
h3 {font-size:1.6m; text-transform: uppercase; font-style: italic; letter-spacing: 2px; background: #00416a; color: white; padding: 5px; margin-bottom: 0.5px; }



/mvh
</bole>
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