Hej
Jeg er næsten færdig med denne side. Noget jeg laver frivillig for mit
arbejde. Siden ser indtil nu sådan her ud:
http://www.hcafestival.dk/forside/forside.htm
Jeg har nogle problemer. Siden er en ret standard med tre kolonner defineret
i css og den midterste er flydende i bredden. Der er så en boks foroven og
forneden. Den nederste bliver skubbet i forhold til centerboksen. Jo mere
tekst jo længere kommer den ned. Kan man lave det sådan at højre og venstre
kolonne gør det samme? Sådan at det altid er den kolonne der breder sig mest
(fylder mest i længden), der skubber til nederste boks. Jeg kan ikke lige
se, hvordan det styres med css.
Derudover er siden blevet for bred, åbenbart. Der kommer en vandret
scrollbar. Det må skyldes en enten topboksen (banner) eller bundboksen
(siteinfo) gætter jeg på. Findes der er en løsning på det?
Af en eller anden grund ser teksten i højre kolonne større ud end teksten i
midterste kolonne. Begge dele burde være Verdana 12px. Det kan være
synsbedrag, men det kan også tænkes, at der er noget kode der driller.
Billedet i centerkolonnen er sat til float:right. Alligevel går det galt i
800*600. Det er tekstombrydningen det er galt med. For lange ord ryger
simpelthen under billedet. Skal det ombrydes manuelt, eller findes der en
wrap attrib eller lign.?
Det var hvis det hele. Gode tips og råd modtages med glæde. Jeg poster lige
den samlede css nederst.
Med venlig hilsen
Mark
/* CSS Document */
body {
margin:10px 0px 0px 0px;
padding:0px;
background-image:url(images/hcabanner2.jpg);
background-position: 95% 2%;
background-repeat:no-repeat;
}
/* venstre kolonne */
#leftcontent {
position: absolute;
top:121px;
width:150px;
background:#fff;
/* border:1px solid #000;*/
left: 32px;
}
/* menu venstre kolonne */
#navcontainer
{
width: 150px;
}
#navcontainer ul
{
margin-left: 0;
margin-right: 0;
padding-left: 0;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
#navcontainer a
{
display: block;
padding: 10px;
width: 130px;
background-color: #666;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #369;
color: #fff;
}
/* midterkolonne */
#centercontent {
background:#fff;
margin-top: 10px;
margin-left: 210px;
margin-right:210px;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
/* IE hack */
voice-family: "\"}\"";
voice-family: inherit;
margin-top: 10px;
margin-left: 210px;
margin-right:210px;
}
html>body #centercontent {
margin-top: 10px;
margin-left: 210px;
margin-right:210px;
}
/* Billeder brodtekst */
#billede {
float: right;
width: 200px;
margin:10px 10px 10px 10px;
}
/* hojrekolonne */
#rightcontent {
position: absolute;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
right:32px;
top:121px;
width:150px;
/* background:#fff; */
/* border:1px solid #000; */
overflow: visible;
height: 218px;
}
#banner {
background:#fff;
background: url(images/tab_bottom.gif) repeat-x bottom;
height: 100px;
width: 100%;
padding-left: 20px;
/* border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000; */
voice-family: "\"}\"";
voice-family: inherit;
height:100px;
}
html>body #banner {
height:100px;
}
/* bundrkke */
#siteinfo{
clear: both;
border-top: 1px solid #cccccc;
color: #cccccc;
padding: 10px 10px 10px 10px;
}
/* faneblade */
#tabnav
{
position:absolute;
top: 78px;
height: 25px;
margin: 0;
padding-left: 20px;
left: 11px;
width: 819px;
}
#tabnav li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#tabnav a:link, #tabnav a:visited
{
float: left;
background: #f3f3f3;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 10px;
font-weight: bold;
padding: 10px 10px 10px 10px;
margin-right: 4px;
border: 1px solid #ccc;
text-decoration: none;
color: #666;
}
#tabnav a:link.active, #tabnav a:visited.active
{
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}
#tabnav a:hover
{
background: #fff;
}
/* skriftformattering */
p,h1,h2,pre {
margin:0px 10px 10px 10px;
}
h2 {
padding-top:10px;
padding-left:10px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #000000;
}
p {
padding-left:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #000000;
}
..brod {
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-left:10px;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #000000;
}
h1 {
font-size:16px;
padding-top:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: capitalize;
color: #006600;
}
/* toprkke */
#banner h1
{
font-size:14px;
padding:10px 10px 0px 10px;
margin:0px;
}
/* Hjre kolonne */