WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: spiderpig2008 on May 19, 2012, 04:58:31 PM
-
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%;
}
}
-
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:
<td valign="top" style="background-color: rgb(255, 255, 255); padding: 10px;">and change to:
<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. ;-)
-
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.
-
For width of menu, same line:
<td valign="top" style="background-color: #FFCC00;">change to
<td valign="top" style="background-color: #FFCC00; width: 200px;">
For login, find this in your template.css (line 64):
form {
margin: 0;
}and change to
form {
margin: 0 0 0 20px;
}
-
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?
-
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) :wink:
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 (http://www.websitebaker2.org/de/hilfe/designerhandbuch.php?lang=DE).
-
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?
-
Does realy no one can help me?
If you need some more Information to solute, let me know!
-
How did you set your charset in the template?
Example of good usage
<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
-
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.
-
Which version and refision are you using?
2.8.3 ?
And did you install the hotfix?
-
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.
-
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?
-
Hi,
how about simply using html-entities (http://unicode.e-workers.de/entities.php) ?
Which means ü becomes ü for example.
regards
-
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!