28111 sujets

CSS et mise en forme, CSS3

Contenu coupé au redimensionnement du viewport

Bonjour,

j'ai un menu latéral en float left à gauche et un div à droite qui contient du texte. J'ai mis celui-ci en overflow: hidden afin d'avoir un contexte de formatage en block.
C'est niquel tout se présente bien suaf lorsque je redimensionne le viewport : le texte dans le div reste en place mais est coupé à cause du overflow: hidden (idem avec un overflow: auto).

Je contrains donc une largeur au div mais dans le cas d'un redimensionnement du viewport, tout le div se trouve en-dessous du menu latéral. Et avec un max-width, je me retrouve avec ma problématique énoncé plus haut.

Pourriez vous m'aider Smiley smile ?
salut,
le contenu est coupé comment ? En largeur en hauteur ? Est-ce qu'on pourrait voir ton code pour mieux comprendre.
Tu peux aussi passer par une mise en page tabulaire pour avoir ce résultat.
Bonjour,

le contenu est coupé juste en largeur, en hauteur ça passe ; pour le voir il faut vraiment diminuer en largeur la fenêtre du viewport quasiment au minimum, jusqu'à ne distinguer que une ou deux lettres de chaque mot. Avec le scrolling horizontal, c'est là que l'on voit le contenu coupé.

alors le code :
<body>
<nav class="menu-superieur">
	<ul>
		<li class="items">
			<a href="#" class="liens">Lien A</a>
		</li>
		<li class="items">
			<a href="#" class="liens">Lien B</a>
				<ul class="ulet">
					<li>
						<a href="#">Sous lien A</a>
					</li>
					<li>
						<a href="#">Sous lien B</a>
					</li>
					<li>
						<a href="#">Sous lien C</a>
					</li>
					<li>
						<a href="#">Sous lien D</a>
					</li>
					<li>
						<a href="#">Sous lien E</a>
					</li>
				</ul>
		</li>
		<li class="items">
			<a href="#" class="liens">Liens C</a>
		</li>
		</li>
		<li class="items">
			<a href="#" class="liens">Liens D</a>
		</li>
		</li>
		<li class="items">
			<a href="#" class="liens">Liens E</a>
		</li>
		<li class="items">
			<a href="#" class="liens">Liens F</a>
		</li>
	</ul>
</nav>

<nav class="menu-lateral" id="menu-lateral">
	<h2>Espace établissement</h2>
	<ul>
		<li><a href="#" id="presentation">A</a</li>
		<li id="organisation"><a href="#">B</a></li>
		<ul id="ul-de-org">
			<li><a href="#">sous lien A</a></li>
			<li><a href="#">sous lien B</a></li>
			<li><a href="#">sous lien C</a></li>
	    </ul>
		<li><a href="#" id="chiffres">C</a></li>
	</ul>
</nav>

<section class="presentation">		

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut pellentesque felis. Ut venenatis dolor sed gravida sagittis. Nunc a justo lacinia nisi sodales vehicula vitae ut dui. Sed in tortor imperdiet, posuere dui id, suscipit orci. Fusce mollis et sapien ac accumsan. In vestibulum sapien ligula, ut consequat eros mollis ut. Morbi molestie pulvinar auctor. Integer purus purus, auctor suscipit viverra interdum, accumsan non sem. Praesent eget pharetra elit, eu tempus sem. Aliquam a eros mauris. Integer arcu elit, faucibus id blandit a, mollis eu est.

Nulla facilisi. Vivamus ac mi viverra, ornare sapien sed, adipiscing quam. Aenean imperdiet ante nec nunc venenatis tristique. Nunc rhoncus fermentum lectus, nec venenatis libero dignissim vitae. Vivamus in tellus sapien. Quisque eget sagittis sapien. Phasellus id dictum tellus. Aliquam erat volutpat. Pellentesque eget dui nunc. Morbi sed neque eu arcu sollicitudin cursus. Praesent ultricies ipsum vitae orci volutpat, et posuere mauris viverra. Proin volutpat dapibus tristique. Nulla at arcu et eros sagittis dignissim. Vestibulum eu cursus lorem. Nulla vitae laoreet erat. Mauris iaculis, nulla ut rutrum feugiat, felis enim tincidunt sapien, at cursus mi nisl eget odio.

Vivamus dictum, libero sit amet volutpat lacinia, nulla ipsum dapibus nulla, vel tempus leo elit vel ipsum. Vivamus nec hendrerit sem. Nam tincidunt condimentum neque. Nullam tincidunt, elit id tincidunt porttitor, augue enim sollicitudin odio, ut feugiat purus ligula vel sem. Fusce suscipit leo non ligula blandit ullamcorper. Mauris et sodales augue. Nullam a tortor pulvinar, tristique quam ac, lacinia est. Ut facilisis, turpis vitae egestas semper, nulla diam semper elit, sit amet pharetra urna mauris in massa. Suspendisse a placerat enim. Donec semper mattis metus tincidunt sagittis. Etiam pellentesque tempor augue, ac lacinia mauris sagittis tincidunt. Aliquam sapien est, venenatis in suscipit vel, congue ut nunc. </p>

</section>
</body>


et le CSS :

/*--------------------------------------MENU LATERAL----------------------------*/
.menu-lateral
{
float: left; 
background-color: #f3cccc;
height: 1205px;
margin-top: 5px;
margin-right: 49px;
padding-right: 20px;
}

.menu-lateral li
{
list-style-type: none;
}

.menu-lateral ul
{
line-height: 38px;
padding: 0px;
}

.menu-lateral ul ul
{
padding: 0 10px 0 40px;
}

.menu-lateral h2
{
padding-top:10px;
}

/*--------------------------------------PRESENTATION----------------------------*/

.presentation
{
position: relative;
overflow: hidden;
}

/*--------------------------------------MENU DE NAVIGATION----------------------------*/
.menu-superieur
{
background: #f3cccc; 
height: 40px;
text-align: center;
min-width: 1233px;
}

li +.items
{
border-left: 1px solid #eecccc;
box-shadow: 1px 0 0 #cea0a0 inset;
}

.items
{
position: relative;
}

.menu-superieur ul li ul  
{ 
display: none;
position: absolute;
background: #f3cccc; 
z-index:10;
top: 40px;
left: 0px;
}

.menu-superieur ul
{
padding: 0;
}

.menu-superieur ul li
{
display: inline-block;
list-style-type: none;
padding: 0 42px;
}

.menu-superieur a
{
color: #7f7f7f;
line-height: 40px;
}

.menu-superieur ul li:hover ul 
{
display: block;
}

.menu-superieur ul li ul li
{
display: block;
padding: 6px 0;
text-align: left;
width: 260px;
}

.menu-superieur ul li ul li + li
{
border-top: 1px solid #eecccc;
box-shadow: 0px -1px 0px #cea0a0;
}


Merci de votre aide
Modifié par rocketter (29 Jul 2014 - 09:14)
Simple question, pourquoi laisser libre le dimensionnement du contenu central quand tu limites la largeur minimale du menu du haut ?
Je ne vois pas trop ce que tu cherches à faire mais autant appliquer un "min-width" sur le conteneur général qui est en l'occurrence le <body> dans ce cas.
Ou alors je n'ai pas tout compris.
Mais oui lol !! merci j'avais oublié complètement mon conteneur général Smiley confus le fait de lui fixer un min-width dans une media query a résolu mon souci, merci beaucoup Zelalsan !!! Smiley ravi
Sujet clos
Aller à