CSS Table

  • Автор Автор eddy
  • Начална дата Начална дата
E

eddy

Registered
Здравйте,
Опитвам се по някакав начин да направя tables такаче да са разделени на 3 колони.

Ето ми css кода:
#container {
width:1100px;
margin: auto;
border:0px solid #000;

}

#top {
float:top;
width:1100px;
border:1px solid #000;
height: 100px;

}
#right {
float:right;
width:200px;
border:1px solid #000;
height: 800px;
}



#left {

width:190px;
border: 0px solid #000;
height: 615px;
}


#left1 {
width:790px;
border:0px solid #000;
height: 100px;
}

Ето и html:

<link rel="stylesheet" href="menu.css" type="text/css" />
<div id="container">
<div id="top">ЛОГО</div>
<div id="right">
GG
</div>
<div id="left1"><img src="img.jpg" height="75px" width="790px"></div>
<div id="left">GG1
</div>
</div>
</div>

Ако може между GG1 i GG да направя още едно поле , тоест да има 3 колони. Дано ме разбрахте.
 
Хубаво си имаш главен container.
Ся си направи 3 дива.
lef , center, right (примерно)
Задаваш си им височина и широчина и на 3-те float: left;
И си готов.
И си оправяш margin-ите. :wink:
 
С margin нещо не ми се получава като му дам да кажем margin: 100; слиза по диагонал на долу , а пък със отрицателен маргин пък на другия диагонал.Ако може кажи как да направя маргин. :)

Ето това направих аз:
#container {
width:1100px;
margin: auto;
border:1px solid #000;

}



#right {

margin: ???????;
float: left;
width:200px;
border:1px solid #000;
height: 800px;
}



#left {
margin: ?????????;
float: left;
width:190px;
border: 1px solid #000;
height: 700px;
}

#center {

margin:???????;
float: left;
width:190px;
height:700px;
border: 1px solid #000;
}
 
Мерси за маргин урока ей сега ще пробвам и ще ви кажа резултата.
 
Така направих ето това:
#container {

margin-top: 50px;
margin-left:100px;
margin-bottom: 0px;
width:1100px;
height:800px;
border:1px solid #000;

}



#right {


margin-left:938px;
margin-top:-657px;
float:left;
width:200px;
border:1px solid #000;
height: 800px;
}



#left {
float: left;
width: 200px;
border: 1px solid #000;
height: 800px;
}

#center {

margin-top:-802px;
margin-left: 350px;
float: left;
width: 550px;
height: 800px;
border: 1px solid #000;
}


Обаче "Mozilla" не го изкарва добре , "IE" още по зле , само под "Opera" е добре (гледах от него резултати те от кода , докато го правих).
И мисля че е от тия отрицателни маргини.Просто незнам как да го направя без тях.
като пробвам margin-bottom 100px; да кажем вместо да ми се качи на горе ми се разшерява на долу table , а пък "margin-right" даже не работи.
Незнам може би от "Opera"-та незнам кажете си мнението ако може да се оправи това нещо. :)
 
Земи нарисувай на пейнта какво искаш :)
Че така няма да стане на работа явно? :wink:
 
Ето:

http://89.25.91.19/page.html
http://89.25.91.19/menu.css

Точно линка който даде по горе , ей такова нещо.
 
http://web-tourist.net/userfiles/2/2203.rar
Първо да ти кажа да слагаш доктайп на всеки документ, защото експлорера ще ти прави мизерии. Не ти трябва отрицателен маргин, защото имаш 3 елемента един до друг, които ги слагаш един до друг с маргин, но ти не си ги направил така:
<div>1</div>
<div>2</div>
<div>3</div>
Увеличете...
а си ги направил така:
<div>1
<div>2</div>
<div>3</div>
</div>
Увеличете...
и затова се бъгва, когато използваш отрицателен маргин. Сложил съм ти на трите елемента display:inline, защото IE6 удвоява маргините на флоутнатите елементи. Направил съм ти и клас .clear за чистене на елементите който го слагаш след посления елемент, който искаш да има float.
 
Значи оправих си пикселите но не мога да вдигна тия колони на горе със
"margin-bottom" ми се увеличава полето на долу.
Иначе мн благодаря за труда :) Ако ми помогнеш и с това.
Погледни само как седят

http://89.25.91.19/page.html
 
Казах ти да извадиш елементите с ид center и right от дива #left, защото се бъгва отрицателния маргин (дал съм ти линк ако неможеш да го направиш). Също ти казах да сложиш доктайп и празен див с клас clear.
 
Така сложих доктайп (можеш ли само да провериш дали този е добре).
.clear каде да е сложа?
и това с "center" и "right" не го разбрах,
иначе си оправих div - овете.
 
Направил си ги добре, но трябваше да им размениш местата, но не слагай толко много ляв маргин на дивовете #center и #right (и на двата да сложиш по 70px става супер), а пък дива с class="clear" го слагаш след тези два.
Код: 
<div id="center">Center</div>
<div id="right">Right</div>
<div class="clear"> </div>
 
Е аз ако сложа 70px те ми седят един под друг колоните.
И още не мога да вдигна "center" и "right" колоната на горе.
 
Нали ти казах първо се слага централния, а после десния и на двата дива махаш левия маргин...
 
Намерих ето това нещо в интернета.
http://csscreator.com/version2/pagelayout.php
 
Пак не си ги подредил как трябва...
Първо трябва да е левия див, после централния и най-накрая десния.
 
Е получи се това с размяната.
А аз пък си мислих че няма значение как ще бъдат разположени.
 
Е не няма такова нещо, ако искаш да ти излиза добре под всички браузъри без да имаш отрицателни маргини. Първо трябва да го обмислиш как ще стане, защото после ще се размести много и няма да можеш да го оправиш.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе