PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr (https://www.php-resource.de/forum/)
-   HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/)
-   -   div ab einem Punkt überschreiben (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/91431-div-ab-einem-punkt-ueberschreiben.html)

fritzje610 16-04-2008 17:04
div ab einem Punkt überschreiben
 
Hallo zusammen,

ich habe ein kleines Problem mit meinem css der Site. Vielleicht könnt ihr mir helfen. Es gib einen header, eine Hauptnavigation darunter und abhängig vom gewählten Punkt der Hauptnavi entsprechend die Unterpunkte auf der rechten Seite.

-------------------------------------------------------|
| header |
| |
|------------------------------------------------------|
| hauptnavi |
|------------------------------------------------------|
| | untermenü |
| menü |-------------------------------------------|
| | |
|----------| content |
| |
| |
| |
| |
|------------------------------------------------------|
| footer |
|-------------------------------------------------------|


So in sieht das im Grunde aus. Nun habe ich das Problem, dass ich aus dem untermenü heraus Dateien aufrufen möchte, die sowohl das menu als auch das untermenü selbst und die hauptnavi überblenden soll, da ich den Platz zur Belegerstellung brauche.

Meine Site ist so aufgebaut, das in der index.php immer nur die entprechende Datei in den Bereich von content geholt wird.
Bei Bedarf wird dieser geteilt um untermenü darzustellen.

Wie kann ich das anstellen???

pekka 16-04-2008 17:30
Ich verstehe nur Bahnhof. Was heißt "Dateien aufrufen"? Was heißt "Überblenden"? Genauer bitte.

dani_o 16-04-2008 21:35
der trick:

Navy = position;absolute
Dazu nen z-index

fritzje610 16-04-2008 21:47
Liste der Anhänge anzeigen (Anzahl: 1)
PHP-Code:
<?php
session_start();

require_once ("etc/config.php");

require_once ($root . "includes/header.php");

if ($_SESSION['id'] == "")
{
 echo "<div id='inhalt'>";
 require_once ($root . "contents/anmelden.php");
 echo "</div>";
}
else
{
 require_once ($root . "includes/navi.php");
 if ( (!isset($_GET['navi'])) &&  (!isset($_GET['menu'])) )
 {
  echo "<div id='inhalt'>";
  echo "<br>Hier kommt der Begr&uuml;&szlig;ungstext hin.";
  echo "</div>";
 }
 else
 {
  if ($_GET['navi'] == "stammdaten")
  {
   require_once ($root . "includes/smenu.php");
  }
  elseif ($_GET['navi'] != "stammdaten")
  {
   require_once ($root . "includes/gmenu.php");
  }
  if(!isset($_GET["menu"]))
  {
   echo "";
  }
  else 
  {
   require_once($root . "contents/" . $_GET['menu'] . ".php");
  }
 }
}
require_once ($root . "includes/footer.php");
?>
$_GET['menu'] ruft die entsprechenden Inhalte auf, die immer rechts vom Menü angezeigt werden. Wenn ich nun auf Neuanlage klicke, soll sich die Darstellung zwischen dem Header und dem Footer abspielen. Das heisst die drei div's müssen von einem neuen "überschrieben" werden. Mit einem Link innerhalb der dann aufgerufenen Datei möchte ich dann wieder zu dieser anzeige "zurückschalten". Jetzt klarer was ich meine ?

pekka 16-04-2008 21:50
Zitat:
Jetzt klarer was ich meine ?
Nein nicht wirklich :)
Was ist jetzt die Frage, wie das zu positionieren ist oder wie du die Inhalte veränderst? Letzteres geht mit einem IFrame oder Ajax. Aber ich verstehe die Fragestellung noch nicht ganz.

fritzje610 16-04-2008 21:56
Ich weiss nicht was ich in meiner css definieren muss, damit die betreffenden Dateien innerhalb dieser Grenzen angezeigt werden.

Hier mal die css:

Code:
@charset "utf-8";
/* CSS Document */
        body
        {
                margin: 0;
                padding: 0;
                font: 85% arial, hevetica, sans-serif;
                text-align: center;
                color: #505367;
                background-color: #dddddd;
        }
       
        #container
        {
                margin: 1em auto;
                width: 90%;
                text-align: left;
                background-color: #ffffaa;
                border: 1px solid black;
        }
       
        #logo
        {
                float: left;
                padding: 5px 0 10px 5px;
        }

        #logo img
        {
                border: none;
        }


        h1
        {
                margin-left: 400px;
                padding-left: 10%;
                font-size: 3em;
                color: #000000;
                background: #FF9933;
                margin-bottom: 20px;
                margin-top: 20px;
        }

        h1 span
        {
                background-color: #FF9933;
        }

       
        h2
        {
                margin-left: 400px;
                padding-left: 10%;
                font-size: 1.3em;
                color: #ff0000;

        }

        h2center
        {
                font-weight: bold;
                padding-left: 20%;
                font-size: 1.3em;
                color: #ff0000;
        }



        h3
        {
                font-size: 0.7em;
                text-align: left;
                margin-left: 10px;
        }       
       
        #navi
        {
                clear: left;
                height: 21px;
                padding-left: 10px;
                font-size: 1em;
                text-align: left;
                background-color: #4A4A4A;
                padding-top: 5px;
                border-top: 1px solid #ff0000;
                border-bottom: 1px solid #ff0000;
        }

        #navi a, #navi span
        {
                font-weight: bold;
                text-decoration: none;
                color: #ffffff;
                background-color: #999999;
                margin: 5px;
                padding: 5px;
        }

        #navi a:hover
        {
                background-color: #FF0000;
                color: #000000;
        }
               
               
        #menu
        {
                list-style: none;
                padding: 20px 20px 20px 20px;
                float: left;
                width: 130px;
                background-color: #ffffaa;
                text-align: center;
        }
       
        #menu a:link, #menu a:visited
        {
                text-decoration: none;
                color: #ffffff;
                display: block;
                margin:        5px 5px;
                padding: 5px 5px 5px 0;
                background-color: #999999;
                border: 1px solid #ff0000;
                /* die Höhenangabe ist für den IE, damit die gesamte FLäche des Links klickbar ist */
                height: 1em;
        }
       
        #menu a:hover
        {
                background-color: #FF0000;
                color: #000000;
        }
       
       
        #inhalt       
        {
                margin-top: 20px;
                margin-left: 180px;
                margin-right: 20px;
                margin-bottom: 20px;
                height: auto;
                background-color: #ffffaa;
                border: 1px solid #ff0000;
        }
       
        #inhalt fehler
        {
                margin-left: 100px;
                color: #FF0000;
                font-size: 1.5em;
                font-weight: bold;
        }
       
        #content fehler
        {
                margin-left: 100px;
                color: #FF0000;
                font-size: 1.5em;
                font-weight: bold;
        }


        #inhaltgeteilt fehler
        {
                margin-left: 100px;
                color: #FF0000;
                font-size: 1.5em;
                font-weight: bold;
        }
       
               
        #footer
        {
                clear: left;
                background-color: #4A4A4A;
                color: white;
                font-size: 1.1em;
                text-align: center;
                padding: 5px;
                border-top: 1px solid #FF0000;
        }
       
       
       
       
       
       
        #inhaltgeteilt       
        {
                margin-top: 20px;
                margin-left: 180px;
                margin-right: 20px;
                margin-bottom: 20px;
                height: auto;
                background-color: #ffffaa;
                border: 1px solid #ff0000;
        }
       
       
        #linkbar
        {
                height: 21px;
                padding-left: 10px;
                font-size: 1em;
                text-align: left;
                background-color: #4A4A4A;
                padding-top: 5px;
                border-top: 1px solid #ff0000;
                border-bottom: 1px solid #ff0000;
        }

        #linkbar a, #linkbar span
        {
                font-weight: bold;
                text-decoration: none;
                color: #ffffff;
                background-color: #999999;
                margin: 5px;
                padding: 5px;
        }

        #linkbar a:hover
        {
                background-color: #FF0000;
                color: #000000;
        }
               
        #content
        {
                margin-top: 20px;
                margin-left: 20px;
                margin-right: 20px;
                margin-bottom: 20px;
               
                height: auto;
                background-color: #ffffaa;
                border: 1px solid #ff0000;
        }
       
        #content schrift
                {
                        font-size: 0.8em;
                }
       
        #kunden
        {
                height: 150px;
                overflow: auto;
                padding-left: 10px;
                font-size: 0.8em;
                text-align: left;
                background-color: #ffffaa;
                padding-top: 5px;
                border-top: 1px solid #ff0000;
                border-bottom: 1px solid #ff0000;
        }

pekka 16-04-2008 21:57
Wie wärs wenn du mal das Problem vernünftig schilderst, statt mit kiloweise CSS um dich zu werfen?

Position: relative müßte dir weiterhelfen, wie dani_o es schon gesagt hat.

fritzje610 16-04-2008 22:16
Meiner Meinung nach war das vernünftig geschildert. Mal vom ersten Post abgesehen. Ein Screenshot, das man weiss wie sie Site aussieht und das css dazu, wie das Aussehen zustande kommt. Dazu noch die Frage, wie ich hinkriege, das der gewünschte Effekt eintritt. Was war daran falsch??? Sonst wieder immer direkt gemeckert, das man den Code posten soll !!!

Kropff 16-04-2008 22:48
Zitat:
Original geschrieben von fritzje610
Meiner Meinung nach war das vernünftig geschildert. Mal vom ersten Post abgesehen. Ein Screenshot, das man weiss wie sie Site aussieht und das css dazu, wie das Aussehen zustande kommt. Dazu noch die Frage, wie ich hinkriege, das der gewünschte Effekt eintritt. Was war daran falsch??? Sonst wieder immer direkt gemeckert, das man den Code posten soll !!!
also wenn ich ehrlich bin, verstehe ich auch nur bahnhof. kannst du mal in deinem screenshot GENAU markieren, wo das problem liegt. und das dann GENAU schildern?

gruß
peter

unset 16-04-2008 22:49
Vielleicht solltest du den ganzens Scheiß erstmal lernen, bevor du "Webdesing" verkaufen willst, aber selbst simpelste Techniken nicht beherrschst!

fritzje610 17-04-2008 08:55
Liste der Anhänge anzeigen (Anzahl: 1)
Das angehängte Bild zeigt den weißen (naja, zartrosa) Bereich in dem die gewünschte Darstellung erfolgen soll.

Nutzen will ich diesen Bereich, wenn man z.B. auf Neuanlage klickt. (siehe erstes gepostetes Bild)

fritzje610 17-04-2008 12:15
Hat sich erledigt. Hab das css um dies erweiter:

Code:
#blende
        {
                position: relative; right: 181px; top:-21px;
                width: 100%;
        }
und die Dateien die darin angezeigt werden sollen entsprechend angepasst.


Trotzdem dank an euch, dass ihr versucht habr mir zu helfen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:23 Uhr.

Powered by vBulletin® Version 3.8.2 (Deutsch)
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0
[c] ebiz-consult GmbH & Co. KG