Форум

dschmitz · #1 (**permalink**) 17.11.2010, 06:44

на месте TEXT TEXT TEXT у меня довольно длинный текст и на странице по высоте не помещается. но никакого скролла по умолчанию не появляется, текст просто остается обрезанным. подскажите, пожалуйста, как его правильно упаковать в div?

<body>
            
         <div id="wrapper">
        
        <div id="text"><p>TEXT TEXT TEXT</p> </div>
        
    </div>
    
</body>

Код:

body {
background: #111 url(../images/bg.jpg) no-repeat left top fixed;
position: relative;
}


#wrapper {
background:url(../images/pattern.gif) repeat;
width: 100%;
height:100%;
position:fixed;
z-index: 100;
}


#text { 
margin-top: 30px;
margin-left: 20px;
height:auto;
}
#text p{
       font-family: 'Arial Bold',Arial,sans-serif;
font-size: 16px;
letter-spacing:-0.5px;
padding:0px;
border:none;
color: #fff;
text-decoration: none;
}

ksa · #2 (**permalink**) 17.11.2010, 08:53

dschmitz, не совсем понятно что ты пытаешься сделать в целом... Зачем например

#wrapper {
background:url(../images/pattern.gif) repeat;
width: 100%;
height:100%;
position:fixed;
z-index: 100;
}

И где бы ты хотел получить прокрутку?

dschmitz · #3 (**permalink**) 17.11.2010, 16:38

прокручивать нужно только текст, но с помощью стандартного броузеровского скролла. текст лежит на подложке из фоновой картинки и сетки, заполяющей всю страницу. эта подложка прокручиваться не должна, только текст.

Sweet · #4 (**permalink**) 17.11.2010, 16:53

Сообщение от dschmitz

но никакого скролла по умолчанию не появляется

У дива по умолчанию нет скролла. Используй

overflow: scroll;

dschmitz · #5 (**permalink**) 17.11.2010, 19:55

так вот скролл должен появиться не у дива, а у браузера

ksa · #6 (**permalink**) 17.11.2010, 22:18

dschmitz, если он появится у браузера - начнётся прокрутка всего твоего содержимого...

Сообщение от dschmitz

подложка прокручиваться не должна

Покажи картинкой что же тебе нужно.

`p r o x y · #7 (**permalink**) 27.11.2010, 02:34

как понимаю такое вот нужно:

<!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" dir="ltr" lang="ru">
<head>

<style>
*, html{
	margin: 0;
	padding: 0;
}

#wrapper{
	margin: 0 auto;
	width: 990px;
	background: #cecece;
}

#text_hidden{
	display: none;
}

p{
	line-height: 50px;
}
</style>

<script type="text/javascript">
function showHideText(e){
	var e = e || window.event;
	if (e.type == 'mouseover') document.getElementById('text_hidden').style.display = 'block';
	else document.getElementById('text_hidden').style.display = 'none';
}
</script>

</head>
<body>

<div id="wrapper">
	<div id="text">
		<p>TEXT TEXT TEXT</p>
		<p>TEXT TEXT TEXT</p>
		<div onmouseover="showHideText(event)" onmouseout="showHideText(event)">
			наведи на меня
			<div id="text_hidden">
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				<p>TEXT TEXT TEXT</p>
				
			</div>
		</div>
	</div>
</div>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript