Avatar billede cygnet Praktikant
12. juni 2006 - 22:01 Der er 26 kommentarer og
1 løsning

Justering af bund

Jeg har prøvet at kigge i tidligere spørgsmål, men kan ikke helt få koden til at virke.

http://www.cygnet.dk/lottebaun/www/index.asp

En der kan fortælle hvordan jeg kan få bunden til at være i bunden?

Med venlig hilsen
Kristian Søremsem
Avatar billede mclemens Nybegynder
12. juni 2006 - 23:30 #1
Sikke noget rod jeg laver ... nåh test den - og stil evt. i orden igen hvis den
virker godt nok :o) ... Virker den godt nok så sig lige til og jeg kaster et svar :)



CSS FILEN:


html,body{height:100%;
margin:0px;padding:0px;overflow:hidden;width:100%;}



#outer1{position:absolute;top:0px;left:0px;height:100%;width:100%;overflow-y:auto;overflow-x:hidden;}

#outer2{position:absolute;margin-left:-380px;left:50%;height:100%;width:760px;

    background-color: #FFFFFF;
    background-repeat: repeat-y;
    background-position: center;
    background-image: url(billeder/bg.gif);}



#outer3{position:relative;
    text-align: center;
width:760px;height:100%;
}

#spcbottom{width:100%;height:8px;font-size:1px;}


.clearer{clear:both;height:0px;overflow:hidden;}

#top2{
padding-bottom:8px;
}

div#bund{
position:relative;bottom:0px;left:0px;height:8px;margin-top:-8px;width:100%;font-size:1px;
        }







div.top
        {
    background-color: #FFFFFF;
    background-repeat: repeat-y;
    background-position: center;
    background-image: url(billeder/bg.gif);
            margin:0 auto; /* centrerer selve div'en... */
            width: 760px;
            text-align: left;
        }





#spalte1 {
    float:left;
    width: 17px;
}
#spalte2 {
    float:left;
    width: 165px;
}
#spalte3 {
    float:left;
    width: 392px;
}
#spalte4 {
    float:left;
    width: 165px;
}
#spalte5 {
    float:left;
    width: 564px;
}
        h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #8c0101;
    font-weight: normal;
    margin-top: 6px;
    margin-right: 6px;
    margin-bottom: 0px;
    margin-left: 10px;
}
.top #spalte2 a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    text-decoration: none;
    line-height: 30px;
    margin-left: 18px;
}
.top #spalte2 a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #8c0101;
    text-decoration: none;
    line-height: 30px;
    margin-left: 18px;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 20px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
}
Avatar billede mclemens Nybegynder
12. juni 2006 - 23:31 #2
html filen:




<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>




<div id="outer1"><div id="outer2"><div id="outer3">





<div class="top">
<div id="spalte1"><img src="billeder/spacer.gif" width="18" height="1" /><br />
&nbsp;</div>
  <div id="spalte2"><img src="billeder/logo.gif" alt="LB socialfaglig" width="165" height="137" />  </div>
 
  <div id="spalte5"><img src="billeder/top.jpg" width="564" height="137" /></div>




<div class="clearer">&nbsp;</div>


</div>



<div class="top" id="top2">




<div id="spalte1"><img src="billeder/spacer.gif" width="18" height="1" /><br />
&nbsp;</div>
<div id="spalte2"><a href="#">Forside</a><br />
  <a href="#">V&aelig;rdigrundlaget</a><br />
  <a href="#">Dette tilbyder jeg</a><br />
  <a href="#">Fordele</a><br />

  <a href="#">Speciale</a><br />
  <a href="#">Curriculum Vitae</a><br />
  <a href="bla.asp">Kontakt</a></div>
<div id="spalte3">
  <h1>Socialfaglig konsulent</h1>
  <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

  </p>
</div>
<div id="spalte4"></div>





<div class="clearer">&nbsp;</div>



</div>



</div><div id="bund"><img src="billeder/bund.gif" width="760" height="8" /></div></div></div>



</body>
</html>
Avatar billede cygnet Praktikant
12. juni 2006 - 23:39 #3
Perfekt.

Du skulle ikke have et par gode links til gode resourcer om det her?

Læg bare et svar.
Avatar billede cygnet Praktikant
12. juni 2006 - 23:42 #4
Og tilsidst - har du en ide til hvordan jeg kan få hele feltet med overskriften og teksten til at komme før i koden, næsten helt i toppen, så søgemaskiner finde den før f.eks. menuen ... jeg øger lige pointene.
Avatar billede mclemens Nybegynder
12. juni 2006 - 23:44 #5
Har desværre ingen links til det... jeg eksperimenterede lidt forleden dag og nåede frem til sådan en her: http://www.eksperten.dk/spm/712486#rid6300689 ... Plazm har også en anderledes IE /FF css hack postet derinde ...
Avatar billede mclemens Nybegynder
12. juni 2006 - 23:45 #6
Kigger lige på den overskrift inden jeg svarer...
Avatar billede mclemens Nybegynder
13. juni 2006 - 00:08 #7
Puha, håber du selv stiller det lidt overskueligt op...




<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>




<div id="outer1"><div id="outer2"><div id="outer3">



<div class="top" id="top2">

<div id="spalte4">&nbsp;</div>
<div id="spalte3">
  <h1>Socialfaglig konsulent</h1>
  <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

  </p>
</div>





<div id="spalte1"><img src="billeder/spacer.gif" width="18" height="1" /><br />
&nbsp;</div>
<div id="spalte2"><a href="#">Forside</a><br />
  <a href="#">V&aelig;rdigrundlaget</a><br />
  <a href="#">Dette tilbyder jeg</a><br />
  <a href="#">Fordele</a><br />

  <a href="#">Speciale</a><br />
  <a href="#">Curriculum Vitae</a><br />
  <a href="bla.asp">Kontakt</a></div>






<div class="clearer">&nbsp;</div>



</div>




<div class="top" id="top1">
<div id="spalte1"><img src="billeder/spacer.gif" width="18" height="1" /><br />
&nbsp;</div>
  <div id="spalte2"><img src="billeder/logo.gif" alt="LB socialfaglig" width="165" height="137" />  </div>
 
  <div id="spalte5"><img src="billeder/top.jpg" width="564" height="137" /></div>




<div class="clearer">&nbsp;</div>


</div>







</div><div id="bund"><img src="billeder/bund.gif" width="760" height="8" /></div></div></div>



</body>
</html>
Avatar billede mclemens Nybegynder
13. juni 2006 - 00:09 #8
Måske har jeg sat lidt for mange attributter på ... men du kan jo prøve "langsomt" mens du tester at forkorte hvis det er for overdrevet ....





html,body{height:100%;
margin:0px;padding:0px;overflow:hidden;width:100%;}



#outer1{position:absolute;top:0px;left:0px;height:100%;width:100%;overflow-y:auto;overflow-x:hidden;}

#outer2{position:absolute;margin-left:-380px;left:50%;height:100%;width:760px;

    background-color: #FFFFFF;
    background-repeat: repeat-y;
    background-position: center;
    background-image: url(billeder/bg.gif);}



#outer3{position:relative;
    text-align: center;
width:760px;height:100%;
}

#spcbottom{width:100%;height:8px;font-size:1px;}


.clearer{clear:both;height:0px;overflow:hidden;}

#top2{
padding-bottom:8px;padding-top:137px;
}

div#bund{
position:relative;bottom:0px;left:0px;height:8px;margin-top:-8px;width:100%;font-size:1px;
        }


#top1{position:absolute;top:0px;left:0px;}




div.top
        {
    background-color: #FFFFFF;
    background-repeat: repeat-y;
    background-position: center;
    background-image: url(billeder/bg.gif);
            margin:0 auto; /* centrerer selve div'en... */
            width: 760px;
            text-align: left;
        }





#spalte1 {
    float:left;
    width: 17px;
}
#spalte2 {
    float:left;
    width: 165px;
}
#spalte3 {
    float:right;
    width: 392px;
}
#spalte4 {
    float:right;
    width: 185px;
}
#spalte5 {
    float:left;
    width: 564px;
}
        h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #8c0101;
    font-weight: normal;
    margin-top: 6px;
    margin-right: 6px;
    margin-bottom: 0px;
    margin-left: 10px;
}
.top #spalte2 a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    text-decoration: none;
    line-height: 30px;
    margin-left: 18px;
}
.top #spalte2 a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #8c0101;
    text-decoration: none;
    line-height: 30px;
    margin-left: 18px;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 20px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
}
Avatar billede cygnet Praktikant
13. juni 2006 - 00:17 #9
Det er stortartet - tak for hjælpen.
Avatar billede mclemens Nybegynder
13. juni 2006 - 00:19 #10
P.s.: Hvis spalte 4 kommer til at indholde meget senere så den skubber 3'eren længere ned kan du placere dem begge i en fælles div med spalte og og 4's samlede width defineret i css og så floate den right ...

- så kan du inden i den div rykke spalte 3 op over spalte 4 og floate 4'eren left og 3'eren right ... derved er spalte 3 den første div spalte der kommer...
Avatar billede mclemens Nybegynder
13. juni 2006 - 00:19 #11
Velbekom, og tak for point :)
Avatar billede cygnet Praktikant
13. juni 2006 - 00:21 #12
Heh - det var sort snak den del. Men har du en mail hvor jeg kan skrive senere hvis det går helt galt?
Avatar billede mclemens Nybegynder
13. juni 2006 - 00:28 #13
Jeg har valgt at være lidt anonym herinde ... du kan dog altid oprette et spørgsmål herinde hvis du går "kold" ... du kan dog ikke oprette et spørgsmål specifik til en person (men jo flere der kigger på dit problem jo bedre derfor er eksperten jo god) - og da jeg driver en webshop er jeg ikke altid til at få fat i / har ikke tid til altid at følge op på efterfølgende problemstillinger... Jeg øver/uddanner/træner mig bare "lidt" herinde ;o)
Avatar billede mclemens Nybegynder
13. juni 2006 - 00:29 #14
- kigger lige på "sort snak"...
Avatar billede mclemens Nybegynder
13. juni 2006 - 00:33 #15
<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>




<div id="outer1"><div id="outer2"><div id="outer3">



<div class="top" id="top2">


<div id="topouter">
<div id="spalte3">
  <h1>Socialfaglig konsulent</h1>
  <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

  </p>
</div>
<div id="spalte4">&nbsp;</div>
<div class="clearer">&nbsp;</div>
</div>








<div id="spalte1"><img src="billeder/spacer.gif" width="18" height="1" /><br />
&nbsp;</div>
<div id="spalte2"><a href="#">Forside</a><br />
  <a href="#">V&aelig;rdigrundlaget</a><br />
  <a href="#">Dette tilbyder jeg</a><br />
  <a href="#">Fordele</a><br />

  <a href="#">Speciale</a><br />
  <a href="#">Curriculum Vitae</a><br />
  <a href="bla.asp">Kontakt</a></div>






<div class="clearer">&nbsp;</div>



</div>




<div class="top" id="top1">
<div id="spalte1"><img src="billeder/spacer.gif" width="18" height="1" /><br />
&nbsp;</div>
  <div id="spalte2"><img src="billeder/logo.gif" alt="LB socialfaglig" width="165" height="137" />  </div>
 
  <div id="spalte5"><img src="billeder/top.jpg" width="564" height="137" /></div>




<div class="clearer">&nbsp;</div>


</div>







</div><div id="bund"><img src="billeder/bund.gif" width="760" height="8" /></div></div></div>



</body>
</html>
Avatar billede mclemens Nybegynder
13. juni 2006 - 00:33 #16
html,body{height:100%;
margin:0px;padding:0px;overflow:hidden;width:100%;}



#outer1{position:absolute;top:0px;left:0px;height:100%;width:100%;overflow-y:auto;overflow-x:hidd

en;}

#outer2{position:absolute;margin-left:-380px;left:50%;height:100%;width:760px;

    background-color: #FFFFFF;
    background-repeat: repeat-y;
    background-position: center;
    background-image: url(billeder/bg.gif);}



#outer3{position:relative;
    text-align: center;
width:760px;height:100%;
}

#spcbottom{width:100%;height:8px;font-size:1px;}


.clearer{clear:both;height:0px;overflow:hidden;}

#top2{
padding-bottom:8px;padding-top:137px;
}

div#bund{
position:relative;bottom:0px;left:0px;height:8px;margin-top:-8px;width:100%;font-size:1px;
        }


#top1{position:absolute;top:0px;left:0px;}




div.top
        {
    background-color: #FFFFFF;
    background-repeat: repeat-y;
    background-position: center;
    background-image: url(billeder/bg.gif);
            margin:0 auto; /* centrerer selve div'en... */
            width: 760px;
            text-align: left;
        }





#spalte1 {
    float:left;
    width: 17px;
}
#spalte2 {
    float:left;
    width: 165px;
}




#topouter{width:577px;
float:right;}

#spalte3 {
    float:left;
    width: 392px;
}
#spalte4 {
    float:right;
    width: 185px;
}





#spalte5 {
    float:left;
    width: 564px;
}
        h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #8c0101;
    font-weight: normal;
    margin-top: 6px;
    margin-right: 6px;
    margin-bottom: 0px;
    margin-left: 10px;
}
.top #spalte2 a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    text-decoration: none;
    line-height: 30px;
    margin-left: 18px;
}
.top #spalte2 a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #8c0101;
    text-decoration: none;
    line-height: 30px;
    margin-left: 18px;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 20px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
}
Avatar billede mclemens Nybegynder
13. juni 2006 - 00:33 #17
Spam over'n'out :o)
Avatar billede cygnet Praktikant
13. juni 2006 - 00:41 #18
Kan godt forstå dit valg, og respektere det. Dog virker du rigtig dygtig og ville gerne kunne trække på din krafter en anden gang. I tilfælde af jeg kontakter dig pr. mail, ville jeg selvfølgelig være indstillet på det er betalt arbejde du udføre.
Jeg laver webløsninger for en række af kunder og kunne være vi kunne trække lidt på hinanden, jeg kan i hvertfald på dig. Jeg driver forresten også en webshop - www.jonsen.dk

Men hvis du vil netværke lidt så send gerne en mail til ks(snabelhat)cygnet.dk - vil meget gerne se hvordan du har udnyttet CSS i din shop f.eks.

Med venlig hilsen
Kristian Sørensen
Avatar billede cygnet Praktikant
13. juni 2006 - 00:46 #19
Nu satte jeg blot et link på logoet - og så rykkede det hele sig. Hmm en anelse underligt : socialfaglig.dk/
Avatar billede cygnet Praktikant
13. juni 2006 - 00:48 #20
Har fundet fejlen .. undskyld
Avatar billede mclemens Nybegynder
13. juni 2006 - 01:36 #21
Så, nu har du fået en lille e-mail til så du kan se hvem jeg er :D ...
Yderligere info: Jeg er 24 år, selvlært indenfor it: PHP 5 , Start på mysql, Javascript 1.5 og en bog i '98-'99 da jeg var klassens webmaster på gym - den hed vist egen hjemmeside på 15 minutter ... anbefales ikke idag :D

- Ok, selvlært -> ikke uddannet ... men, du kan sikkert godt huske hvad der skete i '99-'00 og når ens studievejleder siger 8 års universitets uddannelse efter gym for at være sikker på at man kan få job (øhm, det kan man jo aldrig være helt sikker på, når man ikke på det tidspunkt ved om man kan kode)... så holder man i 2.g. og bliver selvstændig. Jeg har haft fysisk butik i Løgten(100m2), Grenaa(50m2), Grenaa(150m2) og til sidst Fredericia(530m2) med blandet legetøj og importerede 2 containere fra Kina - dog valgte jeg at køre over på internettet med de 2 bedste mærkevarer ... det trækker nu lidt mere :)

- Åh jo kørte worldgamecenter.com 98(i min fars navn ... var jo kun 17) frem til 29/3 - 2001 hvor jeg skiftede til fysisk butik ... skiftede så tilbage i midten af sidste år og læste de 3 bøger samt lidt inde hos w3c.org om css og div's ... det var hårdt at vænne sig af med tabeller...

... Så er der vist ikke mere interessant at fortælle ... :)
Avatar billede mclemens Nybegynder
13. juni 2006 - 01:44 #22
P.s.: Fin side du har, min baggrund var også sort indtil jeg valgte den
skiftende farve ... Næste version af min side bliver med større skrift
og optimeret til 1024x768 ... teksten lidt for utydelig lige p.t.
Avatar billede cygnet Praktikant
18. august 2006 - 11:52 #23
Hej Mclemens,
Din mail er sgu blevet væk.
Håber du har tid til et lille spørgsmål - når jeg skriver noget i spalte4 - så bliver det sat alt for langt nede, først efter indholdet i spalte3 er færdigt. Prøv at kigge her: socialfaglig.dk/ - har prøvet at skrive "test"
Håber du har tid til at kigge på det.
Avatar billede mclemens Nybegynder
18. august 2006 - 12:15 #24
Har nok tid til at kigge lidt iaften ... men lige lidt hurtigt:
Er width="100%" nødvendigt på tabellen med arbejdsfunktioner ?

... evt. hvis det er eller hvis width ikke kan defineres manuelt
så kan det laves med div's der som default er 100% width (+auto)
hvis man ikke definerer den til en width eller til width:100%;

(standard indstilling er width:100%; med en eller anden form for
auto forstået på den måde at den ikke bliver bredere end det element
den er lagt i - hvis man selv definerer den til width:100%; bliver den
bredden på det første øvre element der er plareceret med position:relative;)

... Det er et stykke tid siden jeg har leget med tables med prøv at fjerne width på den ene tabel med arbejdsområder - eller prøv at definere den width den skal have :o)
Avatar billede mclemens Nybegynder
18. august 2006 - 12:24 #25
java script:tn=document.getElementById("spalte3");tn.getElementsByTagName("table")[0].style.background="#ff0";void(0);

Du kan se problemet ved at indsætte denne linje i IE's adresselinje og trykke enter - den sætter en baggrundsfarve på tabellen så du kan se at den går ud over det afsatte plads :o)
Avatar billede cygnet Praktikant
18. august 2006 - 12:33 #26
Ahh det er den tabel der laver lort jo, jeg får den fjernet. Tak for hjælpen.
Avatar billede mclemens Nybegynder
18. august 2006 - 12:48 #27
Velbekom :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