Jump to content
  • 0

тень и отступы - не совместимы?


ol-chik
 Share

Question

добрый день.

верстаю страницу с помощью таблиц.

страница располагается по центру следующим образом:

вся таблица ширина 100% середина фиксированная. правая и левая колонка - плавающая.

необходимо сделать тень от левой таблицы.

указываю cellspacing="0" cellpadding="0" в атрибутах таблицы. при этом автоматически убирается все отступы которые указана для текста в таблице и т.д.

и позиционирование по центру пропадает.

подскажите как можно исправить? или лучше все на слоях сделать?

если на них то как там возможно сделать позиц. по центру.

страница имеет фиксированную длину и ширину.

Спасибо всем.

зы. спасибо за сайт.

:(

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

я девочка)) спасибо что ответили.

вот написала такое

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>


<body style=" background-color:c3af8b; margin:0px padding:0px;">
<center>
<table cellspacing="0" cellpadding="0" border=0 width=100% height=100%>
<tr> <td> </td></tr>

<tr>
<td >
</td>
<td style=" background-color:ffffff;" width="299" height=705 valign="top" >
<table cellspacing="0" cellpadding="0" border=0 width=100% height="100%" >
<tr>
<td style="padding-left::50px; margin:10px; font:tahoma 12pt; color:acaaa8;" height="10" colspan="2">RUS/ENG

</td>

</tr>
<tr>
<td height=105> </td>
</tr>

<tr>
<td style="background-image: url('imageslogo.jpg'); background-repeat: no-repeat;" height="99" colspan="2" >
</td>
</tr>

<tr>
<td height=45>

</td>

</tr>


<tr> <td width="147" height=100%> </td> <td> ìåíþøêà
vty.irf2 </td></tr>

<tr>
<td colspan="2" height=6>

<table width=299 cellspacing="0" cellpadding="0" >
<tr>
<td style="background-image: url('imagesg1.jpg'); background-repeat: no-repeat;" height=6 width=6>

</td>

<td style="background-image: url('imagesg2.jpg'); background-repeat: repeat-x;" width=293 height=6 >
</td></tr>

</table>

</td>
</tr>


</table>


</td>

<td style=" background-color:ffffff;" width=7 height="705">
<table width=100% height=100% cellspacing="0" cellpadding="0">
<tr>
<td style="background-image: url('imagesv1.jpg'); background-repeat: no-repeat;" height=5>

</td>
</tr>
<tr>
<td style="background-image: url('imagesv2.jpg'); background-repeat:repeat-y;" >

</td>
</tr>

<tr>
<td style="background-image: url('imagesv3.jpg'); background-repeat: no-repeat;" height=6>

</td>
</tr>
</table>
</td>

<td style=" background-color:ffffff;" width="434" height=705> òåêñòóõà</td>

<td style=" background-color:ffffff;" width="254" height="705"> êàðòèíêà</td>
<td > </td>
</tr>




<tr> <td> </td></tr>

</table>

</center>
</body>
</html>

хочу что бы было так....

02hl2.jpg

Link to comment
Share on other sites

  • 0

на скорую руку набросал, может быть поможет, но яб то же картинкой но не топорно.

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
border: none;
}
body {
background-color: #CC6600;
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: gray;
}
#left {
width: 300px;
height: 500px;
margin: 40px;
position: relative;
float: left;
border: 1px solid #404040;
}

#menu {
width: 300px;
height: 500px;
background-color: #fff;
position: relative;
z-index: 2;
}
#shadow {
width: 300px;
height: 500px;
position: absolute;
left: 5px;
top: 5px;
background-color: #404040;
z-index: 1;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#content {
background-color: #fff;
border-top: 50px solid #CC6600;
border-left: 300px solid #CC6600;
border-right: 50px solid #CC6600;
}
p {
margin: 0;
padding: 10px;
}
img {
width: 100px;
height: 50px;
border: 1px solid #404040;
float: right;
margin: 10px;
}
/*]]>*/
</style>
</head>

<body>
<div id="left">
<div id="menu">
</div>
<div id="shadow">
</div>
</div>
<div id="content">
<img src="#" alt="Типа картинка" />
<p>добрый день. верстаю страницу с помощью таблиц. страница располагается по центру следующим образом: вся таблица ширина 100% середина фиксированная. правая и левая колонка - плавающая.
необходимо сделать тень от левой таблицы.
указываю cellspacing="0" cellpadding="0" в атрибутах таблицы. при этом автоматически убирается все отступы которые указана для текста в таблице и т.д.
и позиционирование по центру пропадает.
подскажите как можно исправить? или лучше все на слоях сделать?
если на них то как там возможно сделать позиц. по центру.
страница имеет фиксированную длину и ширину.
Спасибо всем.

зы. спасибо за сайт.
</p>
</div>
</body>

</html>

Link to comment
Share on other sites

  • 0
вся таблица ширина 100% середина фиксированная.
страница имеет фиксированную длину и ширину.

взгляните на предоставленный вами код, внем каждая колона фиксирована.

правая и левая колонка - плавающая.

Посмотрите на маке в нем нет смысла делать левую и правую часть плавающую, что там собственно плавать то будет ?

слева меню ? так там логотип во всю колонку, справа картинки ?, картинки 100% фиксированные будут, а самое главное куда они будут плавать ?. :(

итого по моим наблюдениям ширина рабочей области равна 998px высота 760px.

исходя из этих данных набросал

таблицей

:( нет :( Дивами

качнуть дистриб, бесплатно :)

Link to comment
Share on other sites

  • 0
Scrum, ты верно переутомился, ибо начал рожать такие линки

[url=http:http://www.homeblog.jino-net.ru/test/for ol-chik.rar]качнуть дистриб, бесплатно[/url]

валидная ссылка

оoo сенкс :( действительно устал с этим макетом.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy