delete gaps between frames

[spiderpig2008]

Hello guys,

I´m a beginner in programming websites with WB and I puzzled for a long time to design this Webite www.stb-fliege.eu .

No I have a problem which I can´t solve. I want to delete the white gaps arround the menu-frame that the header, the menu and the backround will be one unit.

I would be happy about some answers.

This is my .css


body,td,th {
   font-family: Times;
   font-size: 21px;
   color: #000;
}
body {
   background-color: #fffafa;
   background-image: url(images/background.jpg);
   background-repeat: repeat-x;
   margin: 0px;
}
a:link, a:visited, a:active {
   color: #000000;
   text-decoration: none;
}
a:hover {
   color: #000000;
   text-decoration: none;
}
hr {
   margin: 15px 0px 15px 0px;
   color: #000000;
   height: 1px;
   width: 100%;
}
h1 {
   font-size: 18px;
   color: #000000;
   margin: 5px 0px 5px 0px;
}
h2 {
   font-size: 15px;
   color: #000000;
   margin: 0px 0px 5px 0px;
}
form {
   margin: 0;
}
.header {
   width: 900px;
   height: 150px;
   text-align:left;
   background-color: #fffafa;
   vertical-align: top;
   margin: 0;
}
.menu {
   background-color: #FFCC00;
   position: left;
   width: 200px;
   margin:0;
}
.menu ul, .menu li{
   list-style-type: none;
   margin: 0;
   padding: 0;
}
.menu ul {
   border-bottom: 0px;
   background-color: #FFCC00;
}
.menu ul ul {
   padding-left: 0px;
}
.menu a:link, .menu a:visited, .menu a:active {
   padding: 10px 70px 10px 10px;
   color: #000000;
   display: block;
   background-color: #FFCC00;
   text-decoration: none;
}
.menu a:hover {
   background-color: #FFCC00;
   text-decoration: none;
}
.menu-current {
   font-weight: bold;
}
.highlight {
   background-color: #fffafa;
   margin: 0;
}
.border {
   font-size: 1px;
   height: 10px;
}
.login {
   position: relative;
   bottom: 150 px;
   left: 150 px;
   padding: 0px;
   font-size: 10px;
   background-color: #FFF;
   color: #000000;
   text-align: center;

}
.login input {
   width: 95%;
   font-size: 11px;
}
.login a:link {
   color: #000000;
   text-decoration: none;
}
.login a:hover {
   color: #FFF;
   text-decoration: none;
}
.powered_by {
   padding: 3px 0px 0px 15px;
   background-color: #FFF;
}
.content {
   padding: 10px;
   background-color: #FFF;
   height: 600px;
   vertical-align: top;
   text-align: left;
}

.footer {
    position:fixed;
    bottom:0px;
    left:80px;
    width:1000px;
    background:#fffafa;
    font-size: 11px;
    height:5%;
    text-align:right;
    padding-top:1%;


}
}

[dbs]

Hi and welcome,

plz use #-button for showing code.
In most cases the code is not needed, only the link to the problem.

For the menu: search this in the index.php of your template:

Code: [Select]

<td valign="top" style="background-color: rgb(255, 255, 255); padding: 10px;">and change to:

Code: [Select]

<td valign="top" style="background-color: rgb(255, 255, 255);">
But a free template, without tables, would be a better way for you.
There is also a big german community in this forum.

[spiderpig2008]

Thank you for the nice welcome! 

Honestly I don´t want to change the template because I have invested a lot of work in it right now.

Thank you dbs for your solution. It works. The menu looks good so far but now I want to put the login-box on the left side and make the orange menu-frame a little bit smaler.

[dbs]

For width of menu, same line:

Code: [Select]

<td valign="top" style="background-color: #FFCC00;">change to

Code: [Select]

<td valign="top" style="background-color: #FFCC00; width: 200px;">
For login, find this in your template.css (line 64):

Code: [Select]

form {
    margin: 0;
}and change to

Code: [Select]

form {
    margin: 0 0 0 20px;
}

[spiderpig2008]

I have displaced the LoginBox with this line in the .css
^{form {
   margin-right:100px;}

But the code for the index.php hasn´t solved the problem with the large menuframe.

By the way, why do have to change some points of the design in the "template.css" and other ones in the "index.php" file?

[dbs]

But the code for the index.php hasn´t solved the problem with the large menuframe.

plz copy&paste my code. your code looks wrong.

your margin-right is not what you want, you need margin-left. (i think)  

By the way, why do have to change some points of the design in the "template.css" and other ones in the "index.php" file?

I don't know, it's your template.
Work in index.php with classes and/or id's, than you can all style in css.
HTML & CSS are basics and not WebsiteBaker-specific. You will find many help in Google
or here: http://www.websitebaker2.org/de/hilfe/designerhandbuch.php?lang=DE.

[spiderpig2008]

Thank you again.

Now the construction of the design is how I imagined. But there is a problem with the german letters ü and ä.
For instance: The german "zurück" is shown as zurück.
But the problem is just existing when I use the letters in the menubox. If I use them in the content I don´t have these problems.

I googled but I just found that I have to change the charset in the index.php. I tried it and it doesnt work.

Can someone help me?

[spiderpig2008]

Does realy no one can help me?

If you need some more Information to solute, let me know!

[nibz]

How did you set your charset in the template?

Example of good usage

Code: [Select]

<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />


[spiderpig2008]

Hi nibz,

I set the template on utf8 but it didn´t work.

May I have to change something in the mysql daba.

The strange point is, I have the problems with the wrong letters just in the menu and in the wb-backend, but not in the wysiwyg-content.

[nibz]

Which version and refision are you using?
2.8.3 ?
And did you install the hotfix?

[instantflorian]

Hi,

this is no problem with the hotfix or the charseit which is set by the template. The wrong characters are saved in the database, what sometimes happens when exporting/importing data. So you either have to browse your complete site and correct the ü etc. manually (what is probably easier regarding the small site) or dump the database to an sql file, replace all the crappy chars with ä etc. and re-import it.

Oh, by the way, building a website with tables is "a bit" old fashioned....

BR
_florian.

[spiderpig2008]

Thank you for your answers and thank you Instantflorian for your hint but I don´t care if my method is old fashioned. First priority is, that the website is working. And it does despite the problems with ä and ü.

I have opened the SQL Daba but i didn´t find the incorrect letters. Could anyone tell me where I can approximately find them?

[marmot]

Hi,

how about simply using html-entities ?
Which means ü becomes ü for example.

regards

[spiderpig2008]

Hey marmot,

thank you for this fast and easy solution.

It has worked.

Thank you all for your help!

Best regards and a nice European Championchip!
May the best win!