Hi,
I'm a absolute beginner with html but helped myself until now with google, sjabloons, etc.
The site is named: www.deluk.be
But now I have a problem i'm stuck with. I would like to place some embleems from sponsors (.jpg or .gif) on the left and the right side from the menu, untill beneath.
What should I change were?
Beneath this is my "base" and "index"
base:
* {
margin: 0;
padding: 0;
}
body {
font-family: "Trebuchet MS", sans-serif;
color: black;
background-color: gainsboro;
font-size: 100%;
}
#kop {
width: 896px;
height: 174px;
margin: 0 auto;
background-color: midnightblue;
background-image: url(fotos/siteverspreid/groepnoorwegen2009.jpg);
background-repeat: no-repeat;
background-position: right top;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
}
#kop p {
color: white;
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 44px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
padding-left: 20px;
padding-top: 48px;
}
#midden {
width: 896px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
overflow: hidden;
}
#menu {
height: 26px;
width: 896px;
margin: 0 auto;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
background-color: firebrick;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
float: left;
width: 128px;
position: relative;
}
#menu li a:link, #menu li a:visited {
display: block;
width: 127px;
height: 22px;
border-right: 1px solid black;
padding-top: 4px;
text-align: center;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
color: white;
font-weight: bold;
}
#menu li a:hover, #menu li li a.sub:hover {
background-color: cornflowerblue;
}
#menu li ul {
width: 128px;
border-top: 1px solid black;
position: absolute;
left: -10000px;
top: 1px;
font-size: 14px;
}
#menu li li a:link, #menu li li a:visited {
display: block;
width: 170px;
height: 22px;
background-color: firebrick;
border-right: 0;
padding-left: 8px;
padding-top: 4px;
text-align: left;
text-decoration: none;
text-transform: none;
color: white;
font-size: 14px;
}
#menu li:hover ul {
display: block;
left: -1px;
top: 26px;
}
#hoofdvak, #hoofdvak2 {
clear: both;
float: left;
width: 547px;
padding-left: 18px;
padding-right: 18px;
padding-top: 28px;
padding-bottom: 32000px;
margin-bottom: -32000px;
background-color: white;
}
#hoofdvak2 {
width: 896px;
}
#hoofdvak p, #hoofdvak2 p {
font-size: 85%;
margin-bottom: 18px;
}
#hoofdvak ul, #hoofdvak ol,#hoofdvak2 ul, #hoofdvak2 ol {
font-size: 85%;
margin-bottom: 18px;
margin-left: 18px;
}
#hoofdvak img,#hoofdvak2 img {
margin: 18px;
}
#hoofdvak h1,#hoofdvak2 h1 {
font-size: 120%;
font-weight: bold;
color: firebrick;
margin-bottom: 6px;
}
#hoofdvak h2, #hoofdvak2 h2 {
font-size: 100%;
font-weight: bold;
color: cornflowerblue;
margin-bottom: 6px;
}
#hoofdvak form, #hoofdvak2 form {
margin-bottom: 26px;
}
.invulveld {
font-family: "Courier New", Courier, monospace;
font-size: 95%;
color: midnightblue;
}
#kolomrechts {
width: 300px;
float: left;
background-color: white;
border-left: 1px solid black;
padding-right: 4px;
padding-left: 8px;
padding-top: 28px;
padding-bottom: 32000px;
margin-bottom: -32000px;
text-align: center;
}
#kolomrechts p {
font-size: 75%;
color: black;
margin-bottom: 24px; }
#voet {
clear: both;
width: 890px;
margin: 0 auto;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
border-top: 1px solid black;
font-size: 60%;
text-align: right;
color: firebrick;
}
#voet a:link, #voet a:visited {
text-decoration: none;
color: firebrick;
}
#voet a:hover {
text-decoration: none;
color: darkslateblue;
}
_________________________________________
index:
* {
margin: 0;
padding: 0;
}
body {
font-family: "Trebuchet MS", sans-serif;
color: black;
background-color: gainsboro;
font-size: 100%;
}
#kop {
width: 896px;
height: 174px;
margin: 0 auto;
background-color: midnightblue;
background-image: url(fotos/siteverspreid/groepnoorwegen2009.jpg);
background-repeat: no-repeat;
background-position: right top;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
}
#kop p {
color: white;
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 44px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
padding-left: 20px;
padding-top: 48px;
}
#midden {
width: 896px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
overflow: hidden;
}
#menu {
height: 26px;
width: 896px;
margin: 0 auto;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
background-color: firebrick;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
float: left;
width: 128px;
position: relative;
}
#menu li a:link, #menu li a:visited {
display: block;
width: 127px;
height: 22px;
border-right: 1px solid black;
padding-top: 4px;
text-align: center;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
color: white;
font-weight: bold;
}
#menu li a:hover, #menu li li a.sub:hover {
background-color: cornflowerblue;
}
#menu li ul {
width: 128px;
border-top: 1px solid black;
position: absolute;
left: -10000px;
top: 1px;
font-size: 14px;
}
#menu li li a:link, #menu li li a:visited {
display: block;
width: 170px;
height: 22px;
background-color: firebrick;
border-right: 0;
padding-left: 8px;
padding-top: 4px;
text-align: left;
text-decoration: none;
text-transform: none;
color: white;
font-size: 14px;
}
#menu li:hover ul {
display: block;
left: -1px;
top: 26px;
}
#hoofdvak, #hoofdvak2 {
clear: both;
float: left;
width: 547px;
padding-left: 18px;
padding-right: 18px;
padding-top: 28px;
padding-bottom: 32000px;
margin-bottom: -32000px;
background-color: white;
}
#hoofdvak2 {
width: 896px;
}
#hoofdvak p, #hoofdvak2 p {
font-size: 85%;
margin-bottom: 18px;
}
#hoofdvak ul, #hoofdvak ol,#hoofdvak2 ul, #hoofdvak2 ol {
font-size: 85%;
margin-bottom: 18px;
margin-left: 18px;
}
#hoofdvak img,#hoofdvak2 img {
margin: 18px;
}
#hoofdvak h1,#hoofdvak2 h1 {
font-size: 120%;
font-weight: bold;
color: firebrick;
margin-bottom: 6px;
}
#hoofdvak h2, #hoofdvak2 h2 {
font-size: 100%;
font-weight: bold;
color: cornflowerblue;
margin-bottom: 6px;
}
#hoofdvak form, #hoofdvak2 form {
margin-bottom: 26px;
}
.invulveld {
font-family: "Courier New", Courier, monospace;
font-size: 95%;
color: midnightblue;
}
#kolomrechts {
width: 300px;
float: left;
background-color: white;
border-left: 1px solid black;
padding-right: 4px;
padding-left: 8px;
padding-top: 28px;
padding-bottom: 32000px;
margin-bottom: -32000px;
text-align: center;
}
#kolomrechts p {
font-size: 75%;
color: black;
margin-bottom: 24px; }
#voet {
clear: both;
width: 890px;
margin: 0 auto;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
border-top: 1px solid black;
font-size: 60%;
text-align: right;
color: firebrick;
}
#voet a:link, #voet a:visited {
text-decoration: none;
color: firebrick;
}
#voet a:hover {
text-decoration: none;
color: darkslateblue;
}
thanks for any advice...
Joris
Can you post the URL to the page? Afraid the CSS isn't enough.
There's no place on the left and right of the menu as it takes up the full width of the container of the content on the page.
Can you be more precise?
(BTW for non Dutch speakers, sjabloon = template)
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)