Avatar billede jeffe Nybegynder
20. august 2003 - 23:32 Der er 15 kommentarer og
2 løsninger

CSS: Ryk det dog op

Jeg har et layout, lavet i CCS, havde fået det hele til at virke, men nu er teksten jeg skriver i hoved-dvi'en pludselig rykket ned under menuen. Aner ikke hvad fa'en der skulle gøre det...


HTML-filen:

  <body>
        <div id="frame">
            <div id="contentheader">
                HEADER
            </div>
            <div id="contentleft">
                MENU
            </div>
            <div id="contentcenter">
                <h1>Log Ind</h1>
                Tekst....<br /><br /><br />
                <div>
                    <label>Brugernavn:</label><input type="text" name="brugernavn" maxlength="20" /><br />
                    <label>Kodeord:</label><input type="password" name="kodeord" maxlength="20" /><br /><br />
                    <label></label><button type="submit">Log Ind</button>
                </div>
            </div>
            <div id="contentfooter">
                FOOTER
            </div>
        </div>
  </body>



CSS-filen:


body {
    background-color:#cccccc;
    text-align:center;
    font-family:verdana;
    font-size:14px;
    color:#ffffff;
    margin-top:0px;
}
#frame {
    width:750px;
    border:solid 1px #ffffff;
    margin-top:5px;
    background-color:#000000;
    text-align:left;
}
#contentleft {
    width:135px;
}
#contentcenter {
    width:565px;
    margin-left: 165px;
    margin-top:0px;
    text-align:top;
}
#contentheader {
}
#contentfooter {
    width:750px;
    text-align:center;
}
label {
    width:150px;
}


Der er mere til begge filer, men det er totalt irrelevant.
Avatar billede jeffe Nybegynder
20. august 2003 - 23:34 #1
Jeg har selvfølgelig rodet lidt med en masse i CSS'en, men aner ikke hvad det var der gjorde at der pludselig "ikke var plads' ved siden af menuen, og det skulle ned under menuen. Jeg har prøvet uden formen, hvor der bare er et enkelt ord, stadig ikke op. Også prøvet at formindske contentcenter-width....plus et par andre ting.
Avatar billede socle Nybegynder
20. august 2003 - 23:41 #2
hvad er det der skal rykkes op?
Avatar billede jeffe Nybegynder
20. august 2003 - 23:43 #3
heh, ups....det er det i contentcenter....dvs ordet TEKST og formen...
Ligegyldigt hvad der er i contecntcenter ryger det ned under menuen. Hmm, lidt dumt af mig bare at skrive MENU derude, for så ryger det jo selvfølgelig ikke så langt ned. Hvis du har lavet filerne og tester det, så prøv at skrive en masse <br>'s i menu, så den får højde som en alm. menu, så kan du se hvad jeg mener.
Avatar billede socle Nybegynder
20. august 2003 - 23:54 #4
prøv det her

margin sætter kun margin omkring hele siden. padding sætter margin for objektet (div tags i der her tilfælde). Her ud over er contentleft sat til position: absolute

body {
    background-color:#cccccc;
    text-align:center;
    font-family:verdana;
    font-size:14px;
    color:#ffffff;
    padding-top:0px;
}
#frame {
    width:750px;
    border:solid 1px #ffffff;
    padding-top:5px;
    background-color:#000000;
    text-align:left;
}
#contentleft {
    width:135px;
    position:absolute;

}
#contentcenter {
    position: relative;
    width:565px;
    padding-left: 165px;
    padding-top:0px;
    text-align:top;
}
#contentheader {
    position: relative
}
#contentfooter {
    width:750px;
    text-align:center;
}
label {
    width:150px;
}
Avatar billede jeffe Nybegynder
21. august 2003 - 00:01 #5
Jeg kan ikke rigtigt så det til at funke, nej... :/
Avatar billede socle Nybegynder
21. august 2003 - 00:11 #6
ups:

som før, bare udskfit #frame til

#frame {
    width:750px;
    border:solid 1px #ffffff;
    padding-top:5px;
    background-color:#000000;
    text-align:left;
    position: relative;
}

det virker i den her ende
Avatar billede roenving Novice
21. august 2003 - 02:48 #7
float:left; på menu og content skulle lave nummeret (hvis der er plads !-)
Avatar billede jeffe Nybegynder
21. august 2003 - 17:13 #8
Altså, jeg kan ikke få det til at virke...

I kan se hele html-filen her:

<?xml version='1.0' encoding='ISO-8859-1'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
        <meta name="author" content="Brian Wenzel" />
        <meta name="revised" content="Brian Wenzel, 19/08/03" />
        <meta name="generator" content="HotDog Pro 7" />
        <meta name="description" content="Fedeting.dk Quiz" />
        <meta name="keywords" content="Fedeting, Quiz, Spørgsmål, Konkurrence, Konkurrencer, Præmier" />
        <title>Fedeting.dk Quiz</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/vbscript">
        window.status="FEDETING.DK QUIZ"
        </script>
  </head>
  <body>
        <div id="frame">
            <div id="contentheader">
                <img src="pics/logo.gif" width="135" height="68" alt="Fedeting.dk Logo" />
            </div>
            <div id="contentleft">
                <!--#include file="includes/menu.inc"-->
            </div>
            <div id="contentcenter">
                <h1>Fedeting.dk Quiz</h1>
            </div>
            <div id="contentfooter">
                Fedeting.dk Quiz: Brian Wenzel & Kim Jørgensen Copyright 2003
            </div>
        </div>
  </body>
</html>


Og hele CSS'en:

body {
    background-color:#cccccc;
    text-align:center;
    font-family:verdana;
    font-size:14px;
    color:#ffffff;
    margin-top:0px;
    scrollbar-face-color:#cccccc;
    scrollbar-highlight-color:#999999;
    scrollbar-shadow-color:#000099;
    scrollbar-arrow-color:#000000;
}
h1 {
    font-size:24px;
    text-align:center;
}
a:link {
    color:#ffffcc;       
}
a:visited {
    color:#ffffcc;     
}
a:hover {
    color:#ffffcc; 
}
a:active {
    color:#ffffcc;
}
input {
    background-color:#cccccc;
    text-decoration:none;
    font-weight: bold;
    color:#000000;
    font-family:Verdana;
    font-size:14px;
    border:0px;
    width:250px;
}
button {
    background:#cccccc;
    text-decoration:none;
    font-weight:bold;
    color:#000000;
    font-family:Verdana;
    font-size :14px;
    width:150px;
}
#frame {
    width:750px;
    border:solid 1px #ffffff;
    margin-top:5px;
    background-color:#000000;
    text-align:left;
}
#contentleft {
    width:135px;
    border: 1px solid white;
}
#contentcenter {
    width:565px;
    margin-left: 165px;
    margin-top:0px;
    border: 1px solid white;
}
#contentheader {
}
#contentfooter {
    width:750px;
    text-align:center;
}
label {
    width:150px;
}


Så kan i selv lave filerne, hvis i gider. Include'n er links i menuen, men i kan se hvordan det ser ud på www.fedeting.dk/aaa (temp. test-side)...Jeg har sat hvid border på, så i kan se hvordan de ser ud helt præcist. De to burde stå ved siden af hinanden...
Avatar billede roenving Novice
21. august 2003 - 17:29 #9
For lige at afprøve det direkte fra webwriteren har jeg sat css'en ind, men sådan:

<?xml version='1.0' encoding='ISO-8859-1'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
        <meta name="author" content="Brian Wenzel" />
        <meta name="revised" content="Brian Wenzel, 19/08/03" />
        <meta name="generator" content="HotDog Pro 7" />
        <meta name="description" content="Fedeting.dk Quiz" />
        <meta name="keywords" content="Fedeting, Quiz, Spørgsmål, Konkurrence, Konkurrencer, Præmier" />
        <title>Fedeting.dk Quiz</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/vbscript">
        window.status="FEDETING.DK QUIZ"
        </script>
  <style type="text/css">
body {
    background-color:#cccccc;
    text-align:center;
    font-family:verdana;
    font-size:14px;
    color:#ffffff;
    margin-top:0px;
    scrollbar-face-color:#cccccc;
    scrollbar-highlight-color:#999999;
    scrollbar-shadow-color:#000099;
    scrollbar-arrow-color:#000000;
}
h1 {
    font-size:24px;
    text-align:center;
}
a:link {
    color:#ffffcc;       
}
a:visited {
    color:#ffffcc;     
}
a:hover {
    color:#ffffcc; 
}
a:active {
    color:#ffffcc;
}
input {
    background-color:#cccccc;
    text-decoration:none;
    font-weight: bold;
    color:#000000;
    font-family:Verdana;
    font-size:14px;
    border:0px;
    width:250px;
}
button {
    background:#cccccc;
    text-decoration:none;
    font-weight:bold;
    color:#000000;
    font-family:Verdana;
    font-size :14px;
    width:150px;
}
#frame {
    width:750px;
    border:solid 1px #ffffff;
    margin-top:5px;
    background-color:#000000;
    text-align:left;
}
#left{
float:left;
}
#contentleft {
    width:135px;
    border: 1px solid white;
}
#contentcenter {
        position:relative;
    width:565px;
    border: 1px solid white;
    float:left;
}
#contentheader {
}
#contentfooter {
    width:750px;
    text-align:center;
}
label {
    width:150px;

  </style>
  </head>
  <body>
        <div id="frame">
                <div id="left">
            <div id="contentheader">
                <img src="pics/logo.gif" width="135" height="68" alt="Fedeting.dk Logo" />
            </div>
            <div id="contentleft">
                <!--#include file="includes/menu.inc"-->
            </div>
            </div>
            <div id="contentcenter">
                <h1>Fedeting.dk Quiz</h1>
            </div>
            <div id="contentfooter">
                Fedeting.dk Quiz: Brian Wenzel & Kim Jørgensen Copyright 2003
            </div>
        </div>
  </body>
</html>
Avatar billede jeffe Nybegynder
21. august 2003 - 17:40 #10
For fa'en....desværre en nitte mere...du kan se det på: www.fedeting.dk/aaa/index2.asp
Avatar billede roenving Novice
21. august 2003 - 17:55 #11
Du includer også stadig det gamle stylesheet ...

Det generede jo ikke mig, da det jo ikke fandtes !-)
Avatar billede jeffe Nybegynder
21. august 2003 - 18:10 #12
D'OH...Min fejl...anyway, det begynder da at ligne noget nu....der er bare én ting...nu ligger den oven i contentheader. Den skull ejo gerne være umiddelbart under contentheader. Ligesom contentleft er det.
www.fedeting.dk/aaa/index2.asp
Avatar billede roenving Novice
21. august 2003 - 18:21 #13
Oki, det kunne jeg jo ikke se -- det så mærkeligt ud hos mig, men så skal du

1. fjerne den ekstra div !-)

2. og ændre til:

#contentleft {
    width:135px;
    border: 1px solid white;
    float:left;
}
Avatar billede jeffe Nybegynder
21. august 2003 - 22:03 #14
Så du...der var den. Jeg synes ellers jeg havde prøvet alle kombinationer, men float:left på menuen kun var løsningen...
Tusind tak for din hjælp. Afgiv svar hvis du vil point !
Avatar billede roenving Novice
23. august 2003 - 16:26 #15
Velbekomme '-)
Avatar billede jeffe Nybegynder
26. august 2003 - 00:00 #16
Håber i kan acceptere halvt til hver, når i begge har brugt meget tid på det...Undskyld ventetiden.
Avatar billede roenving Novice
26. august 2003 - 00:52 #17
Tak for points ;~}
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