Diskuze: Pozicování menu

HTML a CSS HTML a CSS Pozicování menu American English version English version

Avatar
Rudolf Macek
Člen
Avatar
Rudolf Macek:

Čus,

Mám tady problém a to z pozicí menu na jednom simple designu.
Potřeboval bych aby menu bylo v levo a text v pravo jenže nevím jak to udělat
http://prntscr.com/3eamnw

zkoušel jsem float a dopadne to takto http://prntscr.com/3ean22

CSS

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

body{
        background-color: #ffd373;
        margin: 0px auto;
        padding: 0;
}

/* Wrapper */
div#wrapper{
        width: 85%;
        margin: 0 auto;
        background-color: #FFAE00;
        border-left: 10px solid #A67100;
        border-right: 10px solid #A67100;
        padding: 10px;
}

/* Header */
div#header{
        background-color: darkorange;
        border-radius: 5px;
}

div#header h2{
        padding: 0 0 0 25px;
}

/* Menu */
div#menu{
        float: left;
        margin-top: 15px;
        width: 10%;
        text-align: center;
}

div#menu ul{
        list-style-type: none;
}

div#menu li{
        background-color: darkorange;
}

div#menu li:hover{
        background-color: orange;
}

/* Content */
div#content{
        float: right;
        width: 90%;
        margin: 0 auto;
}

HTML

<!doctype html>
<html>
        <head>
                <meta charset="utf-8" />
                <meta name="author" content="Rudolf Macek" />
                <meta name="description" content="blog" />

                <title>Blog template</title>

                <link rel="stylesheet" href="main.css" />
                <link rel="shortcut icon" href="fav.ico" />
        </head>
        <body>
                <div id="wrapper">

                        <div id="header">
                                <h2>Blog name</h2>
                        </div>

                        <div id="menu">
                                <ul>
                                        <li>Home</li>
                                        <li>About</li>
                                </ul>
                        </div>

                        <div id="content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </div>
                </div>
        </body>
</html>

Děkuji ;)

 
Odpovědět 28.4.2014 19:29
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Rudolf Macek
Ondrca:

zkus na menu nastavit:

clear:both;
Nahoru Odpovědět 28.4.2014 19:30
Zase jsem o něco chytřejší
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Rudolf Macek
Jiří Gracík:
<!doctype html>
 <html>
        <head>
                <meta charset="utf-8" />
                <meta name="author" content="Rudolf Macek" />
                <meta name="description" content="blog" />

                <title>Blog template</title>

                <link rel="stylesheet" href="main.css" />
                <link rel="shortcut icon" href="fav.ico" />
        </head>
        <body>
                <div id="wrapper">

                        <div id="header">
                                <h2>Blog name</h2>
                        </div>

                        <div id="menu">
                                <ul>
                                        <li>Home</li>
                                        <li>About</li>
                                </ul>
                        </div>

                        <div id="content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </div>
                        <div class="clear"></div>
                </div>
        </body>
 </html>
.clear{
    clear: both;
}

a contentu asi nastavíš nějaký margin zvrchu

Nahoru Odpovědět 28.4.2014 19:32
Creating websites is awesome till you see the result in another browser ...
Avatar
Rudolf Macek
Člen
Avatar
Rudolf Macek:

Díky moc

 
Nahoru Odpovědět 28.4.2014 19:44
Avatar
Rudolf Macek
Člen
Avatar
Rudolf Macek:

A proč když si nastavím na wrapperu

/* Wrapper */
div#wrapper{
        width: 85%;
        height: 80%;
        margin: 0 auto;
        background-color: #FFAE00;
        border-left: 10px solid #A67100;
        border-right: 10px solid #A67100;
        padding: 10px;
}

height 80% tak se nic nestane jen když to nastavím v pixelex

 
Nahoru Odpovědět 28.4.2014 19:47
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.