このサイトを再作成しようとしています: http://imgur.com/oXLboQx
これまでのところ、これを取得しました：http://imgur.com/rRC0bOK
垂直メニューを修正してページ全体に引き伸ばされないようにするにはどうすればよいかと考えていましたが、写真のように「Naujienos」全体をその横に収めるにはどうすればよいでしょうか? .col-left と .col-right を使用していると思いますか?
編集: display:inline-block; を使用してストレッチを修正しました。左端に。
<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;
/*reikia papildyti cia bisky*/
}
.main{
position: relative;
width: 800px;
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{
}
.col-right{
}
.menu-vertical-wrap{
margin: 10px 20px 5px 20px;
background-color: #287D7D;
padding:10px;
}
.menu-vertical-wrap a{
color:#FFF;
text-decoration: none;
padding: 6px;
}
.menu-vertical-wrap a:hover{
/*galite improvizuoti*/
}
h1{
}
.naujiena{
}
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;
top: 0px;
left: 100px;
}
.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{
}
</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">
<p>
<div class="tipoPaveiksliukas"></div>
<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.
</p>
</div>
<div class="naujiena cf">
<p>
<div class="tipoPaveiksliukas"></div>
<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.
</p>
</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="400" 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>