Avatar billede discotk Nybegynder
29. september 2011 - 18:11 Der er 7 kommentarer og
1 løsning

Højde vil ikke justeres efter tekst

Jeg kan simpelthen ikke få mit #content til at være 100% eller auto. Den skal bare justeres efter hvor meget tekst der står i boksen. Før den forstår noget, skal jeg sætte højden manuelt, og det vil jeg selvfølgelig gerne slippe for.

På forhånd tak!

{div]<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>titel</title>
<style type="text/css">
html, body {
    height:100%;
}
body {
    margin:0;
    background-image:url('images/bg.png');
    background-repeat:repeat-x;
    background-position:50% 0%;
}
/* WRAPPER */
#wrapper {
    width:1000px;
    margin:0 auto 0 auto;
    padding:0px;
}
#header {
    height:79px;
}
#logo {
    height:79px;
    width:300px;
    float:left;
    text-align:center;
}
/* MENU */
#menu {
    height:79px;
    display:inline;
    float:right;
}
#menu ul {
    list-style:none;
    padding:0;
    margin:0;
}
#menu li {
    float:left;
}
#menu li a {
    background-position:right;
    padding-right:32px;
    padding-left:32px;
    display:block;
    line-height:79px;
    text-decoration:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    color:#FFF;
}
#menu ul a:hover, #menu #active {
    background:url('images/menu-hover.png') repeat-x;
    color:#1B5E63;
}
#banner {
    height:315px;
    text-align:center;
}
#content {
    width:auto;
    height:1600px; /* SKAL VÆRE 100% ELLER AUTO, ikke manuel */
    background-color:#FFF;
    border-radius:10px;
    -moz-border-radius:10px;
}
#main {
    width:650px;
    padding:25px;
    float:left;
}
.article {
    margin:0 0 50px 0;
}
.date {
    height:114px;
    width:114px;
    float:left;
    background-image:url('images/date-stripe.png');
    background-repeat:repeat-y;
    text-align:center;
}
.day {
    font-family:Arial, Helvetica, sans-serif;
    font-size:36px;
    color:#5BA4AA;
    margin:20px 0 0 0;
}
.month {
    font-family:Arial, Helvetica, sans-serif;
    font-size:26px;
    color:#5BA4AA;
}
.title {
    font-family:Arial, Helvetica, sans-serif;
    font-size:35px;
    color:#FFB307;
    margin:0 0 0 0;
}
.author {
    font-family:Arial, Helvetica, sans-serif;
    font-size:17px;
    color:#1A5F65;
    margin:7px 0 0 0;
}
.text {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    margin:25px 0 0 115px;
    line-height:21px;
    text-align:justify;
}
.article a {
    color:#1B6065;
}
#sidebar {
    height:100%;
    width:232px;
    background-color:#F6F6F6;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    float:right;
}
#footer {
    width:1000px;
    padding:230px 0 0 0;
    margin:0 auto 0 auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    color:#7C9C3E;
    text-align:center;
}
#grass, .push {
    height:300px;
    width:auto;
    background-image:url('images/grass.png');
    background-repeat:no-repeat;
    background-position:50% 0px;
    margin:50px 0 0 0;
}
</style>
</head>

<body>
<div id="wrapper">
    <div id="header">
        <div id="logo"><img src="images/logo.png" width="273" height="79" alt="logo" /></div>
        <div id="menu">
            <ul>
                <li id="active"><a href="#">forside</a></li>
                <li><a href="#">changelog</a></li>
                <li><a href="#">om mig</a></li>
                <li><a href="#">kontakt</a></li>
            </ul>
        </div>
    </div>
    <div id="banner"><img src="banner.png" width="610" height="256" alt="alex" /></div>
    <div id="content">
        <div id="main">
            <div class="article">
                <div class="date">
                    <div class="day">day</div>
                    <div class="month">month</div>
                </div>
              <div class="title">titel</div>
              <div class="author">author</div>
            <div class="text">text</div>
            </div>
        </div>
        <div id="sidebar">sidebar</div>
    </div>
</div>
<div id="grass">
<div id="footer">copyright</div>
</div>
</body>
</html>
{/div]
Avatar billede keysersoze Guru
29. september 2011 - 18:34 #1
floatede elementer fylder ikke noget - og derfor kan content ikke udviddes automatisk.

Hvis du lægger et element ind med clear: both; på direkte efter dine floatede elementer vil du få den ønskede effekt.
Avatar billede discotk Nybegynder
29. september 2011 - 18:42 #2
men jeg har en hvid og grå box. Hvor den til venstre side (grå) skal flugte med den vide... hvis jeg lægger et element ind der laver clear, så vil den grå stoppe før den hvide?

+--------------+------+
|    hvid      |  grå |
|              |      |
|              |      |
|              |      |
|              |      |
+--------------+------+
Avatar billede keysersoze Guru
29. september 2011 - 20:17 #3
Du kan jo prøve at se hvad der sker :)

indholdet i den floatede boks fylder selvfølgelig stadig - men den floatede boks fylder ikke i forhold til dens parent. Ligger din grå boks inden i den hvide, som er floated, vil den altså ikke være berørt af float.
Avatar billede discotk Nybegynder
29. september 2011 - 20:30 #4
jeg synes ikke at jeg er dum til det her... men det føles som uanset hvad jeg gør, gider den grå boks bare ikke være i samme højre som den hvide, med mindre at jeg sætter #content manuelt.

Ved godt at det er hjælp til selv hjælp. Men kan jeg måske få dig til at hjælpe mig med at fikse koden?
Avatar billede gadensgaard Nybegynder
29. september 2011 - 21:13 #5
Hej discotk

Prøv med display: table; på dit #content element.
Avatar billede keysersoze Guru
29. september 2011 - 21:43 #6
enten må du lægge din baggrundseffekt på som et baggrundsbillede på content - eller sætte main til position: relative og så smide sidebar ind med absolut position og passende top/left ind i main.
Avatar billede olebole Juniormester
01. oktober 2011 - 16:39 #7
<ole>

En løsning kunne også være:


<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font: 80% verdana, arial, sans-serif;
}
#wrapper {
    position: relative;
    width: 700px;
    border: 1px solid blue;
}
#sidebar {
    position: absolute;
    width: 200px;
    top: 0;
    bottom: 0;
    background: yellow;
}
#content {
    position: relative;
    width: 460px;
    left: 240px;
    top: 0;
    background: #f0f0f0;
}
</style>

<div id="wrapper">
    <div id="sidebar">
        SideBar
    </div>
    <div id="content">
        Bacon ipsum dolor sit amet flank pork chop pig, pastrami capicola meatball rump ground round t-bone chuck.
            Meatloaf jowl flank, chuck bacon short loin turkey. Jowl bacon pork loin ham shoulder kielbasa.
           
        <p>Tail meatloaf chuck tri-tip beef bacon. Shoulder ham bresaola tongue bacon, pork chop pancetta hamburger
            pork loin shank leberkäse ribeye. Boudin short ribs brisket, strip steak shank shoulder tenderloin.</p>
       
        Beef ribs short loin tri-tip, ham hock shank strip steak beef.
    </div>
</div>



/mvh
</bole>
Avatar billede olebole Juniormester
01. oktober 2011 - 16:41 #8
- og jeg glemte lige margin:0 auto#wrapper, hvis denne skal centreres  =)
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