Avatar billede mads375 Juniormester
17. februar 2014 - 19:59 Der er 5 kommentarer og
1 løsning

HTML5 menu

Hejsa

Jeg sidder og leger med HTML5. Jeg fandt en side, som jeg vil prøve at lave for at øve mig. Det er denne det handler om:

http://demo.olevmedia.net/metro/

Jeg er begyndt på det, men er egentligt lidt i tvivl om man kan lave det med det jeg er igang med, eller om man skal bruge flere div tags. Det som jeg er igang med at lave er selve knapperne, altså de orange knapper. Jeg er dog i tvivl om hvordan man kan få det mellemrum mellem dem. Det er vel padding, men er jeg helt galt på den med følgende kode:

<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<link rel="stylesheet" type="text/css" href="../css/main.css">
</head>
<body>
    <div id="big_wrapper">
        <header id="top_header">
            Header
        </header>
        <nav id="top_menu">
            <ul>
                <li>HOME</li>
                <li>ABOUT</li>
                <li>PICTURES</li>
                <li>ARTICLES</li>
                <li>STORY</li>
                <li>NEWS</li>
                <li>CONTACT</li>
            </ul>
        </nav>
        <article id="left_content">
            <section>
            </section>
        </article>
        <article id="middle_content">
            <section>
            </section>
        </article>
        <article id="right_content">
            <section>
            </section>
        </article>
        <footer id="footer">
        </footer>
    </div>
</body>
</html>

CSS:

@CHARSET "US-ASCII";

* {
    padding: 0px;
    margin: 0px;
}

body {
    text-align:center;

}

#big_wrapper {
    border: 2px solid black;
    width: 1000px;
    margin: 0px auto;
    text-align: left;
}


#top_header {
    background-color: yellow;
    border: 2px solid black;
    height: 100px;
   
}

#top_menu {
    background-color: green;
    height: 150px;
    width 150px;
   
}

#top_menu li {
    display: inline-block;
    list-style: none;
}

Med Venlig Hilsen
Mads
Avatar billede keysersoze Guru
17. februar 2014 - 21:12 #1
Hvis du benytter din browsers developer toolbar - http://www.web-dev.dk/post/2012/06/17/Bliv-en-hurtigere-webudvikler-med-browservc3a6rktc3b8jer.aspx - kan du let lure både HTML og CSS fra andre sider.

Padding er indenvendig mellemrum - du skal nok nærmere gave fat på margin, som er udenvendig mellemrum.
Avatar billede mads375 Juniormester
17. februar 2014 - 21:59 #2
Jeg tror måske jeg har fundet ud af det:


<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
<title>Insert title here</title>
<style>

#start {
    height: 100px;
    width: 200px;
    border: 2px solid black;
    float:left;
    margin-left: 17px;
}
#box {
   
    height: 100px;
    width: 100px;
    border: 2px solid black;
    float: left;
    margin-left: 17px;
}
#box1 {
   
    height: 100px;
    width: 100px;
    border: 2px solid black;
    float: left;
    margin-left: 17px;
}
</style>
</head>
<body>
    <div>
    <div id="start"><h2>START</h2></div>
    <div id="box"><h2>HOME</h2></div>
    <div id="box1"><h2>ABOUT</h2></div>
    <!--<div class="box">HOME</div>
    <div class="box">HOME</div>
    <div class="box">HOME</div>
    <div class="box">HOME</div>
    <div class="box">HOME</div>-->
    </div>

</body>
</html>

Men kunne nu være cool hvis man kunne samle alle div undtagen "start" i en div, så man var fri for at lave et id="box" , id="box1", id="box2", id="box3" etc
Avatar billede mads375 Juniormester
17. februar 2014 - 22:00 #3
Det ser iøvrigt sådan ud:
http://postimg.org/image/e1d9x3ebd/
Avatar billede mads375 Juniormester
17. februar 2014 - 22:02 #4
Nå ja selvfølgelig, det er jo bare at give det en class:

<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
<title>Insert title here</title>
<style>

#start {
    height: 100px;
    width: 200px;
    border: 2px solid black;
    float:left;
    margin-left: 17px;
}
.box {
   
    height: 100px;
    width: 100px;
    border: 2px solid black;
    float: left;
    margin-left: 17px;
}
#box1 {
   
    height: 100px;
    width: 100px;
    border: 2px solid black;
    float: left;
    margin-left: 17px;
}
</style>
</head>
<body>
    <div>
    <div id="start"><h2>START</h2></div>
    <div class="box"><h2>HOME</h2></div>
    <div class="box"><h2>ABOUT</h2></div>
    <!--<div class="box">HOME</div>
    <div class="box">HOME</div>
    <div class="box">HOME</div>
    <div class="box">HOME</div>
    <div class="box">HOME</div>-->
    </div>

</body>
</html>
Avatar billede mads375 Juniormester
17. februar 2014 - 22:17 #5
Jeg ligger dog mærke til en enkelt ting. Kan man ikke få selve fonten til at blive centreret i kasserne? Hvis jeg prøver med text-align: center; men det virker ikke?

Ligger du et svar
Avatar billede keysersoze Guru
17. februar 2014 - 23:28 #6
text-align: center; virker fint hos mig. Skal teksten centreres både horisontalt og vertikalt er det en anden sag - du kan fx lege med line-height eller padding.
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
Kurser inden for grundlæggende programmering

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