✔ Div Container bekommen einen Abstand nach <p>

SpiceLab · 5. November 2010

leon_20v hat gesagt.:
Irgendwie sehe ich nicht was du meinst? Bei der Includeten Datei habe ich jetzt eigentlich alles weggelassen an html tags. da steht nur das DIV drinn.?

Dein Quellcode erstreckt sich noch ein Stückchen weiter ...

Kennst du dich in deinen Dokumenten nicht aus, oder ist dir darin der Überblick abhanden gekommen? :suspekt:

SpiceLab · 5. November 2010

leon_20v hat gesagt.:
Aber das mit der Position verstehe ich immer noch nicht. Kannst du mir das evtl. an der CSS verdeutlichen?

Das geht eigentlich aus meinen Linkempfehlungen klar hervor, wenn man sich denn die Zeit nimmt, und Mühe macht, den Artikel eigenständig zu lesen, und die Code-Beispiele zu studieren

Aber damit das hier nicht zum abendfüllenden Programm wird, und wir zum Ende kommen:

CSS:

/* Navigation */

...

.menu li
{
	width: 105px;
	float: left;
	position: relative; /* relative Positionsart */
}

...

#smenu1, #smenu2, #smenu3, #smenu4
{
	font-size: 12px;
	display: none;
	width: 105px;
	float: left;
	cursor: pointer;
	position: absolute; /* absolute Positionsart */
}

leon_20v · 5. November 2010

okay danke... ja ich muss mich da erst einlesen.

ich mach die seite nur für einen Bekannten und des ding sollte halt fertig werden.

Wenn ich dich zum Abschluss würde ich gern noch wissen, warum ich bei dem PHP-Include nichts an der Positionsart machen muss. obwohl doch eigentlich nur der Inhalt eingebundne wird?
Liegt es evtl. daran, das ich es in eine Tabelle einbinde?

SpiceLab · 5. November 2010

Vielleicht gehörst du ja auch der User-Gruppe an, die der englischen Sprache nicht mächtig ist.

Für diesen Fall gibt's selbstverständlich auch deutschsprachige Tutorials, um die Grundlagen zu erlernen, wie z.B.:

SpiceLab · 5. November 2010

leon_20v hat gesagt.:
Wenn ich dich zum Abschluss würde ich gern noch wissen, warum ich bei dem PHP-Include nichts an der Positionsart machen muss. obwohl doch eigentlich nur der Inhalt eingebundne wird?
Liegt es evtl. daran, das ich es in eine Tabelle einbinde?

Kann ich jetzt nicht nachvollziehen, oder was zu sagen, denn das <table>-Element für sich alleine betrachtet, ändert eigentlich nichts an deinem eingangs vorgestellten Problem.

leon_20v · 5. November 2010

naja ich danke dir auf jedenfall vielmals für deine Hilfe!

Echt dass ihr mir immer so super helft!

Kannst du nochmal schauen ob die Seite jetzt passt und evtl nochmal n Screenie machen? ist nämlich sehr komisch das es bei dir anderst dargestellt wird. weil ich hab eine Breite von 970px das sollte doch eigentlich passen?

/edit

Ich dreh jetzt dann durch, das gibts doch nicht. Echt war blödes CSS. Bin ich zu blöd absolutzu blöd****

Wie schaffe ich es denn? das der ganze Container wo die Navidrinn ist schwarz wird?

im FF: ist der Balken durchgängig
im IE: ist das nicht so

das gibts doch nicht?

SpiceLab · 5. November 2010

Hast du zwischenzeitlich die Lösung gefunden?

Ich frag nur, weil der IE (6 - 8) bei mir den schwarzen Hintergrund komplett anzeigt.

leon_20v · 6. November 2010

Nein diese Lösung ist nicht schön die ich gemacht habe.

Ich habe ein div mit schwarzem Hintergrund ohne Position eingefügt. Dann habe ich dort eine Tabelle eingefügt und darin das div mit dem Menü.

Ohne Tabelle funktioniert es nicht. Da wird das Menü zwar an dieser Stelle eingesetzt, allerdings verschiebt sich das Bild darunter unter das Menü und den Balken bekomme ich auch nicht schwarz.
Ich habe aber deine Einstellungen genommen.

Irgendwie ist das mit den Anordnung bei CSS schon schwer zu verstehen. Ich weiß nicht warum ich das nicht kapiere. Habe mir schon edliche Tutorials durchgelesen, aber ich steig einfach nicht durch wie ich es hinbekomme, wie ich es gern hätte

SpiceLab · 6. November 2010

Keine Ahnung, welche Tutorials du erfolglos studiert hast.

Mit den nachfolgend überarbeiteten und fehlerkorrigierten Code-Komponenten funktioniert bei mir soweit alles tadellos, und das Beste daran, diese überflüssige Tabelle und das zweite umschliessende DIV #links sind darin überhaupt nicht mehr enthalten ;-)

Wäre von dir sehr entgegenkommend, wenn du nun die Quellcodes vollständig per "copy & paste" übernehmen würdest, damit das Erfolgserlebnis auch an deine Türe klopft.

Von meinen bis dato vorgestellten Lösungen bzgl. des Menüs war darin nicht eine Zeile enthalten. Danke dafür

Da frägt man sich schon ernsthaft, warum man dir hier überhaupt antwortet, wenn du offensichtlich die Unterstützung nicht annimmst, und es vorziehst, im stillen Kämmerlein planlos vor dich hinzuwurschteln.

Wenn ich Lust auf einen unverbindlichen Kaffeeplausch am Nachmittag verspüre, kenn' ich weitaus unterhaltsamere Örtlichkeiten, als ein Fach-Forum im Netz

Überarbeitete Fassung XHTML-Code:

HTML:

<body>
<div id="container">
	<div id="banner">
 	   <form action='login.php' method='POST'>
    
            <table width="450" border="0" cellspacing="0" cellpadding="0" style="margin-left: auto; margin-right: 10px;">
                <tr>
                    <td><h4>Username:</h4></td>
                    <td><input type='text' name='username'></td>
                    <td><h4>PW:</h4></td>
                    <td><input type='password' name='password'></td>
                    <td><input type='submit' value=' Log in '></td>
                </tr>
            </table>
        </form>
    </div>
    <div id="strichweiss"></div>
    <div class="menu">
        <ul>
            <li><a class="oben" href="javascript:void(0);" onMouseOver="montre('smenu1');" onMouseOut="cache('smenu1');">Models</a>
                <ul id="smenu1" onMouseOver="montre('smenu1');" onMouseOut="cache('smenu1');">
                    <li><a href="">Men</a></li>
                    <li><a href="">Women</a></li>
                </ul>
            </li>
            <li><a class="oben" href="javascript:void(0);" onMouseOver="montre('smenu2');" onMouseOut="cache('smenu2');">Werbetypen</a>
                <ul id="smenu2" onMouseOver="montre('smenu2');" onMouseOut="cache('smenu2');">
                    <li><a href="">Girls 16+</a></li>
                    <li><a href="">Women 20+</a></li>
                    <li><a href="">Women 30+</a></li>
                    <li><a href="">Women 40+</a></li>
                    <li><a href="">---------</a></li>
                    <li><a href="">Boys 16+</a></li>
                    <li><a href="">Men 20+</a></li>
                    <li><a href="">Men 30+</a></li>
                    <li><a href="">Men 40+</a></li>
                </ul>
            </li>
            <li><a class="oben" href="javascript:void(0);" onMouseOver="montre('smenu3');" onMouseOut="cache('smenu3');">Youngstars</a>
                <ul id="smenu3" onMouseOver="montre('smenu3');" onMouseOut="cache('smenu3');">
                    <li><a href="">Kids</a></li>
                    <li><a href="">Werbekids</a></li>
                    <li><a href="">Teenies</a></li>
                </ul>
            </li>
            <li><a class="oben" href="">MDM</a></li>
            <li><a class="oben" href="jobs.php">Jobs</a></li>
            <li><a class="oben" href="">Partner</a></li>
            <li><a class="oben" href="">Gästebuch</a></li>
            <li><a class="oben" href="">Kontakt</a></li>
            <li><a class="oben" href="">Premium</a></li>
        </ul>
    </div>
    <div id="Bilder"><img src="Design/welcome-header.jpg" width="970" height="250" style="margin-top: 5px; margin-bottom:10px;" /></div>
	<div id="left">
	  <table width="220" border="0" cellspacing="0" cellpadding="0" vspace="10" style="margin-left: auto; margin-right: auto;">
	    <tr>
	      <td bgcolor="#19202C"><h3>Hinweis</h3></td>
        </tr>
	    <tr>
	      <td bgcolor="#f5f5f5"></td>
        </tr>
        <tr>
	      <td bgcolor="#f5f5f5">
            <p>Du musst eingeloggt sein um den kompletten Inhalt der Webseite sehen zu können</p><p>Die Registrierung ist kostenlos! </p> <p> <a class="speziell" href="register_model.php">Registrieren als Model</a></p> <p> <a class="speziell" href="register_interesse.php">Registrieren als Interessent</a></p>
          </td>
        </tr>
      </table>
	  <p>&nbsp;</p>
	  <p>
        <table width="220" border="0" cellspacing="0" cellpadding="0" style="margin-left: auto; margin-right: auto;">
            <tr>
                <td bgcolor="#19202C"><h3>Model des Monats</h3></td>
            </tr>
            <tr>
                <td bgcolor="#f5f5f5">&nbsp;</td>
            </tr>
        </table>
      </p>
   </div>
   <div id="content"><!-- InstanceBeginEditable name="Inhalt" -->
    
        
    
	<!-- InstanceEndEditable -->
    </div>
    <div id="strichweiss"> </div>
    <div id="footer">
        <h1><a href="impressum.php">Impressum</a> | <a href="agb.html">AGB</a></h1>
    </div>
</div>
</body>

Überarbeitete Fassung 1.css:

CSS:

body {
background-color: #EFEFEF;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}

a {font-size: 13px;}
a {color: #CCC;}
a:visited {color:#CCC;}
a:hover {color: #FFFFFF;}
a:active {color:#FFF;}
a {text-decoration:none;}

a.speziell:link {color:#3A4968;}
a.speziell:visited {color:#3A4968;}
a.speziell:hover {color:#19202C;}
a.speziell:active {color:#3A4968;}

h1 {
font-size: 11px;
text-transform:uppercase;
background-color: #000000;
border-top:1px solid #564b47;
border-bottom:1px solid #564b47;
padding:5px 15px;
margin:0px }

h2 {
font-size:20px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}

h3 {
font-size:11px;
font-weight: normal;
padding: 5px 10px;
margin:0px;
color: #fff;}

h4 {
font-size:11px;
font-weight: normal;
padding: 5px 10px;
margin:0px;
color: #ffffff;}

img.download {vertical-align:middle;}

/* ----------container zentriert das layout-------------- */
#container {
width: 970px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
}

/* ----------banner for logo-------------- */
#banner {
background-image:url(Design/Top.jpg);
height: 170px;
background-color: #e1ddd9;
text-align: right;
padding: 0px;
margin: 0px;
}
#banner img {padding:0px 0px;} 

#strichweiss {
background-color: #ffffff;
text-align: right;
height: 5px;
padding: 0px;
margin: 0px;
}

#Bilder {
background-color: #FFFFFF;
min-height: 120px;
text-align: center;
padding: 0px;
margin: 0px;
}

/* -----------------Inhalt--------------------- */
#content {
background-color: #ffffff;
padding: 0px;
margin-left: 242px;
margin-right: 0px;
}
div#content { 
min-height:370px;
height:expression(this.scrollHeight > 370 ? "auto":"370px"); 
}

p, pre{
padding: 5px 10px;
margin:0px;
}

/* --------------left navigavtion------------- */
#left {
float: left;
width: 242px;
margin: 0px;
padding: 0px;
}

/* -----------footer--------------------------- */
#footer {
clear: both;
margin: 0px;
padding: 0px;
text-align: right; }

Überarbeitete Fassung klappmenue.css:

CSS:

body
{
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	font-size: 13px;
	overflow: auto;
	padding: 0px;
	margin: 0px;
}


ul, li
{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

.menu
{
	position: relative;
	z-index: 3;
}

.menu ul {
    width:100%;
    height:30px;
    background:#000;
}

.menu ul li ul {
    width:auto;
    height:auto;
    background:none;
}

.menu li
{
	width: 105px;
	float: left;
	position:relative;
}

.menu a.oben
{
	border: 1px solid #000;
	background-color: #000;
	text-decoration: none;
	text-align: center;
	font-weight: normal;
	cursor: default;
	margin: 0px 2px;
	padding: 2px 0px;
	display: block;
	height: 15px;
	color: #DDDDDD;
}

.menu a
{
	border: 1px solid #000;
	background-color: #fff;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	cursor: default;
	margin: 0px 2px;
	display: block;
	height: 20px;
	color: #000;
}

.menu a:hover
{
	background-color: #ccc;
}
.menu a.oben:hover
{   
	background-color: #000;
	color: #FFF;
	cursor: pointer;
	text-decoration: underline;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
	font-size: 12px;
	display: none;
	width: 105px;
	float: left;
	cursor: pointer;
	position:absolute;
	top:20px;
	left:0;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
	font-weight: normal;
	padding-top: 2px;
	border-top: 0px;
	cursor: pointer;
	color:#000;
}

Übrigens, dieses Menü, dessen Untermenüs zunächst versteckt, und beim Überfahren der Hauptmenüpunkte sichtbar werden, lässt sich ohne jeglichen Einsatz von Javascript mit CSS realisieren, und ist immer der JS-Technik vorzuziehen, denn der Seitenbesucher könnte möglicherweise die JS-Unterstützung in seinem Browser deaktiviert haben, womit alle darin aufgelisteten Projektseiten für ihn nicht zugänglich sind.

CSS:

/* Untermenüebene verstecken */
.menu ul li ul { display:none; } 

/* Untermenüebene zeigen */
.menu ul li:hover ul { display:block; }

Quellen mit Beispielen und Anleitungen für so ein CSS-gestütztes Dropdown-Menü hab ich dir hier gestern zur Genüge genannt.

Einzige Ausnahme wären hier die antiquierten IE-Versionen 5 und 6 aus dem vergangenen Jahrhundert, die die angewandte :hover-Pseudoklasse lediglich für das <a>-Element kennen / unterstützen, und daher mit JS Nachhilfe erhalten, damit die Submenüs in ihnen nicht verschlossen bleiben.

Seit einigen Jahren stehen mittlerweile CSS-Menüs zur Verfügung, die in ihnen auch ohne zusätzliches JS funktionieren. Hierfür hat Stu Nicholls eine pfiffige Lösung entwickelt, und bindet mit Hilfe der "Conditional Comments" zuätzliche <a>- u. <table>-Elemente ein , die so eine Submenüebene umschließen.

Auf diese Weise kann a:hover im IE5/6 genutzt werden, um die Submenüs anzuzeigen:

CSS:

.menu ul li a:hover ul { display:block; }

Kleine Kostprobe gefällig? Bitte schön: http://www.cssplay.co.uk/menus/dd_valid.html

Was Stu noch an weiteren genialen Menüvariationen in der Pfanne hat, entnimmst du der Übersichtsseite http://www.cssplay.co.uk/menus/

leon_20v · 7. November 2010

Baoh ich danke dir für diese lange Ausführung. Werde mich gleich morgen dran setzten das umzustellen.

Ich habe deine Tips schon befolgt, doch der für den ich die Seite mache, schaut täglich auf die Seite und ich will da nicht so nen optischen Pfusch stehen haben. Deswegen war da noch meine alte version!

// ah ich merke gerade ich kann nicht copy paste machen, weil natürlich die ganzen php scripte nicht zu sehen sind sondern nur was mit echo ausgegeben wird. ich werde das aber ein basteln

✔ Div Container bekommen einen Abstand nach <p>

SpiceLab

ZENmechanic

SpiceLab

ZENmechanic

leon_20v

Erfahrenes Mitglied

SpiceLab

ZENmechanic

SpiceLab

ZENmechanic

leon_20v

Erfahrenes Mitglied

Anhänge

SpiceLab

ZENmechanic

leon_20v

Erfahrenes Mitglied

SpiceLab

ZENmechanic

leon_20v

Erfahrenes Mitglied

Neue Beiträge