Positioning the bottom links to the left, valid for diff screen sizes

This commit is contained in:
Aiora Zabala 2011-04-29 11:50:07 +02:00
parent ec165bf63e
commit cff25ee574
4 changed files with 57 additions and 21 deletions

View File

@ -1,20 +1,29 @@
/*This CSS file has been edited for CUCC - Expo website by A. Zabala on 2011 -feel free to use or modify it*/
/*This CSS file has been edited for CUCC - Expo website by A. Zabala on 2011*/
/* code of colours
#99CCCC light blue
#008787 darker blue for fonts
#004C4C very dark
*/
body {
background: #fff url(../images/style/bg-cambridge-caving-expedition.png) repeat-x 0 0;
color: #000;
font-family: 'Palatino Linotype','Book Antiqua',Palatino,serif;
font-size: 12pt;
margin: auto;
margin-left: 275px;
text-align: justify;
width: 800px;
max-width: 800px;
}
body#homepage {
margin-left: auto;
margin: auto;
}
.caption {
color: #004C4C;
font-family: Tahoma,'Trebuchet MS','Lucida Grande',Verdana,Arial,Sans-Serif;
font-size: 8pt;
font-weight: bold;
margin-bottom: 0;
}
.caption { font-size: 8pt; margin-bottom: 0pt; }
.centre { text-align: center; }
.plus2pt { font-size: 160%; }
a {
@ -32,9 +41,14 @@ h1, h2, h3, h4 {
}
h1 { text-align: center; font-size: 210%;
line-height: 100%; margin: 35px 0 55px;}
h2 { color: #009900; }
h3 { color: #2c105e; }
h4 { color: #0d664c; }
h2, h3, h4 {
color: #008787;
}
h2#tophead {
text-align: center;
margin: 10px 0 -22px;
}
/*IMAGES*/
img.onright, div.onright { vertical-align: top; float: right;
margin-left: 10pt; margin-bottom: 10pt;
@ -48,33 +62,56 @@ table.imgtable { margin-left: auto; margin-right: auto; }
table.imgtable td { vertical-align: middle; text-align: center;
padding: 10px; }
/*Menu*/
.menu {
background: #fff;
.menu,
ul#links {
background: #fff url(../images/style/menu-main.png) no-repeat 0 0;
clear: both;
border: 2px solid #99CCCC;
position: fixed;
left: 20px;
top: 20px;
position: absolute;
left: 35px;
font-family: Tahoma,'Trebuchet MS','Lucida Grande',Verdana,Arial,Sans-Serif;
font-size: 75%;
color: #888;
width: 150px;
padding: 15px 20px;
padding: 30px 20px 15px;
text-align: left;
}
.menu {
top: 20px;
}
ul#links {
background-image: url(../images/style/menu-second.png);
/*border-color: #C8E1E2;
border-style: dotted;*/
top: 20px /*300px; to be set once the menu is in all pages*/
}
p#topheader {
font-weight: bold;
margin: 10px 0 0;
}
.menu ul {
margin: 0;
margin: 0 0 0 15px;
padding: 0;
}
.menu li {
.menu li,
ul#links li {
margin: 5px 0;
list-style: square inside none;
list-style: square outside none;
}
.menu li a:hover {
ul#links li {
margin: 5px 0 0 15px;
}
ul#links li ul {
padding: 5px 0 5px 10px;
}
ul#links li li {
margin: 0 0 0 5px;
}
.menu li a:hover,
ul#links li a:hover {
border-bottom: 2px solid #d7442b;
}
/* "Traditional" table with borders.*/
table.trad { margin: 0pt; border: 1px solid #000;
border-color: #c0c0c0 #8d8d8d #8d8d8d #c0c0c0; }
@ -86,7 +123,6 @@ table.trad td, table.trad th { margin: 0pt; border: 1px solid #aaa;
table.centre { margin-left: auto; margin-right: auto; }
table.centre td { text-align: left; }
h2#tophead { text-align: center; margin-bottom: -10pt; }
table#cavepage { width: 100%; font-size: 160%; }
table#cavepage th#kat_no { text-align: left; width: 25%; }
table#cavepage th#name { text-align: center; width: 50%; }

BIN
images/style/menu-main.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -8,7 +8,7 @@
</style>
</head>
<body>
<body id="homepage">
<h1>CUCC in Austria <a href="years/1976/report.htm">1976</a>-<a href="years/2011">2011</a></h1>
<p style="text-align: center">Welcome to the website of the Cambridge University Caving