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

Frage Probleme mit der Anordnung von DIvs

Cewbacca

Cewbacca

Neues Mitglied
Hallo Community,
ich dachte ich kenne die Grundlagen von CSS und HTML ... scheinbar wohl doch nicht so ganz.

Auf meiner Webseite befindet sich ein DIV zur Anzeige des Inhaltes.

Code: 
#anzeige_inhalt_one {
  float: left;
  border: 1px solid grey;
  min-height:500px;
  width:700px;
}

Dann habe ich die Startseite, welche in dem Div angezeigt wird.

Code: 
#startseite {
    background-image: url("bilder/gestaltung/frontbild.png");
    height:500px;
    width:700px;   
}

<--bis hier ist alles in ordnung -->


nun möchte ich auf der Startseite ein weiteres Div Positionieren nur leider will mein CSS nicht so wie ich es will.


nehmen wie also mal an ich möchte mein Div wie folgt Positionieren (irgenwo halt auf der Startseite):
Code: 
#zusatzdiv {
    height:150px;
    width:200px;   
}

Ich verzweifele noch, ich habe es mit Margin Probiert , dann verschiebt er das gesamte Design,
ich habe es mit Padding Probiert auch ergebniss los, ich habe es auch mit klasssen erfolglos Probiert,

Vielleicht hat jemand ja die passende Lösung, ist whs. ganz easy aber wenn man den Wald vor lauter Bäumen nicht mehr sieht.......
 
Hallo

Eine easy-Lösung (was immer du darunter auch verstehst) gibt es nicht.

Ich verzweifele noch, ich habe es mit Margin Probiert , dann verschiebt er das gesamte Design,
ich habe es mit Padding Probiert auch ergebniss los, ich habe es auch mit klasssen erfolglos Probiert,
Zum Vergrößern anklicken....

Das ist keine brauchbare Problembeschreibung.

Mit den Quellcodeschnipseln wird kaum jemand etwas anfangen können.

Zudem unterliegst du wahrscheinlich einigen Fehlvorstellungen, die das Erstellen einer Webseite torpedieren.

Zunächst braucht die Seite Informationen, also den Inhalt im body-Bereich.

Der Inhalt wird seit der Jahrtausendwende nicht mehr positioniert. Sondern die Container werden so bestimmt, dass sie sich aneinander anlehnen und so die gewünschte Darstellung für die jeweiligen Bildschirmgrößen einnehmen.

Die Höhe der Container wird auch nicht vorgegeben, sondern durch deren Inhalt bestimmt.

Das Grundlayout wird dann aktuell am sinnvollsten mit dem Flexbox-Modell erzeugt.

Um dir helfen zu können benötigen wir einen Link zu deinen bisherigen Bemühungen oder den gesamten vorhandenen Quelltext. Speziell den Inhalt des body-Bereichs.

Gruss

MrMurphy
 
OHOH mein code ist noch nicht validiert und auch das CSS ist noch nicht ausgelagert.



Code: 
<style type="text/css">
<!--
body {
  font: 100.01% Verdana, Arial, Helvetica, sans-serif;
}

* {
  margin-top:0px;
  padding-top:0;
}

#seite {
  width: 980px;
  margin: 0 auto;
}

#kopfbereich {
  background-image: url("bilder/gestaltung/header.png");
  height:180px;
    margin-top:10px;
}



#steuerung {
  background-color: black;
  height:30px;
}


#inhalt {
  background-color: #0B2F3A;
  overflow:hidden;
  padding-left:10px;
  padding-right:10px;
  padding-top:15px;
  padding-bottom:10px;
}

#anzeige_inhalt_one {
  float: left;
  border: 1px solid grey;
  min-height:500px;
  width:700px;
}


#anzeige_inhalt_two {
  float: right;
  background-image: url("bilder/frame_one_bg.png");
  height:500px;
  width:250px;

}





#fussbereich {
  clear: both;
  background-color: #000000;
  height:100px;
}

.itemname {
color: #ffc600;
font-family:arial, "lucida console", sans-serif;
font-size:12pt;

}








#toplinks {
    width:250px;
    background-color:#ffffff;
      height:150px;

}

.text_short {
          padding-left:5px;
          font-family:verdana, sans-serif;
font-size:12px;       


}

#img {
    margin-top:15px;
    margin-left:15px;   
}

#imgbg {
    margin-top:15px;
    margin-left:15px;
    background-color:#ffffff;
    height:80px;
    width:220px;
    padding-left:5px;
    text-align: center;
}


.big {
    color: #ffc600;
    font-weight: bold;
   
}


#footer_text {
padding-top:20px;
text-align: center;
color: #ffffff;
font-family:verdana, sans-serif;
font-size:12px;   
}



/* Hier ist das Design der Startseite festgelegt. */
#startseite {
    background-image: url("bilder/gestaltung/frontbild.png");
    height:500px;
    width:700px;   
}




-->
</style>


</head>
<body>
<div id="seite">
  <div id="kopfbereich">
   
  </div>
   <div id="steuerung"><?php
include("navi.php");
?></div>




  <div id="inhalt">
        <div id="anzeige_inhalt_one">   
       
<?php

    if (isset($_GET['go']))
    {
        switch($_GET['go'])
        {

            case 'fusions_chips':      include('display/view_fusions_chips.php');break;
            case 'waffen':            include('display/view_waffen.php');break;
            case 'chassis':           include('display/view_chassis.php');break;
            case 'chassis':           include('display/view_chassis.php');break;
            case 'kopf':            include('display/view_kopf.php');break;
            case 'energie':           include('display/view_energie.php');break;
            case 'rumpf':            include('display/view_rumpf.php');break;
           
           
           
            case 'uebersicht':  include('uebersicht.php');
                            break;

            case 'questsingle':    include('quest_single.php');
                            break;


             
            case 'search':    include('search.php');
                            break;

              case 'portal':    include('portal.php');
                            break;


            default:        include('home.html');
        }
    }
    else
    {
        include('front.php');
    }

?>
</div>

    <!-- Hier steht der Inhalt des rechten Anzeigeframes-->

        <div id="anzeige_inhalt_two">
        </div>
        </div>     
</div>
  <div id="fussbereich">
   <span id="counterdata">
   <div id="footer_text"> ** Copyright © since 2016 ** Powered by Oldschool ** Kontakt:  ** Version 0.1 **</div>
  </div>
</div>
</body>
</html>
 
Cewbacca schrieb:
Ich habe die Rote Box eingezeichnet, nur verschiebt sich jetzt das gesamte Startbild.
Zum Vergrößern anklicken....
Genau aus diesem Grund schrieb ich im CSS
CSS: 
#startseite {
    ...
    box-sizing:border-box /* Box-Modell-Konflikt vermeiden */
}
und habe zur Erklärung den zugehörigen Link angehängt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben