html - Sidemenu skal fylde det hele. - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

<< < 1 2 > >>

Bruger #15663 @ 19.09.11 13:24

Hejsa.

Jeg er ved at lave at admin site til mig selv.
Jeg har købt rettighederne til et jeg synes om og er ved at kode det op til mig selv så jeg kan bruge det dynamisk.

Problemet er bare at den sidemenu (eller den eneste menu) jeg har fylder det hele, men hvis menuen bliver længere end skærmen så kommer der ikke en scrollbar frem.
Jeg aner simpelthen ikke hvor fejlen ligger i den.

Her er et billede af hvordan det ser ud:
Se hvordan det ser ud

Her er css koden

CSS kode

 #sidebar
 {
  position:fixed;
  z-index:3;
  top:42px;
  left:0;
  bottom:0;
  width:240px;
  -moz-text-shadow:0px 1px 0px #000;
  -webkit-text-shadow:0px 1px 0px #000;
  -o-text-shadow:0px 1px 0px #000;
  text-shadow:0px 1px 0px #000;
  background-color:#494949;
  border-right:1px solid #1B1B1B;0.
  -moz-box-shadow:inset -5px 0 5px #404040;
  -webkit-box-shadow:inset -5px 0 5px #404040;
  -o-box-shadow:inset -5px 0 5px #404040;
  box-shadow:inset -5px 0 5px #404040;
 }

Jeg ved godt det kun er min sidebar wrapper der er stylet, men det er jo også i den problemet ligger.

Jeg kan ikke lave et link til det, da jeg laver det hele localhost, inden jeg smider det online.

Er der nogen der kan sige mig hvad jeg skal gøre?
Det er lige før jeg vil bage en kage til den heldige der kan hjælpe mig

15 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 1 karma

Sorter efter stemmer Sorter efter dato

Bruger #16786 @ 19.09.11 14:12

Prøv at ændre den til absolute i stedet for fixed når den er 1500px

Bruger #16786 @ 19.09.11 13:44

Jeg tror at det måske kan være overflow:auto; du skal bruge

Indlæg senest redigeret d. 19.09.2011 13:45 af Bruger #16786

Bruger #15663 @ 19.09.11 13:58

415

Hej Bjarke.

Det gav mig tildelvis svaret, også alligevel ikke.
Den scrollbar den skal komme helt ude til høre og skal dermed scroll hele siden ned, altså både menuen og content området (der hvor der ikke er noget endnu)

Bruger #16786 @ 19.09.11 14:02

Jeg ved ikke om du kan gøre det med css. Kan du ændre sidens højde?

Ellers kan det måske hjælpe at ændre position....
http://www.w3schools.com/cssref/playit.asp?filename=playcss_position

Indlæg senest redigeret d. 19.09.2011 14:12 af Bruger #16786

Bruger #15663 @ 19.09.11 14:11

415

Altså jeg ved hvis jeg sætter min body til at være 1500px så kan jeg scroll, men så ryger sidebar med, men det skyldes jo fordi den er sat til fixed.

Bruger #15663 @ 19.09.11 14:24

415

Det løste problemet.

Det leder mig så til næste problem.

Min content skal jeg have flyttet ud så den er i det fri område.

Hvordan?

Jeg har smidt mig HTML og CSS ind.

HTML kode

 <!DOCTYPE html>
 <html>
 <head>
             <meta charset="utf-8">
             <title>Test</title>
             <link rel="stylesheet" href="css/style.css" />
 </head>
 <body>
 <div id="head">
          <div class="left">
          <a href="" class="button profile"><img src="images/icons/huser.png" alt="" /></a>
          Hej, 
          <a href="">Daniel Mautone</a>
           | 
        <a href="scripts/php/logout.php">Log af</a>
          </div>
          <div class="right">
                      <form action="#" id="search" class="search placeholder">
                                 <label>Søg efter en kontakt</label>
                                 <input type="text" value="" name="q" class="text" />
                                 <input type="submit" value="rechercher" class="submit" />
                     </form>
          </div>
 </div>
 
 <div id="sidebar">
          <ul>
                   <li class="nosubmenu">
                           <a href="index.php">
                                  <img src="images/icons/menu/home.png" alt="" />
                                 Skrivebord
                          </a>
                  </li>
                  <li class="current">
                           <a href="">
                                  <img src="images/icons/menu/marker.png" alt="" />
                                  Dommer
                          </a>
                          <ul>
                                   <li class="current"><a href="">Kampe</a></li>
                                  <li><a href="">Kort</a></li>
                                  <li><a href="">Udvikling</a></li>
                                  <li><a href="">SMART Skema</a></li>
                                  <li><a href="">Træning</a></li>
                                  <li><a href="">Kontakter</a></li>
                                  <li><a href="">Regnskab</a></li>
                                  <li><a href="">Kontoudtog</a></li>
                          </ul>
                  </li>
                  <li>
                           <a href="">
                                  <img src="images/icons/menu/marker.png" alt="" />
                                  Dommer
                          </a>
                          <ul>
                                   <li><a href="">Kampe</a></li>
                                  <li><a href="">Kort</a></li>
                                  <li><a href="">Udvikling</a></li>
                                  <li><a href="">SMART Skema</a></li>
                                  <li><a href="">Træning</a></li>
                                  <li><a href="">Kontakter</a></li>
                                  <li><a href="">Regnskab</a></li>
                                  <li><a href="">Kontoudtog</a></li>
                          </ul>
                  </li>
                  <li>
                           <a href="">
                                  <img src="images/icons/menu/marker.png" alt="" />
                                  Dommer
                          </a>
                          <ul>
                                   <li><a href="">Kampe</a></li>
                                  <li><a href="">Kort</a></li>
                                  <li><a href="">Udvikling</a></li>
                                  <li><a href="">SMART Skema</a></li>
                                  <li><a href="">Træning</a></li>
                                  <li><a href="">Kontakter</a></li>
                                  <li><a href="">Regnskab</a></li>
                                  <li><a href="">Kontoudtog</a></li>
                          </ul>
                  </li>
                  <li>
                           <a href="">
                                  <img src="images/icons/menu/movie.png" alt="" />
                                  Film
                          </a>
                  </li>
                  <li>
                           <a href="">
                                  <img src="images/icons/menu/calendar.png" alt="" />
                                  Kalender
                          </a>
                  </li>
                  <li>
                           <a href="">
                                  <img src="images/icons/menu/contacts.png" alt="" />
                                  Kontakter
                          </a>
                  </li>
                  <li>
                           <a href="">
                                  <img src="images/icons/menu/factory.png" alt="" />
                                  Arbejde
                          </a>
                  </li>
                  <li>
                           <a href="">
                                  <img src="images/icons/menu/inbox2.png" alt="" />
                                  Privat
                          </a>
                          <ul>
                                   <li><a href="">Bank</a></li>
                                  <li><a href="">Bonner</a></li>
                                  <li><a href="">Forsikring</a></li>
                                  <li><a href="">Regninger</a></li>
                                  <li><a href="">Skat</a></li>
                          </ul>
                  </li>
                  <li class="nosubmenu">
                           <a href="">
                                  <img src="images/icons/menu/settings.png" alt="" />
                                 Indstillinger
                          </a>
                  </li>
          </ul>
 </div>
 
 <div id="content" class="white">
          <h1>
                   <img src="images/icons/dashboard.png" alt="" />
                  Dashboard 
          </h1>
          
          <div class="bloc left">
                      <div class="title">
                              I dag
                     </div>
          </div>
          
          <div class="bloc right">
                      <div class="title">
                              RSS FEED     
                     </div>
          </div>
                            
          <div class="bloc">
                      <div class="title">
                              Privat beskeder
                     </div>
          </div>
 </div>
 </body>
 </html>

CSS kode

 html, body, div, span, applet, object, iframe, 
 h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
 abbr, acronym, address, big, cite, code, del, 
 dfn, em, font, img, ins, kbd, q, s, samp, small, 
 strike, strong, sub, sup, tt, var, dl, dt, dd, ol, 
 ul, li, fieldset, form, label, legend, table, caption, 
 tbody, tfoot, thead, tr, th, td 
 {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-weight: inherit;
   font-style: inherit;
   font-size: 100%;
   font-family: inherit;
   vertical-align: baseline;
 }
 body
 {
  background: url('../images/bg.png');
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-family: Arial,Helvetica,Sans-serif;
 } 
 
 #head, #head a.button, 
 #head .search
 {
  background: url(../images/spriteh.png);
 }
 
 #head
 {
  height: 40px;
  line-height: 40px;
  border: 1px solid #000;
  color: #AEAEAE;
  -moz-text-shadow: 0px 1px 0px #000;
  -webkit-text-shadow: 0px 1px 0px #000;
  -o-text-shadow: 0px 1px 0px #000;
  text-shadow: 0px 1px 0px #000;
  z-index: 9999;
 }
 
 #head .left
 {position: absolute;left: 15px;top: 0}
 #head    .right
 {position: absolute;top: 0;right: 15px}
 #head a{color: #FFF;text-decoration: none}
 #head a:hover{text-decoration: underline}
 #head a.button
 {
  border: 1px solid #222;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px 5px 5px 5px;
  display: block;
  float: left;
  width: 25px;
  height: 25px;
  margin-top: 6px;
  margin: 6px 10px 0px 0px;
  line-height: 32px;
  text-align: center;
  background-position: 0px -40px;
 }
 
 #head .search
 {
  position: relative;
  width: 215px;
  height: 25px;
  background-position: 0px -65px;
  margin-top: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px 5px 5px 5px;
  border: 1px solid #505050;
 }
 
 #head .search input.text
 {
  position: absolute;
  border: none;
  background: none;
  width: 194px;
  height: 22px;
  line-height: 27px;
  padding: 0 5px;
  color: #CCC;
  -moz-text-shadow: 0 1px 0px #000;
  -webkit-text-shadow: 0 1px 0px #000;
  -o-text-shadow: 0 1px 0px #000;
  text-shadow: 0 1px 0px #000;
 }
 
 #head .search input.submit
 {
  height: 25px;
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  background: url(../images/search.png) no-repeat center center;
  border: none;
  cursor: pointer;
  text-indent: 3000px;
  overflow: hidden;
 }
 
 #head .search label
 {
  position: absolute;
  border: none;
  background: none;
  width: 194px;
  height: 22px;
  line-height: 25px;
  padding: 0 5px;
 }
 
 #sidebar
 {
  position: absolute;
  z-index: 3;
  top: 42px;
  left: 0;
  bottom: 0;
  width: 240px;
  -moz-text-shadow: 0px 1px 0px #000;
  -webkit-text-shadow: 0px 1px 0px #000;
  -o-text-shadow: 0px 1px 0px #000;
  text-shadow: 0px 1px 0px #000;
  background-color: #494949;
  border-right: 1px solid #1B1B1B;
  -moz-box-shadow: inset -5px 0 5px #404040;
  -webkit-box-shadow: inset -5px 0 5px #404040;.
  -o-box-shadow: inset -5px 0 5px #404040;
  box-shadow: inset -5px 0 5px #404040;
  display: block;
  float: left;
 }
 
 #sidebar>ul>li>a
 {
  height: 40px;
  line-height: 40px;
  text-indent: 30px;
  display: block;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  color: #AAA;
  -moz-text-shadow: 0px 1px #0D0D0D;
  -webkit-text-shadow: 0px 1px #0D0D0D;
  -o-text-shadow: 0px 1px #0D0D0D;
  text-shadow: 0px 1px #0D0D0D;
  background: #494949 url(../images/arrow.png) no-repeat 96% -5px;
  border-bottom: 1px solid #313131;
  border-top: 1px solid #606060;
 }
 
 #sidebar>ul>li>ul>li ul
 {
  margin-left: 20px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  border: none;
 }
 
 #sidebar ul li a img
 {
  vertical-align: text-bottom;
  padding-right: 4px;
  filter: alpha(opacity=49);
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=49);
  -moz-opacity: 0.49;
  opacity: 0.49;
 }
 
 #sidebar ul li a:hover img,
 #sidebar ul li.current a img
 {
  filter: alpha(opacity=100);
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  -moz-opacity: 1;
  opacity: 1;
 }
 
 #sidebar ul li.nosubmenu a
 {
  background-image: none !important;
 }                                                                     
 
 #sidebar>ul>li>a:hover,
 #sidebar>ul>li.current>a
 {
  color: #fff;
  background-position: 96% -53px !important;
  background-color: #585858; 
 }                                                     
 
 #sidebar ul li ul
 {
  background: #404040;
  -moz-box-shadow: inset 0 0 15px #3A3A3A;
  -webkit-box-shadow: inset 0 0 15px #3A3A3A;
  -o-box-shadow: inset 0 0 15px #3A3A3A;
  box-shadow: inset 0 0 15px #3A3A3A;
  border-bottom: 1px solid #313131;
  padding: 7px 0px;
 }
 
 #sidebar ul li li a
 {
  height: 28px;
  line-height: 28px;
  text-indent: 52px;
  display: block;
  text-decoration: none;
  font-weight: normal;
  font-size: 1em;
  background: transparent url('../images/sideli.png') no-repeat 37px 10px;
  color: #949090;
 }
 
 #sidebar ul li li a:hover,
 #sidebar ul li li.current a
 {
  background-position: 37px -31px;
 }
 
 #sidebar a:hover,
 #sidebar li.current>a
 {
  color: #fff !important;
 }
 
 #content
 {
  float: left;
 }

Bruger #16786 @ 19.09.11 14:31

Hvorfor bliver noget af det gentaget 3 gange?

Er htmlet kun til menuen? Har du noget til siden?

Jeg tror du måske først skal prøve at se hvordan det ser ud hvis du fjerner baggrunden i sidemenuen.....

Indlæg senest redigeret d. 19.09.2011 14:48 af Bruger #16786

Bruger #15663 @ 19.09.11 14:43

415

Hej Bjarke.

Jeg ved godt at noget bliver gentaget og det er sådan set også kun noget dummy for at se om det virker som jeg vil have det til.

HTML'en er alt hvad der findes indtil videre.
Jeg har som du kan se i min CSS ikke stylet på noget content endnu, men det kommer.
Jeg vil bare gerne have flyttet det ind så jeg kan se det, det gør det nemlig lidt nemmere at style så.

Bruger #16786 @ 19.09.11 14:47

Har lige redigeret. Jeg har fundet baggrunden i css'en......

Bruger #15663 @ 19.09.11 14:51

415

Hej Bjarke.

Tror sku ikke jeg er kommet over weekenden.
Jeg skal jo bare flytte contenten med margins...

Du skal have tak for hjælpen

<< < 1 2 > >>

Sidemenu skal fylde det hele.

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler