4 Replies - 1192 Views - Last Post: 05 April 2014 - 01:08 AM

#1 arthurhabraken   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 04-April 14

where are the scrollbars when I need them ?

Posted 04 April 2014 - 01:21 PM

Hello,

I'm trying to create a personal webpage and I managed to create a menu with CSS and a content-div. But when I resize my browser so that the text is larger than fits in the content-div, I don't see a vertical scrollbar !! Can you please help me out ?

Thanks in advance,
Arthur Habraken

===========================================

<!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>Arthur Habraken</title>
</head>
<style>
body {
	background: #f7ebbd;
	
	font-family:Arial, Helvetica, sans-serif;
	color: #1D4515;   /* dark green */
}
/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
} 
#myline {
    float: right;
	background-color: red;
	margin-left: 25%;
	margin-right: 2.5%;
	height: 10px;
}
#menu {
	background-color: none;  /* light green */
	float: right;
	margin-left: 25%;
	margin-top: 20%;
	margin-right: 2.5%;
	height: 2em;

}
nav {
	background: #1D4515; /* #E8FE9C; /* #FFCC66; */
	margin-top: 2em;
	height: .1em;

}
#content {
	position: fixed;
	float: right;
	width: 80%;
	margin-left: 15%;
	margin-top: 29%;
	line-height: 1.6em;
    text-align:justify;
}
ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font:Arial, Helvetica, sans-serif;
	font-size:5.em;
}
li a {
	display: block;
	line-height: 2em;
	padding: 0 1em;
	color: #1D4515;   /* dark green */
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
}
li a:hover {
	height: 2em;
	color: white;
	padding-top: 0.3em;
	position: relative;
	top: -0.3em;
	border-radius: .3em .3em 0 0;
	background: #345B2D;
}
.current, a:hover.current  {
	background: #c9df8a;  /* #6BAD58; */
	color:  #1D4515;   /* dark green */
	padding-top: .3em;
	border-radius: .3em .3em 0 0;
	position: relative;
	top: -.5em;
	border-bottom: .3em solid #345B2D;
	cursor:default;
}
</style>
<body>
<div id="menu">

  <li><a href="welkom.htm" title="Welkom bij de homeopatische  praktijk van Arthur Habraken" class="current">Welkom</a></li>
  <li><a href="praktijk.htm" title="informatie over de werkwijze in mijn praktijk">Praktijk</a></li>
  <li><a href="homeopathie.htm" title="praktische informatie over homeopathie">Homeopathie</a></li>
  <li><a href="contact.htm" title="alle contact-informatie op een rijtje">Contact</a></li>
<nav></nav>
</div>
<div id="content">Welkom bij mijn praktijk voor klassieke homeopathie ! Via deze site hoop ik u voldoende van informatie en vertrouwen te voorzien zodat u samen met mij aan uw gezondheid kan gaan werken. Samen ? Jazeker, homeopathie bestaat uit samenwerken. Samen gaan we op zoek naar het verhaal achter uw klachten, om zodoende de juiste geneesmiddelen te kunnen bepalen. Hoe we daarbij precies te werk gaan kunt u lezen bij de werkwijze.<br /><br />
Onder het menu homeopathie kunt u meer lezen over mijn visie over homeopathie.</div>
</body>
</html>

This post has been edited by andrewsw: 04 April 2014 - 01:45 PM
Reason for edit:: Please use code tags


Is This A Good Question/Topic? 0
  • +

Replies To: where are the scrollbars when I need them ?

#2 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6829
  • View blog
  • Posts: 28,317
  • Joined: 12-December 12

Re: where are the scrollbars when I need them ?

Posted 04 April 2014 - 01:54 PM

overflow: auto; 

would be used to introduce scrollbars. However, your div doesn't have a specific height, so this won't work as the div itself will just expand to include its content. This is how divs work by default.

BTW You are using an XHTML doctype which doesn't have a nav-element. This element was introduced in HTML5.

BTWW Do you really want to use 'fixed' for your content-div? But.. it's your decision.

Also, 'none' is not a valid colour, perhaps you meant 'transparent'.
Was This Post Helpful? 0
  • +
  • -

#3 arthurhabraken   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 04-April 14

Re: where are the scrollbars when I need them ?

Posted 04 April 2014 - 02:02 PM

Hi Andrewsw,

Thanks for your response, I will try your suggestions tomorrow. I'm just a starter, so I probably have some strange things in my code :whistling: I appreciate your comments, thank you very much !!

Best regards,
Arthur Habraken
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: where are the scrollbars when I need them ?

Posted 04 April 2014 - 10:05 PM

This will accomplish what you're looking for, but if you're resizing your browser you may want to look into using practices from RWD (Responsive Web Design). For example here is a responsive menu tutorial

Good luck!
Was This Post Helpful? 0
  • +
  • -

#5 arthurhabraken   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 04-April 14

Re: where are the scrollbars when I need them ?

Posted 05 April 2014 - 01:08 AM

Hi Gregwhitworth,

Thanks for your response. The previous answer helped me already, but I'm very glad with your response as well. So thank you very much !

Best regards,
Arthur

View Postgregwhitworth, on 04 April 2014 - 10:05 PM, said:

This will accomplish what you're looking for, but if you're resizing your browser you may want to look into using practices from RWD (Responsive Web Design). For example here is a responsive menu tutorial

Good luck!

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1