Witam.
Mam stronę :
http://bordeux.jatsu.pl/test/
Jak dodać prawą i lewą cześć ramki? Już się przy tym meczę 3 godziny :<
http://bordeux.jatsu.pl/test/img/frame-left.gif <- to lewa część ramiki
http://bordeux.jatsu.pl/test/img/frame-right.gif <- prawa cześć ramiki
border-left i border-right??
Eee tam... Chodzi mi o divy po bokach, z tłem http://bordeux.jatsu.pl/test/img/frame-left.gif po prawej lewej stronie a http://bordeux.jatsu.pl/test/img/frame-right.gif po prawej.
Zrób analogicznie jak narożniki w górnej i dolnej części
<div id="left"><div id="right"><div id="content">Treść</div></div></div>
Też tak kombinowałem, ale efekt :
http://bordeux.jatsu.pl/test4/
cos na wzor tego:
<div id="leftcolumn" float: left; left: 0px; top: 100px;"></div>
i jeszcze po prawej stronie:
<div id="rightcolumn" float: right"></div>
HideYoshi: Wow. Tylko jest jedna sprawa. Jak ustawić wysokość tych kolumn? By była równa wysokości zawartości tego okienka?
Spiąłem tyłek i coś wyszlo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style>
body {
background: #2d5882 url(img/background.gif) repeat-x;
margin: auto;
}
#top-right {
height: 10px;
background: url(img/right-top.gif) no-repeat 0 0;
display:table-cell;
}
#top-left {
height: 10px;
background: url(img/left-top.gif) no-repeat 0 0;
display:table-cell;
}
#top-middle {
height: 10px;
display:table-cell;
background: url(img/top-middle.gif) repeat-x 0 0;
}
#frame-left {
width:7px;
display:table-cell;
background: url(img/frame-left.gif) repeat-y 0 0;
}
#frame-right {
width:7px;
display:table-cell;
background: url(img/frame-right.gif) repeat-y 0 0;
}
#bottom-left {
height: 7px;
background: url(img/bottom-left-c.gif) no-repeat 0 0;
display:table-cell;
}
#bottom-middle{
height: 7px;
display:table-cell;
background: url(img/bottom-middle.gif) repeat-x 0 0;
}
#bottom-right {
height: 7px;
background: url(img/bottom-right-c.gif) no-repeat 0 0;
display:table-cell;
}
#content {
background-color: #FFFFFF;
padding: 10px 30px
}
</style>
<div style="display:table; margin:auto;">
<div style="display:table-row">
<div id="top-left"> </div>
<div id="top-middle"></div>
<div id="top-right"></div>
</div>
<div style="display:table-row">
<div id="frame-left"> </div>
<div id="content">ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
<div id="frame-right"></div>
</div>
<div style="display:table-row">
<div id="bottom-left"> </div>
<div id="bottom-middle"></div>
<div id="bottom-right"></div>
</div>
</div>
Pięknie chodzi na przeglądarkach, tylko g**no słabo przyswaja, tzn Internet Explorer. Heh :<
nav napisał(a)
Zrób analogicznie jak narożniki w górnej i dolnej części
<div id="frame-left"><div id="frame-right"><div id="content">Treść</div></div></div>
#frame-right {
background:transparent url(img/frame-right.gif) repeat-y scroll right top;
margin-right:-7px;
}
#frame-left {
background:transparent url(img/frame-left.gif) repeat-y scroll left top;
margin-left:-7px;
}
nav: Cudotwórca!
Co prawda jeszcze nie całkiem hula na IE, ale pokombinuje :D
Bo zupełnie niepotrzebnie wymyślasz magie z ujemnymi marginesami.
nav: wymyślam tą magię, by nie było tego efektu:
A jak to zrobić bez ujemnych marginesów, by nie było tego efektu?
Usuń tło div'owi okalającemu (bg-color: transparent), dodaj div centralny, który będzie miec odpowiednie tło i po sprawie.
nav napisał(a)
Usuń tło div'owi okalającemu (bg-color: transparent), dodaj div centralny, który będzie miec odpowiednie tło i po sprawie.
Rozumiem że masz na myśli div #wrapper . Ok. Można usunąć background, ale te białe resztki
To są od górnego obramowania:
tutaj jest wynik: http://bordeux.jatsu.pl/test7/
Zrób rogi analogicznie do bloku środkowego. Nie 2 divy z floatami, a 3 zagnieżdżone. Wtedy #top-frame tla miec nie powinien, a tylko ten co jest w srodku.
Trudno się przyznać do swojego debilizmu w prostych sprawach, ale;
Nie jarze.
Robiłem według twego słowa - przynajmniej tak mi się zdaje- lecz zawsze niepowodzenie.
// transparent
// obrazek lewego rogu, position top left, no-repeat, padding-left=szer. naroznika
// obrazek prawego rogu, position top right, no-repeat, padding-right=szer. naroznika
// srodek - tlo górnej krawedzi
</p>
```
pozostale czesci analogicznie.
Działa idealnie! Dzieki
http://bordeux.jatsu.pl/test8/