-
1 Attachment(s)
bottom text menu
Hello, I am pretty new to CSS. I have to create a menu like the one in the pic I enclose but first of all, to semplify, I'd like to fix the problem I have with the code I created. What I can't do is align bottom the text to the dashed line.
I'd like to understand that before going on with the menu in the pic, just to make sure where I'm wrong.
Here's the code:
...
<style>
#menu {
padding:0;
margin:0;
height:2em;
list-style-type:none;
border-left:1px dashed #bbb}
#menu li {
font-family:Georgia, "Times New Roman", Times, serif;
color:#009900;
font-size:13px;
float:left;
margin-left:7px;
width:8em;
height:2em;
border-right:1px dashed #bbb}
#menu li a:hover {
border:0; /* needed to trigger IE */
color:#000;
}
</style>
</head>
<body>
<ul id="menu">
<li>home</li><li>soluzioni</li><li>offerte</li><li>pacchetto</li>
</ul>
</body>
</html>
After fixing the problem above, I need to understand how to put in Css the menu in the picture.
If someone could give me an hand..thank u! Hope to could return the favour one day!
Chiara
-
You can position something based on the bottom of a certain div.
So, say you want to have a link at the very bottom of a certain div. Something like:
Code:
<div id="container">
<!-- Rest of Content Here -->
<a href="#">Link</a>
</div>
You could apply the following CSS to position link relative to the bottom of the container div:
Code:
#container {
position:relative
}
#container a {
position:absolute;
bottom:10px; /* This will make it 10 px from the bottom */
}
HTH :D
