WebsiteBaker Support (2.8.x) > Templates, Menus & Design

delete gaps between frames

(1/3) > >>

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: ---<td valign="top" style="background-color: rgb(255, 255, 255); padding: 10px;">
--- End code ---
and change to:

--- Code: ---<td valign="top" style="background-color: rgb(255, 255, 255);">
--- End code ---

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: ---<td valign="top" style="background-color: #FFCC00;">
--- End code ---
change to

--- Code: ---<td valign="top" style="background-color: #FFCC00; width: 200px;">
--- End code ---

For login, find this in your template.css (line 64):

--- Code: ---form {
    margin: 0;
}
--- End code ---
and change to

--- Code: ---form {
    margin: 0 0 0 20px;
}
--- End code ---

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?

Navigation

[0] Message Index

[#] Next page