Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ question about design html website

Posted by: joris Mar 28 2012, 06:09 AM

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

Posted by: pandy Mar 28 2012, 08:10 AM

Can you post the URL to the page? Afraid the CSS isn't enough.

Posted by: Darin McGrew Mar 28 2012, 08:12 AM

QUOTE
The site is named: www.deluk.be


Posted by: Frederiek Mar 28 2012, 10:11 AM

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)