Barthez
Hi Leute,
ich möchter gerne über meinem Header Banner 3 Linkbuttons einfügen ... die Buttons sollten so aussehen wie Karteikarten und fabrlic hetwas zu meinem Banner passen ... ich habe mal das Banner angehängt und mit der Hand mal reingefügt wie es asussehen soll.
Gut wäre es wenn es so weit wie möglich in CSS machbar wäre ... ein Mouseover wäre auch sehr schön!
Ich hoffe mir kann jemand helfen, ich bin in der MAterie wenig fit ...
Danke sehr
Schweinebacke
wenn du Probleme hast mit dem Einbauen, kannst du dich ja melden.
Demo:
Barthez
Hi,
danke schon mal für den Link ... kannst Du mir noch sagen wo ich den Code einfügen muß, damit die "Karteikarten" direkt über dem Logo erscheinen und möglichst rechtsbündig?
Hier der wohl wichtige Codeschnipsel meienr index Seite
<table width="900" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><table width="900" border="0" cellspacing="0" cellpadding="0">
<td style="background-image:url({$tpl_path}img/background.jpg)"><a href="index.php"><img src="{$tpl_path}img/top_logo.jpg" width="900" height="130" alt="{$store_name}" /></a></td>
</tr>
<tr>
Schweinebacke
einfach eine weitere Zeile mit dem Menü einfügen.
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
|
<table width="900" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><table width="900" border="0" cellspacing="0" cellpadding="0">
<td align="right" valign="bottom"><div id="container">
<div id="menu">
<div class="box">
<a href="#nogo">
Item 1
<span class="topleft"></span>
<span class="topright"></span>
</a>
</div>
<div class="box">
<a href="#nogo">
Item 2
<span class="topleft"></span>
<span class="topright"></span>
</a>
</div>
<div class="box">
<a href="#nogo">
Item 3
<span class="topleft"></span>
<span class="topright"></span>
</a>
</div>
<div class="box">
<a href="#nogo">
Item 4
<span class="topleft"></span>
<span class="topright"></span>
</a>
</div>
<div class="box">
<a href="#nogo">
Item 5
<span class="topleft"></span>
<span class="topright"></span>
</a>
</div>
</div>
</div></td>
<td style="background-image:url({$tpl_path}img/background.jpg)"><a href="index.php"><img src="{$tpl_path}img/top_logo.jpg" width="900" height="130" alt="{$store_name}" /></a></td>
</tr>
<tr> |
|
und das CSS nicht verggessen.
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
|
<style type="text/css">
#container {
position:relative;
}
#menu {
text-align:center;
position:relative;
height:8em;
}
.box {
position:relative;
float:left;
top:30px;
}
#menu a, #menu a:visited {
position:relative;
text-decoration:none;
background-color:#06a;
color:#fff;
display:block;
width:70px;
height:15px;
padding:5px;
margin:0 1px;
}
#menu a .topleft, #menu a .topright {
position:absolute;
top:0;
width:0;
height:0;
overflow:hidden;
border-top:10px solid #fff;
}
#menu a .topleft {
left:0;
border-right:10px solid #06a;
}
#menu a .topright {
left:70px;
border-left:10px solid #06a;
}
#menu a:hover {
background-color:#000;
}
#menu a:hover .topleft {
border-right:10px solid #000;
border-top:10px solid #fff;
}
#menu a:hover .topright {
border-left:10px solid #000;
border-top:10px solid #fff;
}
</style> |
|
Barthez
soweit so gut ... geht nur leider nicht auf diese Weise ...
hier mal der Link
http://keeper-shop.de/index.php
ich hänge auch mal die index.html an in der das ganze eingebaut werden muß
Schweinebacke
die index soll so aussehen: Anhang!
Änderung vom CSS-Menü:
| code: |
1:
2:
3:
4:
5:
6:
|
.box {
.box {
position:relative;
float:right;
bottom:0px;
} |
|
dann sieht man weiter, ob auch noch eine Zelle angepasst werden muss.
Barthez
hi, also drin ist es ... ist jetzt auch übereinander nur bei der Höge paßt was nicht ... gut wäre es wenn es außerhalb der border Fläche wäre ... und wenn die "Karteikarten" einen kleinen Abstand vertikal zum Browseranfang haben
hier nochmal der Link
http://keeper-shop.de/
Schweinebacke
Liegt eindeutig an der Höhe
#menu {
text-align:center;
position:relative;
height:8em;
}
würde da height:26px; empfehlen.
Barthez
ja super so ... einzige Frage die ich noch hätte ist ... wenn man sich das jetzt so ansieht dann sieht es merkwürdig aus weil die Buttons immer noch im border der gesamten Seite erscheinen ... es wäre besser wenn die außerhalb davon sichtbar wären ... ich möchte aber nicht border=0 stellen für die eigentlich Seite ... kann man das irgendwie realisieren?
Danke
Schweinebacke
dann das Menü (Register) über die erste Tabelle setzen und nicht in die Tabelle.
Barthez
das hat geklappt ... wie bekomme ich als letzte
Änderung nun einen minimalen Abstand zwischen den CSS Buttons und dem Browseranfang ganz oben?
Danke schon mal
Schweinebacke
Das hast du doch selbst verändert:
Erste Tabelle
<table width="900" border="0"
cellspacing="0" cellpadding="0" align="center">
dort hast du eine 1 drin.
Barthez
ja danke .. hatte selbst in der Zwischezeit gefummelt ... nochmals dake