Trenger hjelp med lister og CSS

Trenger hjelp med lister og CSS

Innleggav srb » ons 28.05.2008 8:55

Er det ikke bare å sette inn lister med css´en? Er det noen skikkelige triks som jeg ikke har fått med meg??
Jeg setter de inn i css, men det blir ikke synlig ved preview i browseren.
Jeg har forsøkt forskjellig nå, men det er og blir usynlig. Det vises i dreamweaveren når jeg jobber med det...

hmmmm, men ha en fin dag da:) 8-)
Sist endret av martin den tir 03.06.2008 22:19, endret 1 gang
Grunn: Endret tittelen til en mer presis beskrivelse.
medlem i 141 måneder
 

Re: Lister

Innleggav kolby » ons 28.05.2008 12:37

Det er ikke så enkelt å hjelpe til når man har så lite å gå ut ifra. Du må være flinkere med å gi den informasjonen som kreves for å kunne hjelpe til.

Du kan for eksempel starte med å vise oss koden du bruker.

Administrator
Brukerens avatar
medlem i 197 måneder
 

Re: Lister

Innleggav srb » ons 28.05.2008 14:03

Skjønner ...

dette er koden som blir usynlig:
Kode: Merk alt
#linkList{
   background-color:#990099;
   position:absolute;
   margin-left:-1450px;
   margin-top:1000px;
   width:300px;
   z-index:1;
}

#linkList2{
   background-color:#0000FF;
   width:100px;
   padding:5px;
}

#lselect{
   font-family:"Chaparral Pro";
}

#linkList h3.select{
   background-color:#FFFFFF;
   color:#333333;
}


#linkList h3.archives{
   background-color:#FFFFFF;
   color:#333333;
}

#linkList h3.resources{
   background-color:#FFFFFF;
   color:#333333;
}


#linkList ul{
   margin:0px;
   padding:0px 50px 0px 50px;
   width:210px;

}

#linkList li{
   color:#FF0000;
   display:block;
   width:200px
medlem i 141 måneder
 

Re: Lister

Innleggav tjodolv » ons 28.05.2008 14:32

Om du kunne vist HTML-koden også, så hadde det vært knall. For øvrig ser jeg fra CSSen din at listen havner langt utenfor skjermen.
Kode: Merk alt
position:absolute;
margin-left:-1450px;

Den koden der fører til at lista blir liggende 1450 pixler til venstre for vinduets venstre kant. Med mindre du har noe mer CSS til å rette opp det, eller noe JavaScript som styrer med det, så blir det feil.

Brukerens avatar
medlem i 157 måneder
 

Re: Lister

Innleggav isakbarnet » ons 28.05.2008 14:36

Marginene på #linklist er VELDIG store, så listen blir ikke usynlig, den havner bare langt utenfor skjermen, prøv følgende:
Kode: Merk alt
#linkList{
   background-color:#990099;
   position:absolute;
   margin-left:50px;
   margin-top:10px;
   width:300px;
   z-index:1;
}


EDIT: litt sent ute.. :-/

Brukerens avatar
medlem i 147 måneder
 

Re: Lister

Innleggav srb » ons 28.05.2008 15:55

ok, her er html koden for denne listen...
Kode: Merk alt
<div id="linkList">
      <!--extra div for flexibility - this list will probably be the trickiest spot you'll deal with -->
     <div id="linkList2">

      <!-- If you're wondering about the extra &nbsp; at the end of the link, it's a hack to meet WCAG 1 Accessibility. -->
      <!-- I don't like having to do it, but this is a visual exercise. It's a compromise. -->
         <div id="lselect">
            <h3 class="select"><span>Select a Design:</span></h3>
            <!-- list of links begins here. There will be no more than 8 links per page -->
            <ul>
               <li><a href="/" title="AccessKey: a" accesskey="a">Sample #1</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
               <li><a href="/" title="AccessKey: b" accesskey="b">Sample #2</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
               <li><a href="/" title="AccessKey: c" accesskey="c">Sample #3</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
               <li><a href="/" title="AccessKey: d" accesskey="d">Sample #4</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
               <li><a href="/" title="AccessKey: e" accesskey="e">Sample #5</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
               <li><a href="/" title="AccessKey: f" accesskey="f">Sample #6</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
               <li><a href="/" title="AccessKey: g" accesskey="g">Sample #7</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
               <li><a href="/" title="AccessKey: h" accesskey="h">Sample #8</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
            </ul>
         </div>

         <div id="larchives">
            <h3 class="archives"><span>Archives:</span></h3>
            <ul>
               <li><a href="/" title="View next set of designs. AccessKey: n" accesskey="n"><span class="accesskey">n</span>ext designs &raquo;</a>&nbsp;</li>
               <li><a href="/" title="View previous set of designs. AccessKey: p" accesskey="p">&laquo; <span class="accesskey">p</span>revious designs</a></li>
               <li><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w" accesskey="w">Vie<span class="accesskey">w</span> All Designs</a></li>
            </ul>
         </div>
         
         <div id="lresources">
           <h3 class="resources"><span>Resources:</span></h3>
            <ul>
               <li><a href="http://www.csszengarden.com/001/001.css" title="View the source CSS file for the currently-viewed design, AccessKey: v" accesskey="v"><span class="accesskey">V</span>iew This Design&#8217;s <acronym title="Cascading Style Sheets">CSS</acronym></a></li>
               <li><a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS. AccessKey: r" accesskey="r"><acronym title="Cascading Style Sheets">CSS</acronym> <span class="accesskey">R</span>esources</a></li>
               <li><a href="http://www.mezzoblue.com/zengarden/faq/" title="A list of Frequently Asked Questions about the Zen Garden. AccessKey: q" accesskey="q"><acronym title="Frequently Asked Questions">FA<span class="accesskey">Q</span></acronym></a>&nbsp;</li>
               <li><a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file. AccessKey: s" accesskey="s"><span class="accesskey">S</span>ubmit a Design</a></li>
               <li><a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page. AccessKey: t" accesskey="t"><span class="accesskey">T</span>ranslations</a></li>
            </ul>
         </div>
     </div>
  </div>


</div>
medlem i 141 måneder
 

Re: Lister

Innleggav tjodolv » ons 28.05.2008 23:31

Som nevnt tidligere ligger problemet i dette:
Kode: Merk alt
position:absolute;
margin-left:-1450px;

Om du fjerner det fra stilsettet så vil du kunne se listen. Aner ikke hva som ellers er på siden, så jeg er ikke sikker på om det er noe annet som skulle kunne skape konflikter... Du kan også fjerne margin-top, for å få listen til å starte øverst på siden. Jeg gjorde det, og da ser det slik ut:
Bilde

HTML og CSS:
Kode: Merk alt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

   <title>untitled</title>
   <style type="text/css" media="screen">
      #linkList{
         background-color:#990099;
         position:absolute;
         width:300px;
         z-index:1;
      }

      #linkList2{
         background-color:#0000FF;
         width:100px;
         padding:5px;
      }

      #lselect{
         font-family:"Chaparral Pro";
      }

      #linkList h3.select{
         background-color:#FFFFFF;
         color:#333333;
      }


      #linkList h3.archives{
         background-color:#FFFFFF;
         color:#333333;
      }

      #linkList h3.resources{
         background-color:#FFFFFF;
         color:#333333;
      }


      #linkList ul{
         margin:0px;
         padding:0px 50px 0px 50px;
         width:210px;

      }

      #linkList li{
         color:#FF0000;
         display:block;
         width:200px;
      }
   </style>
</head>

<body>

   <div id="linkList">
         <!--extra div for flexibility - this list will probably be the trickiest spot you'll deal with -->
        <div id="linkList2">

         <!-- If you're wondering about the extra &nbsp; at the end of the link, it's a hack to meet WCAG 1 Accessibility. -->
         <!-- I don't like having to do it, but this is a visual exercise. It's a compromise. -->
            <div id="lselect">
               <h3 class="select"><span>Select a Design:</span></h3>
               <!-- list of links begins here. There will be no more than 8 links per page -->
               <ul>
                  <li><a href="/" title="AccessKey: a" accesskey="a">Sample #1</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
                  <li><a href="/" title="AccessKey: b" accesskey="b">Sample #2</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
                  <li><a href="/" title="AccessKey: c" accesskey="c">Sample #3</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
                  <li><a href="/" title="AccessKey: d" accesskey="d">Sample #4</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
                  <li><a href="/" title="AccessKey: e" accesskey="e">Sample #5</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
                  <li><a href="/" title="AccessKey: f" accesskey="f">Sample #6</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
                  <li><a href="/" title="AccessKey: g" accesskey="g">Sample #7</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
                  <li><a href="/" title="AccessKey: h" accesskey="h">Sample #8</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
               </ul>
            </div>

            <div id="larchives">
               <h3 class="archives"><span>Archives:</span></h3>
               <ul>
                  <li><a href="/" title="View next set of designs. AccessKey: n" accesskey="n"><span class="accesskey">n</span>ext designs &raquo;</a>&nbsp;</li>
                  <li><a href="/" title="View previous set of designs. AccessKey: p" accesskey="p">&laquo; <span class="accesskey">p</span>revious designs</a></li>
                  <li><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w" accesskey="w">Vie<span class="accesskey">w</span> All Designs</a></li>
               </ul>
            </div>

            <div id="lresources">
              <h3 class="resources"><span>Resources:</span></h3>
               <ul>
                  <li><a href="http://www.csszengarden.com/001/001.css" title="View the source CSS file for the currently-viewed design, AccessKey: v" accesskey="v"><span class="accesskey">V</span>iew This Design&#8217;s <acronym title="Cascading Style Sheets">CSS</acronym></a></li>
                  <li><a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS. AccessKey: r" accesskey="r"><acronym title="Cascading Style Sheets">CSS</acronym> <span class="accesskey">R</span>esources</a></li>
                  <li><a href="http://www.mezzoblue.com/zengarden/faq/" title="A list of Frequently Asked Questions about the Zen Garden. AccessKey: q" accesskey="q"><acronym title="Frequently Asked Questions">FA<span class="accesskey">Q</span></acronym></a>&nbsp;</li>
                  <li><a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file. AccessKey: s" accesskey="s"><span class="accesskey">S</span>ubmit a Design</a></li>
                  <li><a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page. AccessKey: t" accesskey="t"><span class="accesskey">T</span>ranslations</a></li>
               </ul>
            </div>
        </div>
     </div>


   </div>

</body>
</html>


Generelt er det litt lite elegant å bruke position: absolute; for å plassere elementer, men det fungerer for all del...

Brukerens avatar
medlem i 157 måneder
 


Returner til CSS



Hvem er i Forumene

Registrerte brukere: Google [Bot]