ComputerBase Menü
Aktuelles

CSS html Datei einfügen

PC FREAKY schrieb:
gibt es jetzt auch eine möglichkeit, dass z.B. nur 2 Ecken abgerundet werden oder dass eine Ecke mehr als eine andere Ecke abgerundet ist?
Zum Vergrößern anklicken....
Klar, dazu gibst du 4 statt einen Wert an. Wenn ich mich recht erinnere ist der erste Wert die linke obere Ecke und dann geht es im Uhrzeigersinn weiter. Einfach mal rumspielen, siehst du ja dann.

Hier hat einer ein kleines Tool dazu gemacht. Etwas ausführlichere Schreibweise der CSS-Definition.
 
Zuletzt bearbeitet:
Vielen Dank, klappt soweit...

Und schon kommt die nächste Frage:

Wie schaffe ich es, dass wenn ich z.B. in meinem Beispiel link1 anklicke(oder auch darüberfahre), unter link 1 nochmal 5 neue links "erscheinen"

wie muss ich das machen?

ich hofe ihr wisst was ich meine und könnt mir helfen
(ich meine das Prinzip wie bei Hardwareversand.de)

PHP: 
<!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"><!-- InstanceBegin template="/Templates/tutorial_beispielseite.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!--[if IE]>
    <style type="text/css" media="screen">
    #menu ul li {float: left; width: 100%;}
    </style>
    <![endif]-->

    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    body {behavior: url(csshover.htc); font-size: 100%;}
    #menu ul li a {height: 1%;}
    }
    </style>
    <![endif]-->
<!-- InstanceBeginEditable name="doctitle" -->
<title>Beispielseite</title>
<!-- InstanceEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* grundlegende Seiteneinstellungen*/
body {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background-color: #FFFFFF;
        margin:5%;
        background-image: url(Hintergrund.png);
}

h1,h2,h3 {
        font-family: "Times New Roman", "Trebuchet MS", Georgia, serif;
        font-weight:normal;
        color:#000000;
}

h1 {
        font-size: 250%;
        margin-bottom:1.5em;
}

h2 {
        font-size: 200%;
        margin-bottom:1em;
}

h3 {
        font-size: 150%;
        margin-bottom:1em;
}

-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--

#header {
        float:right: 110px;
        margin:0;
        padding:40px;
        height:80px;
}

#logo   {
        float:left;
        background-image: url(wichtig.png);
        width: 205px;
        height: 140px;
        margin-left:30px;
}


#main   {
        float:right; width:500px;
        position:absolute;
        background:#0BFF17;
        margin-top:30px;
        margin-bottom:40px;
        margin-left:350px;
        margin-right:100px;
        padding:0;
        height:5000px;
        width:650px;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        border-radius: 10px;
}

#nav    {
        float:left;
        position:absolute;
        width:300px;
        margin: 0 30px 0 0;
        padding:30px 0;
}

#nav ul {
        list-style:none;
        margin:0;
        padding:0;
}


#nav li {
        margin:0;
        padding:0;
}

#nav a:link, #nav a:visited {
        display:block;
        margin:2px 0;
        padding:10px 10px 10px 20px;
        background-color:#11AB00;
        /* die Höhenangabe ist für den IE, damit die gesamte FLäche des Links klickbar ist */
        height:1em;
        }

html>body #nav a:link, html>body #nav a:visited  {
        height:auto;
}

#nav a:hover {
        border:2px solid #11AB00;
}



-->
</style>
<!-- InstanceEndEditable -->
</head>
<body>
<!-- InstanceBeginEditable name="mainArea" -->
<div id="logo"></div>
<div id="header">
  <h1>Überschrift</h1>
</div>
<div id="nav">
  <ul><li><a href="#">Link1</a></li><li><a href="#">Link2</a></li><li><a href="#">Link3</a></li><li><a href="#">Link4</a></li><li><a href="#">Link5</a></li>  <li><a href="#">Link6</a></li></ul>
</div>
<!-- InstanceEndEditable -->
<div id="main">
<br>
hallo</div>
<div id="robot"></div>
</body>
<!-- InstanceEnd --></html>

d.h. wie mache ich ein klappmenü daraus?

PC FREAKY
Ergänzung ()

Ich möchte jetzt doch wieder meine Ursprungsidee durchsetzen...

ich möchte, dass im Bereich "main" bei jedem Link etwas anderes angezeigt wird.

Wie kann ich das umsetzen?

kann man mir hier irgendwie mal eine Vorlage dafür machen, wie ich "main" konfigurieren muss?

PC FREAKY
 
Zuletzt bearbeitet:
Eagle-PsyX- schrieb:
Tut mir Leid, das fände ich schon zu großzügig, soetwas zu machen.

Aber ich kann dir zur Selbsthilfe helfen :)
CSSplay
Hier gibt es einen Haufen von Menues, darunter auch mehrere wie du sie suchst.
Zum Vergrößern anklicken....

danke für den link,
mehr wollte ich gar nicht


Jetzt gibt es nur noch mein Ursprungsproblem...
Ergänzung ()

.
ZooLxp schrieb:
Also die hübscheste Lösung für dein Problem heißt jQuery .load(), falls javascript + jQuery nicht in Frage kommt, machst du das mit einem php-include.
Ergänzung ()

Damit dein #main-Container nach rechts floatet braucht er die css-Eigenschaften: #main {float:right; width:400px;} und der #nav-container ein #nav {float:left; width:200px;} Die breiten musst du selber ausmessen ;) muss halt zusammen in die ganze breite passen.
Zum Vergrößern anklicken....

Gibt es für jQuery eine genauere Anleitung?
 
Ich habe heute eine Verstandbestätigung für das jQuery Kochbuch erhalten :)
Ansonsten schau mal hier vorbei.

Seit dem ich Jahrelang mit PHP arbeite und kaum mit JavaScript bin ich vor kurzem aut jQuery gestoßen und habe mich damit beschäftigt. Ich muss sagen, dank jQuery und PHP arbeite ich die letzten Wochen viel mit AJAX, es ist wirklich Hammer und Back-End-Seiten lassen sich extrem benutzerfreundlich gestalten.
 
Eagle-PsyX- schrieb:
Ich habe heute eine Verstandbestätigung für das jQuery Kochbuch erhalten :)
Ansonsten schau mal hier vorbei.

Seit dem ich Jahrelang mit PHP arbeite und kaum mit JavaScript bin ich vor kurzem aut jQuery gestoßen und habe mich damit beschäftigt. Ich muss sagen, dank jQuery und PHP arbeite ich die letzten Wochen viel mit AJAX, es ist wirklich Hammer und Back-End-Seiten lassen sich extrem benutzerfreundlich gestalten.
Zum Vergrößern anklicken....

danke, echt supersache, hättest du mir einen link wo genau das mit dem "mainwechsel" also dass in main pro link was anderes angezeigt wird erklärt wird?
 
Ich habe das hier teilweise gelesen, aber irgendwann habe ich gemerkt, es geht schneller direkt im Netz zu konkreten Problemstellungen nachzulesen, wenn man einmal die Logik der Selektoren verstanden hat (was ein nicht zu unterschätzender Faktor für vernünftigen jQuery-Code ist).

Die load()-Funktion macht quasi nichts weiter, als eine externe html-Datei (bzw. auf Wunsch nur ein bestimmtes div daraus) in ein Ziel-Div zu laden.

So ungefähr
Code: 
$("#zielDiv").load("externerContent.html");

Das ist auch schon alles, viel mehr gibt es dazu nicht zu beschreiben. Diese Zeile muss natürlich irgendwo aufgerufen werden. Zum Beispiel beim Anklicken eines Buttons. Das wäre dann
Code: 
$("#derButton").click(function()
{
	$("#zielDiv").load("externerContent.html");
});
 
ich habe es hier mal eingebaut
main.htm soll in #main aufgebaut werden, sobald link1 angeklickt wird, d.h. es soll die schrift / der button "link1" angeklickt werden und main.htm öffnet sich...
wie realisiere ich das?

PHP: 
<!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"><!-- InstanceBegin template="/Templates/tutorial_beispielseite.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
     <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
       $("Link1").click(function()
{
   $("#main").load("main.htm");
   });
 });
    </script>
<!--[if IE]>
    <style type="text/css" media="screen">
    #menu ul li {float: left; width: 100%;}
    </style>
    <![endif]-->

    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    body {behavior: url(csshover.htc); font-size: 100%;}
    #menu ul li a {height: 1%;}
    }
    </style>
    <![endif]-->
<!-- InstanceBeginEditable name="doctitle" -->
<title>Beispielseite</title>
<!-- InstanceEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* grundlegende Seiteneinstellungen*/
body {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background-color: #FFFFFF;
        margin:5%;
        background-image: url(Hintergrund.png);
}

h1,h2,h3 {
        font-family: "Times New Roman", "Trebuchet MS", Georgia, serif;
        font-weight:normal;
        color:#000000;
}

h1 {
        font-size: 250%;
        margin-bottom:1.5em;
}

h2 {
        font-size: 200%;
        margin-bottom:1em;
}

h3 {
        font-size: 150%;
        margin-bottom:1em;
}

-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--

#header {
        float:right: 110px;
        margin:0;
        padding:40px;
        height:80px;
        width:500px;
        background-image: url(head.png);
}

#logo   {
        float:left;
        background-image: url(wichtig.png);
        width: 205px;
        height: 140px;
        margin-left:30px;
}


#main   {
        float:right; width:500px;
        position:absolute;
        background:#0BFF17;
        margin-top:30px;
        margin-bottom:40px;
        margin-left:350px;
        margin-right:100px;
        padding:0;
        height:5000px;
        width:650px;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        border-radius: 10px;
}

#nav    {
        float:left;
        position:absolute;
        width:300px;
        margin: 0 30px 0 0;
        padding:30px 0;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px 10px 0 0;
}

#nav ul {
        list-style:none;
        margin:0;
        padding:0;
}


#nav li {
        margin:0;
        padding:0;
}

#nav a:link, #nav a:visited {
        display:block;
        margin:2px 0;
        padding:10px 10px 10px 20px;
        background-color:#11AB00;
        /* die Höhenangabe ist für den IE, damit die gesamte FLäche des Links klickbar ist */
        height:1em;
        }

html>body #nav a:link, html>body #nav a:visited  {
        height:auto;
}

#nav a:hover {
        border:2px solid #11AB00;
}




-->
</style>
<!-- InstanceEndEditable -->
</head>
<body>
<!-- InstanceBeginEditable name="mainArea" -->
<div id="logo"></div>
<div id="header">

</div>
<div id="nav">
  <ul><li><a href="#">Link1</a></li><li><a href="#">Link2</a></li><li><a href="#">Link3</a></li><li><a href="#">Link4</a></li><li><a href="#">Link5</a></li>  <li><a href="#">Link6</a></li></ul>
</div>
<!-- InstanceEndEditable -->
<div id="main">
<br>
</div>
</div>

</body>
<!-- InstanceEnd --></html>


Danke schonmal...
 
Zuletzt bearbeitet:
Danke hat perfekt geklappt :D

Momentan werden die Links Lila beim anklicken...
kann man das ändern?
kann man die grundfarbe von blau auf z.B. dickes rot ändern?
 
Zuletzt bearbeitet:
Jawohl, so.

Ich befürchte nur, wenn wir hier so weitermachen, bekomme ich ärger fürs Beiträge sammeln und du dafür, dass du nicht erst mal selbst nachsiehst. Solche grundlegenden Sachen findest du wirklich schnell. ;)
 
Jetzt kommen wir zur Problemlösung...

Das mit dem Verlinken mit jQuery klappt

doch leider nicht in Opera...

es geht im integrieren Browser
es geht im IE 8
und es geht in Safari

doch nicht in Opera...

woran liegt das?

weiteres Problem: meine "linkbilder" also bilder die als link funktionieren sind lila umrandet...
wie schaffe ich es, dass sie gar keinen rand haben?

PC FREAKY
 
Zuletzt bearbeitet:
Code: 
a img {border:none; }
um den Rahmen um verlinkte Bilder zu entfernen.

@ Opera-Problem: lösche mal von Zeit zu Zeit den Cache, um herauszufinden, ob es wirklich am Browser liegt. Wenn es dadurch nicht verschwindet - gezielt nach dem Problem in Verbindung mit Opera suchen.
 
Hat sich erledigt
Ergänzung ()

.
Ich habe leider das Problem, dass die load funktion bei Opera & Google Chrome nicht funktioniert...

woran liegt das?
oder gibt es eine andere Möglichkeit um meine Links im Mainbereich anzuzeigen?

bei FF,IE & Safari klappts...

PC FREAKY
 
Zuletzt bearbeitet:
Schau mal hier!

Da sind mehrere Erklärungen, die sehr plausibel klingen. Das alles per Ferndiagnose auszuschließen, ist kaum möglich. Da hilft nur Rumprobieren!
 
Ich probiers aber es will nicht klappen...

PHP: 
     <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
       $("a:contains('Vor dem Start')").click(function()
{
   $("#main").load("VordemStart.htm");
   });
          $("a:contains('Grundlagen')").click(function()
{
   $("#main").load("Grundlagen.htm");
   });
             $("a:contains('Bildverarbeitung')").click(function()
{
   $("#main").load("Bildverarbeitung.htm");
   });
                $("a:contains('Textverarbeitung')").click(function()
{
   $("#main").load("Textverarbeitung.htm");
   });
                   $("a:contains('Internet & GMX')").click(function()
{
   $("#main").load("Internet&GMX.htm");
   });
                      $("a:contains('MS Office Outlook')").click(function()
{
   $("#main").load("MSOfficeOutlook.htm");
   });
 });
    </script>
 
Hast du mal probiert, ob es in Opera funktioniert, wenn du alles aus der $(document).ready rauswirfst und einfach einzeln schreibst? Das reicht zum binden der events nämlich aus.
 
So?

PHP: 
     <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

{$("a:contains('Vor dem Start')").click(function()

$("#main").load("VordemStart.htm");});

{$("a:contains('Grundlagen')").click(function()

$("#main").load("Grundlagen.htm"); });

{$("a:contains('Bildverarbeitung')").click(function()

$("#main").load("Bildverarbeitung.htm"); });

{$("a:contains('Textverarbeitung')").click(function()

$("#main").load("Textverarbeitung.htm"); });

{$("a:contains('Internet & GMX')").click(function()

$("#main").load("Internet&GMX.htm");});

{$("a:contains('MS Office Outlook')").click(function()

$("#main").load("MSOfficeOutlook.htm")});

   </script>

da geht gar nix mehr...
 
Zuletzt bearbeitet:
Sortier mal deine Klammern :evillol:

Code: 
$("a:contains('Vor dem Start')").click(function() 
{
	$("#main").load("VordemStart.htm");
}); 

$("a:contains('Grundlagen')").click(function()
{
	$("#main").load("Grundlagen.htm");
}); 

$("a:contains('Bildverarbeitung')").click(function()
{
	$("#main").load("Bildverarbeitung.htm");
}); 

$("a:contains('Textverarbeitung')").click(function() 
{
	$("#main").load("Textverarbeitung.htm");
}); 

$("a:contains('Internet & GMX')").click(function() 
{
	$("#main").load("Internet&GMX.htm");
}); 

$("a:contains('MS Office Outlook')").click(function() 
{
	$("#main").load("MSOfficeOutlook.htm");
});
 
PHP: 
         <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
$("a:contains('Vor dem Start')").click(function()
{
        $("#main").load("VordemStart.htm");
});

$("a:contains('Grundlagen')").click(function()
{
        $("#main").load("Grundlagen.htm");
});

$("a:contains('Bildverarbeitung')").click(function()
{
        $("#main").load("Bildverarbeitung.htm");
});

$("a:contains('Textverarbeitung')").click(function()
{
        $("#main").load("Textverarbeitung.htm");
});

$("a:contains('Internet & GMX')").click(function()
{
        $("#main").load("Internet&GMX.htm");
});

$("a:contains('MS Office Outlook')").click(function()
{
        $("#main").load("MSOfficeOutlook.htm");
});
´</script>

auch so geht gar nix, weder im ie, noch opera, safari,ff...

ich verzweifle hier fast...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

W
HTML/JS: Ajax-Formular und Treffer-Counter-Anzeigen
Antworten
9
Aufrufe
1.064
WulfmanGER
W
D
Meine eigene KI Tagebuch
Antworten
7
Aufrufe
2.277
danny
D
A
Anfängerfrage html json read und print
Antworten
10
Aufrufe
1.425
alturismo
A
Paddy0293
Anleitung Vaultwarden/Bitwarden nur über VPN und ohne Portfreigabe
2 3
Antworten
52
Aufrufe
19.728
Rupty
R
N
  • Artikel
Leserartikel Sockel 1151 - Intels große Lüge
2
Antworten
34
Aufrufe
4.475
_Nordlicht_
N
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz