The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> question about design html website, logo's
joris
post Mar 28 2012, 06:09 AM
Post #1





Group: Members
Posts: 1
Joined: 28-March 12
Member No.: 16,809



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

This post has been edited by joris: Mar 28 2012, 06:10 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th April 2024 - 02:58 PM