Avatar billede chalde Seniormester
10. april 2008 - 15:41 Der er 11 kommentarer og
2 løsninger

css nybegynder, vil ikke som jeg vil

Hej folkens.
Sidder og roder lidt med CSS, og kan bestemt ikke få min side til at se ud som jeg vil ha den til.
Ser sådan ud: http://users.cybercity.dk/~dsl357879//index.html
Men vil ha center rykket op til højre for login og bunden til at fylde hele bunden: http://users.cybercity.dk/~dsl357879/css.JPG således at center også er dynamisk afhængigt af hvor meget indhold der er.
Nogen der kan hjælpe?
Min CSS er her: http://users.cybercity.dk/~dsl357879/css/content.css

Tag jer ikke af border, mest for at jeg lige kunne se hvor hvad var henne af.
Avatar billede kurdo Novice
10. april 2008 - 15:49 #1
prøv sæt "her er center" til float: left; og se hvad der sker! :)

har ikke kigget på din kode, og jeg er ikke den bedste til css, men det er da en prøve! :)
Avatar billede chalde Seniormester
10. april 2008 - 15:51 #2
hjalp desværre ikke, så rykker den sig bare ud til venstre under menuen/login.
Avatar billede kurdo Novice
10. april 2008 - 17:11 #3
hvad sker der hvis du også laver float: left; til menuen? :)
Avatar billede jeppe999 Nybegynder
10. april 2008 - 17:11 #4
Kan ikke helt forstå dit problem og hvad for et id/class har du givet center?
Avatar billede olebole Juniormester
10. april 2008 - 17:31 #5
<ole>

Noget i stil med denne struktur:


<div style="width:750px;margin:0 auto;border:1px solid red">
    <div style="background:yellow">Toppen</div>
    <div style="width:200px;height:200px;float:left;background:lightblue">Form</div>
    <h1 style="width:550px;background:red;float:left;color:white">Her er center</h1>
    <div style="height:1px;overflow:hidden;clear:both">&nbsp;</div>
    <div style="height:50px;border:4px dotted black">Bunden</div>
</div>

- og så må din submit knap i øvrigt aldrig hedde 'Submit'. Giv den et andet navn  =)

/mvh
</bole>
Avatar billede chalde Seniormester
10. april 2008 - 17:32 #6
Kurdo -> bingo :) så kom content/center på plads.
Nu mangler jeg bare bunden/footer:
http://users.cybercity.dk/~dsl357879//css2.JPG

Poster lige kildekoderne:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/content.css">
<title>Untitled Document</title>
</head>

<body>
<div id="page">
   
    <div id="top">
    Her er toppen   
    </div>
       
    <div id="menu">

        <form action="bønnenher.noget" id="login"><br />
        Email: <br />
        <input type="text" name="email" /><br />
        Password: <br />
        <input type="password" name="password" /><br />
        <input type="submit" value="Submit" name="Submit" /><br />
        </form>
        <a href="newuser.html">Ny bruger</a>    </div>

       
    <div id="content">
        <div id="boxed">
        <h1 class="title1">Her er center</h1>
        </div>
    </div>
       
    <div id="footer">
    Her er bunden   
    </div>

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

Og CSS:
body {
    margin: 0;
    padding: 0;
    background: #E5E5E5;
    font-family: Georgia;
    font-size: 13px;
    color: #000000;
}



.boxed {
    padding: 5px 30px 20px 30px;
   
}




.col-one {
    float: left;
    width: 300px;
   
}

.col-two {
    float: right;
    width: 300px;
}

/* Page */

#page {
    width: 980px;
    margin: 0 auto;
    background: #FFFFFF;
}

/* Top */

#top {
    height: 100px;
    background: #FFFFFF;
    font-family: Georgia;
    text-align: center;
    font-size: 25px;
    color: #000000;
    border: solid;

}

/* Menu */

#menu {
    float: left;
    padding: 20px;
    background: #7AAFFF;
    width: 200px;
    border: dotted;
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu li {
    padding: 10px 0;
}

#menu li.first {
    background: none;
}

#menu a {
    text-decoration: none;
    font-size: 129%;
    color: #FFFFFF;
}

#menu a:hover {
    text-decoration: underline;
}


/* Content */

#content {
    float: left;
    width: 700px;
    border: solid;
}

/* Footer */

#footer {
    width: 980px;
    height: 120px;
    margin: 0 auto;
    border: dotted;
}
Avatar billede chalde Seniormester
10. april 2008 - 17:33 #7
Tjekkde lige. I IE virker det fint, men ikke i FF. I FF står det som her:
http://users.cybercity.dk/~dsl357879//css2.JPG
Avatar billede olebole Juniormester
10. april 2008 - 17:39 #8
Brug struklturen fra mit eksempel. Så virker det i begge browsere ... hvor er det element, der clear'er?  ;o)
Avatar billede chalde Seniormester
10. april 2008 - 17:39 #9
Ser ud til at det lykkedes med en seperator ud fra olebole's forslag.
Så kom frisk med svar kurdo og olebole :)
Tak for hjælpen :)
Avatar billede olebole Juniormester
10. april 2008 - 19:20 #10
Float'ede elementer fylder ikke noget fysisk i dokumentets almindelige flow. Efterfølges de derimod af et element med 'clear', fylder de alligevel som ventet  ;o)
    http://www.w3.org/TR/CSS21/visuren.html#propdef-clear
Avatar billede chalde Seniormester
10. april 2008 - 19:30 #11
Tak for info :)
Er ikke den store CSS haj... Sidst jeg lavede noget sådan rigtigt var tilbage hvor frames var fedt :P
Avatar billede olebole Juniormester
10. april 2008 - 19:34 #12
Frames er stadig kanon fedt! Men idag nok mest på væggen ... rundt om billeder  ;D
Avatar billede kurdo Novice
11. april 2008 - 09:30 #13
godt du fik det til at virke! :)

jeg er heller ikke den bedste, men jeg kan da lidt! :)
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