4 svar · 339 visningar · startad av mattias_ym
Jag håller på att bygga en meny med <ul> och <li> och allt har fungerat bra än så länge... men nu har jag dykt på ett problem jag inte riktigt vet hur jag ska lösa. Allt är flytande i layouten så vill jag även att denna sista del ska vara.
Det jag vill uppnå med den sista <li> som just nu bara visar datum är att den ska se likadan ut som länkarna och sträcka sig hela vägen bort åt höger, texten i ska vara högerställd.
Så här ser CSS koden för menyn ut:
.navmenu {
width: 100%;
margin: 10px 10px;
background: #234;
}
.navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.navmenu li {
margin: 0;
padding: 0;
float: left;
width: 10em;
margin-right: 1px;
}
.navmenu a {
display: block;
width: 100%;
padding: 3px 0 3px 0;
text-decoration: none;
font-family: verdana, sans-serif;
font-weight: bold;
color: #fff;
background: #666;
}
.navmenu a:hover {
background: #888;
}
Så nu lämnar jag över till er som är experter på CSS vilket jag inte är ännu... enl mig själv... :)
Ge listobjektet med datumet i en egen klass och ge den bara samma egenskaper som länkarna fått.
.navmenu .datum {
display: block;
width: 100%;
padding: 3px 0 3px 0;
text-decoration: none;
font-family: verdana, sans-serif;
font-weight: bold;
color: #fff;
background: #666;
text-align: right;
}
<li class="datum">2005-11-08</li>
Fungerar det?
Upptäckte precis att jag använt den kod jag hade innan jag börjat labba och visst innehöll den en liknande lösning som den ovan men hade ett fel i sig...
.navmenu #datum {
Nåja poäng till Silfver. :)
Attans! :e
Laytouten blir inte så flytande som jag vill... Om jag gör fönstret större så hänger inte det riktigt med.
.navmenu .datum {
display: block;
width: 42%;
padding: 3px 5px 3px 0;
text-decoration: none;
font-family: verdana, sans-serif;
font-weight: bold;
color: #fff;
background: #666;
text-align: right;
}
Hur det ser ut när jag gör fönstret större
Jag vill så klart att höger kanten vida datumet alltid ska ligga 10 px från där det vita tar slut.
Mer hjälp tack!
Vad händer om du tar bort raden width: 42%; då? Ta även bort width: 100%; under .navmenu a {
Detta händer:
Utan width
Så nu saknar jag bara, width: fill-out-rest-of-div-you-are-within;
:P
AAARRRGGHHHHHH! Testade just layouten i IE6... Återkommer om jag inte lyckas rätta till det där. Hur i h******e kan den bete sig så illa med enkel css? *morr*
