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

Gestallterische Fragen zur Realisierung

S

scorpi

Neues Mitglied
Hallo, einige von euch kennen mich bereits seit kurzem aus dem php Bereich hier im Forum:mrgreen:.
Nun wo das erledigt ist, habe ich ein Paar Fragen zum weiteren Vorgehen.
Das ist der stand der Dinge:hp1.jpg
Und das möchte ich noch hinzufügen:hp11.jpg
Bei dem logo würde ich das ungern absolut positionieren, da es vielleicht die Navigation verdecken könnte. Wie kann ich das optimal umsetzen?
und oben soll eine Unternavigation stehen. Wie mache ich das sie oben ist und nicht unter dem Hauptmenü.
Ich hoffe auf eure Hilfe
scorpi
 

Anhänge

  • hp.jpg
    hp.jpg
    98,2 KB · Aufrufe: 6
Werbung:
Ich vermute mal, dass deine Seite einen "wrapper" hat, wo alles drin steht.
Positioniere diesen relativ.
Innerhalb des wrappers (z.B. direkt nach dessen Öffnen) füge das Logo ein und positioniere es absolut dazu.
 
Danke, hat super geklappt, aber da mein Ziel zuvor war, dass die Seite dynamisch ist und sich nicht komplett laden muss, sondern sich nur der Textteil aktualisiert. Ist es jetzt irgendwie anders... jetzt blinkt die Seite sehr unangenehm auf und zerstört dadurch leider die ganze Ästhetik. Wieso blinkt die Seite auf, wenn ich auf einen Link klicke?
 
Werbung:
Jetzt blinkt es doch nicht alles super. Vielen Dank!
Dann bleibt noch die Frage mit der Subnavigation. Kann man die vielleicht genauso positionieren?
 
Theoretisch ja. Praktisch wäre vlt. auch ein anderer Code möglich den man jedoch nicht erraten kann ohne deinen Quellcode.
 
Das ist der Quellcode, den der Browser ausgibt. Ich habe bereits an dem Problem gearbeitet, aber die Schwierigkeit für mich ist es so umzusetzen, dass das navi nur dann aus dem php Dokument ausgegeben wird, wenn ich auch auf der entsprechenden Seite bin. Also ich glaube, dass ich als Anfänger in php mir ziehmlich viel vornehme für die ersten Anfänge. :D
HTML: 
    <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body {    background: #000;    background-image:url(bilder-seite/1920x1200_2.jpg);    }  </style></head>  <body class="oneColFixCtr"> <!--<div style="width:810px;    margin:0 auto;height:100px;    overflow:visible;"><img src="bilder-seite/banner.png" width="780" height="200"  /></div>--> <div id="container">     <div style="position: absolute; top:30px; left:810px;"><img src="bilder-seite/logoforhpforweb.png" width="200px" /></div>     <!--<div  style="position: absolute; top:5px; left:0px;"><ul>                        <li class="menu2><a href="index.php?section=navi1" title="Navi.1">Navi.1</a></li>                           <li class="menu2><a href="index.php?section=navi2" title="Navi.2">Navi.2</a></li>                        <li class="menu2><a href="index.php?section=navi3" title="Navi.3">Navi.3</a></li>                        <li class="menu2><a href="index.php?section=navi4" title="Navi.4">Navi.4</a></li>                    </ul></div>-->     <div id="bigcontainer">         <div id="navicontainer">             <ul>                 <li class="menu"><a href="index.php" title="Home">Home</a></li>                 <li class="menu"><a href="index.php?section=gallery" title="Gallery">Gallery</a></li>                 <li class="menu_active"><a href="index.php?section=about_me" title="About me">About me</a></li>                     <!--<div  style="position: absolute; top:30px; left:810px;"><ul>                        <li class="menu2><a href="index.php?section=navi1" title="Navi.1">Navi.1</a></li>                           <li class="menu2><a href="index.php?section=navi2" title="Navi.2">Navi.2</a></li>                        <li class="menu2><a href="index.php?section=navi3" title="Navi.3">Navi.3</a></li>                        <li class="menu2><a href="index.php?section=navi4" title="Navi.4">Navi.4</a></li>                    </ul></div>-->                 <li class="menu"><a href="index.php?section=kontakt" title="Kontakt">Kontakt</a></li>             </ul>         </div>                                <div class="right"> <div id="littlecontainer">                     <div id="leftcontainer">                                       <h1>Über mich</h1>                                       <h2>Und hier eine h2-Überschrift</h2>                                         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>                     </div>                     <div id="rightcontainer">                                     <p style="color:#FFF" align="center">"Die größten Ereignisse, das sind nicht unsere lautesten, sondern unsre stillsten Stunden."<br />                         - Friedrich Nietzsche -</p>                     </div>                 </div>      </div>                                                                                       <div id="footer"><p align="center">  <a href="index.php" title="Startseite">Home</a> : <a href="index.php?section=kontakt" title="Kontakt">Kontakt</a> :       <a href="index.php?section=impressum" title="Impressum">Impressum</a> <br />       © 2011 copyright by .................</p></div> </div>  <script type="text/javascript" src="http://view.binlayer.com/ad-19130.js"></script> </body> </html>
Das wäre jetzt mein erster Vorschlag, besser gesagt ich habe keine Ahnung wo wir das reinstecken sollen aber für den Anfang wäre das die Variante mit der absoluten Positionierung:
Code: 
<!--<div  style="position: absolute; top:30px; left:810px;"><ul>                        <li class="menu2<?php //if($_GET['section'] == 'navi1'){echo '_active';} ?>><a href="index.php?section=navi1" title="Navi.1">Navi.1</a></li>
                           <li class="menu2<?php //if($_GET['section'] == 'navi2'){echo '_active';} ?>><a href="index.php?section=navi2" title="Navi.2">Navi.2</a></li>
                        <li class="menu2<?php //if($_GET['section'] == 'navi3'){echo '_active';} ?>><a href="index.php?section=navi3" title="Navi.3">Navi.3</a></li>
                        <li class="menu2<?php //if($_GET['section'] == 'navi4'){echo '_active';} ?>><a href="index.php?section=navi4" title="Navi.4">Navi.4</a></li>
                    </ul></div>-->
Und das wäre der css code (auch noch nicht ausgefeilt):
Code: 
/*#navicontainer2 .menu2 a, #navinavicontainer .menu2 p{    display:block; width:30px; line-height: 90px;
    text-decoration:underline;*/
    /*font-weight:bold;*/
    /*color:;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 15px;
    text-align:center;
    padding-top:0px;
    background:transparent;
    
}*/
/*#navicontainer2 .menu2_active a, #navicontainer .menu2_active a:hover{
    display:block; width:30px; line-height: 90px;
    text-decoration:underline;*/
    /*font-weight:bold;*/
    /*color:#002253#FFF;
    font-size: 15px;
    text-align:center;*/
    /*background-image:url(bilder-seite/transparent 90%.png);*/
    /*font-family: Georgia, "Times New Roman", Times, serif;
    background-color:#002253;
    padding-top:0px;
    
}*/
Gute Nacht;Jump
 
Werbung:
musste das mit einem editor zurechtbiegen, sorry
HTML: 
 <!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">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Untitled Document</title>  <link href="style.css" rel="stylesheet" type="text/css" />  <style type="text/css"> body {    background: #000;    background-image:url(bilder-seite/1920x1200_2.jpg);    }  </style> </head>  <body class="oneColFixCtr"> <!--<div style="width:810px;    margin:0 auto;height:100px;    overflow:visible;"><img src="bilder-seite/banner.png" width="780" height="200"  /></div>-->  <div id="container">  <div style="position: absolute; top:30px; left:810px;"><img src="bilder-seite/logoforhpforweb.png" width="200px" /></div> <!--<div  style="position: absolute; top:5px; left:0px;"> <ul>  <li class="menu2> <a href="index.php?section=navi1" title="Navi.1">Navi.1</a></li>                            <li class="menu2><a href="index.php?section=navi2" title="Navi.2">Navi.2</a></li>  <li class="menu2><a href="index.php?section=navi3" title="Navi.3">Navi.3</a></li>                         <li class="menu2><a href="index.php?section=navi4" title="Navi.4">Navi.4</a></li> </ul></div>--> <div id="bigcontainer"> <div id="navicontainer">  <ul>  <li class="menu"><a href="index.php" title="Home">Home</a></li> <li class="menu"><a href="index.php?section=gallery" title="Gallery">Gallery</a></li> <li class="menu_active"><a href="index.php?section=about_me" title="About me">About me</a></li> <!--<div  style="position: absolute; top:30px; left:810px;"><ul> <li class="menu2><a href="index.php?section=navi1" title="Navi.1">Navi.1</a></li>                           <li class="menu2><a href="index.php?section=navi2" title="Navi.2">Navi.2</a></li> <li class="menu2><a href="index.php?section=navi3" title="Navi.3">Navi.3</a></li>                        <li class="menu2><a href="index.php?section=navi4" title="Navi.4">Navi.4</a></li> </ul></div>-->  <li class="menu"><a href="index.php?section=kontakt" title="Kontakt">Kontakt</a></li> </ul> </div>  <div class="right"> <div id="littlecontainer"> <div id="leftcontainer"> <h1>Über mich</h1> <h2>Und hier eine h2-Überschrift</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div> <div id="rightcontainer"> <p style="color:#FFF" align="center">"Die größten Ereignisse, das sind nicht unsere lautesten, sondern unsre stillsten Stunden."<br />                         - Friedrich Nietzsche -</p> </div> </div>  </div>  <div id="footer"><p align="center"> <a href="index.php" title="Startseite">Home</a> : <a href="index.php?section=kontakt" title="Kontakt">Kontakt</a> :       <a href="index.php?section=impressum" title="Impressum">Impressum</a> <br />       © 2011 copyright by .................</p></div>  </div>  <script type="text/javascript" src="http://view.binlayer.com/ad-19130.js></script>  </body> </html>
misst hat nicht funktioniert
 
Zuletzt bearbeitet:
Oh my, der Code sieht böse aus... Sorry aber so fehlt mir von Anfang an die Motivation da auch nur ansatzweise nach ner Lösung zu suchen.
 
sorry noch mal, ich hab es jetzt mit Hand hingestellt. Ich hoffe, dass es so in Ordnung ist...:oops:
HTML: 
<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
body {    background: #000;    background-image:url(bilder-seite/1920x1200_2.jpg);   
 }  
</style>
</head>  <body class="oneColFixCtr"> <!--<div style="width:810px;    margin:0 auto;height:100px;    overflow:visible;"><img src="bilder-seite/banner.png" width="780" height="200"  /></div>--> 
<div id="container">   
<div style="position: absolute; top:30px; left:810px;">
<img src="bilder-seite/logoforhpforweb.png" width="200px" />
</div>    <!--<div  style="position: absolute; top:5px; left:0px;">
<ul>                       
 <li class="menu2><a href="index.php?section=navi1" title="Navi.1">Navi.1</a></li>                           
<li class="menu2><a href="index.php?section=navi2" title="Navi.2">Navi.2</a></li>                       
 <li class="menu2><a href="index.php?section=navi3" title="Navi.3">Navi.3</a></li>                      
  <li class="menu2><a href="index.php?section=navi4" title="Navi.4">Navi.4</a></li>                   
 </ul>
</div>-->    
 <div id="bigcontainer">   
<div id="navicontainer">            
 <ul>                 
<li class="menu"><a href="index.php" title="Home">Home</a></li>                 
<li class="menu"><a href="index.php?section=gallery" title="Gallery">Gallery</a></li>                
 <li class="menu_active"><a href="index.php?section=about_me" title="About me">About me</a></li>                    
 <!--<div  style="position: absolute; top:30px; left:810px;">
<ul>                        
<li class="menu2><a href="index.php?section=navi1" title="Navi.1">Navi.1</a></li>                           
<li class="menu2><a href="index.php?section=navi2" title="Navi.2">Navi.2</a></li>                        
<li class="menu2><a href="index.php?section=navi3" title="Navi.3">Navi.3</a></li>                        
<li class="menu2><a href="index.php?section=navi4" title="Navi.4">Navi.4</a></li>                    
</ul></div>-->                
 <li class="menu"><a href="index.php?section=kontakt" title="Kontakt">Kontakt</a></li>             
</ul>         
</div>                                
<div class="right"> 
<div id="littlecontainer">                     
<div id="leftcontainer">                                       
<h1>ݢer mich</h1> 
 <h2>Und hier eine h2-ݢerschrift</h2>                                         
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>                     
</div>                    
 <div id="rightcontainer">                                     
<p style="color:#FFF" align="center">"Die größten Ereignisse, das sind nicht unsere lautesten, sondern unsre stillsten Stunden."<br />                         
- Friedrich Nietzsche -</p>                     
</div>                 
</div>      
</div>                                                                                      
 <div id="footer">
<p align="center">  
<a href="index.php" title="Startseite">Home</a> : <a href="index.php?section=kontakt" title="Kontakt">Kontakt</a> :       <a href="index.php?section=impressum" title="Impressum">Impressum</a> 
<br />       © 2011 copyright by .................</p>
</div> 
</div> 
 <script type="text/javascript" src="http://view.binlayer.com/ad-19130.js"></script> 
</body> 
</html>
 
Werbung:
Dein HTML-Code ist fehlerhaft. Das sieht man hier im Forum beim Syntax-Highlighting sehr schön. Da fehlen an einigen Stellen Anführungszeichen. Ob und wie Browser sowas verarbeiten mag man gar nicht raten.
 
Übrigens waren die Fehler in kommentierten Bereichen. Deswegen hat der Browser alles richtig gemacht. Das, was kommentiert ist waren meine gescheiterten Versuche mit der Navigation...:D
 
Werbung:
Hallo,
ich habe eine Lösung gefunden, aber es klappt immer noch nicht.
Ich weiß nicht, was ich falsch gemacht habe.
ich habe diesen include-code in den Bereich geschrieben wo ich die Unternavigation gerne hätte:
HTML: 
<div style="position: absolute; top:0px; left:0px;"><?php if($_GET['section'] == "about_me")
  {include("subnav.php"); }?></div>


dann habe ich eine php Datei angelegt (subnav.php), in diese habe ich folgenden Code reingemacht:
HTML: 
<ul>
              <li class="submenu<?php if($_GET['section'] == 'navi1'){echo '_active';} ?>"><a href="index.php?section=navi1" title="navi1">Navigationspunkt1</a></li>
                <li class="submenu<?php if($_GET['section'] == 'navi2'){echo '_active';} ?>"><a href="index.php?section=navi2" title="navi2">Navigationspunkt2</a></li>
                <li class="submenu<?php if($_GET['section'] == 'navi3'){echo '_active';} ?>"><a href="index.php?section=navi3" title="navi3">Navigationspunkt3</a></li>
                <li class="submenu<?php if($_GET['section'] == 'navi4'){echo '_active';} ?>"><a href="index.php?section=navi4" title="navi4">Navigationspunkt4</a></li>
            </ul>


als nächstes habe ich ich diesen code in der index.php ergänzt:

PHP: 
<?php
    if ((isset($_GET['section'])) AND ($_GET['section'] == "navi1" )) {
    echo "      <div class=\"right\">\n";
    include('stuff/navi1.php');
    echo "      </div>\n";
    }/**/
    ?> 
        <?php
    if ((isset($_GET['section'])) AND ($_GET['section'] == "navi2" )) {
    echo "      <div class=\"right\">\n";
    include('stuff/navi2.php');
    echo "      </div>\n";
    }/**/
    ?> 
        <?php
    if ((isset($_GET['section'])) AND ($_GET['section'] == "navi3" )) {
    echo "      <div class=\"right\">\n";
    include('stuff/navi3.php');
    echo "      </div>\n";
    }/**/
    ?> 
        <?php
    if ((isset($_GET['section'])) AND ($_GET['section'] == "navi4" )) {
    echo "      <div class=\"right\">\n";
    include('stuff/navi4.php');
    echo "      </div>\n";
    }/**/
    ?>


und als letztes habe ich in die css Datei das hier eingegeben:
Code: 
[LEFT][COLOR=#1818E3][FONT=monospace].submenu a, li p{
  /**/display:block; width:30px; line-height: 90px;
  text-decoration:underline;
  /*font-weight:bold;*/
  /**/color:#002253;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 15px;
  text-align:center;
  padding-top:0px;
  background:transparent;
  
}
/**/ .submenu_active a,  li a:hover{
  display:block; width:30px; line-height: 90px;
  text-decoration:underline;
  /*font-weight:bold;*/
  /**/color:#FFF;
  font-size: 15px;
  text-align:center;
  font-family: Georgia, "Times New Roman", Times, serif;
  background-color:#002253;
  padding-top:0px;
  
}[/FONT][/COLOR][/LEFT]

Das Problem ist, dass die Unternavigation vom css nicht angesprochen wird... die navi ist also nicht formatiert...
wo liegt mein Fehler... braucht ihr vielleicht den ganzen css code?
 
Werbung:
Merkwürdig. Kann ich gerade nicht wirklich nachvollziehen. Lass mal das /**/ weg, vlt. verschluckt sich der Browser daran.
 
hab ich... schau dir an was das bewirkt hat...
ich weiß auch nicht weiter...
leider fahre ich morgen für 3 tage weg, deswegen erst bis dahin...
danke für alles...
 
Jetzt wirkt die CSS-Eigenschaft. Seh ich eindeutig im Firebug. Die von dir definierten Eigenschaften wirken jetzt. Wenn Du das bei dir nicht siehst, dann leere mal den Cache.
 
Werbung:
ach, stimmt,
ich habe es jetzt hinbekommen, aber wieso springt die Hauptnavigation? Ich habe sie ja gar nicht verändert. Ich kann das Problem nicht finden...
 
Das könnte damit zusammenhängen wie Du die Links im Menü im CSS definierst. Dort steht:

Code: 
#navicontainer .menu a

Besser wäre für die 5 Pseudoklassen :link, :visited, :hover, :active und :focus diese Eigenschaften jeweils zu setzen. Dadurch setzt der Browser keine eigenen Eigenschaften für diese Zustände ein.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben