GytisK
Reputation: 169
HTML+CSS Shadow, vertical menu, text position
another question.
Trying to get this: https://i.sstatic.net/7HeMY.jpg
Right now I have: https://i.sstatic.net/pw5rI.jpg
Basically, 1) How do I add a on the left and right side of the page? If I use this code
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;
the shadow appears but the site sticks to the left corner. If I remove the width option it just adds the shadow to the white background too.
2) Is there some way to move the text "Spausk mane" to the bottom like in the picture?
3) Is there some setting to fix that vertical menu? I tried padding, display:block but the white bottom border doesn't stretch with the buttons then.
Thank You
<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>
Upvotes: 0
Views: 351
Answers (2)
mshindal
Reputation: 588
1) Box-shadow can take multiple parameters separated by commas, like this:
box-shadow: 0 2px 5px gray, 0 -2px 5px gray;
2) Try:
position: absolute;
bottom: 0;
3) What do you mean by "fix" exactly?
Upvotes: 1
Näbil Y
Reputation: 1650
Use css property box-shadow on the green thingy
For the "Spausk Mane", you can use line-height, margin-top or even absolute positioning on the text.
For the menu, you're using underlined text, the "result" picture is using border-bottom.
Upvotes: 0
Related Questions
- Having a CSS menu aligned properly
- CSS Styling of Dropdown menu with drop shadows/etc
- How to fix the shadow on my menu, Fiddle example shown
- Menu With Shadow Effect
- Text-shadow on li element carrying over to sub menu (CSS)
- CSS Menu Alignment Issue
- How to make "one" css3 shadow for menu and content?
- Adjusting the vertical position of text in a menu
- CSS text-shadow navigation problem
- help in Vertical CSS Menu