1. Forsiden
  2.  » Navigation
  3.  » Dropdown menu artikel

Dropdown menu eksempel 7b

Dette eksempel er en videreførelse af eksempel 7a. Problemstillingen er nu at vi gerne vil have en fikseret bredde på menuspalten, så vi kan undgå den overlapnning mellem højre og venstre spalte vi får i eksempel 7a ved små bredder af browservinduet.

Jeg tager igen udgangspunkt i det stylesheet, der layouter eksempel 7:

div#page {
  position:relative /* Aht Firefox, Opera m.fl. */
  width:45em;
  margin:1em auto; 
  background:#efefff;
  border:1px solid #257;}

div#menucol {
  width:13em;
  float:left;
  padding-top:30px;}

div#indhold {
  margin-left:13em;
  border-left:1px solid #257;
  padding-left:1em;}

til

div#page {
width:90%;
margin:1em auto; 
background:#efefff;
border:1px solid #257;}

div#menucol {
width:13em;
float:left;
padding-top:30px;}

div#indhold {
margin-left:13em;
border-left:1px solid #257;
padding-left:1em;}

I ovenstående har jeg markeret ændringerne i forhold til eksempel 7 med rødt. Som du kan se, er der kun tale om en eneste lillebitte ændring – hele websiden bliver elastisk, men kun artikelspalten udvides med browservinduet.

I lidt mere raffineret udgave har jeg præsenteret det samme layout i sektionen om webside-layout med stylesheets, mere specifikt Float-layout eksempel 8.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem. Nullam consequat tristique libero. Suspendisse id erat. Duis ante sem, laoreet nec, nonummy non, posuere at, sapien. Nam porta. Cras sapien tortor, vehicula at, scelerisque quis, consequat at, enim. Fusce quis tortor. Quisque magna. Proin nunc. Phasellus purus metus, tempus a, lobortis in, mollis sed, erat. Nulla facilisi. Curabitur wisi.

Maecenas accumsan libero sit amet libero. Sed velit ligula, vulputate sit amet, commodo non, ultrices vel, velit. Donec vitae risus quis erat semper congue. Nunc ornare faucibus enim.

Aenean pretium elit nec velit. Phasellus commodo, nibh at vulputate dapibus, nisl quam venenatis sem, quis ornare nunc nulla ut libero. Aenean ipsum. Fusce lacinia congue mauris. Maecenas non libero. Nullam eget enim. Integer iaculis arcu dictum ligula. Ut neque ipsum, vestibulum ut, interdum at, aliquam vel, felis.