Avatar billede dwr Nybegynder
20. april 2007 - 15:24 Der er 9 kommentarer og
1 løsning

Nyt CSS Spørgsmål om "element"-placering.

Har fået lidt styr på min opsætning nu, men jeg har et element, der ikke vil placere sig, hvor jeg vil have det.

Det er elementet "sidenewsright", der i og for sig ligger rigtigt når man har maksimeret vindue i opl. 1024x768, men laver ballade så snart jeg laver om på vindue eller opl.

Kan ses på http://dwr.dk


Koden ser således ud:

CSS:
#container {
    position:absolute;
    margin-left:-300;
    margin-right:auto;
    margin-top:10px;
    left: 50%;
    width:600px;
    height:90%;
    background-color:white;
    border:1px solid white;
    overflow: visible;
}

#banner {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width: 100%;
    top: 10px;
    height: 100px;
    background-color: beige;
    border: 1px solid olive;
}

#topleftmenu {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:15px;
    width: 250px;
    height: 50px;
    background-color: beige;
    border: 1px solid olive;
}

#toprightmenu {
    position:relative;
    margin-left:255px;
    margin-right:auto;
    margin-top:-50px;
    width: 225px;
    height: 50px;
    background-color: beige;
    border: 1px solid olive;
    text-align: right;
    text-align-top: center;
}

#maintable {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
    width: 480px;
    height: 100%;
    background-color: beige;
    border: 1px solid olive;
    padding: 5px;
}

#sidenewsright {
    position: relative;
    margin-left: 485px;
    margin-right: auto;
    margin-top: -762px;
    width: 113px;
    height: 100%;
    background-color: beige;
    border: 1px solid olive;
}





HTML:


<?PHP
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <title>Sandbox</title>
        <link rel="stylesheet" type="text/css" href="build.css"></link>
    </head>
    <body>
        <div id="container">
            <?PHP
            include "txt/banner.php";
            include "txt/topleftmenu.php";
            include "txt/toprightmenu.php";
            include "txt/maintable.php";
            include "txt/sidenewsright.php";
            ?>
        </div>
    </body>
</html>
Avatar billede roenving Novice
20. april 2007 - 15:34 #1
Prøv i stedet:

#container {
    position:relative;
    margin:10px auto 0 auto;
    width:600px;
    height:90%;
    background-color:white;
    border:1px solid white;
    overflow: visible;
}

#banner {
    position:relative;
    top: 10px;
    height: 100px;
    background-color: beige;
    border: 1px solid olive;
}

#topleftmenu {
    position:relative;
    width: 250px;
    height: 50px;
    background-color: beige;
    border: 1px solid olive;
    float:left;
}

#toprightmenu {
    position:relative;
    width: 225px;
    height: 50px;
    background-color: beige;
    border: 1px solid olive;
    text-align: right;
    float:left;
}
/*Under de to menu-elementer skal der indsættes en clear-ting:*/
.clearDiv{
  clear:both;
  line-height:0;
  font-size:0;
}
/*Der skal så være et minimalt indhold for at browserne ikke skal komme i tvivl om, at den skal 'vises'/tages alvorligt:

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

*/

#maintable {
    position:relative;
    margin:5px auto 0 auto;
    width: 480px;
    height: 100%;
    background-color: beige;
    border: 1px solid olive;
    padding: 5px;
    float:left;
}

#sidenewsright {
    position: relative;
    width: 113px;
    height: 100%;
    background-color: beige;
    border: 1px solid olive;
    float:left;
}
Avatar billede boxer Praktikant
20. april 2007 - 16:51 #2
Husk at tjekke hvordan det ser ud i FireFox, lige pt. ser det ikke for godt ud.
Heller ikke i stor opløsning
Avatar billede roenving Novice
21. april 2007 - 01:56 #3
-- og det var netop grunden til, at jeg skrev det fulstændigt om, i mine browsere giver det nemlig det brugbare resultat !o]
Avatar billede dwr Nybegynder
23. april 2007 - 10:13 #4
Det virker ihvert fald ikke :s

Det er hverken centreret eller har den 5px-margin til hinanden og de overlapper hinanden.

Set fra IE 6.0 ihvertfald... Har ikke mulighed for at tjekke andet her fra.
Avatar billede dwr Nybegynder
23. april 2007 - 10:57 #5
Nu har jeg fundet en løsning, der fungerer i IE6 ihvert fald. Er der nogen der kan fortælle mig om det ser rigtigt ud i FF?
Avatar billede dwr Nybegynder
23. april 2007 - 10:57 #6
Ser således ud:
#container {
    position:relative;
    margin:10px auto auto -300px;
    left: 50%;
    width:600px;
    height:90%;
    background-color:white;
    border:1px solid white;
}

#banner {
    position:relative;
    top: 10px;
    height: 100px;
    background-color: beige;
    border: 1px solid olive;
}

#topleftmenu {
    position:relative;
    margin: 15px auto auto auto;
    width: 250px;
    height: 50px;
    background-color: beige;
    border: 1px solid olive;
    float:left;
}

#toprightmenu {
    position:relative;
    margin: 15px auto auto 5px;
    width: 225px;
    height: 50px;
    background-color: beige;
    border: 1px solid olive;
    text-align: right;
    float:left;
}


#maintable {
    position:relative;
    margin:5px auto 0 auto;
    width: 480px;
    height: 100%;
    background-color: beige;
    border: 1px solid olive;
    padding: 5px;
    float:left;
}

#sidenewsright {
    position: relative;
    margin: -50px auto auto 5px;
    width: 113px;
    height: 100%;
    background-color: beige;
    border: 1px solid olive;
    float:left;
}

.clearDiv{
  clear:both;
  line-height:0;
  font-size:0;
}
Avatar billede dwr Nybegynder
20. juli 2007 - 10:13 #7
luk
Avatar billede olebole Juniormester
20. juli 2007 - 12:04 #8
<ole>

dwr >> Kunne du ikke i det mindste svinge dig op til en lillebitte tak til de mennesker af kød og blod, der har tilsidesat andet i deres tilværelse for at forsøge at hjælpe dig, da du kaldte på hjælp?

/mvh
</bole>
Avatar billede dwr Nybegynder
20. juli 2007 - 12:40 #9
Jo der manglede nok et tak, men med tiden fik jeg vist glemt tjekke tråden. Problemet var hovedsageligt, at jeg aldrig fandt et svar der virkede.
Derudover ser jeg dig ikke nogen steder i den her tråd?
Avatar billede olebole Juniormester
20. juli 2007 - 12:53 #10
1) Der manglede ikke 'nok' en tak. Der manglede helt åbenlyst en tak.
2) Nej, du glemte ikke at tjekke tråden - du lukkede den og havde alle muligheder for en tak
3) Nej, problemet er ikke, at du ikke fandt et svar. Problemet er din manglende høflighed!
4) Nej, du har ikke set mig i denne tråd ... og ...?!???!!!

Du begik en dumhed - og så klæder dig endnu mindre at forsøge at bortforklare og bagatellisere den. Vær dog et mandfolk og stik de implicerede brugere en klar undskyldning og en tak.
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