Om man utgår från en helt tom sida hur skulle man då kunna göra
ul (stegar?) brevid varandra?
Tack på förhand!
ul brevid varandra
14 svar · 1 088 visningar · startad av skillrookie
Varför just en tom sida? Det spelar ju ingen roll om det finns annat på den....
Men du kan ju t.ex. floata den ena av dom.
Varför just en tom sida? Det spelar ju ingen roll om det finns annat på den....
Men du kan ju t.ex. floata den ena av dom.
Skrev en tom sida eftersom jag inte vet hur det annars skulle påverka. :)
Jag är riktigt rookie så jag vet inte vad floata betyder. :r
Någon som kan skriva ut ett ex på kod om man skriver det direkt brevid ul och ett alt på hur det skulle se ut med det i css.
<h3></h3>
<ul>
<li></li>
<li></li>
</ul>
<h3></h3>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
..kommer ju under varandra.
Jag är ingen expert på CSS men nåt i den här stilen borde funka, det går säkert att göra bättre.
<html>
<body>
<ul style="float:left;">
<li>Volvo</li>
<li>Saab</li>
<li>Tata</li>
<li>Ford</li>
</ul>
<ul style="float:left;">
<li>Mercedes</li>
<li>BMW</li>
<li>Opel</li>
<li>Kia</li>
<li>Volkswagen</li>
</ul>
</body>
</html>
Någon som kan skriva ut ett ex på kod om man skriver det direkt brevid ul och ett alt på hur det skulle se ut med det i css.
Just listor är besvärliga att formatera eftersom olika webbläsare ibland renderar dom på väldigt olika sätt. Därför brukar det vara enklast att lägga in dom i en div och istället formatera den.
Här är ett exempel. Har gett divvarna temporära bakgrundsfärger för att du lättare ska kunna se hur dom ligger.
Först lägger du i stilarna mellan <head> och </head>:
<style type="text/css">
#left {
float: left;
background: #3F3;
width: 200px;
}
#right {
margin-left: 210px;
background: #F90;
width: 200px;
}
</style>
Sedan själva divvarna med listorna i body:
<div id="left">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</div>
<div id="right">
<ul>
<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>
</ul>
</div>
<div style="clear:all; height:0;"></div>
Justera värdena i stilmallen efter behov. Låt den understa divven med "clear:all" vara kvar eftersom den ser till att efterföljande kod inte renderas felaktigt (den "floatade" divven kan annars t.ex. hamna över andra element).
Jag är ingen expert på CSS men nåt i den här stilen borde funka, det går säkert att göra bättre.
<html> <body> <ul style="float:left;"> <li>Volvo</li> <li>Saab</li> <li>Tata</li> <li>Ford</li> </ul> <ul style="float:left;"> <li>Mercedes</li> <li>BMW</li> <li>Opel</li> <li>Kia</li> <li>Volkswagen</li> </ul> </body> </html>
Tyvärr är det ingen bra idé att floata båda/alla elementen. Du måste ha minst ett "normalt" element som den/de andra "utgår" från.
Startvärde kan väl vara "Inget val"
Startvärde kan väl vara "Inget val"
Vad menar du?
Tror du blandar ihop listor med s.k. dropdownmenyer.
>Danne V Så kan det vara, sorry säger Lasp ;-)
Kanon! Det är så där jag vill ha dom. :) Dock börjar den högra lite längre upp?
Sen hur gör jag om jag vill ha fler bredvid varandra med samma kod?
Tack på förhand!
Det finns flera sätt att göra det på... Om det är listor som har olika långa rubriker och listorna har olika längd på innehållet skulle jag ha gjort något liknande detta. Först se till att alla webläsare visar listorna lika
ul,li,h3,div{
padding: 0px;
margin: 0px;
}
sedan skulle jag gjort en class för att få listorna som jag vill ha dem
.lista{
float: left;
margin-right: 30px;/*eller hur brett man vill ha mellan dem
}
Sedan kan man skriva in hur många listor man vill ha...
<div class="lista">
<h3>En rubrik</h3>
<ul>
<li>7</li>
<li>6</li>
<li>O5</li>
<li>4</li>
<li>3</li>
</ul></div>
<div class="lista blue">
<h3>En rubrik</h3>
<ul>
<li>7252455254</li>
<li>6</li>
<li>O5rhh</li>
<li>4</li>
<li>3</li>
</ul></div>
<div class="lista">...osv
på den andra la jag till classen blue för att få en bakgrundsfärg på den
och då lägger jag till den i css
.blue{background-color: #c8c8ff;
}
Kanon! Det är så där jag vill ha dom. :) Dock börjar den högra lite längre upp?
Sen hur gör jag om jag vill ha fler bredvid varandra med samma kod?
Tack på förhand!
Oj, först nu kollade jag i en webbläsare och såg att den högra listan börjar högre upp än den vänstra. Det berodde på att man måste specificera padding i divvarna, annars slänger webbläsaren in ett eget värde. I koden nedan är det åtgärdat.
Du kan ha hur många listor/divvar som helst. Idén är att en av dom (i detta fall den högra) fungerar som "referenspunkt", dvs inte floatad, och att de andra floatas till vänster i förhållande till den.
Har möblerat om i stilmallen eftersom de fyra floatade divvarna ju har samma formatering - förutom bakgrundsfärgerna som jag antar att du tar bort. Därför har jag samlat dom i grupper istället. Du ser hur det funkar.
<style type="text/css">
/*Du kan ta bort de översta fyra stilarna om du vill ta bort bakgrundsfärgerna*/
#lista1 {
background: #3F3;
}
#lista2 {
background: #F90;
}
#lista3 {
background: #0CF;
}
#lista4 {
background: #F03;
}
/*Men stilarna nedan måsta vara kvar*/
#lista1, #lista2, #lista3, #lista4, #lista5 {
padding-top: 5px;
padding-bottom: 5px;
width: 140px;
}
#lista1, #lista2, #lista3, #lista4 {
float: left;
margin-right:10px;
}
#lista5 {
margin-left: 600px;
background: #F0F;/*Ta bort denna om du vill ta bort bakgrundsfärgen*/
}
</style>
<div id="lista1">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</div>
<div id="lista2">
<ul>
<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>
</ul>
</div>
<div id="lista3">
<ul>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
<li>DDDD</li>
</ul>
</div>
<div id="lista4">
<ul>
<li>EEEE</li>
<li>FFFF</li>
<li>GGGG</li>
<li>HHHH</li>
</ul>
</div>
<div id="lista5">
<ul>
<li>IIII</li>
<li>JJJJ</li>
<li>KKKK</li>
<li>LLLL</li>
</ul>
</div>
<div style="clear:all; height:0;"></div>
Red: Ser nu att tanten postat ett förslag som naturligtvis är bättre, eftersom han (hon?) använder en class istället. Eftersom jag inte fått i mig mer än 1 mugg kaffe än orkade jag inte tänka så långt....
Stort tack!
Exakt så vill jag ha det!
Två frågor kvar bara:
1. Hur får man bort prickarna i nr 2?
2. Hur avslutar man så texten som kommer efter sista inte hamnar till vänster?
Tack på förhand!
Stort tack!
Exakt så vill jag ha det!
Två frågor kvar bara:
1. Hur får man bort prickarna i nr 2?
Man kollar lite på webben, t.ex. här: http://www.w3schools.com/Css/css_list.asp och ser hur man gör. ;)
2. Hur avslutar man så texten som kommer efter sista inte hamnar till vänster?
Nu fattar jag inte riktigt vad du menar. Vilken text? Men man kan ju t.ex. klura ut hur det kommer sig att den högra listan inte hamnar till vänster. Så kan man t.ex. göra om listan längst till höger till en floatad (som de andra) och så lägger man in texten i en div som är formaterad som den nuvarande högra.
Man kollar lite på webben, t.ex. här: http://www.w3schools.com/Css/css_list.asp och ser hur man gör. ;)
Hehe tack! Jag visste dock inte vad jag letade efter så därför blev det svårt. Men där fanns det ju! (y)
Nu fattar jag inte riktigt vad du menar. Vilken text? Men man kan ju t.ex. klura ut hur det kommer sig att den högra listan inte hamnar till vänster. Så kan man t.ex. göra om listan längst till höger till en floatad (som de andra) och så lägger man in texten i en div som är formaterad som den nuvarande högra.
Om man vill ha text under ul raderna menade jag. Men jag lyckades lösa det. (y) :)