The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
pandy
post Mar 28 2012, 08:10 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Can you post the URL to the page? Afraid the CSS isn't enough.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Mar 28 2012, 08:12 AM
Post #3


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE
The site is named: www.deluk.be

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 28 2012, 10:11 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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: 28th March 2024 - 03:30 PM