Пак проблем с позициониране при различни резолюций!

rosko · 21 Март 2009

Здравейте!
Първо се извинявам, че пускам поредната тема, в която се пита как да се позиционира и оптимизира сайт в различките резолюций!
И така:
В сайта, който правя си имам блокове с новини, но трябва да им задам някаква позиция, която искам да е точно определена за всякакви резолюций, нещо каквото се получава при <center></center> таговете или подобно центриране!
Нямам начин да ги чентрирам, понеже по средата имам друго нещо.
+ това не мога да им задам свойство left, понеже пък сайта ми не е точно до края на браузъра.
Пробвах с padding-left -но ефекта е същия-размества се!
+1

FestarBG · 21 Март 2009

Сложи целия сайт в един див,например main.

<div id="main">
...
...
...
</div>

И в css:

#main {
width: 800px;
height: auto;
margin: 0 auto;
}

Така ще е центиран под различните резолюции.

rosko · 21 Март 2009

FestarBG каза:
Сложи целия сайт в един див,например main.

<div id="main">
...
...
...
</div>

И в css:

#main {
width: 800px;
height: auto;
margin: 0 auto;
}

Така ще е центиран под различните резолюции.

Ами не става !

ajax · 21 Март 2009

rosko каза:
FestarBG каза:

Сложи целия сайт в един див,например main.

<div id="main">
...
...
...
</div>

И в css:

#main {
width: 800px;
height: auto;
margin: 0 auto;
}

Така ще е центиран под различните резолюции.

Увеличете...

Ами не става !

Дай код от цсс и хтмл-то

shterev · 22 Март 2009

Я пробвай с тоя доктайп:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

С този доктайп трябва да се центрира!

rosko · 22 Март 2009

Този доктайп го имам даже и СЕО имам!
Ето това е кода, като съм дал едно от тзи блокчета:

Код:

<html>
<head>
<title>ETO</title>
</head>
<body><div ID="main">
                       
<div id="news_left" style=";position:absolute;">
<div class="nifty"><div class="date">  <u><b>Пусната на:</u> 21-03-2009</b>                       <u><b>новина</u> 1</b></div>
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="title">ss</div><hr color="#FFFFFF" width="230" align="center" />
<div class="body_1">
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
<div class="date" align="center"><a href="#" onmouseover="Tip('<center><b>dd</b></center><hr>HO-HO-HO-g-g-g-g-g-gg-g-g<br>hohoho')" onmouseout="UnTip()">Виж повече...</a></div></div></div>
........................
</div>
</body>
</html>

CSS:

Код:

/*body*/

body {
max-width:1000px;
background-color: #E0E0E0;
}
/*DIV*/

[color=red]#main [/color]{ 
width: 800px; 
height: auto; 
margin: 0 auto; 
}

[color=red]DIV [/color]{ 
    border: 0px solid;
    border-style : ;
    border-color : ;
}
/*links*/

a {
color: blue;
text-decoration: none;
font-size: 16px;
}
a:hover {
color: red;
text-decoration: none;
font-size: 16px;
font-style: none;
border-bottom: 1px dashed #FFFFFF;
}
v:link {
color: skyblue;
text-decoration: none;
}
a:link {
color: blue;
text-decoration: none;
}
/*footer & menu_bans*/

.footer {
background-image: url(images/footer.jpg);
position: relative;
clear: both;
text-align: left;
width: 950px;
height: 35px;
margin: 0 auto;
font-size: 16px;
font-style: bold;
font-family: Comic Sans MS;
}

[color=red]/*newsblock_style*/[/color]

.nifty {
width: 250px;
background: #CCCCFF;
margin: 5 auto;
color: #FFFFFF;
}

b.rtop, b.rbottom {
display:block;
background:#E0E0E0;
}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #3399FF;
}
b.r1 { margin: 0 5px }
b.r2 { margin: 0 3px }
b.r3 { margin: 0 2px }
b.rtop b.r4, b.rbottom b.r4 { margin: 0 1px;height: 2px }
.title {
font-size: 19px;
font-weight: bold;
text-align:center;
font:narrow;
}
.body_1 {
padding: 5px 5px 5px 5px;
text-align: center;
color: #fff;
font-size: 15px;
font:narrow;
}
#left {
width: 250px;
border: 1px solid #C5E100;
padding: 3px 3px 3px 3px;
float: left;
}
#center {
width: 250px;
border: 1px solid #C5E100;
padding: 3px 3px 3px 3px;
float: left;
margin-left: 20px;
}
#right {
width: 250px;
border: 1px solid #C5E100;
padding: 3px 3px 3px 3px;
float: left;
margin-left: 20px;
}

.date {
color:black;
font-size: 12px;
position: center;
display: block;
background-color: #E0E0E0;
}



Малко е дълго, но го давам, за да видите как ми е на BODY и на DIV !

vankich · 22 Март 2009

rosko каза:
<div id="news_left" style=";position:absolute;">

Имаш абсолютно позициониране а и едни ; преди самото позициониране. Сбозил си го. При абсолютното позициониране див-а се влияе от границите на документа, а не от главния му див. Сложи на див main едно position: relative; или направо махни това style=";position:absolute;"

rosko · 22 Март 2009

vankich каза:
rosko каза:

<div id="news_left" style=";position:absolute;">

Увеличете...

Имаш абсолютно позициониране а и едни ; преди самото позициониране. Сбозил си го. При абсолютното позициониране див-а се влияе от границите на документа, а не от главния му див. Сложи на див main едно position: relative; или направо махни това style=";position:absolute;"

Е не иска!
Много нагално това ейй.

Други идей!?

shterev · 22 Март 2009

#main добави в цсс-а position:relative;

DeathGuard_ · 22 Март 2009

vankich каза:
rosko каза:

<div id="news_left" style=";position:absolute;">

Увеличете...

Имаш абсолютно позициониране а и едни ; преди самото позициониране. Сбозил си го. При абсолютното позициониране див-а се влияе от границите на документа, а не от главния му див. Сложи на див main едно position: relative; или направо махни това style=";position:absolute;"

Тая точка и запетая пред атрибута е грешка
прави се

style="position: absolute;"

rosko · 22 Март 2009

Това ми е вече на блокчето позиционирането!

Код:

 #margin_left {
padding-left: 5px;
position: releative;
}

Това ми е #main, DIV, BODY в CSS:

Код:

#main { 
width: 800px; 
height: auto; 
margin: 0 auto; 
position: relative;
}

/*body*/

BODY {
background-color: #E0E0E0;
}
/*DIV*/

DIV { 
    border: 0px;
    border-style: none;
    border-color: none;
}
/*links*/

Това е класа, който управлява този блок, но аз в HTML съм го направил с друго (margin_left)!

Код:

.nifty {
width: 250px;
background: #CCCCFF;
color: #FFFFFF;
}

И ако може едно разяснение...
Ако може да ми кажете, какво прави margin-.. и padding-..!
.. - това е left, right, top и тн.

И все пак ви благодаря, че се опитвате да помогнете!

:?:

shterev · 22 Март 2009

http://fuedo.com/index.php?title=Margin

Повече заа маргините и падинга , а също и др. за което питаш

Пак проблем с позициониране при различни резолюций!

rosko

Registered

FestarBG

Registered

rosko

Registered

ajax

Registered

shterev

Registered

rosko

Registered

vankich

Registered

rosko

Registered

shterev

Registered

DeathGuard_

Registered

rosko

Registered

shterev

Registered