• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

"Einblendung" bei klick auf einen Link

J

Joken

Neues Mitglied
Hallo Community, ich bin neu hier.
Ich mache schon seid ca. 1 Jahr Webdesign und hab ein Paar Fragen dazu
1) Wie kriege ich es hin das wenn ich auf einen Link gehe, das ewas eingeblendet wird und ich nicht extra auf eine andere Seite verlinken muss
(SHCClan.de // Home) da ist rechts ein weisser kleiner Link, wenn man auf den geht kommt man auf eine andere Seite und daneben ist nun ein Login bereich (noch nicht fertig^^), ist es irgendwie möglich das man dieses Layer beim anklicken hervorruft ohne das man auf eine andere Seite Gelangt?

Grüsse, Joken
 
Werbung:
Dies ist mittels Javascript möglich.
Verpasse deiner Login eine div. Dieser Div gibst du dann der id login .
Dann schreibst du oben in den Header:
Code: 
<script type='text/javascript'>
div = document.getElementById('login');
function blenden(){
if(div.style.display == 'none'){
div.style.display = '';
}else{
div.style.display = 'none';
}
</script>
Dein weißer Pfeil bekommt dann folgenden Hyperlink:
Code: 
<a onclick="blenden();"></a>

Gruß dasch
 
Ok, ich werds mal ausprobieren, danke

So nur meine zweite Frage,
Ich habe meine links definiert (also mit a:hover und so).
Da hab ich drinn stehen
a:hover {text-decoration:underline; color:#000000}
Und das menu is in einer Tabelle (included)
Kann ich das auch machen das er die ganze zeile Färbt und nicht nur die schrift?

Grüsse, Joken
 
Werbung:
Dann nimmst du einfach das hier:


a:hover {text-decoration:underline; bgcolor:#000000}


So färbst du den Hintergrund.
 
Werbung:
hi, also das mit dem background-color hab ich schon, aber kann ich auch die komplette zeile färben?
 
Also in css:

#menu
{
background-color:#999999;
}

und in html

<div id="menu">
<?php include ('includes/menu.php') ?>
</div>
<div id="te

und da färbt er halt nur den bereich des textes, und nicht die ganze zeile, wenn ihr wisst was ich mein.

Grüsse, Joken

EDIT:Achso und nochwas, wie definierere ich mehrere Tage mit einem eintrag ins stylesheet?, Weil so geht es nicht

#h1,h2,text1,text2
{
 
Zuletzt bearbeitet:
Werbung:
Joken schrieb:
Und das menu is in einer Tabelle (included)
Zum Vergrößern anklicken....
Wie bitte? Das Menü ist in einer Tabelle? Bei einem Menü handelt sich doch um eine Liste, warum also verwendest du dann eine Tabelle? CSS 4 You - The Finest in Stylesheets: Workshop: Layouten ohne Tabellen

Joken schrieb:
Also in css:

#menu
{
background-color:#999999;
}

und in html

<div id="menu">
<?php include ('includes/menu.php') ?>
</div>
<div id="te

und da färbt er halt nur den bereich des textes, und nicht die ganze zeile, wenn ihr wisst was ich mein.
Zum Vergrößern anklicken....
Funktioniert evtl. wenn du eine feste Höhe angibst! Kleiner Tipp noch: #999999 lässt sic auch als #999 schreiben ;-)

Edit:
Joken schrieb:
EDIT:Achso und nochwas, wie definierere ich mehrere Tage mit einem eintrag ins stylesheet?, Weil so geht es nicht

#h1,h2,text1,text2
{
Zum Vergrößern anklicken....
Naja, man muss nicht mal mehrere Tage lang definieren ;)
Im Moment sprichst du mit dieser Selektion ein Tag mit der id "h1" und alle h2 an!
text1 und text2 ist Blödsinn, diese Tags existieren nicht! Du kannst aber Klassen mit diesen Werten erstellen, die werden dann wie folgt selektiert: .text1, .text2

Dieser Workshop könnte dir helfen: CSS 4 You - The Finest in Stylesheets: Workshop CSS: Allgemeines
 
Zuletzt bearbeitet:
Also ich hatte schonmal ne Liste, aber ich kam damit nicht klar weil er immer ein kreis davor anzeigte (obwohl ich in die css list-style-type:none; riengeschrieben hab. Aber ich probiers nochmal, also mit <li> oder <ul>?

@Fiedel, ich habe mir gerade mal deine Seite angeschaut, ich find die total klasse gemacht, hab mal ne frage, wie hast du das mit dem menu gemacht das das so rein und rausfahren kann?

Grüsse, Joken
 
Zuletzt bearbeitet:
Joken schrieb:
Also ich hatte schonmal ne Liste, aber ich kam damit nicht klar weil er immer ein kreis davor anzeigte
Zum Vergrößern anklicken....
Wenn Du Dir solche Gedanken machst, dann hast Du noch nicht verstanden, wozu HTML da ist. Wenn Du sagst, Du bist aber schon seit 1 Jahr in der Branche tätig (ob gewerblich oder privat ist egal), dann frage ich mich, was Du die ganze Zeit gemacht hast!

HTML ist nur für die logische Auszeichnung Deines Inhalts. Ob da in Deinem Browser ein Kreis angezeigt wird, ist für die Auszeichnung in HTML völlig irrelevant. Wenn Du ein anderes Tag wählst, nur wegen des Aussehens, veränderst Du die Bedeutung Deines Inhalts, das kann es nicht sein! Da machst Du dann etwas grundlegend falsch!

Den Kreis kriegst Du übrigens mit "list-style-type:none" weg. Und das ist natürlich CSS. Denn allein CSS ist für das Aussehen zuständig.
 
Werbung:
Joken schrieb:
@Fiedel, ich habe mir gerade mal deine Seite angeschaut, ich find die total klasse gemacht, hab mal ne frage, wie hast du das mit dem menu gemacht das das so rein und rausfahren kann?
Zum Vergrößern anklicken....
Puh, das weiß ich leider nicht mehr genau, das war irgendein vorgefertigtes JavaScript von dem damals genauso begeistert war. Die für den Effekt verantwortlichen JavaScripts heißen:
scriptaculous.js?load=effects,builder , prototype.js , scriptaculous.js und unittest.js
Joken schrieb:
Aber ich probiers nochmal, also mit <li> oder <ul>?
Zum Vergrößern anklicken....
Mit beidem! Eine unordered list wird wiefolgt aufgebaut:
Code: 
<ul class="navi">
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
</ul>
CSS:
Code: 
ul {
list-style-type:none
}
 
Aha, ok habs hinbekommen. Aber jetzt habe ich nen grosse abstand wo eigentlich die kreise waren, kann man den auch noch entfernen
 
Werbung:
Also mit dem javascript von dasch bekomme iches nicth hin das es angezeigt wird

head der html

<script type="text/javascript" src="sheets/javascript.js"></script>

div der html

<div id="loginbutton"><a onclick="blenden();"><img src="images/login.png" alt="login" /></a></div>

sheets/javascript.js

div = document.getElementById('logincontainer');
function blenden(){
if(div.style.display == 'none'){
div.style.display = '';
}else{
div.style.display = 'none';
}

style.css

#loginbutton
{
position:absolute;
top:100px;
height:40px;
z-index:4;
right:0px;
}

#logincontainer
{
position:absolute;
width:200px;
height:150px;
top:50px;
left:800px;
align:center;
z-index:5;
background-color:#BBBBBB;
}
 
Versuchs mal so:
Code: 
function toggle(id){
            var mydiv = document.getElementById(id);
            mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
        }
HTML: 
<a onclick="toggle('logincontiainer'); return false">ein-/ausblenden</a>
 
Hi, funktioniert leider immer noch nicht, mache ich was falsch?

html:

<div id="loginbutton"><a onclick="toggle('logincontainer'); return false"><img src="images/login.png" alt="login" /></a></div>
 
Werbung:
Hast Du eine Funktion "toggle()" in Deinem JavaScript?
Außerdem fehlt das "href"-Attribut in Dienem Link.
Wozu ist das <div>?
 
Ja, ich habs von fiedel übernommen (danke),

html:

<div id="loginbutton"><a href="" onclick="toggle('logincontainer'); return false"><img src="images/login.png" alt="loginbutton" /></a></div>

ich hoffe es würde so passen, was soll ich denn be href einsetzten?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben