Divs per target ändern @ tutorials.de: Tutorials, Forum & Hilfe

Browser-zocker · 27.04.10 15:26

hi ich wollt mal fragen ob man Divs mit target aus einem anderen Div ändern kann (also den Inhalt)

hab schon mal nen thread gemacht
mit Frameset.
Es geht zwar aber ich wollte eigentlich so eine Seite in der der Body in nem Kasten ist (siehe Bild)

geht das?
wenn ja wie?

PS:
Sry wenn ich das Thema zu unrecht aufgemacht habe. Ich wusste nicht ob ichs noch ins alte reinschreiben darf

mfg
Browser-Zocker

Maik · 27.04.10 16:35

Hi,

mit der Auszeichnungssprache HTML ist dein Vorhaben nicht realisierbar.

Entweder nutzt du hierfür die clientseitige Scriptsprache Javascript (siehe z.B. Dynamic Ajax Content), oder die serverseitige Scriptsprache PHP (siehe z.B. Navigation über die URL "index.php?section=index").

Für's Erste wird das Thema von mir ins JS-Forum verschoben.

mfg Maik

Browser-zocker · 27.04.10 18:33

danke für die Antwort hat mir geholfen.

aber ich hab noch ein Problem (siehe Bilder)

mfg
Browser-Zocker

Maik · 27.04.10 18:35

Bevor hier überhaupt eine Lösung genannt werden kann, solltest du dich erstmal dazu äußern, für welche der Methoden du dich überhaupt entschieden hast

mfg Maik

tobee · 27.04.10 18:37

Du gibst dem aktiven Element eine Klasse (zum Beispiel .active).
Im CSS definierst du dann das Aussehen von dem aktiven Zustand.

Code css:

1
2
3

ul li a.active {
    background-color:blue;
}

Maik · 27.04.10 18:39

Zitat von tobee

Du gibst dem aktiven Element eine Klasse (zum Beispiel .active).
Im CSS definierst du dann das Aussehen von dem aktiven Zustand.

Code css:

1
2
3

ul li a.active {
    background-color:blue;
}

Das wird hier so nicht funktionieren, da ja keine neue Seite aufgerufen wird, in der diese Klasse im Navigationsmenü "weiterwandert". Und wenn PHP im Spiel sein sollte, schon zweimal nicht.

mfg Maik

tobee · 27.04.10 18:42

Mit Javascript kann ich doch auch CSS-Klassen hinzufügen und entfernen.
Dann braucht man kein PHP.

Maik · 27.04.10 18:44

Zitat von tobee

Mit Javascript kann ich doch auch CSS-Klassen hinzufügen und entfernen.

Jo, aber das geht aus deiner ersten Antwort und dem CSS-Schnipsel nicht klar hervor, und wie ich Browser-zocker mittlerweile kenne, weiß er dies nicht, geschweige denn, wie er dies umsetzen müsste.

mfg Maik

tobee · 27.04.10 18:48

Sorry, wenn ich tief in der Materie stecke, vergesse ich manchmal meine Erklärungen

Aber warten wir mal ab für welche Methode Browser-zocker sich entschieden hat.

Maik · 27.04.10 18:50

Zitat von tobee

Aber warten wir mal ab für welche Methode er sich entschieden hat.

D'rum hab ich auch dies geantwortet:

Zitat von Maik

Bevor hier überhaupt eine Lösung genannt werden kann, solltest du dich erstmal dazu äußern, für welche der Methoden du dich überhaupt entschieden hast

mfg Maik

Browser-zocker · 27.04.10 19:23

sry habs vergessen zu sagen war vorhin in eile

Also ich hab deinen ersten Vorschlag genommen, den mit JS. Hat auch alles geklappt.
Hab jetzt ein Menü eingefürgt und will halt -wie oben auf den Bilder zu sehen ist- dass es so aussieht wie 1 Frame und nicht 2divs oder so hie mal der komplette Code

(sehr lang):

also 1. die "Hauptdatei"

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Rotating Includes Script</title>
<script type="text/javascript">
 
[color=red]/* Script-Code darf gemäß den Nutzungsbedingungen von dynamicdrive.com hier nicht veröffentlicht werden! */[/color]
 
 
</script>
 
<style type="text/css">
#leftcolumn{
margin-left: 500px;
width:750px;
height: 35px;
border: 3px outset black;
 
 
}
 
 
#rightcolumn{
margin-left: 500px;
width:750px;
height: 600px;
border: 3px outset black;
}
 
* html #rightcolumn{ /*IE only style*/
height: 400px;
}
div.one {
background-color: #0079b2;
}
</style>
</head>
 
<body>
 
<div id="leftcolumn" class="one">
<head>
    <link rel="stylesheet" href="menu/menu_style.css" type="text/css" />
</head>
<ul id="menu" class="one">
<li><a href="javascript:ajaxpage('menu.html', 'rightcolumn');" class="current">Home</a></li>
<li><a href="javascript:ajaxpage('menu.html', 'rightcolumn');">Stargate</a></li>
<li><a href="" target="_self" title="Fun site">Fun site</a></li>
<li><a href="" target="_self" title="Support">Support</a></li>
</ul>
 
</div>
 
<div id="rightcolumn" class="one"></div>
<div style="clear: left; margin-bottom: 1em"></div>
 
</body>
 
</html>

menu_style.css

Code :

ul#menu{ 
    width: 100%;
    height: 43px;
    background: #FFF url("http://www.tutorials.de/forum/images/menu-bg.gif") top left repeat-x; 
    font-size: 0.8em; 
    font-family: "Lucida Grande", Verdana, sans-serif; 
    font-weight: bold; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    }
ul#menu li {
    display: block; 
    float: left; 
    margin: 0 0 0 5px; 
    }
ul#menu li a { 
    height: 43px; 
    color: #777; 
    text-decoration: none; 
    display: block; 
    float: left; 
    line-height: 200%; 
    padding: 8px 15px 0; 
    }
ul#menu li a:hover { 
    color: #333; 
    }
ul#menu li a.current{ 
    color: #FFF; 
    background: #FFF url("http://www.tutorials.de/forum/images/current-bg.gif") top left repeat-x; 
    padding: 5px 15px 0; 
    }

images in anhang

Hoffe ich hab nichts vergessen

mfg
Browser-Zocker

Maik · 27.04.10 19:30

Die hinzugekommenen Komponenten hab ich im Code fett markiert:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Rotating Includes Script</title>
<script type="text/javascript">
 
[color=red]/* Script-Code darf gemäß den Nutzungsbedingungen von dynamicdrive.com hier nicht veröffentlicht werden! */[/color]
 
</script>
[b]
<script type="text/javascript">
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(nav|current)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'current':'nav';
                        }
                }
        }
}
</script>[/b]
 
<style type="text/css">
#leftcolumn{
margin-left: 500px;
width:750px;
height: 35px;
border: 3px outset black;
 
 
}
 
 
#rightcolumn{
margin-left: 500px;
width:750px;
height: 600px;
border: 3px outset black;
}
 
* html #rightcolumn{ /*IE only style*/
height: 400px;
}
div.one {
background-color: #0079b2;
}
</style>
</head>
 
<body>
 
<div id="leftcolumn" class="one">
<head>
    <link rel="stylesheet" href="menu/menu_style.css" type="text/css" />
</head>
<ul id="menu" class="one">
<li><a [b]class="nav" href="#home" onclick="ajaxpage('menu.html', 'rightcolumn');aktivieren(this.href)"[/b]>Home</a></li>
<li><a [b]class="nav" href="#stargate" onclick="ajaxpage('menu.html', 'rightcolumn');aktivieren(this.href)"[/b]>Stargate</a></li>
</ul>
 
</div>
 
<div id="rightcolumn" class="one"></div>
<div style="clear: left; margin-bottom: 1em"></div>
 
</body>
 
</html>

Code :

ul#menu li [B]a.nav[/B] { 
    height: 43px; 
    color: #777; 
    text-decoration: none; 
    display: block; 
    float: left; 
    line-height: 200%; 
    padding: 8px 15px 0; 
    }
ul#menu li [B]a.nav[/B]:hover { 
    color: #333; 
    }
ul#menu li a.current{ 
    color: #FFF; 
    background: #FFF url("images/current-bg.gif") top left repeat-x; 
    padding: 5px 15px 0; 
    }

mfg Maik

Browser-zocker · 27.04.10 19:54

Vielen Dank

hat geklappt

mfg
Browser-Zocker

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Target ändern?

Standardfehler Wo - 2 Divs mit Divs drin.

2 DIVs nebeneinander innerhalb eines Haupt-DIVs

Draggable divs - Positionen versch. divs speichern

Divs in Divs einbinden.

Stichworte

E-Mail:

Abonnieren Abbestellen