<DIV> с фиксирана височина, проблем!

sizif · 11 Декември 2007

Здравейте!

Налага ми се да листвам имена с произволен брой символи в тясно пространство - колона с ширина от 150рх.

Пример:

Иванов,
Драганов,
Петканов,
Куче Влачев Рейсов,

Изреждам имената на един ред, разделени със запетая.
Тъй като не искам да дели едно име на два реда, когато в колоната остава малко и не може да го събере цялото реших да сложа всяко име в див с фиксирана височина (18рх) и произволна дължина.
По този начин, ако мястото не е достатъчно за цялото име (див-а) да го сваля на нов ред.

Да, ама НЕ

При ФФ се получава, зададох хидън на онова, к излиза от размера на колоната и всичко е ОК, но при ИЕ див-а се разтяга на височина, за да запълни празнините и така получавам следното нещо:

Код:

Иванов, Драганов,
Петканов,  Куче
                   Влачев
                   Рейсов

Т.е вместо да свали целия див на нов ред, той го разтяга без да ебава фиксираната височина.

Ето шаблона:
div.vert
{
height:18px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align:left;
border: solid 1px red
}

Ако добавя селектор, с който да скрие онова, к не се събира в див-а:

overflow:hidden;

защото името може да се окаже по-дълго от събиращото се в 150-те рх на колоната, ИЕ просто скрива Влачев и Рейсов (по примера по горе), а не сваля див-а долу където има неограничено място

Какво решение бихте ми предложили и има ли начин да задам фиксиран размер на височина, к да си остане фиксиран?

Благодаря предварително!

skatebord · 11 Декември 2007

Чакай, чакай... 3км описание неразбрах почти нищо :roll:
Искаш ако има:

Код:

Пешо Пешев Пешкин

И неможе да се събере на един ред да показва:

Код:

Пешо 
Пешев 
Пешкин

Така ли ?

sizif · 12 Декември 2007

Искам това:

Да стане като това:

Иначе казано, "Кибрит Зебра" да слезе на нов ред, а не да се свива така...

Първата снимка е от ИЕ, втората през ФФ. Искам при ИЕ да се получи същото, както при ФФ.

Благодаря за вниманието към темата!

Dido_net · 12 Декември 2007

А не можеш ли да го направиш с php... ако името е по-дълго да слага <br> пред него? :roll:

DJCharge · 12 Декември 2007

Ами ако направиш да заменя " " с " " дали няма да стане? :roll:

jooorooo · 12 Декември 2007

Нещо такова:

Код:

<style type="text/css"> 

#konteiner 
{ 
width: 250px; 
} 
.div{  
border: 1px solid;
float:left; 
margin: 2px;
padding: 10px;
} 

</style> 

<div id="konteiner">

<div class="div">Иван</div>
<div class="div">Петкан</div>
<div class="div">Драган</div>
<div class="div">Много дълго име</div>
<div class="div">Кибрит "Зебра"</div>
<div class="div">Много дълго име</div>
<div class="div">Драган</div>
<div class="div">Кибрит "Зебра"</div>
<div class="div">Много дълго име</div>
<div class="div">Кибрит "Зебра"</div>
<div class="div">Драган</div>
<div class="div">Много дълго име</div>
<div class="div">Кибрит "Зебра"</div>

</div>

sizif · 12 Декември 2007

Здравейте!

С <БР> не е изгодно - повечето имена ще са къси и само ще разтягам колоната на дължина....

замяната на интервала беше първото, за което се сетих, но при overflow:hidden; ще скрие цялото име, а без браузъра да крие остатъка, дълите псевдоними биха могли да надхвърлят общата ширина от 150 рх..

Основният момент е, че се опитвам да спестя ненужни операции на сървъра, иначе мислех с броене на символите, рязане и слагане на интервали, но очаквам здрав рефреш на страниците (а това го листвам на всяка) и подобно форматиране се превръща в излишен лукс, ако не се извършва от браузъра...

Имам още 2-3 дни да реша, как да постъпя, ако не мога да го направя с цсс, ще ги листвам на един ред, разделени със запетая...

Благодаря, че следите темата!

shterev · 12 Декември 2007

защо не пробваш така: * html .ne6tosi { height: вискочината която исакш} това го пишеш за див-а,който искаш да има фиксирана височина.
В момента не се сещам за друго,което съм сигурен ,че има.Пробвай!
И според мен е достатъчно само това: margin:0px; след като искаш да е нулево навсякъде.

shterev · 12 Декември 2007

А след като имаш изброяване не използваш:
<ul>
<li>name</li>
<li>name1</li>
<ul>
Пак си флоатваш ли-тата и задаваш стйност на ул-то да не показв точките.?????

sizif · 12 Декември 2007

shterev,
не се сърди, но не четеш

Не искам всяко име на нов ред. Искам да слезе на нов ред само, ако не може да се събере... Не виждам с какво списъка ще ми помогне...
По другото предложение - задал съм височина на Див-а - виж в първия ми пост по темата. Проблема е, че ИЕ постъпва с див-овете така както с таблиците - разтяга ги въпреки фиксираните размери

Благодаря все пак, че се включваш!

shterev · 13 Декември 2007

Я си дай целия код???

sizif · 13 Декември 2007

.vert
{
color: #5d5d5d;
font-family: Tahoma;
font-size: 11px
}

.vert a {
font-weight: bold;
font-family: Tahoma
}

.vert a:visited {
font-weight: bold;
font-family: Tahoma
}

.vert a:hover {
font-weight: bold;
font-family: Tahoma
}

div.vertFriends
{
height:18px;
line-height:18px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align:left;
overflow:hidden;
border: none
}

останалото в шаблона е без значение...

Код:

<TABLE CLASS="vert" CELLSPACING=0 BORDER=0 CELLPADDING=0 WIDTH=156>
<TBODY>
<TR><TD ALIGN="LEFT" VALIGN="TOP" WIDTH=156>
<DIV CLASS="vertFriends"><A HREF="">Иван</A>,  </DIV>
<DIV CLASS="vertFriends"><A HREF="">Драган</A>,  </DIV>
<DIV CLASS="vertFriends"><A HREF="">Петкан</A>,  </DIV>
<DIV CLASS="vertFriends"><A HREF="">Някой с много дълго име имеимеиме</A>,  </DIV>
<DIV CLASS="vertFriends"><A HREF="">Кумчо Вълчо</A>,  </DIV>
<DIV CLASS="vertFriends"><A HREF="">Кибрит "Зебра"</A>,  </DIV>
</TD></TR>
</TBODY></TABLE>

Тази таблица се намира в колона от 170 рх, без бордър, падинг и марджин - 0. Останалото не е важно...
Кода е с етикет за валидация

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

макар че реално ще изкара доста съобщения за грешка, но мен ме интересува интерпретацията на браузъра, не следването на стандарта...

Ориентираш ли се?

DJCharge · 13 Декември 2007

Ами аз друг начин освен...

.vert
{
color: #5d5d5d;
font-family: Tahoma;
font-size: 11px
}

.vert a {
font-weight: bold;
font-family: Tahoma
}

.vert a:visited {
font-weight: bold;
font-family: Tahoma
}

.vert a:hover {
font-weight: bold;
font-family: Tahoma
}

div.vertFriends
{
height:18px; <- махаме
line-height:18px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align:left; <- махаме
overflow:hidden; <- махаме
border: none
}

<TABLE CLASS="vert" CELLSPACING=0 BORDER=0 CELLPADDING=0 WIDTH=156>
<TBODY>
<TR><TD ALIGN="LEFT" VALIGN="TOP" WIDTH=156>
<DIV CLASS="vertFriends"><A HREF="">Иван</A>, </DIV>
<DIV CLASS="vertFriends"><A HREF="">Драган</A>, </DIV>
<DIV CLASS="vertFriends"><A HREF="">Петкан</A>, </DIV>
<DIV CLASS="vertFriends"><A HREF="">Някой с много дълго име имеимеиме</A>, </DIV>
<DIV CLASS="vertFriends"><A HREF="">Кумчо Вълчо</A>, </DIV>
<DIV CLASS="vertFriends"><A HREF="">Кибрит "Зебра"</A>, </DIV>
</TD></TR>
</TBODY></TABLE>

.. не виждам просто :roll: освен да сложиш лимит и на името, за какво ти са толкова дълги ? А защо да не са само от 1 дума ? И непременно ли трябва да са в DIV ? :idea:

iwanov · 13 Декември 2007

Пробва ли да зададеш да речем

Код:

position: absolute;
	left:0px ;
	width: 150px ;
	height: 200px;

absolute (абсюлютно)
relative (относително)
fixed (фиксирано)

sizif · 14 Декември 2007

DJCharge,
без overflow:hidden; ще трябва да броя символите и да режа, а това е операция за сървъра...

Не държа да е с див, просто искам такъв резултат (като от снимка 2) без да намалявам името (35 символа) и без да ангажирам сървъра...

iwanov,

ако задам дължина, обезсмислям цялата операция, защото искам дължината да зависи от дължината на името

Благодаря, че се включвате!

jooorooo · 14 Декември 2007

погледна ли кода който ти дадох? не става ли с него?

sizif · 14 Декември 2007

jooorooo,

видях го. Пробвах преди да пусна темата да кодирам интервалите. Би се получило, но имената са до 35 символа и задължително трябва да крия остатъка (като идеята е, че дългите имена ще са от поне 2 части), а така брои всичко за едно и го скрива изцяло..

Струва ми се, че няма читаво решение

jooorooo · 14 Декември 2007

а нещо такова? 2 кода са

Код:

<style>
.trunc { color: #555; background: white; }
</style>
<span title="soooooooooooooooooooooooooooooooooooooooooo ooooooooo">
soooo<span class="trunc">[…]</span>ooo</span>

Код:

<div style="background-color: #ff0; display: block; width: 400px; height: 150px; overflow: hidden; padding: 0; font: 10pt verdana, arial, geneva, sans-serif; line-height: 15px;"> 
<div style="background-color: #ff0; z-index: 5; padding: 0; width: 150px; position: relative; top: 135px; left: 280px; font: 8pt verdana, arial, geneva, sans-serif; line-height: 15px;">  ... [<a href="test">read full article</a>] </div> 
<div style="position: relative; top: -15px; width: 400px; height: 150px; overflow: hidden; padding: 0; font: 10pt verdana, arial, geneva, sans-serif; line-height: 15px;"> 

Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here com
Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here com
Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here com
es your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. 
Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here comes your text. Here com

</div> 
</div>

sizif · 14 Декември 2007

Първия не разбрах, как бих могъл да го използвам, втория също ме обърква...

Пробвах го, но не подрежда до него, а винаги сваля на нов ред. Нещо не правя, както трябва?

<DIV> с фиксирана височина, проблем!

sizif

Registered

skatebord

Registered

sizif

Registered

Dido_net

Registered

DJCharge

Registered

jooorooo

Registered

sizif

Registered

shterev

Registered

shterev

Registered

sizif

Registered

shterev

Registered

sizif

Registered

DJCharge

Registered

iwanov

Registered

sizif

Registered

jooorooo

Registered

sizif

Registered

jooorooo

Registered

sizif

Registered