Какво ново?
От:
Подробно търсене…
SearchEngines.bg

Това е примерно съобщение за гост. Регистрирайте безплатен акаунт днес, за да станете потребител на SearchEngines.bg! След като влезете, ще можете да участвате в този сайт, като добавите свои собствени теми и публикации, както и да се свържете с други членове чрез вашата лична входяща кутия! Благодарим ви!

Малко помощ за CSS

ivok

ivok

Bashmaistora
Искам да си направя една хубава CSS табличка с бекграунд имидж, в която да си попълвам параметри на продукти.

Ето тук има как изглежда: http://www.lightinguniverse.com/wal...isku=2370287&linkloc=cataLogProductItemsImage

Таблицата е Dimensions & Weights - вижда се долната лява част на екрана.

Но нещо не успявам да го подредя. Малко помощ няма да е излишна.
Кода от техния CSS би трябвало да е това: (но повечето неща май са излишни за моя случай)
{
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-attachment: scroll;
background-clip: border-box;
background-color: #FFFFFF;
background-image: url("/images/bbox.png");
background-origin: padding-box;
background-position: center bottom;
background-repeat: repeat-x;
background-size: auto auto;
border-bottom-color: #CCCCCC;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: #CCCCCC;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: solid;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: 1px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #CCCCCC;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: solid;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: 1px;
border-top-color: #CCCCCC;
border-top-style: solid;
border-top-width: 1px;
position: relative;
}
 
За: Малко помощ за CSS

За: Малко помощ за CSS

Здравей, аз не съм много по тази част но ето тук има готина табличка с която да си играеш CSS Styling Tables тукувиш нещо съм помогнал с нея :) Успех
 
Re: Малко помощ за CSS

Мерси, но аз досега ползвах точно тази и искам да я сменя. :)
 
За: Малко помощ за CSS

За: Малко помощ за CSS

Това през firebug ли го гледаш, че така написан този css на това ми прилича. Ако да направи следното да излиза shorthand-ed в секция Style цък на стрелката и махаш отметката от Expand Shorhand Properties.

Така друго - адреса ми дава access denied, така че ако качиш снимка ще е по - добре да се ориентирам какво искаш да постигнеш.
 
  • Like
Реакции: ivok
Re: Малко помощ за CSS

Да, през FireBug.
Този сайт филтрира разни IP мрежи, една от които е на булсатком и аз имам проблем с отварянето му от някои места.
 

Прикачени файлове

  • tablecss.jpg
    tablecss.jpg
    6.6 KB · Преглеждания: 0
За: Малко помощ за CSS

За: Малко помощ за CSS

Пробвай така.
после ако трябва ще нагласяме и чистим

Това е cross-browser compatible (надявам се) - ако не сработи на ie6 FF2 и други производни ще пренапишем малко :)

HTML: 
<html>
<head>
<style type='text/css'>
	.tbl_view {
		border: 1px solid #ccc;
		background: #fff url(path/img.png) repeat-x bottom left;
		font: 12px Arial;
	}
	
	.tbl_header {
		background: #d7d7d7;
		color: #5c7890;
		padding: 12px 5px;
		border-bottom: 1px solid #ccc;
	}
	
	.tbl_row {
		padding: 5px;
	}
	
	.row_header {
		display: inline-block;
		font-weight: bold;
		width: 100px;
	}
	
	.row_data {}
</style>
</head>
<body>
<div class='tbl_view'>
	<div class='tbl_header'>Dimensions & Weights</div>
	
		<div class='tbl_row'>
			<span class='row_header'>Width</span>
			<span class='row_data'>7 inches</span>
		</div>
		<div class='tbl_row'>
			<span class='row_header'>Projection</span>
			<span class='row_data'>11 inches</span>
		</div>
		<div class='tbl_row'>
			<span class='row_header'>Height</span>
			<span class='row_data'>11 1/2 inches</span>
		</div>
	
</div>
</body>
</html>
 
Re: Малко помощ за CSS

Ето какво ти скалъпих. Не е абсолютно същия код, ама повече не ми се занимава. URL-ите трябва да си смениш за да не точи от техния сайт снимките, също да си изкараш css-а в класове.
Код: 
<div style="width: 242px;  border: 1px solid #CCCCCC;">
    <div style="height: 19px; padding: 9px 16px; font-size: 11pt; line-height: 19px;  background: url(http://sa.atgstores.com/images/layout/bboxhead.png) top repeat-x; border-bottom: 1px solid #FFFFFF;">Blaaaaaaa</div>
    <div style="padding:15px; background: url(http://sa.atgstores.com/images/layout/bbox.png) bottom repeat-x">
        <table cellpadding="5" cellspacing="2" border="0">
            <tbody>
                <tr>
                    <td style="width: 100px;">Blaaaaaaa</td>
                    <td>Blaaaaaaa</td>
                </tr>
                <tr class="trDim">
                    <td style="width: 100px;">Blaaaaaaa</td>
                    <td>Blaaaaaaa</td>
                </tr>
                <tr>
                    <td style="width: 100px;">Blaaaaaaa</td>
                    <td>Blaaaaaaa</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

едит: batzidi е пуснал преди мен, нищо сега имаш два варианта дори :p
 
Re: Малко помощ за CSS

Аз трябва само стила да направя - табличката е ясна, имам си стара и ако може без да я пипам, просто да сменя стила - фон, заглавие, рамка и тн
Може и да не го обяснявам правилно - продуктите си имат таблици с параметри в техните си страници, с попълнени такива. В CSS искам да задам стил, и когато има заявка за такъв стил - например table1 , на продуктите всички параметри да са стилизирани като table1
 
Последно редактирано:
За: Малко помощ за CSS

За: Малко помощ за CSS

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

Горе