FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Rudolf Macek
Člen
Avatar
Rudolf Macek:28.4.2014 19:29

Č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
Tvůrce
Avatar
Odpovídá na Rudolf Macek
Ondrca:28.4.2014 19:30

zkus na menu nastavit:

clear:both;
Nahoru Odpovědět
28.4.2014 19:30
Zase jsem o něco chytřejší
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Rudolf Macek
Neaktivní uživatel:28.4.2014 19:32 
<!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
Neaktivní uživatelský účet
Avatar
Rudolf Macek
Člen
Avatar
Rudolf Macek:28.4.2014 19:44

Díky moc

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

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.