• Locked
1 reply [Last post]
Mon, 2010-02-08 16:46
gLf80
gLf80's picture
User offline. Last seen 28 weeks 6 days ago. Offline
newbie
Timezone: GMT+1
Joined: 2010-02-08
Posts: 2
Points: 3

Hi everybody,

My first post...I can't find any answer in previous posts, so thanks in advance for any help!

First of all, to visualize the problem:

As you can see, I have two Div, one floating left (sidebar) and the other floating right.
In the sidebar menu, I have one list item with too long content that over flow (Assistenti, Dottorandi e Specializzandi). I'd like to wrap text, in order to display it in two lines, but keeping the formatting, with the height of the li#navitem auto adjusting with its content.

Is it possible? I've tried overflow, but I don't want a scroll bar, it isn't what I'm looking for.
Hope all is clear...Thanks!

The CSS code:

body {
	font: 70% Verdana, Arial, Helvetica, sans-serif;
	margin: 30px 5px 30px 5px;
	text-align: center;
	background:#FFFFFF;
	color: #191919;
}
 
a:link, a:visited {
	color: #004080;
	text-decoration: none;
}
 
a:hover, a:active {
	color: #63727c;
	text-decoration: underline;
}
 
#container { 
	width: auto;
	margin: 0px auto; /* Right And Left Margin Widths To Auto */
	text-align: left; /* Hack To Keep IE5 Windows Happy */;
	padding: 0 20px 20px 0px;
	padding: 0px 20px 0;
}
 
#sidebarContainer {
	position: relative;
  float: left;
	width:23%;
	text-align: left;	
}
 
#sidebarContainer #sidebar {
	line-height: 1.8em;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;	
}
 
#sidebarContainer .sideHeader {
	background: #61727a;
	color: #ffffff;
	margin: 0 -10px;
	padding: 0 10px;
	line-height: 1.7em;
	letter-spacing: 1px;
	font-size: 1em;
}
 
#content {
	position: relative;
	margin: 10px 0 0 24%;
	border: 1px solid #5c8aa7;
	padding-bottom: 10px;
	vertical-align:top;
}
 
#content h3{
	color: #000000;
	padding: 5px 55px 5px 20px;
	text-align: left;
	font-size: 1.2em;
	font-weight: bold;
	background: #D9E8D9;	
	border-top: solid 1px #5c8aa7;
	border-bottom: solid 1px #5c8aa7;
	margin: 10px 0px 5px 0px;
}
 
/* @group Toolbar */
 
/* Toolbar Styles */
 
#navcontainer {
	line-height: 2.0em;
	padding-top: 0px;
	position: relative;
	margin-bottom: 10px;
}
 
#navcontainer #navitem {
	width: auto;
	display: block;
	float: none;
	font-weight: bold;
	font-size: 1.1em;
	}
 
#navcontainer #current {
	color: #000000;
	background: #98afbe;
	font-weight: bold;	
}
 
#navcontainer #current:hover {
}
 
#navcontainer .currentAncestor {
	color: #ffffff;
	background: #72848f;
	font-weight: bold;
	font-size: 0.7em;
}
 
/* Parent - Level 0 */
 
#navcontainer ul{
	width: auto;
	height:auto;
	list-style: none;
	padding: 0;
	margin: 0;
}
 
#navcontainer li {
	height:auto;
}
 
#navcontainer a {
	background: #62727b;
	color: #ffffff;
	display: block;
	text-decoration: none;
	padding-left: 10px;
	height: 25px;
	margin-bottom: 1px;
	letter-spacing: 1px;
}
 
#navcontainer a:hover {
	background: ;
	color: ;
}
 
#navcontainer a:active {
}
 
/* Child - Level 1 */
 
#navcontainer ul ul {
	padding: 0;
	margin: 0;
}
 
#navcontainer ul ul li {
 
}
 
#navcontainer ul ul a {
	padding-left: 25px;
	background: #d8e8e8;
	color: #848484;
}
 
#navcontainer ul ul .acapo {
	background: #98afbe;
	color: #ffffff;
	font-weight: bold;
	font-size: 0.9em;
	height:45px;
}
 
#navcontainer ul ul a:hover{
	background: white;
	color: #61727a;
}
 
#navcontainer ul ul #current{
	background: #98afbe;
}
 
#navcontainer ul ul .currentAncestor {
	background: #98afbe;
	font-size: 0.9em;
}

And Html:

<!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"><head>
 
  <title>Test</title>
  <link rel="stylesheet" type="text/css" media="screen" href="test.css">
 
</head><body>
<div id="container">
    <!-- Start container -->
 
	<div id="sidebarContainer"><!-- Start Sidebar sinistra -->
  <!-- Start Navigation -->    
      <div id="navcontainer">       
			<ul><li id="navitem">
				<a href="" f">Dipartimento</a></li>
			<ul><li id="navitem">
				<a href="sezioni.php" rel="self" class="currentAncestor">Sezioni</a>
	    <li id="navitem">
				<a href="docenti.php" rel="self" class="currentAncestor">Docenti</a></li>
			<li id="navitem">
				<a href="assegnisti.php" rel="self" class="currentAncestor">Assistenti, Dottorandi e Specializzandi</a></li>
			<li id="navitem">
				<a href="personale.php" rel="self" class="currentAncestor">Personale</a></li>
				<li id="navitem">
				<a href="avvisi.php" rel="self" class="currentAncestor">Avvisi e Bandi</a></li>
			</ul>	
 
			</div>
	</div>		
<!-- End navigation -->     
 
 
</body>
</html>

Top
Tags:
Mon, 2010-02-08 18:21
#1
gLf80
gLf80's picture
User offline. Last seen 28 weeks 6 days ago. Offline
newbie
Timezone: GMT+1
Joined: 2010-02-08
Posts: 2
Points: 3

Sorry, the problem occurs

Sorry, the problem occurs only when in 800x600 window mode...

Top
  • Locked