нещо като заоблени краища но с картинки

[Maistorcheto]

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


П.С. и един въпрос извън темата кои е по-добрия начин за оформяне на сайт с таблица,фреймове,или див-тагове [/url]

 

[shterev]

Най-добрия метод за в момента е с дивове.Таблиците се ползват за таблична информация.
А за 3-те картинки се прави така:

css:

.top {
width:300px; height:10px;
font-size:0px; line-height:0px; /* тук се нулират за да няма проблем в ИЕ*/
background: url(images/top_img.gif) no-repeat left top;
}

.center {
width:300px; color:#cccccc; font-size:12px;
background: url(images/center_img) repeat-y left top; /* тук задаваме картинката която се повтаря по вертикала*/
}

.bottom {
width:300px; height:10px;
font-size:0px; line-height:0px; /* тук се нулират за да няма проблем в ИЕ*/
background: url(images/bottom_img.gif) no-repeat left top;
}

html:

<div class="top"></div>
<div class="center">
Lorem ipsuim is simply dummy text used in ...
Lorem ipsuim is simply dummy text used in ...
Lorem ipsuim is simply dummy text used in ...
Lorem ipsuim is simply dummy text used in ...
Lorem ipsuim is simply dummy text used in ...
Lorem ipsuim is simply dummy text used in ...

</div>
<div class="bottom"></div>

 

[Maistorcheto]

мерси много колко е било лесно но като съм нооб е трудно

 

[shterev]

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

.top{
   width:300px; padding-top:10px; 
   background: utl(top.gif) no-repeat left top;
}
.bottom {
  padding-bottom:10px;
  background: utl(bottom.gif) no-repeat left bottom; /* тук не се повтаря а и е позиционирана долу- така след като се разпъва дива на долу картинката ще е винаги долу на дива,вечв сависи колко щв се разпъва за да знаеш долу горе колко да е висока*/
}

<div class="top">
   <div class="bottom">
             info
   </div>
</div>

p.s. има и още един вариянт, но вече много според зависи.

 

[Maistorcheto]

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

 

[shterev]

дай да видим какво си направил? Иначе с малко падинг и става номера.

 

[Maistorcheto]

http://aion.hit.bg/ виж как е текста и също така под firefox u opera върху менюто където пише Home седи надигнато,а не прилепено както при IE7 и това ако може да ми кажете как да го оправя

 

[shterev]

.center {
background:transparent url(img/center.png) repeat-y scroll 0 0;
padding:10px 10px;
width:630px;
}

.txt {
left:300px;
position:absolute;
top:63%;
}

 

[Maistorcheto]

мерси много оправих го с

.center { 
background:transparent url(img/center.png) repeat-y scroll 0 0; 
padding:10px 10px; 
width:630px; 
}

но как да оправя меню-то с FF да не се вижда така

вижте как м/у Home u Aion Свят има растояние ето и кода ако ще помогне

.topmenu { 
width:159px; height:32px; 
font-size:0px; line-height:1px;
background: url(img/menubg1.png) no-repeat; 
} 

.centermenu { 
width:159px;
background: url(img/menucenter.png) repeat-y;
} 

.bottommenu { 
width:159px; height:20px; 
font-size:0px; line-height:0px;
background: url(img/menubg2.png) no-repeat; 
}

същия като първия

 

[shterev]

.txt2 {
left:141px;
position:absolute;
top:36%;
}

Проблема ти идва от тези абсолюти, и така с този процент дигаш дива на горе и тои скрива част от елементита , както е и с частта , където е текста. Направи го да не е с посишън.

 

[shterev]

.topmenu {
background:transparent url(img/menubg1.png) no-repeat scroll 0 0;
font-size:0;
height:32px;
line-height:1px;
width:159px;
}



.urbangreymenu .headerbar {

margin:0px; /* това добави*/
}

 

[Maistorcheto]

лелее златен си направо ще трябва да те черпя
мерси много

 

[shterev]

:?:

 

[Maistorcheto]

а как да накарам флаша(меню/лого) да е под вертикалното меню и текста понеже нещо не ми се получава с z-index ако може малко инфо

 

[shterev]

http://videotutorials-bg.com/lessons.php?action=viewsub&id=39&t=261&page=2