Problem mit Div horizontal scrollen

Ich habe eine HTML-Seite, an der ich arbeite. Ich habe ein div namens "featuredcontent", dem ich eine N Anzahl von Elementen mit der Klasse "item" hinzufügen werde. Ich möchte, dass die featuredcontent-Box horizontal scrollt, wenn ich den Platz im Layout überschreite. So ähnlich wie iTunes ihre Lieder macht. Mein Problem ist, wenn ich das versuche und die Boxen so definiere, dass sie nicht richtig expandieren. Hier ist mein grober Entwurf des Codes.Problem mit Div horizontal scrollen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
<!-- 
* { 
    padding:0px; 
    margin:0px; 
    font-family:Arial, Helvetica, sans-serif; 
} 

#container { 
    width:990px; 
    margin-left:auto; 
    margin-right:auto; 
} 

#header { 
    margin-top:20px; 
    text-align:left; 
    overflow: auto; 
} 

#featured { 
    width: auto; 
    float: left; 
    text-align: left; 
} 

#navbar { 
    padding-top:5px; 
} 

#navbar a { 
    color:#000; 
    padding-right:40px; 
    font-weight:bold; 
    text-decoration:none; 
    font-size:20px; 
} 

#navbar a:hover { 
    text-decoration:underline; 
} 

#logo { 
    width:290px; 
    height:250px; 
    float:right; 
    vertical-align:50%; 
    background:url(logo.jpg); 
} 

#main { 
    margin-top: 30px; 
} 

#mainfeature { 
    overflow:auto; 
    white-space:nowrap; 
} 

.item { 
    width:150px; 
    height:300px; 
    margin-right:10px; 
    color:#0FF; 
    display:inline; 
} 
--> 
</style> 
</head> 

<body> 
<div id="container"> 
    <div id="header"> 
     <div id="featured"> 
      <img width="700" height="225" src="#" /> 
       <div id="navbar"><a href="#">Link</a><a href="#">Link</a><a href="#">Link</a><a href="#">Link</a></div> 
      </div> 
      <div id="logo"></div> 
     </div> 
     <div id="main"> 
     <div id="mainfeature"> 
      <div class="item">&nbsp; asdf</div> 
       <div class="item">&nbsp; adsf</div> 
       <div class="item">&nbsp; adf</div> 
       <div class="item">&nbsp; ad f</div> 
       <div class="item">&nbsp; adsdfewsgewt</div> 
      </div> 
      <div id="secondaryfeature"></div> 
      <div id="socialbar"></div> 
     </div> 
     <div id="footer"></div> 
</div> 
</body>

Quelle

2010-12-01 Chris Maness

Sie brauchen nicht Ihre CSS. –

geben, dass ein Versuch:

#featured { 
    overflow-x: scroll; 
}

Quelle

2010-12-01 15:59:43 benhowdle89

ich seine navbar denken, die scrollen muss. Es muss auch eine Breite:

#navbar { 
    width: 990px; 
    padding-top:5px; 
    overflow-x: auto; 
}

Quelle

2010-12-01 16:11:45 Steve

Wenn Sie eine benutzerdefinierte Scrollbar haben wollen, ich glaube, Sie zu JScrollPane aussehen kann. (http://jscrollpane.kelvinluck.com/)

Die CSS-Eigenschaft "overflow-x" ist eine gute Antwort, aber ich hasse die Standard-Bildlaufleisten. ;)

Quelle

2010-12-01 16:34:12

Antwort

Verwandte Themen