CSS Buttons einfügen |
Barthez
Mitglied
Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0
Themenstarter
|
|
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>
__________________ Gruß
Barthez
|
|
21.01.08 21:32 |
E-Mail
WWW
Finden
Als Freund hinzufügen
|
|
Schweinebacke
Mitglied
Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg
|
|
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> |
|
|
|
22.01.08 15:24 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Schweinebacke
Mitglied
Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg
|
|
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.
Dateianhang: |
index.html (4,13 KB, 7 mal heruntergeladen)
|
|
|
23.01.08 18:24 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Schweinebacke
Mitglied
Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg
|
|
Liegt eindeutig an der Höhe
#menu {
text-align:center;
position:relative;
height:8em;
}
würde da height:26px; empfehlen.
|
|
24.01.08 07:25 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Barthez
Mitglied
Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0
Themenstarter
|
|
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
__________________ Gruß
Barthez
|
|
24.01.08 09:35 |
E-Mail
WWW
Finden
Als Freund hinzufügen
|
|
Barthez
Mitglied
Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0
Themenstarter
|
|
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
__________________ Gruß
Barthez
|
|
24.01.08 11:22 |
E-Mail
WWW
Finden
Als Freund hinzufügen
|
|
Schweinebacke
Mitglied
Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg
|
|
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.
|
|
24.01.08 20:39 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Barthez
Mitglied
Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0
Themenstarter
|
|
ja danke .. hatte selbst in der Zwischezeit gefummelt ... nochmals dake
__________________ Gruß
Barthez
|
|
24.01.08 20:53 |
E-Mail
WWW
Finden
Als Freund hinzufügen
|
|
|