✔ Positionsfrage - <Div>'s Nebeneinander darstellen?

[Stephan Liebig]

Hi, ich komme gerade nicht auf die Lösung.

Ich habe ein Feld Content definiert, in dem ich die Texte usw. meiner Homepage darstellen will. In dieser Ebene habe ich eine Ebene für Texte, das passt soweit. Allerdings möchte unter dieser Ebene 2 Ebenen parallel darstellen lassen, in dennen Projekte stehen oder so Sachen. Mit meinem Code, positionieren die sich nicht nebeneinander aus, sondern untereinander.

Welche Eigenschaften fehlen mir, dass die Ebenen (Projects und Studium) nebeneinander sind?

#content {
	background-color: #f9f9f9;
  	position: absolute;
 	top: 235px;						/* Abstand zum oberen Fensterrand */
  	left: 0px;						/* Abstand zum linken Fensterrand */
  	height: 100%;					/* Blockhöhe */
	width: 800px;
  	padding: 0px;						/* Interpretation Boxmodell! */
  	overflow: hidden;				/* Scrollbalken unterbinden */
	border: 1px solid;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
    }
#content .inhaltDiv {
  	margin: 20px;					/* Abstand des Inhalts zum Blockrand */
	width: 760px;
	}
#content .inhaltDivProjects {
	margin: 20px;
	width: 300px;
	}
#content .inhaltDivStudium {
	margin: 20px;
	width: 300px;
	}

 

[Carrear]

Du machst also einen Div mit der ID Content und UNTER (also nicht verschachtelt in dem Content Div) diesem Div nochmal 2 Divs für diese Zusatzinfos? Dann kannst du nicht 3 mal die ID Content benutzen.

 

[Maik]

Hi,

hier fehlt noch eine float-Deklaration:

#content .inhaltDivProjects {
        margin: 20px;
        width: 300px;
        float:left;
        }

@Carrear: Das sind Selektoren für Nachfahrenelemente:

<div id="content">
     <div class="inhaltDiv">inhaltDiv</div>
     <div class="inhaltDivProjects">inhaltDivProjects</div>
     <div class="inhaltDivStudium">inhaltDivStudium</div>
</div>

 

[Stephan Liebig]

@Maik

Super danke, habe es jetzt so gelöst:

#content {
	background-color: #f9f9f9;
  	position: absolute;
 	top: 235px;						/* Abstand zum oberen Fensterrand */
  	left: 0px;						/* Abstand zum linken Fensterrand */
  	height: 100%;					/* Blockhöhe */
	width: 800px;
  	padding: 0px;						/* Interpretation Boxmodell! */
  	overflow: hidden;				/* Scrollbalken unterbinden */
	border: 1px solid;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
    }
#content .inhaltDiv {
  	margin: 20px;					/* Abstand des Inhalts zum Blockrand */
	width: 760px;
	}
#content .inhaltDivProjects {
	margin: 20px;
	width: 360px;
	float: left;
	}
#content .inhaltDivStudium {
	margin: 20px;
	width: 360px;
	float: left;
	}

Danke, funktioniert!

 

[Carrear]

Ja, hatte nicht gesehen wie die Aufgebaut sind sondern mich nur an die Textbeschreibung gehangen. Hörte für mich so an, als ob da keine Verschachtelung wäre. Deswegen dachte ich er versuche:

<div id="content">
     <div class="inhaltDiv">inhaltDiv</div>
</div>
<div id="content" class="inhaltDivProjects">inhaltDivProjects</div>
<div id="content" class="inhaltDivStudium">inhaltDivStudium</div>

Gruß
Carrear