Jak zrobić pionowe kreski, linie na stronie


(Sgrabka) #1

Jak zrobić pionowe linie na stronie o określonej długości i szerokości ?


(athei) #2

Może div , nadaj mu wysokość, szerokość, jakieś tło albo obramowanie ...


(Sgrabka) #3

a możesz pokazać na przykładzie ?


(Mariuszs) #4
[/code]

http://www.kurshtml.boo.pl/html/hr,html.html


(athei) #5

@z4nzi - nie odróżniasz poziomu od pionu? http://www.w-sieci.2-0.pl/kraj/pisanie.htm


(Mariuszs) #6

Daruj sobie te złośliwości. Wcześniej kolega pytał mnie na priv m.in. o poziome linie i myślałem, że nie zrozumiał (dostał linki do angielskich stron). Zwykłe niedopatrzenie. Wracając do tematu to jedynym wyjściem wydaje mi się użycie specjalnego tła zawierającego linię.


(Sgrabka) #7

Poziome linie już opanowałem :smiley: , http://www.poradnik-webmastera.com/kursy/html/bloki.php , ale teraz mi chodzi o pionowe linie , tło raczej odpada wzorując się na szablonie z http://andreasviklund.com/templates/andreas02/ jest tam po prawej stronie pionowa linia , tu jest cały plik CSS

/* andreas02 - an open source xhtml/css website layout by Andreas Viklund (http://andreasviklund.com). Made for OSWD.org, free to use as-is for any purpose as long as the proper credits are given for the original design work. For design assistance and support, contact me through my website or through http://oswd.org/email.phtml?user=Andreas

Version: 1.0

(July 27, 2005)

Screen layout: */

body {

padding: 0;

margin: 0;

font: 76% tahoma, verdana, sans-serif;

background: #e0e0e0;

color: #303030;

}

a {

text-decoration: none;

color: #286ea0;

}

a:hover {

text-decoration: underline;

}

toptabs {

margin: 10px auto -13px auto;

font-size: 0.8em;

width: 1024px;

}

toptabs p {

text-align: right;

color: #808080;

}

.toptab {

padding: 3px 5px 3px 5px;

margin: 0 0 0 4px;

text-decoration: none;

background: #f0f0f0 url(images/corner2.gif) top right no-repeat;

color: #808080;

border-bottom: 1px solid #e0e0e0;

}

.toptab:hover {

background: #fafafa url(images/corner2.gif) top right no-repeat;

border-bottom: 1px solid #eaeaea;

color: #505050;

text-decoration: none;

}

.activetoptab {

padding: 3px 5px 3px 5px;

margin: 0 0 0 4px;

color: #505050;

text-decoration: none;

background: #ffffff url(images/corner2.gif) top right no-repeat;

border-bottom: 1px solid #ffffff;

}

.activetoptab:hover {

text-decoration: none;

}

container {

margin: 0 auto 15px auto;

width: 1024px;

padding: 5px 20px 20px 20px;

background: #ffffff;

}

logo {

margin: 15px 0 0 0;

}

logo h1 a {

color: #303030;

}

logo h1 a:hover {

text-decoration: none;

}

navitabs {

clear: both;

}

.navitab {

padding: 4px 8px 4px 8px;

margin: 0 0 4px 0;

text-decoration: none;

letter-spacing: 1px;

background: #e0e0e0 url(images/corner.gif) top right no-repeat;

border-bottom: 1px solid #ffffff;

border-left: 1px solid #ffffff;

}

.navitab:hover {

text-decoration: none;

background: #d0d0d0 url(images/corner.gif) top right no-repeat;

}

.activenavitab {

padding: 4px 8px 5px 8px;

color: #ffffff;

margin: 0 0 5px 0;

text-decoration: none;

background: #505050 url(images/corner.gif) top right no-repeat;

}

.activenavitab:hover {

text-decoration: none;

}

desc {

height: 200px;

color: #ffffff;

padding: 0;

background: #505050 url(images/front.jpg) top left no-repeat;

clear: both;

margin: 5px 0 0 0;

}

desc p {

width: 290px;

font-size: 1em;

line-height: 1.3em;

padding: 0 0 0 15px;

}

desc h2 {

padding: 15px 15px 0 15px;

color: #ffffff;

}

desc a {

color: #ffffff;

text-decoration: underline;

}

main {

width: 400px;

float: left;

padding: 0 15px 0 0;

border-right: 1px solid #d0d0d0;

border-left: 1px solid #d0d0d0;

}

.block {

background: #f0f0f0;

padding: 15px;

}

sidebar {

width:140px;

float:right;

}

sidebar p {

font-size: 0.9em;

line-height: 1.3em;

margin: 0 0 12px 0;

}

.sidelink {

text-align: left;

display: block;

width: 120px;

background: #f0f0f0 url(images/corner.gif) top right no-repeat;

padding: 3px 4px 3px 8px;

margin: 5px 10px 5px 0;

}

.sidelink:hover {

background: #e0e0e0 url(images/corner.gif) top right no-repeat;

text-decoration: none;

}

footer {

clear: both;

background: #fafafa;

color: #808080;

font-size: 0.9em;

padding: 8px 0 8px 0;

border-top: 1px solid #d0d0d0;

border-bottom: 1px solid #d0d0d0;

text-align: center;

}

footer a {

color: #808080;

}

h1 {

margin: 0 0 20px 0;

font-size: 2.1em;

font-weight: normal;

}

h2 {

margin: 0 0 20px 0;

font-size: 1.6em;

font-weight: normal;

}

h3 {

margin: 20px 0 10px 0;

font-size: 1.4em;

font-weight: normal;

}

p {

margin: 0 0 15px 0;

line-height: 1.5em;

text-align: left;

}

.right {

text-align: right;

}

a img {

border: 0;

}

.photo {

padding: 5px;

display: block;

margin: 0 auto 15px auto;

background-color: #f0f0f0;

}

.hide {

display: none;

}

/* Main content */

content {float:right; line-height:1.5em; margin:0; padding:0; text-align:left;}

contentalt {float:left; line-height:1.5em; margin-right:20px; padding:0; text-align:left; width:750px;}


(Mariuszs) #8

Wystarczy wstawić dodatkową pustą ramkę okalającą i wypełnić transparentnym tłem z linią. Innej możliwości nie widzę.


(Maciej Szankin) #9

A w jakim sensie chcesz wstawić tą pionową linię? Ma być sama z siebie?

[/code] Czy między jakimiś obiektami? -> obramowanie z jednej strony?
[code]

Nie wiem, czy o to Ci chodziło.


(Sgrabka) #10

I zrobione :smiley:

kod html

"


(esc) #11

Sharapova a jak nadać kolor :?: