CSS: Как може да стане

F

Foxy

Registered
ами ето го урока:
http://web-tourist.net/login/login/view.php?st=1514
правя бекграунда бял и се получава така:
bezbekgraunda.jpg

аз искам отстрани да има 2 черни линиики, но незнам как ще стане ето така:
kakiskamdastane.jpg
 
<!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">
<head>
<title>CSS Template by [PoD]MaTRiX ®Web-Tourist.net®</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="CSS Template" />
<meta name="author" content="Маритн Маринов([PoD]MaTRiX])" />
<meta name="rating" content="general" />
<meta name="revisit-after" content="1 day" />
<style type="text/css">
body {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
padding:0px;
background-color:#ffffff;
}
body,td,th {
font-family:Tahoma;
font-size:11px;
color:#FF6600;
}
a {
font-family:Tahoma;
font-size:11px;
}
a:link {
background-color:inherit;
color:#ffffff;
text-decoration:none;
}
a:visited {
background-color:inherit;
color:#ffffff;
text-decoration:none;
}
a:hover {
background-color:inherit;
color:#FF6600;
text-decoration:none;
}
a:active {
background-color:inherit;
color:#ffffff;
text-decoration:none;
}
.general {
margin:auto;
width:540px;
}
.header {
position:absolute;
margin-bottom:auto;
margin-left:auto;
margin-right:auto;
margin-top:50px;
width:540px;
height:20px;
background-color:#CC99CC;
}
.content {
position:absolute;
margin-top:71px;
width:538px;
height:530px;
background-color:#FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
}
#left {
position:absolute;
float:left;
width:120px;
height:530px;
border-right:1px dashed #666666;
}
#center {
position:absolute;
float:none;
margin-left:120px;
width:300px;
height:530px;
}
#right {
position:absolute;
float:right;
margin-left:420px;
width:120px;
height:530px;
border-left:1px dashed #666666;
}
.footer {
position:absolute;
margin-top:602px;
width:540px;
height:20px;
background-color:#CC99CC;
}
</style>
</head>

<body>
<div class="general">

<div class="header"></div>
<div class="content">
<div id="left">
<div style="padding:10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec posuere aliquet leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse enim. Mauris et enim vitae magna suscipit auctor. Morbi justo risus, vestibulum dapibus, sagittis eget, condimentum vel, nunc. Duis dictum dictum orci. Cras tristique sem ac orci. Mauris rutrum mauris vitae lorem. Etiam at neque. In est turpis, viverra sed, pretium a, fermentum eget, eros. Curabitur ut risus. Aliquam magna.</div>
</div>
<div id="center">
<div style="padding:10px;">Nullam bibendum felis eget velit. Sed faucibus urna a dolor. Suspendisse vitae enim vitae dui pulvinar sagittis. Vestibulum nisi. Etiam convallis dui vel mauris. Nunc eu felis id felis tincidunt euismod. Praesent pulvinar ipsum non tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam adipiscing, odio ut condimentum ornare, nibh eros fermentum diam, ut consequat mauris massa suscipit nulla. In tincidunt. Sed lacinia tellus non enim.</div>
</div>
<div id="right">
<div style="padding:10px;">Vivamus tortor. Etiam varius elit in odio. Curabitur tempus odio vel augue. Nulla vel mi. Praesent tristique erat sit amet lorem. Praesent id felis elementum nisl porttitor dapibus. Aliquam eleifend orci nec lorem. Vivamus vulputate. Integer et nulla. Donec commodo sagittis magna. Praesent at libero et ligula placerat ullamcorper. Aliquam imperdiet.</div>
</div>
</div>
<div class="footer">
<div style="padding:3px;"><a href="http://web-tourist.net">All ®ights ®eserved 2007 by ®[PoD]MaTRiX and Web-Tourist.net®</a></div>

</div>
</div>
</body>
</html>
 
Аз имам друга идея:

Добавяш едно
border-right:1px dashed #000000;
border-left:1px dashed #000000;
А това dashed е дали да е прекъсната

Ето го целият код


body {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
padding:0px;
background-color:#ffffff;
}
body, td, th {
font-family:Tahoma;
font-size:11px;
color:#FF6600;
}
a {
font-family:Tahoma;
font-size:11px;
}
a:link {
background-color:inherit;
color:#ffffff;
text-decoration:none;
}
a:visited {
background-color:inherit;
color:#ffffff;
text-decoration:none;
}
a:hover {
background-color:inherit;
color:#FF6600;
text-decoration:none;
}
a:active {
background-color:inherit;
color:#ffffff;
text-decoration:none;
}
.general {
margin:auto;
width:540px;
}
.header {
position:absolute;
margin-bottom:auto;
margin-left:auto;
margin-right:auto;
margin-top:50px;
width:540px;
height:20px;
background-color:#CC99CC;
}
.content {
position:absolute;
margin-top:71px;
width:540px;
height:530px;
background-color:#FFFFFF;
}
#left {
position:absolute;
float:left;
width:120px;
height:530px;
border-right:1px dashed #666666;
border-left:1px #000000;
}
#center {
position:absolute;
float:none;
margin-left:120px;
width:300px;
height:530px;
}
#right {
position:absolute;
float:right;
margin-left:420px;
width:120px;
height:530px;
border-left:1px dashed #666666;
border-right:1px dashed #000000;
}
.footer {
position:absolute;
margin-top:602px;
width:540px;
height:20px;
background-color:#CC99CC;
}
 
animatora каза:
<!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">
<head>
<title>CSS Template by [PoD]MaTRiX ®Web-Tourist.net®</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="CSS Template" />
<meta name="author" content="Маритн Маринов([PoD]MaTRiX])" />
<meta name="rating" content="general" />
<meta name="revisit-after" content="1 day" />
<style type="text/css">
body {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
padding:0px;
background-color:#ffffff;
}
body,td,th {
font-family:Tahoma;
font-size:11px;
color:#FF6600;
}
a {
font-family:Tahoma;
font-size:11px;
}
a:link {
background-color:inherit;
color:#ffffff;
text-decoration:none;
}
a:visited {
background-color:inherit;
color:#ffffff;
text-decoration:none;
}
a:hover {
background-color:inherit;
color:#FF6600;
text-decoration:none;
}
a:active {
background-color:inherit;
color:#ffffff;
text-decoration:none;
}
.general {
margin:auto;
width:540px;
}
.header {
position:absolute;
margin-bottom:auto;
margin-left:auto;
margin-right:auto;
margin-top:50px;
width:540px;
height:20px;
background-color:#CC99CC;
}
.content {
position:absolute;
margin-top:71px;
width:538px;
height:530px;
background-color:#FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
}
#left {
position:absolute;
float:left;
width:120px;
height:530px;
border-right:1px dashed #666666;
}
#center {
position:absolute;
float:none;
margin-left:120px;
width:300px;
height:530px;
}
#right {
position:absolute;
float:right;
margin-left:420px;
width:120px;
height:530px;
border-left:1px dashed #666666;
}
.footer {
position:absolute;
margin-top:602px;
width:540px;
height:20px;
background-color:#CC99CC;
}
</style>
</head>

<body>
<div class="general">

<div class="header"></div>
<div class="content">
<div id="left">
<div style="padding:10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec posuere aliquet leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse enim. Mauris et enim vitae magna suscipit auctor. Morbi justo risus, vestibulum dapibus, sagittis eget, condimentum vel, nunc. Duis dictum dictum orci. Cras tristique sem ac orci. Mauris rutrum mauris vitae lorem. Etiam at neque. In est turpis, viverra sed, pretium a, fermentum eget, eros. Curabitur ut risus. Aliquam magna.</div>
</div>
<div id="center">
<div style="padding:10px;">Nullam bibendum felis eget velit. Sed faucibus urna a dolor. Suspendisse vitae enim vitae dui pulvinar sagittis. Vestibulum nisi. Etiam convallis dui vel mauris. Nunc eu felis id felis tincidunt euismod. Praesent pulvinar ipsum non tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam adipiscing, odio ut condimentum ornare, nibh eros fermentum diam, ut consequat mauris massa suscipit nulla. In tincidunt. Sed lacinia tellus non enim.</div>
</div>
<div id="right">
<div style="padding:10px;">Vivamus tortor. Etiam varius elit in odio. Curabitur tempus odio vel augue. Nulla vel mi. Praesent tristique erat sit amet lorem. Praesent id felis elementum nisl porttitor dapibus. Aliquam eleifend orci nec lorem. Vivamus vulputate. Integer et nulla. Donec commodo sagittis magna. Praesent at libero et ligula placerat ullamcorper. Aliquam imperdiet.</div>
</div>
</div>
<div class="footer">
<div style="padding:3px;"><a href="http://web-tourist.net">All ®ights ®eserved 2007 by ®[PoD]MaTRiX and Web-Tourist.net®</a></div>

</div>
</div>
</body>
</html>
Увеличете...
благодаря
+1
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе