YourWBB


yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » CSS Buttons einfügen » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag 3.729 Views | | Thema zu Favoriten hinzufügen

Neues Thema erstellen Antwort erstellen

Zum Ende der Seite springen CSS Buttons einfügen
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
Barthez
Mitglied


Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0

 CSS Buttons einfügen Antworten Zitieren Editieren Melden       UP

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

Dateianhang:
jpg top_logo.jpg (22 KB, 123 mal heruntergeladen)


__________________
Gruß
Barthez

Dieser Beitrag wurde 2 mal editiert, zum letzten Mal von Barthez: 21.01.08 16:19.

21.01.08 16:17 Barthez ist offline E-Mail WWW Finden Als Freund hinzufügen
Schweinebacke Schweinebacke ist männlich
Mitglied


images/avatars/avatar-5303.jpg

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden       UP

wenn du Probleme hast mit dem Einbauen, kannst du dich ja melden.

Demo:
21.01.08 19:57 Schweinebacke ist offline E-Mail Finden Als Freund hinzufügen
Barthez
Mitglied


Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0

Themenstarter Thema begonnen von Barthez
Antworten Zitieren Editieren Melden       UP

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 Barthez ist offline E-Mail WWW Finden Als Freund hinzufügen
Schweinebacke Schweinebacke ist männlich
Mitglied


images/avatars/avatar-5303.jpg

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden       UP

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 Schweinebacke ist offline E-Mail Finden Als Freund hinzufügen
Barthez
Mitglied


Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0

Themenstarter Thema begonnen von Barthez
Antworten Zitieren Editieren Melden       UP

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ß

Dateianhang:
unknown index.html (4,12 KB, 3 mal heruntergeladen)


__________________
Gruß
Barthez

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Barthez: 22.01.08 16:08.

22.01.08 15:57 Barthez ist offline E-Mail WWW Finden Als Freund hinzufügen
Schweinebacke Schweinebacke ist männlich
Mitglied


images/avatars/avatar-5303.jpg

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden       UP

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:
unknown index.html (4,13 KB, 7 mal heruntergeladen)
23.01.08 18:24 Schweinebacke ist offline E-Mail Finden Als Freund hinzufügen
Barthez
Mitglied


Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0

Themenstarter Thema begonnen von Barthez
Antworten Zitieren Editieren Melden       UP

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/

__________________
Gruß
Barthez

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Barthez: 23.01.08 19:39.

23.01.08 19:38 Barthez ist offline E-Mail WWW Finden Als Freund hinzufügen
Schweinebacke Schweinebacke ist männlich
Mitglied


images/avatars/avatar-5303.jpg

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden       UP

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 Schweinebacke ist offline E-Mail Finden Als Freund hinzufügen
Barthez
Mitglied


Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0

Themenstarter Thema begonnen von Barthez
Antworten Zitieren Editieren Melden       UP

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 Barthez ist offline E-Mail WWW Finden Als Freund hinzufügen
Schweinebacke Schweinebacke ist männlich
Mitglied


images/avatars/avatar-5303.jpg

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden       UP

dann das Menü (Register) über die erste Tabelle setzen und nicht in die Tabelle.

Dateianhang:
unknown index(2).html (4,21 KB, 3 mal heruntergeladen)
24.01.08 09:52 Schweinebacke ist offline E-Mail Finden Als Freund hinzufügen
Barthez
Mitglied


Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0

Themenstarter Thema begonnen von Barthez
Antworten Zitieren Editieren Melden       UP

das hat geklappt ... wie bekomme ich als letzte smile Änderung nun einen minimalen Abstand zwischen den CSS Buttons und dem Browseranfang ganz oben?

Danke schon mal

__________________
Gruß
Barthez
24.01.08 11:22 Barthez ist offline E-Mail WWW Finden Als Freund hinzufügen
Schweinebacke Schweinebacke ist männlich
Mitglied


images/avatars/avatar-5303.jpg

Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg

Antworten Zitieren Editieren Melden       UP

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 Schweinebacke ist offline E-Mail Finden Als Freund hinzufügen
Barthez
Mitglied


Dabei seit: 07.07.04
Beiträge: 304
Forenversion: 3.0

Themenstarter Thema begonnen von Barthez
Antworten Zitieren Editieren Melden       UP

ja danke .. hatte selbst in der Zwischezeit gefummelt ... nochmals dake

__________________
Gruß
Barthez
24.01.08 20:53 Barthez ist offline E-Mail WWW Finden Als Freund hinzufügen
Baumstruktur | Brettstruktur
Gehe zu:

Neues Thema erstellen Antwort erstellen

yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » CSS Buttons einfügen