Autor Zpráva
kukinka
Profil *
Je to asi úplná blbina čo sa chcem spýtať, ale stále na to neviem dojsť. Ako si mám urobiť taký rámik ako je napr. na stránke http://paola-new.wz.cz/web.html myslim to biele čo ohraničuje stránku. Ako to mám spraviť keď používam program NVU? Možno to s tým ani nesúvisí, ale spýtať sa musím.
bojars
Profil
Je to obyčajný (z internetu stiahnutý) tabuľkový layout. To biele ohraničenie je vlastne CSS atribút border:

Tu máš niečo podobné, lae jednoduchšie, ulož si to ako *.html a pozri v prehliadači:

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

<html>
<head>
<title>Kostra tabuľkového layoutu</title>
</head>
<style type="text/css">
body {background-color: #333366; color: #ffffff;}
table {border-collapse: collapse;}
td {border: 1px solid #ffffff;; vertical-align: top; padding: 1ex;}
a {display: block; padding: .2ex; color: yellow;}
a:hover {background-color: yellow; color: blue;}
a.lorem {display: inline; padding: .5ex; color: yellow;}
a:hover {background-color: yellow; color: blue;}
</style>
<body>
<table>
<tr>
<td colspan="2" width="720" height="150"><h1>Superstránka</h1>
<p>Môže tu byť aj banner</p></td>
</tr>
<tr>
<td width="150" height="500">
<a href="#" title="Pseudomenu">Odkaz</a><br />
<a href="#" title="Pseudomenu">Odkaz</a><br />
<a href="#" title="Pseudomenu">Odkaz</a><br />
<a href="#" title="Pseudomenu">Odkaz</a><br />
<a href="#" title="Pseudomenu">Odkaz</a><br />
<a href="#" title="Pseudomenu">Odkaz</a><br />
</td>
<td>
<h2>Lorem Ipsum - All the facts - Lipsum generator</h2>
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam commodo ante vel mi. Vestibulum arcu lorem, rutrum vel, facilisis ac, congue in, velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus tristique, nibh adipiscing blandit mollis, diam metus vehicula justo, eget sollicitudin est nulla aliquam leo. Vivamus dapibus nisl non ante.</p>
<p>Proin in neque vitae lectus tincidunt mattis. Etiam condimentum pretium quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ante eros, sollicitudin sit amet, placerat luctus, volutpat non, nisl. Mauris fringilla odio eu lorem. Proin quis massa at lorem ultrices bibendum. Phasellus scelerisque facilisis lorem.</p>
<p>Nullam est turpis, ultricies quis, posuere eu, tempor vitae, nibh.</p>
<h3>Pellentesque congue tortor in diam egestas accumsan. Ut velit.</h3>
<p>Phasellus risus. Quisque vel ipsum a diam placerat facilisis. Etiam eu ante. Integer consequat viverra arcu. Proin semper elit eget sem.</p>
<p>Fusce scelerisque, velit laoreet lacinia dictum, dui mauris sollicitudin orci, nec pharetra mi mi id augue. Maecenas urna. Duis at augue. Praesent eget libero sed dui faucibus bibendum. Duis porta. Nam tempor, wisi vel condimentum vulputate, magna leo aliquam nisl, quis ullamcorper quam metus a augue. Integer lobortis neque sed tortor. Aenean eu libero ac pede aliquam tristique. Nullam ipsum. Maecenas blandit congue sem. Maecenas vitae mauris sed dolor venenatis porttitor. Nunc sit amet erat eu felis adipiscing tincidunt.</p>
<p>In nec leo. Aliquam erat volutpat. Donec nibh elit, luctus nec, commodo nec, congue nec, est. Mauris elementum laoreet nisl. Donec lacinia venenatis leo. Pellentesque sit amet wisi et nulla tincidun dapibus. In eu tortor. Etiam pellentesque egestas quam. Vestibulum viverra lorem. In rutrum tincidunt erat. Integer vel turpis. Duis et ligula in arcu gravida tincidunt. Proin tincidunt dolor ac ante.</p>
<p>Integer sit amet purus semper mauris elementum imperdiet. Vivamus id dolor. In semper dui egestas lorem. Mauris venenatis lacinia quam.</p>
<p>Nunc ornare ante non ligula iaculis eleifend. Morbi ipsum velit, rutrum sit amet, convallis eget, porta in, justo. Etiam nulla mi, sodales in, lobortis et, consequat id, est.</p>
<p>Donec sapien odio, rutrum eleifend, accumsan pulvinar, sagittis non, quam. Nunc condimentum congue nulla. Mauris aliquam, neque vitae porttitor ullamcorper, metus lacus suscipit velit, ac elementum diam lectus et pede. Suspendisse ac massa vel dui dignissim ornare.</p>
<p>Mauris facilisis lobortis augue. Mauris et enim eu ante vulputate sollicitudin. Donec viverra velit id lorem. Curabitur nunc mi, eleifend a, pharetra et, auctor vitae, purus. Proin mollis. Morbi ac odio eget nunc tristique tempus.</p>
<p>Proin fermentum massa. Nunc tincidunt turpis non purus. Integer wisi quam, tincidunt ac, fermentum non, pharetra id, odio. Aliquam erat volutpat. Duis eget ipsum. Vivamus bibendum sem. Etiam tristique liquam nulla. Nam feugiat nisl nec sapien porttitor aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque bibendum adipiscing lectus.</p>
</td>
</tr>
<tr>
<td colspan="2"><h5>Povered By <a class="lorem" href="#">Lorem Ipsum</a> 10 minút roboty vo 1st Page 2000</h5></td>
</tr>
</table>


</body>
</html>
kukinka
Profil *
skusim to, diky
kukinka
Profil *
a ako to mam spravit, ked si chcem dat taky ram do svojej stranky?
peta
Profil *
<style>
body {magin:6px;border:1px solid #fff}
</style>
<body>
straaaanka
</body>

kukinka kdyz reknes, kde mas stranku, muzeme ti presne rici, kam co napsat. Nevim, co je NVU, ja delam stranky v programu velmi podobnemu "poznamkovemu bloku" Neboli pisi primo pismenka, co se kde ma jak zobrazit.
peta
Profil *
bojars problem s border collapse je jeste takovy, ze musis mit:
border-spacing:0;_border-collapse:collapse;
colapse je totiz IEckova vlastnost, normalne se to nazyva border-spacing
kukinka
Profil *
aha, tak tomu rozumiem ešte menej
Radek Hrabůvka
Profil
peta colapse je totiz IEckova vlastnost, normalne se to nazyva border-spacing
Kde jsi vzal takovou moudrost?
http://www.w3.org/TR/REC-CSS2/tables.html
http://www.w3.org/TR/CSS21/tables.html
Kolapsové rámečky (border-collapse:collapse;) umí všechny prohlížeče z "velké trojky", a předpokládám, že další moderní taky (Safari nemám).
Toto téma je uzamčeno. Odpověď nelze zaslat.

0