CSS скрол...

M

Msecurity

Registered
Здравейте
Защо ми се появява страничен скрол... и как може да се махне и главният ми див да се центрира точно по средата без значение от експлорера...
Защото с Интернет експлорер се мести плътно в ляво... :(
Ето CSS кода
[css]body {
background-color:#a9a7a7;
margin:0px;
padding: 0;
line-height: 1.5em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}

#font {
position: relative;
border:#000000 solid 0px;
width:1024px;
height:768px;
background: url(images/back.png);
Margin:0px auto;
}[/css]
 
На елемента с id = font, си му задал ширина и височина колкото вероятно ти е разделителната способност на монитора. В тази височина на монитора обаче не е равна на свободното място с което разполагаш, то винаги е по-малко. Сега докато четеш това, огледай екрана, ще видиш браузъра, неговата рамка, заглавие, менюта, тулбарове, табове, ще видиш някой и друг панел от операционната си система и т.н. Разполагаемото място, което имаш по височина винаги е по-малко от стойността за височината която имаш в разделителната способност на монитора.

Същото важи и за ширината, обикновенно е с няколко пиксела по-малко. Това е и една от причините като се прави CSS кода вместо да се използва 1024, да се използва 980 или дори 960, да има някакъв резерв. Евентуално и за двата параметъра, височина и ширина, можеш да използваш относителни стойности (в проценти), например height: 100%. Тогава няма да имаш скрол бар, но част от съдържанието може и да остане скрито.

Забравих за центрирането:
Във Firefox си работи нормално, в центъра е. За ИЕ - не съм сигурен, но махни тоя position: relative; евентуално може да се наложи на body да сложиш width: 100%
 
Хммм и още няколко елемента започнах да ми бягат...
Ето кодъ ми до тук :@ чудя се къде греша постоянно...
[css]body {
background-color:#a9a7a7;
margin:0px;
padding: 0;
line-height: 1.5em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}

#font {
position: relative;
border:#000000 solid 1px;
width:1024px;
height:768px;
background: url(images/back.png);
Margin:0px auto;
}
.header-left {
position: absolute;
border:#000000 solid 1px;
width:100%;
height:100%;
Margin:0px auto;
background: url(images/header-left.png) no-repeat;
}
.header-logo {
position: absolute;
border:#ffffff solid 0px;
width:100%;
height:100%;
Margin:2px 33.8% auto;
background: url(images/header-logo.png) no-repeat;
}
.header-right {
position: absolute;
border:#ffffff solid 0px;
width:100%;
height:100%;
Margin:2px 68.6% auto;
background: url(images/header-right.png) no-repeat;
}
.menu-left {
position: absolute;
border:#ffffff solid 0px;
width:100%;
height:100%;
Margin:11.6% 0% auto;
background: url(images/menu-left.png) no-repeat;
}
.menu-repeat {
position: absolute;
border:#ffffff solid 0px;
width:90%;
height:100%;
Margin:11.7% 10% auto;
background: url(images/menu-repeat.png) repeat-x;
}
.menu-right {
position: absolute;
border:#ffffff solid 0px;
width:100%;
height:100%;
Margin:11.6% 94.5% auto;
background: url(images/menu-right.png) no-repeat;
}
#leftmenu {
position: relative;
border:#000000 solid 0px;
width:238px;
Margin:128px 0% auto;
background: url(images/left-menu-r.png) repeat;
}
.lmenu-left {
position: absolute;
border:#ffffff solid 0px;
width:100%;
height:100%;
Margin:0% 0% auto;
background: url(images/left-menu-down.png) no-repeat;
}

#information {
position: relative;
border:#000000 solid 0px;
width:389px;
Margin: -24.7% 30% auto;
background: url(images/info-repeat.png) repeat;
}
.info-repeat{
position: absolute;
border:#ffffff solid 0px;
width:100%;
height:100%;
Margin:0% 30% auto;
background: url(images/info-down.png) no-repeat;
} [/css]
 
Прекалено много използваш абсолютни и релативни позиции. Работи само с маргин и падинг и само в краен случай ги използвай и всичко ще ти е ок.
 
Мерси... но ето още едно нещо... например хедъра ми е на 3 части (както си е моя)
1-вата част: 350 px,
2-рата част: 326 px,
3-тата част: 300 px,
Как да ги събера... без да има точни зададени размери на главният див ? и като разбира се главният див да не ми се разширява спрямо елементите в него?
 
Може ли някакво малко примерче на главния див и да кажем на един от вътрешните? да ми се изясни малко повече... че така нещо ми се губи :S
 
Код: 
<html>
    <head>
        <style>

        #body {
            width: 100%;
        }

        #header {
            width: 980px;
            clear: both;
            margin: 0 auto;
        }

        #header div {
            float: left;
        }

        </style>
    </head>
    <body>
        <div id="header">
            <div style="width: 350px;"></div>
            <div style="width: 326px;"></div>
            <div style="width: 300px;"></div>
        </div>
    </body>
</html>
 
най-добре използвай код в проценти ..

[css]
elementa
{
width:98%;
}
[/css]

защото няма как да знаеш всеки 1 с каква резолюция е .. така де имаа но.. това е по-добрия вариянт :?:
 
Мерси много на всички.
Качвам уж готовият темплейт да погледнете дали има разместване, аз пробвах със 3-4 различни резолюции и със Мозила и Гугъл хром и нямам размествания... имам само с Интернет експлорер и то много грозно - всеки елемент сам за себе си ...
Но искам и вие да кажете дали при вас има някакво разместване.
http://email.vw-bg.eu/
 
Ама ти вярно послуша Митко и сложи overflow: hidden на бодито :)

Приятел, скролбара е нормална част от интерфейса, когато имаш много съдържание и то "отива надолу". Аз трябваше да включа на цял екран (F11) за да видя, че имаш footer, а също и най-долната част от дясната колона беше скрита. Какъв е смисъла да криеш съдържанието на сайта от потребителите?
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе