CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

jakobj Praktikant

08. september 2005 - 15:57 Der er 9 kommentarer

CSS layout i 3 kolonner

Jeg har et problem med at dele dette layout op i 3 kolonner:

http://www.sitetube.com/krukker/index.php

Resultatet skulle gerne blive noget i denne stil:

http://www.sitetube.com/krukker/three-column.gif

Min CSS kode ser således ud:

* {margin:0;padding:0}
body {
background: #808080;
margin:0 0 10px 10px;
font-size: 0.7em;
line-height: 1.7;
color: #333;
font-family: verdana, arial, helvetica, sans-serif;
text-align: center;
}
#outer {
margin-left: auto;
width: 790px;
margin-right: auto;
text-align: left;
}
#logobox {
background: #ffffff;
width: 790px;
height: 34px;
}
#logobox .strapline {
font: bold 11px verdana, arial, helvetica, sans-serif;
float: right;
margin-right: 34px;
margin-top: 10px;
}
#logobox .logo {
float: left;
margin-left: 1.5em;
margin-top: 10px;
}
.strapline a:link, .strapline a:visited {
text-decoration: none;
color: #000000;
background-color: #FFE89A;
}
.strapline a:hover, .strapline a:active {
background-color: #FF9353;
color: #000000;
}
#banner {
background: #333333;
width: 790px;
height: 90px;
}
#nav {
border-top:1px solid #333 ;
background: #e43100 url(http://www.sitetube.com/krukker/pictures/top-links.gif) no-repeat left center;
width: 790px;
height: 48px;
}
#nav ul {
padding-left: 44px;
padding-top: 14px;
list-style-type: none
}
#nav li {
display: inline
}
#nav li.last a{border-right:none;
}
#nav a {
border-right:1px solid #fff;
padding:0 10px 0;
font-size: 11px;
color: #fff;
text-decoration: none
}
#nav a:hover {
color: #FBCDB2
}
#content {
background: #fff;
float: left;
width: 790px;
}
#left {
float: left;
width: 220px;
background: #fff;
}
.left-inner {
border: #D7D7D7 1px solid;
background: url(pictures/tabletop.gif) no-repeat #fff;
padding-bottom: 10px;
}
.left-outer {
padding: 5px;
background: #f2f2f2;
margin: 10px;
width: 150px;
}
* html .left-outer {
width: 200px;
w\idth:150px
}
.left-outer p,#centre p {
padding: 5px;
margin:0 0 1em 0;
}
#right {
float: right;
width: 220px;
background: #fff;
}
.right-inner {
border: #D7D7D7 1px solid;
background: url(pictures/tabletop.gif) no-repeat #fff;
padding-bottom: 10px;
}
.right-outer {
padding: 5px;
background: #f2f2f2;
margin: 10px;
width: 150px;
}
* html .right-outer {
width: 200px;
w\idth:150px
}
.right-outer p,#centre p {
padding: 5px;
margin:0 0 1em 0;
}
#centre {
float: left;
width: 450px;
}
#centre-inner {
padding:0 5px 10px 10px;
}
/* mac hide \*/
#centre-inner {height:1%;}
/* end hide*/
#centre-inner a {
color: #437AA2;
text-decoration: underline
}
#centre-inner a:hover {
color: #12496E
}
.clearer {
clear: both;
margin-top: -1px;
overflow: hidden;
height: 1px
}
#footer {
background: #e43100 url(pictures/bund.gif) no-repeat left center;
width: 790px;
color: #fff;
height: 39px;
clear:both
}
#footer ul {
padding-left: 250px;
padding-top: 8px;
list-style-type: none
}
#footer li {
display: inline
}
#footer li.last a{border-right:none;
}
#footer a {
border-right:1px solid #fff;
padding:0 10px 0;
font-size: 11px;
color: #fff;
text-decoration: none
}
#footer a:hover {
color: #FBCDB2
}
h1 {
font: 200% Georgia, "Times New Roman", Times, serif;
color: #595959;
}
h2 {
font: 160% Georgia, "Times New Roman", Times, serif;
color: #595959;
}
h3 {
font: bold 12px verdana, arial, helvetica, sans-serif;
color: #595959;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
hr {
border: dotted;
background-color: #AAAAAA;
color: #AAAAAA;
height: 1px;
width: 100%;
}
ul.list1{
list-style-image: url(pictures/pil.gif);
padding-left: 3em;
padding-top: 2px;
line-height: 1.9;
}
.list1 a:link, .list1 a:visited {
font: 11px verdana, arial, helvetica, sans-serif;
color: #336699;
text-decoration: none;
}
.list1 a:hover, .list1 a:active {
color: #000000;
background-color: #F3F3F3;
}

Synes godt om

softspot Forsker

08. september 2005 - 16:09 #1

Jeg har ikke lige nærstuderet din HTML og dit stylesheet, men som overordnet strategi har jeg hørt at man skal forsøge at gruppere sine elementer i 2 kolonner og være meget specifik med bredderne på de forskellige områder.

Eksempel:
<div class="submenu">
<ul>
<li>menu 1</li>
<li>menu 1</li>
<li>menu 1</li>
</ul>
</div>
<div class="content-outer">
<div class="content">
Dette er indhold, som f.eks. kan vises i midten...
</div>
<div class="info">
Dette er en informationskasse som f.eks. vises til højre...
</div>
</div>

og så et stylesheet noget i stil med dette:

.submenu { width:120px; float:left; }
.content-outer { width:550px; }
.content { width:430px; float:left; }
.info { width:120px; float:right; }

Synes godt om

jakobj Praktikant

08. september 2005 - 16:43 #2

Tak Softspot. Det har lykkes med at presse den venstre menu på plads. Men den højre menu vil helst ligge sig nede i bunden:

http://www.sitetube.com/krukker/test.php

Synes godt om

softspot Forsker

08. september 2005 - 16:51 #3

Bemærk at med det rigtige DTD, så opfattes borders og padding anderledes i IE end uden, så dem skal du også tag højre for i udmålingen af bredden (de skal trækkes fra width).

Synes godt om

jakobj Praktikant

08. september 2005 - 16:58 #4

Jeg har lige lavet en version, hvor jeg har tvunget #centre ned til kun 200px i bredden. Det var for at sikre mig, at det ikke skulle være manglen på vidde, der tvinger menuen i bund. Hvis jeg altså har forstået dit svar rigtigt? Men det er stadig ikke helt godt:

http://www.sitetube.com/krukker/test.php

Synes godt om

softspot Forsker

08. september 2005 - 18:27 #5

Jeg har fedtet lidt med dit layout og har i den forbindelse prøvet at fjerne dit CSS og lave lidt om i rækkefølgen af HTML-koden. Jeg er kommet frem til nedenstående ret grove version som tilsyneladende smider layoutet op i 3 kolonner. Du kan måske bruge det til noget - måske ikke, men det finder du bare ud af :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>XXXXXXXXXXXXXXXXXXXXXXXXXXXxx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="XXXXXXXXXXXXXXXXXXXXXxx"/>
<meta name="keywords" content="XXXXXXXXXXXXXXXXXx" />

<style>
h1, h2, h3, h4, h5, h6, div { font-family:verdana,sans-serif;}
h1 { font-size:12px; }
h2 { font-size:11px; }
h3 { font-size:10px; }
div { font-size:10px; }
#outer { margin:0 auto; width:700px; }
#banner { width:700px; float:left; }
#nav { width:700px; float:left; }
#content { width:700px; display:block; }
#left { float:left; width:120px; display:block; }
#centre { float:right; width:580px; display:block; }
#centre-inner { float:left; width:460px; display:block; }
#right { float:right; width:120px; display:block; }
</style>
</head>
<body>

<div id=outer>
<div id="banner">
Here goes logo and slogan
</div>

<div id="nav">
<ul>
<li><a href="http://www.sitetube.com">Text link</a></li>
<li><a href="http://www.sitetube.com">Text link</a></li>
<li><a href="http://www.sitetube.com">Text link</a></li>
<li class="last"><a href="http://www.sitetube.com">Text link</a></li>
</ul>
</div>

<div id="content">
<div id=left>
<div class="left-outer">
<div class="left-inner">
<h3>LEFT MENU</h3>
<ul class="list1">
<li><a href="http://www.sitetube.com">Olielamper</a></li>
<li><a href="http://www.sitetube.com">Krukker</a></li>
<li><a href="http://www.sitetube.com">Havemøbler</a></li>
<li><a href="http://www.sitetube.com">Ting til haven</a></li>
<li><a href="http://www.sitetube.com">Springvand</a></li>
<li><a href="http://www.sitetube.com">Figurer</a></li>
<li><a href="http://www.sitetube.com">Poolbord</a></li>

</ul>
</div>
</div>
<div class="left-outer">
<div class="left-inner">
<h3>Kontaktinformation</h3>

<p>Skriv til os bla bla bla bla</p>

</div>
</div>
</div>
<div id="centre">
<div id="centre-inner"> <br>
<img src="http://www.sitetube.com/krukker/pictures/piltop.gif" width="7" height="7">
Lidt om krukker bla bla bla bla
<hr/>
<h1>Headline</h1>
<p>Data recovery is the retrieval of inaccessible or contaminated data from
media that has been damaged in some way. Data recovery is being increasingly
used and is an important process nowadays.</p>
<p>There has been a lot of progress in increasing the memory capacity
of data storage devices. Therefore data loss from any one incident also
tends to be very high. The relevance of lost data can vary greatly.
Maybe you have had the experience of storing a homework assignment on
a floppy disk only to have it missing on the day the assignment in due.</p>
<p>Consider the fact that a large amount of businesses nowadays have vital
organizational related data stored on machines. Also hospitals store
data on patients on computers. Large amounts of websites nowadays use
databases technology to enhance their websites and make them more dynamic.
Php and MySql use has been on the rise on the Internet. Database failure
is not uncommon and so it is not a fail proof method of storing information.</p>
<p>Companies have high reliance on computer technology to write and store
data relevant to their business operations. Thus the data being stored
can have a great deal of impact on personal lives and operations of
companies. <br>
</p>
</div>

<div id=right>
<div class="right-outer">
<div class="right-inner">
<h3>RIGHT MENU</h3>
<ul class="list1">
<li><a href="http://www.sitetube.com">Olielamper</a></li>
<li><a href="http://www.sitetube.com">Krukker</a></li>
<li><a href="http://www.sitetube.com">Havemøbler</a></li>
<li><a href="http://www.sitetube.com">Ting til haven</a></li>
<li><a href="http://www.sitetube.com">Springvand</a></li>
<li><a href="http://www.sitetube.com">Figurer</a></li>
<li><a href="http://www.sitetube.com">Poolbord</a></li>
</ul>
</div>
</div>
<div class="right-outer">
<div class="right-inner">
<h3>Kontaktinformation</h3>

<p>Skriv til os bla bla bla bla</p>

</div>
</div>
</div>
</div>

<hr/>

<div align="center">
<script language="javascript">
var uri = 'http://impdk.tradedoubler.com/imp/img/11476030/1110941?' + new String (Math.random()).substring (2, 11);
document.write('<a href="http://clk.tradedoubler.com/click?p=23126&a=1110941&g=11476030" target="_blank"><img src="'+uri+'" border=0></a>');
</script>
</div>

<div class="clearer"></div>
</div>
<div id="footer">

<ul>

<li><a href="http://www.sitetube.com">Text link</a></li>

<li><a href="http://www.sitetube.com">Text link</a></li>

<li class="last"><a href="http://www.sitetube.com">Text link </a></li>

</ul>
</div>
</div>
</body>
</html>

Synes godt om

jakobj Praktikant

08. september 2005 - 19:18 #6

Tak igen Softspot. Jeg kan godt se meningen, men kan ikke få det til at virke i praksis - med mit eget stylesheet. Men jeg tror, du har ret i din indledende bemærkning, hvor du nævner at jeg muligvis sprænger rammerne i bredden.

Jeg har lavet en version med et meget smalt centre-felt. Hvis du prøver at opdatere browseren et par gange, vil du se at de 3 kolonner vises korrekt i et split-sekund. Hmmmm ....

Synes godt om

softspot Forsker

08. september 2005 - 19:47 #7

Hvis du prøver at nærstudere din HTML, vil du opdage at jeg har rykket lidt rundt på elementerne, da der var nogle af dem som lå forkert ifht. min tommelfingerregel om at der ikke må være to blockelementer på samme niveau.

Det drejer sig bla. om dit element med script i der er flyttet undenfor #centre.

Synes godt om

jakobj Praktikant

13. september 2005 - 10:56 #8

Tak igen Softspot. Jeg har nu fået lidt hjælp udefra, så det endelige resultat er således:

http://www.sitetube.com/krukker/forside.php

Et af problemer var også det statiske banner i #centre som gjorde at siden simpelthen blev for bred.

Mange tak for hjæpen :-)

Synes godt om

softspot Forsker

13. september 2005 - 12:43 #9

Velbekomme :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS