Avatar billede phileigil Nybegynder
29. december 2010 - 20:24 Der er 4 kommentarer

bokse rykker sig

Har et STORT problem :)Min eksamens opgave gik ned og jeg havde ikke fået lavet backup af rettelserne jeg fik sammen med min lære... Jeg står og skal aflevere den 3 og mine to bokse rykker sig når jeg tjekker dem på serveren ... har fået flere til at tjekke dem men ingen kan se fejlen - så håber der sidder en her inde der kan se den ...

koderne i html :

<!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>
<title>PortfolieAnnika</title>
<link rel="stylesheet" href="basis.css" />
<style type="text/css">
<!--
  #navbar ul {
        margin: 0;
        padding: 5px;
        list-style-type: none;
        text-align: center;
        background-color: #CCC;
        }

#navbar ul li { 
        display: inline;
       
        }

#navbar ul li a {
        text-decoration: none;
        padding: .2em 1em;
        color: #FFF;
        background-color: #000;
}


#navbar ul li a:hover {
        color: #FFF;
        background-color: #F00;
        }
-->
</style>

</head>
<body>

<div id="container">
<div id="header">
<div id="img">
<img src="logo_Annika1.png" />
</div><!--img-->
</div><!--header-->
<div id="menu">

<div id="navbar">
  <ul>
<li><a id="activepage" href="indeks.html">Forside</a></li>
<li><a href="portfolie.html">Portfolio</a></li>
<li><a href="laering.html">L&aelig;ring </a> </li>
<li><a href="projekt.html">Projekt </a> </li>
<li><a href="om_mig.html">Om mig</a></li>
<li><a href="kontakt.html">Kontakt</a></li>

</ul>


</div><"--navbar-->
</div><!--menu-->

<div id="content">
<div id="w2">
<h1>Velkommen til min Portfolio</h1>
<p>
<h3>Denne side er lavet som et led i min 1 semester eksamens opgave og den henvender sig prim&aelig;rt til l&aelig;rerne, men ogs&aring; eleverne p&aring; skolen og andre interesserede.</h3>
Mit navn er Annika Michelle M&oslash;rk og jeg l&aelig;ser til dagligt til Multimediedesigner p&aring; Tigentskolen i Odense. Jeg forventer at v&aelig;re f&aelig;rdig uddannet sommeren 2012 og derefter g&aring;r jeg i gang med en overbygning af uddannelsen og l&aelig;ser en 1&frac12; &aring;rige bachelor uddannelse som webudvikler.<br /> <br />
Min Portfolie vil f&oslash;rere jer ind i min verden, den vil fort&aelig;lle jer hvem jeg er, hvilke valg jeg har gjort mig og sidst men ikke mindst hvad jeg har l&aelig;rt p&aring; 1 semester. Hvilken fag jeg har haft, hvilke indsats jeg har ydet samt hvilken problemer jeg har haft undervejs og hvad jeg vil skulle g&oslash;re bedre i fremtiden, for at n&aring; min m&aring;l.<br /><br />
Jeg h&aring;ber i vil l&aelig;ne jer tilbage og sm&aelig;kke benene op og hygge jer med min beretning af hvem jeg er. Jeg &oslash;nsker jer i hvert fald en rigtig god forn&oslash;jelse.<br /><br />

<b>Annika M&oslash;rk <b>
  </p>
 


</div><!--w2-->

<div id="w1">
<img src="mig-1.png"  />


</div><!--w1--> 

</div>
<!--content-->

<div id="footer">
</div><!--footer-->








</div>



<!--container-->


</body>



</html>


koderne i CSS:

#container
{
    width: 960px;
    margin: 0 auto;
    overflow:hidden;
}

#header
{
    height: 120px;
    width: 955px;
    float: left;
    background-color:#000;
    border: 2px solid #F00;
   
}

#img
{
    float:left;
    padding: 0px 0px 0px 30px;
   
}


#menu
{
    width: 955px;
    height: 45px;
    float: left;
    background-color:#FFF;
    border: 2px solid #F00;
    overflow:hidden;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
}





#navbar ul {
margin: 0;
height: 50px;
width: 945px;
padding: 2px;
list-style-type: none;
text-align: center;
background-color: #F00;
}

#navbar #activepage
{ color: #000;
background-color: #F00;
}
#navbar ul li {
display:block;
height:60px;
padding: 10px 0px 0px 50px;
float: left;




}

#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #FFF;
}

#navbar ul li a:hover {
color: #000;
background-color: #F00;
}



#content
{
    width: 955px;
    height: 460px;
    float: left;
    background-color:#000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:55px;
    font-style: normal;
    border: 2px solid #F00;
       
}

#w1
{
    width: 385px;
    height: 255px;
    background-color:#CCC;
    position:absolute;
    top: 250px;
    left: 699px;
    padding: 10px;
    float:right;
    font-family:Arial, Helvetica, sans-serif;
    color:#000;
    font-size: 13px;
    border: 2px solid #F00;
    overflow:auto;
   

}

#w2
{
    width: 385px;
    height: 255px;
    background-color:#CCC;
    position:absolute;
    top: 250px;
    left: 240px;
    padding: 10px;
    float:left;
    border: 2px solid #F00;
    overflow: auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 13px;
   
   
   

}

#footer
{
    width: 960px;
    height: 25px;
    float: left;
    border: 2px solid #F00;
    background-color:#000;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    font-style:inherit;
}



og det er boksene w1 og w2 to der er problemet ... w1 er den der ligger til højre og w2 og den til venstre ... håber virkelig at der sidder nogen der kan se min fejl ...
Avatar billede claes57 Ekspert
29. december 2010 - 21:15 #1
de to bokse skal IKKE være 'absolute' placeret, men følge med resten.
i w1 og w2, fjern de to linjer med
    position:absolute;
    top: 250px;
så kører det langt bedre.

og i teksten - lær lige, hvor du går - det staves Tietgenskolen - det er en ren dumper, alt andet lige...
Avatar billede zips Juniormester
29. december 2010 - 21:29 #2
Brug position:relative; og justere top og left samt sætte w2 til float: left

Ellers brug float left på begge og justere bokse med margin
Avatar billede phileigil Nybegynder
29. december 2010 - 21:32 #3
tak jeg prøver lige :)
Avatar billede phileigil Nybegynder
29. december 2010 - 22:07 #4
takker mange gange det virker nu
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