Проблем с разместаване

M

montana

Registered
Добър ден, значи имам това:

Код: 
<div id="main">
            <h2>Колона 1</h2>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. 


        <div id="sidebar">
            <h2>Колона 2</h2>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. 		
        </div>


[css]#main {
float: left;
width: 41%;
padding: 0 0 0 10px;
background: #9C9;
text-align:left;
}

#sidebar {
float: right;
width: 41%;
padding: 0 0 0 10px;
background: #9C9;
}[/css]

Как може да се направи така, че при по малък екран да не се размества сайта, а от долу да се появява скрол лента?
 
Сложи на главния контейнер дължина(width), която е фиксирана и спрямо това вече си го намествай.
 
Нещо не ми се получава.. :? ето кода:

Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link type="text/css" href="css/style.css" rel="stylesheet" />
    <title>Марио Славейков Ангелов</title>    
</head>

<body>    
        <div id="header">
            <h1>Заглавие /Header/</h1>
        </div>
           <div id="nav">
             <ul>
                <li id="menu">Меню</li>
                <li><a href="index.htm">Начало</a></li>
                <li><a href="gallery.htm">Галерия</a></li>
                <li><a href="about.htm">Таблица</a></li>
                <li><a href="table.htm">За контакт</a></li>
            </ul>
        </div> 
     <div id="asd">		
        <div id="main">
            <h2>Колона 1</h2>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. 
			Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. 
			Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. 
			Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
			Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
			Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
			Donec semper ipsum et urna. Ut consequat neque vitae felis.
        </div>

        <div id="sidebar">
            <h2>Колона 2</h2>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. 
			Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. 
			Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. 
			Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
			Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
			Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
			Donec semper ipsum et urna. Ut consequat neque vitae felis.
        </div>
     </div>
        <div id="footer">
            <p>Footer</p>
        </div>    
</body>
</html>

[css]
BODY {
margin: 0;
padding: 0;
color: #000;
background: #333;
}


#header {
padding: 50px 10px;
background: #DDD;
}

h1 {
margin: 0;
}

/*Navigation Menu*/

#nav {
float: left;
width: 202px;
margin: 0;
padding: 0;
background-color: #0f0f0f;
height: 827px;
}

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

#menu {
background: url(images/top.png) no-repeat;
width: 202px;
height: 41px;
}

#nav li {
list-style: none;
color: #FFF;
text-align: center;
font-size: 20px;
font-weight: bold;
}

#nav a {
display: block;
width: 202px;
height: 40px;
background: url(images/item.png) no-repeat;
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 16px;
font-weight: bold;
color: #CCC;
}

#nav a:hover, #nav .active a {
background-image: url(images/hover.png);
width: 202px;
height: 40px;
color: #FFF;
}

ul img {
width: 202px;
height: 41px;
background: none;
}

/*End Navigation Menu*/

#asd {
width: 100%;
}

#main {
float: left;
width: 41%;
padding: 0 0 0 10px;
background: #9C9;
text-align:left;
}

#sidebar {
float: right;
width: 41%;
padding: 0 0 0 10px;
background: #9C9;
}

#sidebar ul li {
color: #FA4;
}

#container {
width: 100%;
margin:0 auto;
}

#center {
margin:0 auto;
width: 60%;
/* height:825px; */
padding: 0 0 0 10px;
background: #9C9;
}

#top {
margin-left:200px;

}

.color_chetni {
background: #AAFF7F;
}

.color_nechetni {
background: #55FFAA;
}

h2 {
margin: 0 0 1em;
}


P {
text-align: center
}

#footer {
clear: left;
padding: 5px 10px;
background: #CC9;
}

#footer p {
margin: 0;
}[/css]
 
Добави си това:
[css]
#container {
margin: 0 auto;
padding: 0;
width: 800px;
height: 100%;
}
[/css]

След това в HTML кода слагаш
HTML: 
<body>
            [b][color=red]<div id="container">[/color][/b]
            ... - тук е страницата ти
            [b][color=red]</div>[/color][/b]
</body>
 
Код: 
<meta name="viewport" content="width=device-width" />
<link href="resolutions/1920.css" media="only screen and (max-width: 1920px), only screen and (max-device-width: 1920px)" rel="stylesheet" type="text/css" /> 
<link href="resolutions/1680.css" media="only screen and (max-width: 1680px), only screen and (max-device-width: 1680px)" rel="stylesheet" type="text/css" /> 
<link href="resolutions/1600.css" media="only screen and (max-width: 1600px), only screen and (max-device-width: 1600px)" rel="stylesheet" type="text/css" /> 
<link href="resolutions/1440.css" media="only screen and (max-width: 1440px), only screen and (max-device-width: 1440px)" rel="stylesheet" type="text/css" /> 
<link href="resolutions/1400.css" media="only screen and (max-width: 1400px), only screen and (max-device-width: 1400px)" rel="stylesheet" type="text/css" /> 
<link href="resolutions/1366.css" media="only screen and (max-width: 1366px), only screen and (max-device-width: 1366px)" rel="stylesheet" type="text/css" /> 
<link href="resolutions/1360.css" media="only screen and (max-width: 1360px), only screen and (max-device-width: 1360px)" rel="stylesheet" type="text/css" /> 
<link href="resolutions/1280.css" media="only screen and (max-width: 1280px), only screen and (max-device-width: 1280px)" rel="stylesheet" type="text/css" /> 
<link href="resolutions/1152.css" media="only screen and (max-width: 1152px), only screen and (max-device-width: 1152px)" rel="stylesheet" type="text/css" /> 
<link href="resolutions/1024.css" media="only screen and (max-width: 1024px), only screen and (max-device-width: 1024px)" rel="stylesheet" type="text/css" />
<link href="resolutions/800.css" media="only screen and (max-width: 800px), only screen and (max-device-width: 800px)" rel="stylesheet" type="text/css" />
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе