Registrieren  •  Login 
  
 
im Forum


 FAQ   Mitgliederliste   Benutzergruppen   Teamseite   Suchen 

Zwei Div-Container übereinander

 
Neues Thema eröffnen   Neue Antwort erstellen
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
thoha
Übersetzer
Übersetzer



Anmeldedatum: 07.10.2006
Geschlecht: Männlich
Beiträge: 2591

BeitragVerfasst am: 05.05.2012, 17:00    Titel: Zwei Div-Container übereinander

Hallo zusammen,

ich brauche mal wieder Hilfe von CSS-Spezialisten, ich brings nicht hin.

Für die Firma, in der ich arbeite, bin ich dran eine Knowledgebase aufzubauen und zwar mit der Software phpMyFAQ.
Eine Frisch-Installation sieht so aus: http://faq.phpmyfaq.de/

Nun möchte ich im Header (dort wo die Orange Box ist), also vom oberen "Bildschirmrand" bis zum schwarzen Balken ein Bild hinterlegen, mit den entsprechenden Massen.
Die Orange Box soll natürlich über dem Bild sein, das Bild die Box aber umschliessen.

Hier mal der Auszug aus der style.css:
Code:
/* Header */

#header {
    width: 100%; margin: 0 auto; padding: 0 0 0 0; }
#header h1 {
    font-size: 48px; padding-top: 5px; line-height: .6; }
#header h1 a:link, header h1 a:visited {
    color: #444; display: block; margin: 0; text-decoration: none; }
#header h1 a:hover, header h1 a:active {
    background: none; text-shadow: none; }
#header #loginBox {
    float: right; top: 0; width: 185px; background: #F67600; color: #fff;
    border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; position: absoulte; }
#header #loginSelection {
    text-align: center; padding: 5px; }
#header #loginSelection a:link, #header #loginSelection a:visited {
    color: #fff; }
#header #loginForm {
    position: absolute; width: 175px; z-index: 50; background: #F67600; padding: 5px; margin-top: -5px; border-radius: 5px;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#header #loginForm form input[type="text"], #header #loginForm form input[type="password"] {
    display: table-cell; height: 14px; border: 1px solid #d7d7d7; font-size: 14px; border-radius: 3px;
    -moz-border-radius: 3px; -webkit-border-radius: 3px; }
#header #loginForm .error {
    color: #8b0000; padding: 2px; background-color: #d3d3d3; border-radius: 3px; -moz-border-radius: 3px;
    -webkit-border-radius: 3px; font-weight: bold; z-index:1; }
#header#logo {
   margin-top:0px; margin-left:0px; z-index:2; position: relative; }


Und hier der Auszug aus der index.tpl:
Code:
<header id="header">
<div id="logo"><a title="{header}" href="{faqHome}"><img src="template/spektra/images/cloudy_sky.jpg" width="100%" height="100%" /></a></div>
    <div id="loginBox">
        {loginBox}
    </div>
   
   <!-- <h1>
        <a title="{header}" href="{faqHome}">{header}</a>
    </h1>-->
   
</header>


Für das "Übereinanderlegen" der Container bin ich nach dieser Anleitung vorgegangen: http://www.bennyn.de/programmierung/css/div-container-ubereinander-legen.html

Im Anhang noch ein Bild, wie es jetzt aussieht.

Habe dort im Forum bereits gefragt, aber die sind mit Antworten wohl nicht so fleissig...

Wer von euch kann mir hier weiterhelfen?

Liebe Grüsse,
Thomas
Nach oben
Benutzer-Profile anzeigen thoha ist derzeit offline Spielerprofile bei SC:Special Bewerben anzeigen Private Nachricht senden
killerbees19
Administrator & Rennleitung
Administrator & Rennleitung



OC-Nickname: KB19
Südafrika Team South Africa

Anmeldedatum: 09.05.2006
Geschlecht: Männlich
Alter: 29 Jahre
Beiträge: 13935
Wohnort: Wien

BeitragVerfasst am: 05.05.2012, 19:48    Titel:

Wen ich das auf die Schnelle jetzt richtig gesehen habe, musst du #header ein "position:relative" zuweisen und dann der Loginbox ein "position:absolute" mit den nötigen Abständen (left, right, top und bottom, je nachdem was du brauchst). Eventuell das gleiche Spielchen auch beim Logo. Wichtig ist, dass du die Größenangaben überall korrekt setzt, automatisch funktioniert da sonst nichts.

Mehr kann ich erst sagen, wenn ich wieder zu Hause bin. Mit dem Tablet habe ich hier weder Zugriff auf den Quelltext noch sonst irgendwelche HTML Spielereien Smile


MfG Christian
_________________
Nach oben
Benutzer-Profile anzeigen killerbees19 ist derzeit offline Spielerprofile bei SC:Special Bewerben anzeigen Private Nachricht senden Website dieses Benutzers besuchen
thoha
Übersetzer
Übersetzer



Anmeldedatum: 07.10.2006
Geschlecht: Männlich
Beiträge: 2591

BeitragVerfasst am: 06.05.2012, 10:16    Titel:

Danke für deine Antwort

Ändert sich leider nichts (Header: position:relative / Loginbox absolute)
Nach oben
Benutzer-Profile anzeigen thoha ist derzeit offline Spielerprofile bei SC:Special Bewerben anzeigen Private Nachricht senden
killerbees19
Administrator & Rennleitung
Administrator & Rennleitung



OC-Nickname: KB19
Südafrika Team South Africa

Anmeldedatum: 09.05.2006
Geschlecht: Männlich
Alter: 29 Jahre
Beiträge: 13935
Wohnort: Wien

BeitragVerfasst am: 06.05.2012, 17:51    Titel:

Sag mal, soll dort wirklich <header id="header"> stehen oder nicht doch <div id="header">?

Ich schau mir die Sache jetzt aber einmal genauer an Wink


MfG Christian
_________________
Nach oben
Benutzer-Profile anzeigen killerbees19 ist derzeit offline Spielerprofile bei SC:Special Bewerben anzeigen Private Nachricht senden Website dieses Benutzers besuchen
thoha
Übersetzer
Übersetzer



Anmeldedatum: 07.10.2006
Geschlecht: Männlich
Beiträge: 2591

BeitragVerfasst am: 06.05.2012, 17:57    Titel:

Das habe ich mich auch schon gefragt... hab aber nicht ich gemacht, das kommt so von Haus aus Smile

Danke für deine Hilfe!
Nach oben
Benutzer-Profile anzeigen thoha ist derzeit offline Spielerprofile bei SC:Special Bewerben anzeigen Private Nachricht senden
killerbees19
Administrator & Rennleitung
Administrator & Rennleitung



OC-Nickname: KB19
Südafrika Team South Africa

Anmeldedatum: 09.05.2006
Geschlecht: Männlich
Alter: 29 Jahre
Beiträge: 13935
Wohnort: Wien

BeitragVerfasst am: 06.05.2012, 18:12    Titel:

Ich habe das zum Test jetzt einmal abgespeckt, so funktioniert es - sofern ich deinen Wunsch richtig interpretiert habe: https://www.happytec.at/pastebin/view.php?id=253

Soll heißen: #header braucht nichts, #logo bekommt ein relative, #loginBox ein absolute und #loginBox muss innerhalb von #logo sein. Sieht das jetzt so aus, wie es sein soll? Falls du noch Hilfe brauchst, das in deinem CSS oder HTML umzusetzen, einfach melden.


MfG Christian
_________________
Nach oben
Benutzer-Profile anzeigen killerbees19 ist derzeit offline Spielerprofile bei SC:Special Bewerben anzeigen Private Nachricht senden Website dieses Benutzers besuchen
killerbees19
Administrator & Rennleitung
Administrator & Rennleitung



OC-Nickname: KB19
Südafrika Team South Africa

Anmeldedatum: 09.05.2006
Geschlecht: Männlich
Alter: 29 Jahre
Beiträge: 13935
Wohnort: Wien

BeitragVerfasst am: 06.05.2012, 19:46    Titel:

Ich habe das nochmals an dein Beispiel angepasst Wink

Zuerst einmal weg mit allen z-index, position und top/left/right/bottom Angaben. Dann bekommt #header ein position:relative, #loginBox ein position:absolute und die gewünschte Position mit top/left/right/bottom. Und eventuell bekommt der #header noch eine Höhenangabe. Der HTML-Code kann dabei unverändert bleiben, ich habe nur <header> gegen ein <div> ausgetauscht, weil es ansonsten nichts anzeigt. Aber vermutlich verarbeitet das dein Template System irgendwie anders, keine Ahnung.

Code:
<style type="text/css">

/* Header */

#header {
    width: 100%; margin: 0 auto; padding: 0 0 0 0; position: relative; height: 100px; }
#header h1 {
    font-size: 48px; padding-top: 5px; line-height: .6; }
#header h1 a:link, header h1 a:visited {
    color: #444; display: block; margin: 0; text-decoration: none; }
#header h1 a:hover, header h1 a:active {
    background: none; text-shadow: none; }
#header #loginBox {
    float: right; width: 185px; background: #F67600; color: #fff;
    border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
   position: absolute; bottom: 7px; right: 10px; }
#header #loginSelection {
    text-align: center; padding: 5px; }
#header #loginSelection a:link, #header #loginSelection a:visited {
    color: #fff; }
#header #loginForm {
    width: 175px; background: #F67600; padding: 5px; margin-top: -5px; border-radius: 5px;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#header #loginForm form input[type="text"], #header #loginForm form input[type="password"] {
    display: table-cell; height: 14px; border: 1px solid #d7d7d7; font-size: 14px; border-radius: 3px;
    -moz-border-radius: 3px; -webkit-border-radius: 3px; }
#header #loginForm .error {
    color: #8b0000; padding: 2px; background-color: #d3d3d3; border-radius: 3px; -moz-border-radius: 3px;
    -webkit-border-radius: 3px; font-weight: bold; }
#header #logo {
   margin-top:0px; margin-left:0px; }
   
</style>


<div id="header">
<div id="logo"><a title="{header}" href="{faqHome}"><img src="template/spektra/images/cloudy_sky.jpg" style="width: 100%; height: 100%;" /></a></div>
    <div id="loginBox">
        {loginBox}
    </div>
   
   <!-- <h1>
        <a title="{header}" href="{faqHome}">{header}</a>
    </h1>-->
   
</div>


Hier nochmals die Änderungen zum Überblick als Patch:

Code:
--- a/test.html   Thu Jan 01 01:00:00 1970
+++ b/test.html   Thu Jan 01 01:00:00 1970
@@ -3,7 +3,7 @@
 /* Header */
 
 #header {
-    width: 100%; margin: 0 auto; padding: 0 0 0 0; }
+    width: 100%; margin: 0 auto; padding: 0 0 0 0; position: relative; height: 100px; }
 #header h1 {
     font-size: 48px; padding-top: 5px; line-height: .6; }
 #header h1 a:link, header h1 a:visited {
@@ -11,30 +11,31 @@
 #header h1 a:hover, header h1 a:active {
     background: none; text-shadow: none; }
 #header #loginBox {
-    float: right; top: 0; width: 185px; background: #F67600; color: #fff;
+    float: right; width: 185px; background: #F67600; color: #fff;
     border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; position: absoulte; }
+    border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
+   position: absolute; bottom: 7px; right: 10px; }
 #header #loginSelection {
     text-align: center; padding: 5px; }
 #header #loginSelection a:link, #header #loginSelection a:visited {
     color: #fff; }
 #header #loginForm {
-    position: absolute; width: 175px; z-index: 50; background: #F67600; padding: 5px; margin-top: -5px; border-radius: 5px;
+    width: 175px; background: #F67600; padding: 5px; margin-top: -5px; border-radius: 5px;
     -moz-border-radius: 5px; -webkit-border-radius: 5px; }
 #header #loginForm form input[type="text"], #header #loginForm form input[type="password"] {
     display: table-cell; height: 14px; border: 1px solid #d7d7d7; font-size: 14px; border-radius: 3px;
     -moz-border-radius: 3px; -webkit-border-radius: 3px; }
 #header #loginForm .error {
     color: #8b0000; padding: 2px; background-color: #d3d3d3; border-radius: 3px; -moz-border-radius: 3px;
-    -webkit-border-radius: 3px; font-weight: bold; z-index:1; }
-#header#logo {
-   margin-top:0px; margin-left:0px; z-index:2; position: relative; }
+    -webkit-border-radius: 3px; font-weight: bold; }
+#header #logo {
+   margin-top:0px; margin-left:0px; }
   
 </style>
 
 
-<header id="header">
-<div id="logo"><a title="{header}" href="{faqHome}"><img src="template/spektra/images/cloudy_sky.jpg" width="100%" height="100%" /></a></div>
+<div id="header">
+<div id="logo"><a title="{header}" href="{faqHome}"><img src="template/spektra/images/cloudy_sky.jpg" style="width: 100%; height: 100%;" /></a></div>
     <div id="loginBox">
         {loginBox}
     </div>
@@ -43,5 +44,5 @@
         <a title="{header}" href="{faqHome}">{header}</a>
     </h1>-->
     
-</header>
+</div>
       
\ No newline at end of file


Das sieht hier zu mindestens korrekt aus Smile


MfG Christian
_________________


Dieser Beitrag wurde insgesamt 4 mal geändert. Zuletzt von killerbees19.
Nach oben
Benutzer-Profile anzeigen killerbees19 ist derzeit offline Spielerprofile bei SC:Special Bewerben anzeigen Private Nachricht senden Website dieses Benutzers besuchen
thoha
Übersetzer
Übersetzer



Anmeldedatum: 07.10.2006
Geschlecht: Männlich
Beiträge: 2591

BeitragVerfasst am: 07.05.2012, 21:15    Titel:

Wow, cool! Danke!

Hat bis auf die Position der Loginbox genau das gemacht, was ich wollte!
Nach oben
Benutzer-Profile anzeigen thoha ist derzeit offline Spielerprofile bei SC:Special Bewerben anzeigen Private Nachricht senden
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht teilnehmen.
Du kannst Dateien in diesem Forum nicht hochladen.
Du kannst Dateien in diesem Forum nicht herunterladen.

 

Alle Zeiten sind GMT + 2 Stunden (Sommerzeit)
Aktuelles Datum und Uhrzeit: 03.04.2020, 21:24
Nach oben
Valid HTML 4.01 Transitional
Valid CSS!
Software based on work from the phpBB-Group  •  Deutsche Übersetzung von phpBB.de

netcup - Internetdienstleistungen
 
 
[ happytec.at | forum.happytec.at | blog.happytec.at | esports.happytec.at | event.happytec.at ]