Problem med at autojusteren en ramme så den er dynamisk ift. txt
Hej alle.Jeg har et problem med CSS. Jeg har en ramme med indhold i, som skal være dynamisk, så den autojusterer størrelsen alt afhængig af indholdet deri. Lige nu går teksten ud over rammen. Det forstår jeg ikke :-) har eksperimenteret meget mellem at have 100% eller auto i mine klasser, men det virker ikke. Siden kan ses her
www.itu.dk/~andelu/W1/tefsimon/forside2.html
CSS koden ser såles ud:
body {
background-color: #CCCCCC;
}
.usynlig {visibility: hidden;}
.ramme {
background-color: #FFFFFF;
text-align: left !important;
width: 780px;
height: 100%;
padding: 0px;
margin: 0px auto;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid #000000;
border-left-style: solid #000000;
}
.logo {
background-image: url(../img/Logo2.gif);
background-repeat: no-repeat;
height: 500px;
width: 171px;
float: left;
}
.topbar {
background-image: url(../img/topbar3.gif);
height: auto;
width: 606px;
display: block;
background-repeat: no-repeat;
float: left;
background-color: #FFFFFF;
padding: 0px;
}
.breadcrumbs {
position: relative;
left: 30px;
top: 198px;
font-family: Verdana, Arial, Helvetica, sans-serif, "Franklin Gothic Medium";
font-size: 10px;
color: #A9C4D3;
height: auto;
width: 400px;
display: block;
}
.breadcrumbs a {
font-family: Verdana, Arial, Helvetica, sans-serif, "Franklin Gothic Medium";
font-size: 10px;
color: #A9C4D3;
text-decoration: none;
}
.breadcrumbs a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif, "Franklin Gothic Medium";
font-size: 10px;
color: #A9C4D3;
text-decoration: underline;
}
.indhold {
position: relative;
left: 30px;
top: 218px;
font-family: Georgia, "New Century Schoolbook", "Times New Roman", Times, serif;
font-size: 12px;
color: #000000;
height: auto;
width: 400px;
margin-bottom: 40px;
display: block;
}
.navi {
position: relative;
top: 257px;
left: 0px;
width: 171px;
float: left;
height: auto;
}
.navi a {
display: block;
height: 30px;
width: 171px;
font-family: Verdana, Arial, sans-serif, serif;
font-size: 18px;
color: #FFFFFF;
text-decoration: none;
margin: 0px;
background-color: #4D4D4D;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-indent: 15px;
}
.navi a:hover{
background-color: #666666;
}
h1 {
font-family: "Franklin Gothic Demi", Verdana, Arial, sans-serif, serif, "Eras Light ITC";
color: #CBD646;
font-size: xx-large;
}
h3 {
display: inline;
}
HTML koden ser således ud:
<body>
<div class="ramme">
<div class="logo">
<div class="navi"> <a href="#">Om TEF</a> <a href="#">Medlemsskab</a> <a href="#">Dit
job</a> <a href="#">Publikationer</a> <a href="#">Uddannelse</a> <a href="#">Leverandører</a>
<a href="#">Links</a> </div>
</div>
<div class="topbar">
<div class="breadcrumbs"><a href="#">Forside</a></div>
<div class="indhold">
<h1>Nyheder</h1>
<p>Og her er en masse nyheder Og her er en masse nyheder nyheder Og her
er en masse nyheder nyheder Og her er en masse nyheder nyheder Og her
er en masse nyheder nyheder Og her er en masse nyheder nyheder Og her
er en masse nyheder nyheder Og her er en masse nyheder</p>
<p> nyheder Og her er en masse nyheder nyheder Og her er en masse nyheder
nyheder Og her er en masse nyheder nyheder Og her er en masse nyheder
nyheder Og her er en masse nyheder</p>
<p> nyheder Og her er en masse nyheder nyheder Og her er en masse nyheder
nyheder Og her er en masse nyheder nyheder Og her er en masse nyheder
nyheder Og her er en masse nyheder nyheder Og her er en masse nyheder
nyheder Og her er en masse nyheder nyheder Og her er en masse nyheder.</p>
</div>
</div>
</div>
</body>
</html>
Jeg håber i kan hjælpe mig.
Mange hilsener
Anders
