Avatar billede sorenmt84 Juniormester
03. maj 2007 - 23:20 Der er 6 kommentarer og
1 løsning

Lav om så ikke bruger hele bredden

Har hentet følgende eksempel på html.dk

CSS:
<style type="text/css">

body {
    margin:0px;
}
#title {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height: 75px;
    background-color:orange;
}
#leftmenu {
    position:absolute;
    left:0px;
    top:75px;
    width:150px;
    background-color:silver;
}
#rightmenu {
    position:absolute;
    right:0px;
    top:75px;
    width:150px;
    background-color:silver;
}
#content {
    padding-top: 70px;
    margin-left:160px;
    margin-right:160px;
    background-color:white;
}

</style>

Html:
<div id="title">
<h1>Websidens titel</h1>
</div>

<div id="content">
<h1>Dette bør være en sigende overskrift for indholdet</h1>
<p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno.</p>
<p>Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur.</p>
<p>Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas.</p>
<p>Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas.</p>
</div>

<div id="leftmenu">
<p>Sidens venstre-menu indeholder....</p>
<ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
    <li>Punkt 4</li>
    <li>Punkt 5</li>
    <li>Punkt 6</li>
    <li>Punkt 7</li>
</ul>
</div>

<div id="rightmenu">
<p>Fra sidens højre-menu kan man læse mere om....</p>
<ul>
    <li>Ditten</li>
    <li>Datten</li>
</ul>
</div>


Jeg er ikke så skarp i CSS, så kan ikke få det rettet til som jeg gerne vil have det.
Det jeg gerne vil have er at det ikke er hele browserens bredde der benyttes. Jeg vil gerne have at det hele er 850px bredt og så centreret midt på siden og helt til toppen.
Det skal stadig være med en stor top,
og så delt ind med en venstre menu, indhold og en højre menu.

Se det her: http://www.html.dk/artikler/00043/
Avatar billede jokkejensen Novice
03. maj 2007 - 23:24 #1
et desperat forsøg ville være at sige:

html
{
width: 100%; /*sikre "haslayout*/
}

body
{
margin: 0 auto;
width: 850px;
}

Jeg er dog ikke sikker på det virker :)

Alternativt pakker du alt dit html ind i en wrapper af form af et div tag..

ex:
<div id="Wrapper">
<div id="title">
<h1>Websidens titel</h1>
</div>

<div id="content">
<h1>Dette bør være en sigende overskrift for indholdet</h1>
<p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno.</p>
<p>Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur.</p>
<p>Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas.</p>
<p>Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas.</p>
</div>

<div id="leftmenu">
<p>Sidens venstre-menu indeholder....</p>
<ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
    <li>Punkt 4</li>
    <li>Punkt 5</li>
    <li>Punkt 6</li>
    <li>Punkt 7</li>
</ul>
</div>

<div id="rightmenu">
<p>Fra sidens højre-menu kan man læse mere om....</p>
<ul>
    <li>Ditten</li>
    <li>Datten</li>
</ul>
</div>
</div>

og tilføjer

#Wrapper
{
width: 850px;
margin: 0 auto; /*centrere indholdet*/
}


/JJ
Avatar billede roenving Novice
04. maj 2007 - 07:18 #2
Argh, endnu et eksempel på, at html.dk kan lave mere skade end gavn ...

Med en korrekt doctype er det html-elementet, der repræsenterer dokument-elementet, så det er katastrofalt, at html-elementet ikke findes i stylesheetet ...

Derudover er absolut positionering helt tåbelig, hvis ikke man har et solidt overblik over browserens aktuelle størrelse (eller det element, der positioneres indenfor !-), og det har man naturligvis aldrig, når man laver en side, medmindre den laves til kun at vises på ens egen maskine -- men selv den skiftes vel en dag ?-)

jokkejensen er dog inde på noget af det rigtige, men den skal nok bygges noget ud, f.eks.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ordentligt css-layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#site{width:850px;margin:0 auto;position:relative;
background:#faf;}
#titel{height:100px;
font-size:x-large;text-align:center;background:#aaf;}
#leftmenu{width:120px;float:left;
text-align:left;background:#faf;}
#content{width:610px;float:left;
background:white;}
#rightmenu{width:120px;float:left;
text-align:left;background:#faf;}
.clearDiv{clear:both;line-height:0;font-size:0;}
#copyright{background:#777;color:white;text-align:center;}
</style>
</head>
<body>
</body>
<div id="site">
  <div id="titel">
    Her er en titel
  </div>
  <div id="leftmenu">
    Her er menuen
  </div>
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lectus elit, sagittis at, accumsan id, dictum et, erat. Etiam non sapien. Quisque aliquet gravida mi. Integer vitae tortor quis wisi scelerisque vestibulum. Duis pulvinar magna non mauris laoreet volutpat. Aenean et purus. Cras accumsan justo sed arcu. Quisque urna. Sed mi. Ut sed nunc at lorem aliquet vulputate. Proin quis nibh. Proin ut dui vitae urna lacinia posuere. Ut vulputate purus facilisis nunc. Morbi ultrices euismod leo. Integer dui tellus, dictum in, viverra at, sagittis id, sem. Donec nonummy, sem eu hendrerit vulputate, nunc urna molestie eros, et semper nunc mi at ipsum. Praesent tempus malesuada felis.</p>
    <p>Vestibulum iaculis mattis sem. Suspendisse hendrerit, justo nec scelerisque mattis, ipsum lacus rutrum nibh, ac sollicitudin tellus felis eu ligula. Aliquam erat volutpat. Curabitur id magna. Aliquam eu magna id pede viverra varius. Nunc eu augue. Nulla quis ligula ac purus commodo vestibulum. Suspendisse adipiscing. Nullam velit. Integer nibh dolor, euismod non, blandit sed, ultricies vel, velit. Nulla posuere metus vel libero. Vestibulum elementum. Cras at nunc eget turpis tristique ullamcorper. In eget mi. Aliquam quis pede. Curabitur tincidunt est quis quam. Nunc elit nulla, ornare a, tristique eu, imperdiet in, eros.</p>
    <p>Nunc dolor. Nulla id purus vitae lacus interdum blandit. Donec lorem ante, rutrum eget, nonummy quis, luctus vel, eros. Quisque porttitor felis malesuada elit. Aliquam pretium purus vitae nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sem. In mattis ipsum id dolor. Vivamus quis neque. Etiam vitae velit. Phasellus interdum, eros sit amet porta rutrum, mi neque ornare diam, et nonummy ipsum eros a dolor. Maecenas ut ligula. Vivamus adipiscing dignissim neque. Cras sit amet sapien.</p>
    <p>Proin accumsan consequat felis. Nunc pellentesque, nisl vestibulum iaculis rhoncus, mauris enim luctus neque, quis auctor dolor sapien et massa. Donec in lorem vel pede mollis condimentum. Mauris libero. Praesent imperdiet. Nam porttitor nisl ac eros. Nulla sed metus. Duis id quam. Donec id augue. In enim ante, consectetuer in, cursus vitae, tristique sit amet, ipsum. Mauris ullamcorper porta nisl. Morbi pharetra. Proin commodo. Sed facilisis vehicula wisi. Ut malesuada. In hac habitasse platea dictumst. Vivamus auctor. Pellentesque quis massa id nunc ornare varius. Aliquam erat volutpat.</p>
    <p>Aenean vel justo vel ligula nonummy fermentum. Nulla a elit non orci egestas viverra. Sed tempus augue et massa. Maecenas tincidunt leo a purus. Curabitur elementum malesuada purus. In nunc purus, imperdiet eu, bibendum at, vulputate quis, augue. Aenean sed nibh blandit pede scelerisque luctus. Pellentesque vestibulum. Sed faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tellus. Sed eu justo. Duis purus augue, tincidunt a, feugiat at, tempor sed, ante.</p>
    <p>Pellentesque convallis. Sed quam urna, venenatis eget, scelerisque eget, pharetra vitae, nisl. Aliquam sem. Nulla in lacus. Phasellus ultricies nibh eu enim. Aenean tincidunt, tortor eget fringilla congue, tortor wisi sollicitudin wisi, in tincidunt eros urna et ipsum. Donec vestibulum interdum sapien. Vestibulum ultricies erat. Phasellus pulvinar metus et sapien. Aliquam in mauris nec tellus tincidunt sollicitudin.</p>
    <p>Morbi vitae nulla. Proin sit amet erat. Vestibulum vitae metus. Nunc a lectus. Proin convallis, mauris id venenatis placerat, nisl lorem vulputate diam, sit amet commodo ligula massa eu wisi. Etiam fringilla pede non enim. Praesent pharetra lacus eget turpis. Sed tempus accumsan risus. Mauris dui massa, facilisis sit amet, tincidunt id, placerat et, sapien. Nunc vel lorem. In hac habitasse platea dictumst. Proin vitae mauris.</p>
  </div>
  <div id="rightmenu">
    Her er f.eks. en links-serie
  </div>
  <div class="clearDiv">&nbsp;</div>
  <div id="copyright">&#169;2007 roenving</div>
</div>
</html>
Avatar billede sorenmt84 Juniormester
04. maj 2007 - 10:48 #3
Super roenving

Det er helt perfekt, vil du smide et svar...
Avatar billede roenving Novice
05. maj 2007 - 05:18 #4
Velbekomme '-)
Avatar billede roenving Novice
05. maj 2007 - 14:56 #5
-- og tak for point ;~}
Avatar billede sorenmt84 Juniormester
06. maj 2007 - 10:41 #6
Hej roenving

Håber du lige vil hjælpe med en lille tilrettelse...
I højre menu, vil jeg gerne have et baggrundsbillede í stedet for den lyserøde farve...

Jeg har sat dette ind:
#rightmenu{width:170px;float:left;
    background-image:  url(billeder/design/bg_menu.jpg);
    background-repeat: repeat;

Men jeg får kun baggrunden så langt ned som jeg har tekst/indhold på siden, resten får den lyserøde farve... Hvordan får jeg baggrunden med helt ned?
Avatar billede roenving Novice
07. maj 2007 - 13:06 #7
Du skal lave (min-)height på, i IE6- er det height i andre nyere browsere er det så min-height:

-- og på grund af konstruktionen, er det eneste fornuftige at bruge 100%, men det kan klares med skygge-elementer, så f.eks sådan:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ordentligt css-layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{min-height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#site{width:850px;margin:0 auto;position:relative;min-height:100%;
background:#faf;}
#titel{height:100px;position:absolute;top:0;left:0;width:100%;z-index:2;
font-size:x-large;text-align:center;background:#aaf;}
#leftmenu{width:120px;float:left;min-height:100%;
text-align:left;background:#faf;}
#content{width:610px;float:left;min-height:100%;
background:white;}
#rightmenu{width:120px;float:left;min-height:100%;
    background-image:  url(../billede.jpg);
    background-repeat: repeat;
    /*background-position:0 100px;*/
text-align:left;}
.clearDiv{clear:both;line-height:0;font-size:0;}
#copyright{background:#777;color:white;text-align:center;position:absolute;height:50px;width:100%;bottom:0;z-index:2;}
.topSkygge{height:100px;}
.bundSkygge{height:50px;}
</style>
<!--[if lt IE 7]>
<style type="text/css">
html,body{height:100%;}
#site{height:100%;}
#leftmenu{height:100%;}
#content{height:100%;}
#rightmenu{height:100%;}
</style>
<![endif]-->
</head>
<body>
</body>
<div id="site">
  <div id="leftmenu">
    <div class="topSkygge">&nbsp;</div>
    Her er menuen
    <div class="bundSkygge">&nbsp;</div>
  </div>
  <div id="content">
    <div class="topSkygge">&nbsp;</div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lectus elit, sagittis at, accumsan id, dictum et, erat. Etiam non sapien. Quisque aliquet gravida mi. Integer vitae tortor quis wisi scelerisque vestibulum. Duis pulvinar magna non mauris laoreet volutpat. Aenean et purus. Cras accumsan justo sed arcu. Quisque urna. Sed mi. Ut sed nunc at lorem aliquet vulputate. Proin quis nibh. Proin ut dui vitae urna lacinia posuere. Ut vulputate purus facilisis nunc. Morbi ultrices euismod leo. Integer dui tellus, dictum in, viverra at, sagittis id, sem. Donec nonummy, sem eu hendrerit vulputate, nunc urna molestie eros, et semper nunc mi at ipsum. Praesent tempus malesuada felis.</p>
    <p>Vestibulum iaculis mattis sem. Suspendisse hendrerit, justo nec scelerisque mattis, ipsum lacus rutrum nibh, ac sollicitudin tellus felis eu ligula. Aliquam erat volutpat. Curabitur id magna. Aliquam eu magna id pede viverra varius. Nunc eu augue. Nulla quis ligula ac purus commodo vestibulum. Suspendisse adipiscing. Nullam velit. Integer nibh dolor, euismod non, blandit sed, ultricies vel, velit. Nulla posuere metus vel libero. Vestibulum elementum. Cras at nunc eget turpis tristique ullamcorper. In eget mi. Aliquam quis pede. Curabitur tincidunt est quis quam. Nunc elit nulla, ornare a, tristique eu, imperdiet in, eros.</p>
    <!--p>Nunc dolor. Nulla id purus vitae lacus interdum blandit. Donec lorem ante, rutrum eget, nonummy quis, luctus vel, eros. Quisque porttitor felis malesuada elit. Aliquam pretium purus vitae nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sem. In mattis ipsum id dolor. Vivamus quis neque. Etiam vitae velit. Phasellus interdum, eros sit amet porta rutrum, mi neque ornare diam, et nonummy ipsum eros a dolor. Maecenas ut ligula. Vivamus adipiscing dignissim neque. Cras sit amet sapien.</p>
    <p>Proin accumsan consequat felis. Nunc pellentesque, nisl vestibulum iaculis rhoncus, mauris enim luctus neque, quis auctor dolor sapien et massa. Donec in lorem vel pede mollis condimentum. Mauris libero. Praesent imperdiet. Nam porttitor nisl ac eros. Nulla sed metus. Duis id quam. Donec id augue. In enim ante, consectetuer in, cursus vitae, tristique sit amet, ipsum. Mauris ullamcorper porta nisl. Morbi pharetra. Proin commodo. Sed facilisis vehicula wisi. Ut malesuada. In hac habitasse platea dictumst. Vivamus auctor. Pellentesque quis massa id nunc ornare varius. Aliquam erat volutpat.</p-->
    <p>Aenean vel justo vel ligula nonummy fermentum. Nulla a elit non orci egestas viverra. Sed tempus augue et massa. Maecenas tincidunt leo a purus. Curabitur elementum malesuada purus. In nunc purus, imperdiet eu, bibendum at, vulputate quis, augue. Aenean sed nibh blandit pede scelerisque luctus. Pellentesque vestibulum. Sed faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tellus. Sed eu justo. Duis purus augue, tincidunt a, feugiat at, tempor sed, ante.</p>
    <p>Pellentesque convallis. Sed quam urna, venenatis eget, scelerisque eget, pharetra vitae, nisl. Aliquam sem. Nulla in lacus. Phasellus ultricies nibh eu enim. Aenean tincidunt, tortor eget fringilla congue, tortor wisi sollicitudin wisi, in tincidunt eros urna et ipsum. Donec vestibulum interdum sapien. Vestibulum ultricies erat. Phasellus pulvinar metus et sapien. Aliquam in mauris nec tellus tincidunt sollicitudin.</p>
    <p>Morbi vitae nulla. Proin sit amet erat. Vestibulum vitae metus. Nunc a lectus. Proin convallis, mauris id venenatis placerat, nisl lorem vulputate diam, sit amet commodo ligula massa eu wisi. Etiam fringilla pede non enim. Praesent pharetra lacus eget turpis. Sed tempus accumsan risus. Mauris dui massa, facilisis sit amet, tincidunt id, placerat et, sapien. Nunc vel lorem. In hac habitasse platea dictumst. Proin vitae mauris.</p>
    <div class="bundSkygge">&nbsp;</div>
  </div>
  <div id="rightmenu">
    <div class="topSkygge">&nbsp;</div>
    Her er f.eks. en links-serie
    <div class="bundSkygge">&nbsp;</div>
  </div>
  <div class="clearDiv">&nbsp;</div>
  <div id="titel">
    Her er en titel
  </div>
  <div id="copyright">&#169;2007 roenving</div>
</div>
</html>

-- som det fremgår er det faktisk en ret stor omskrivning, og jeg har ikke testet på så mange browsere !-)

-- bemærk også, at jeg har haft fat i background-position, hvorved du kan få baggrunden til at starte et bestemt sted, til gengæld vil den ikke blive gentaget !-)

-- og baggrunden vil stoppe efter hvilken browser, det er, så du skal nok eksperimentere en hel del, for at få den til at virke ens !o]
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