Другой вопрос.
Попытка получить это: http://imgur.com/oXLboQx
Сейчас у меня есть: http://imgur.com/LCDlngS
В основном, 1) Как добавить слева и справа на странице? Если я использую этот код
width: 800px; height: 805px;
-webkit-box-shadow: 4px 20px #222, -4px 0 20px #222;
-moz-box-shadow: 4px 0 20px #222, -4px 0 20px #222;
box-shadow: 4px 0 20px #222, -4px 0 20px #222;
тень появляется но сайт прилипает к левому углу. Если я удалю параметр ширины, он просто добавит тень и на белый фон.
2) Можно ли как-то сдвинуть текст "Спауск грива" вниз как на картинке?
3) Есть ли какие-то настройки, чтобы исправить это вертикальное меню? Я пробовал заполнение, отображение: блок, но тогда белая нижняя граница не растягивается с помощью кнопок.
Благодарю вас
<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<head>
<title>Mokausi HTML, CSS ir JS</title>
</head>
<style>
/*visas css eina cia*/
body, html {
margin: 0;
padding: 0;
line-height: 19px;
font-size: 15px;
}
.cf:before,
/*clear fix klase*/
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
.tipoPaveiksliukas {
background: #fff;
width: 150px;
height: 140px;
display:inline-block;
margin: 0px 10px 13px 13px;
/*reikia papildyti cia bisky*/
}
.main {
position: relative;
width: 800px;
height: 855px;
margin: 0 auto;
background: #C6E070;
/*reikia papildyt*/
}
.kalbos {
position: absolute;
top: 0;
right: 10px;
background: #287D7D;
padding: 2px 5px;
color: #fff;
}
.kalbos:hover {
cursor: pointer;
}
.visosKalbos {
position: absolute;
top: 23px;
right: 10px;
background: #1C344C;
padding: 5px;
z-index: 10;
display: none;
}
.visosKalbos a {
display: block;
color: #fff;
text-decoration: none;
}
body {
background: #F2F2F2;
font-family:"Arial";
color: #1C344C;
}
.shadow {
}
.header {
margin-top:7px;
font-size:26;
font-style:italic;
}
.menu-horizontal-wrap {
margin: 10px 20px 5px 20px;
background-color: #287D7D;
padding:10px;
}
.menu-horizontal-wrap a {
color:#FFF;
text-decoration: none;
padding: 6px;
}
.menu-horizontal-wrap a:hover {
/*galite improvizuoti*/
background-color:gray;
}
.menu-horizontal-wrap a:last-child {
/*paskutinis virsutinio meniu elementas kazkoks kitoks*/
}
.col-left {
display:inline-block;
}
.col-right {
display:inline-block;
vertical-align:top;
width:600px;
}
.menu-vertical-wrap {
margin: 10px 20px 5px 20px;
background-color: #287D7D;
padding:4px;
}
.menu-vertical-wrap a {
color:#FFF;
text-decoration: none;
margin-top: 8px;
display:block;
border-bottom:1px solid white;
}
.menu-vertical-wrap a:hover {
/*galite improvizuoti*/
}
h1 {
}
.naujiena {
background:#99CC00;
margin-bottom: 20px;
padding-bottom: 5px;
}
a.cta {
color:white;
text-decoration: none;
}
a:hover.cta {
/*kas nutika kai uzvedate pele ant cta mygtuko, galite improvizuoti*/
}
.cta h3 {
background-color:#287D7D;
width: 150px;
height: 110px;
float:left;
margin: 0px 20px 10px 20px;
text-align: center;
position: relative;
bottom:0px;
left: 20px;
}
.lentele {
border-collapse: collapse;
border:1px solid black;
/*reikia papildyti*/
}
.lentele th {
background:black;
color:white;
}
.lentele td {
border:1px solid black;
}
.lentele tr {
background-color:#A8A8A8;
border:1px solid black;
}
.lentele tbody tr:nth-child(even) {
background-color: #D0D0D0;
}
.footer {
}
.text {
display:inline-block;
width:400px;
}
</style>
<body>
<div class="shadow">
<div class="main cf">
<div class="kalbos">Kalba</div>
<div class="visosKalbos"> <a href="#">Lietuviu</a>
<a href="#">English</a>
<a href="#">Pa Ruski</a>
</div>
<div class="header" align="center"> <b>MANO MOKOMASIS PUSLAPIS</b>
</div>
<div align="center" class="menu-horizontal-wrap"> <a href="#">MENIU PUNKTAS | </a>
<a href="#">MENIU PUNKTAS | </a>
<a href="#">MENIU PUNKTAS | </a>
<a href="#">MENIU PUNKTAS </a>
</div>
<div class="cf">
<div class="col-left">
<div class="menu-vertical-wrap"> <a href="#">Meniu punktas</a>
<br> <a href="#">Meniu punktas</a>
<br> <a href="#">Meniu punktas</a>
<br> <a href="#">Meniu punktas</a>
<br> <a href="#">Meniu punktas</a>
<br> <a href="#">Meniu punktas</a>
<br> <a href="#">Meniu punktas</a>
<br> <a href="#">Meniu punktas</a>
<br>
</div>
</div>
<!-- end of col-left -->
<div class="col-right">
<h1>NAUJIENOS</h1>
<hr size=1>
<div class="naujiena cf">
<div class="naujiena">
<div class="tipoPaveiksliukas"></div>
<div class="text">
<h2>Naujienos antraste</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in dignissim lacus. Curabitur consequat pharetra placerat. Nullam pretium vehicula tortor. Vivamus diam orci, consectetur ullamcorper eleifend ut, aliquet a arcu. Phasellus congue eleifend rhoncus. Vestibulum vulputate bibendum rutrum.
</div>
</div>
</div>
<div class="naujiena cf">
<div class="naujiena">
<div class="tipoPaveiksliukas"></div>
<div class="text">
<h2>Naujienos antraste</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in dignissim lacus. Curabitur consequat pharetra placerat. Nullam pretium vehicula tortor. Vivamus diam orci, consectetur ullamcorper eleifend ut, aliquet a arcu. Phasellus congue eleifend rhoncus. Vestibulum vulputate bibendum rutrum.</div>
</div>
</div>
<div class="cta-wrap cf"> <a href="#" class="cta"><h3>Spausk <br> mane</h3></a>
<a href="#" class="cta"><h3>Spausk <br> mane</h3></a>
<a href="#" class="cta"><h3>Spausk <br> mane</h3></a>
</div>
<table width="550" style="text-align:center;" align="center" class="lentele">
<thead>
<tr>
<th>Antraste</th>
<th>Antraste</th>
<th>Antraste</th>
</tr>
</thead>
<tbody>
<tr>
<td>Foo</td>
<td>Foo</td>
<td>Foo</td>
</tr>
<tr>
<td>Bar</td>
<td>Bar</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Foo</td>
<td>Foo</td>
</tr>
<tr>
<td>Bar</td>
<td>Bar</td>
<td>Bar</td>
</tr>
</tbody>
</table>
</div>
<!-- end of col-right -->
</div>
<!-- end of cf -->
<hr size=1>
<div align="center" class="footer">Mano labai kietas web'as © visos teises saugomos</div>
</div>
<!-- end of main -->
<script>
// reikia papildyti sita koda kad dar karta paspaudus ant kalbos mygtuko kalbu pasirinkimas uzsidarytu
var kalbuBusena = 'closed';
$('.kalbos').click(function(){
$('.visosKalbos').slideToggle('fast');
kalbuBusena = 'open';
});
</script>
</div>
</body>
</html>
