CSS Divs übereinander Legen

Sasku · 28. Februar 2017

Hallo,

aus unserem SAP System lasse ich verschiedene Daten-XMLs erstellen, welcher mithilfe von einer XLST-Datei zu einer "Website" transformiert werden. Dies wird dann als Stellenanzeige in den verschiedenen Jobbörsen verwendet. - das nur mal als hintergrund. Das Layout dieser Anzeigen soll ich nun ändern.

Die Kontaktdaten stehen im Main Div links unten, nun soll noch ein Weiteres Div in dem die verschiedenen Awards ( best Recruiter o. ä. ) drinnen stehen auf die gleiche höhe gesetzt werden ( s. Bild ). Dabei dachte ich daran, noch ein Div zu erstellen welches ich in die rechte untere Ecke des Main Divs lege.

Kann mir diesbezüglich jemand helfen? meine CSS Kentnisse sind so gering dass sie praktisch nicht vorhanden sind.

Um vielleicht noch zu erklären wie es aktuell aussieht, die Award-Logos ( sind bilder ) sind aktuell zwar auf der rechten Seite aber unter den Kontaktanzeigen:

das problem ist halt dass die beiden auf gleiche höhe sollen.

Umbel · 28. Februar 2017

Wie wärs wenn du uns zeigst was du schon hast und woran du scheiterst? Prinzipiell sehe ich garnkein Problem. Divs lassen sich natürlich verschachteln

Madman1209 · 28. Februar 2017

Hi,

viele Wege führen nach Rom. Du kannst die divs absolut positionieren, du kannst einen flex-container drum herumsetzen, du kannst ein div um die beiden machen und die inneren divs mit float positionieren - ich stimme da Umbel zu: was hast du denn bis jetzt?

VG,
Mad

Reglohln · 28. Februar 2017

Sasku schrieb:
meine CSS Kentnisse sind so gering dass sie praktisch nicht vorhanden sind.

Wie siehts denn mit HTML-Kenntnissen aus? Eine <div>-Suppe bringt niemandem etwas. Auch ein <p>-Element ist ein Blockelement und kann anstelle von <div> genutzt werden.

Nutze erst einmal vorhandene und geeignete Elemente, bevor man unnötig <div>'s, die keinerlei inhaltliche Bedeutung haben, nutzt.

Für dein Vorhaben - so wie ich das verstehe, sollen 2 Elemente innerhalb eines Kontainers nebeneinander positioniert werden - solltest du dich über float und clear belesen.

Sasku · 28. Februar 2017

Code:

<body>
			<div id="MainFrame">
				<div id="CompanyLogo">
					<a href="hier link einfügen">
						<img src="{$logoURL}" alt="" border="0"/>
					</a>
					<p/>
				</div>
				<div id="CompanyPictures">
					<a href="hier link einfügen">
						<img src="{$bannerURL}" alt="" border="0"/>
					</a>
					<p/>
				</div>
				<div id="MainBody">
					<!-- <div id="MainLeft">
						<a href="hier link einfügen">
							<img src="{$crfAwardURL}" class="awards" alt="" border="0"/>
						</a>
					</div> -->
					<div id="MainLeft">
						<div id="IntroCompany" class="NormalText">Text Zensiert
							<!--<xsl:value-of select="PositionProfile/FormattedPositionDescription[Name = 'CompanyDescription']/Value" disable-output-escaping="yes" />-->
						</div>
						<div id="IntroPosition" class="NormalText">
							<!--<xsl:value-of select="PositionProfile/FormattedPositionDescription[Name = 'IntroPosition']/Value" disable-output-escaping="yes" />-->
							<xsl:value-of select="PositionProfile/FormattedPositionDescription[Name = 'CompanyDescription']/Value" disable-output-escaping="yes"/>
						</div>
						<div id="PositionTitle">
							<h1>
								<xsl:value-of select="PositionProfile/FormattedPositionDescription[Name = 'JobTitle']/Value" disable-output-escaping="yes"/>
							</h1>
						</div>
						<div id="VacanyNumber">
							<b>
								<xsl:value-of select="PositionProfile/ProfileId/IdValue" disable-output-escaping="yes"/>
							</b>
							<p/>
						</div>
						<div id="Tasks">
							<div class="SubHeading">Ihre Aufgaben</div>
							<div class="NormalText">
								<xsl:variable name="pTasks">
									<xsl:value-of select="PositionProfile/FormattedPositionDescription[Name = 'TaskDescription']/Value" disable-output-escaping="yes"/>
								</xsl:variable>
								<xsl:variable name="pTasks2">
									<xsl:call-template name="removeTrailingCross">
										<xsl:with-param name="pText" select="normalize-space($pTasks)"/>
									</xsl:call-template>
								</xsl:variable>
								<xsl:call-template name="formatBulletPoints">
									<xsl:with-param name="pText" select="normalize-space($pTasks2)"/>
								</xsl:call-template>
								<p/>
							</div>
						</div>
						<div id="Profile">
							<div class="SubHeading">Ihr Profil</div>
							<div class="NormalText">
								<xsl:variable name="pProfile">
									<xsl:value-of select="PositionProfile/FormattedPositionDescription[Name = 'RequirementDescription']/Value" disable-output-escaping="no"/>
								</xsl:variable>
								<xsl:variable name="pProfile2">
									<xsl:call-template name="removeTrailingCross">
										<xsl:with-param name="pText" select="normalize-space($pProfile)"/>
									</xsl:call-template>
								</xsl:variable>
								<xsl:call-template name="formatBulletPoints">
									<xsl:with-param name="pText" select="normalize-space($pProfile2)"/>
								</xsl:call-template>
								<p/>
							</div>
						</div>
						<div id="JobOffers">
							<div class="SubHeading">Wir bieten</div>
							<div class="NormalText">
								<xsl:value-of select="PositionProfile/FormattedPositionDescription[Name = 'ProjectDescription']/Value" disable-output-escaping="yes"/>
								<p/>
							</div>
						</div>
						<div id="AdditionalInfo" class="AdditionalText">Die Bewerbungen von geeigneten Schwerbehinderten und Gleichgestellten sind ausdrücklich erwünscht.</div>
						<div id="Contact">
							<div class="SubHeading">
								<xsl:value-of select="UserArea/ApplText1" disable-output-escaping="yes"/>
							</div>
							<xsl:value-of select="UserArea/ApplText2" disable-output-escaping="yes"/>
							<br/>
							<xsl:value-of select="UserArea/ApplText3" disable-output-escaping="yes"/>
							<br/>
							<xsl:value-of select="UserArea/ApplText4" disable-output-escaping="yes"/>
							<br/>
							<xsl:value-of select="UserArea/ApplText5" disable-output-escaping="yes"/>
							<br/>
							<xsl:value-of select="UserArea/ApplText6" disable-output-escaping="yes"/>
							<br/>
							<xsl:value-of select="UserArea/ApplText7" disable-output-escaping="yes"/>
						</div>
						<div id="MainRight">
							<a href="hier link einfügen">
								<img src="{$crfAwardURL}" class="awards" alt="" border="0"/>
							</a>
						</div>							
						<!--<div id="ApplicationButton">
								<input type="button" onclick="window.location.href = '{$ApplicationWizardURL}';" value="Jetzt bewerben"/><p></p>  
							</div>-->
					</div>
					
					
				</div>

				<div id="Footer">
					<hr id="lineFooter"/>
					<a href="hier link einfügen">
						<img class="RightJustified" src="{$sloganURL}" alt="" border="0"/>
					</a>
				</div>
			</div>
		</body>

Das hier ist mal mein Body. Speziell nebeneinander sollen die Container "Contact" und "MainRight".

Hier noch kurz mein CSS ( zumindest das relevante ):

Code:

body {
						font-size:12px;
						color:#3c3c3c;
						background:#ffffff;
						font-family:Arial, Helvetica, sans-serif;
						background-color:#ffffff;
						background-attachment:fixed;
						line-height: 1.5em;
						overflow-y: auto;
					}
					div {	
						border-width:0px;
						border-style:solid;
					}
					
					div#MainFrame {
						width: 960px;
						margin: 0px auto;
						position: relative;
						text-align: center;
						border-color: blue;
					}

					div#MainBody {
						height: auto ;
						margin-top: 24px;
					}
						
					div#MainLeft {
						position: relative;
						float: left;
						text-align: left;
						height: 100%;
						width: 100%;
					}
						
					div#MainRight{
						float: right;
						text-align: right;
						width: auto;
                        margin-bottom: 30px !important;
					}

					div#Footer {
						height: auto;
						clear: right;
						text-align: right;
					 }
					
					div#Contact {
						width: 50%;
					}

                    .awards {
                        /*  margin-left: 30px; */  
			float: right; 
                    }
                                                                               
                    #lineFooter{
                        background-color: #0097AC;
                        border: 0px;
                        height: 2px;
						width: 100%;
                        background: linear-gradient(90deg, white 0%, #0097AC 100%);
                    }

Denke mal das is soweit in Ordnung.

cheft · 28. Februar 2017

Hallo,
ergänze mal "float:left;" bei div#Contact:

Code:

div#Contact {
   width: 50%;
   float:left;
}

das sollte dann theoretisch funktionieren...

Reglohln · 28. Februar 2017

Hier muss man erstmal grundsätzlich am Markup Hand anlegen. Das besteht ausschließlich aus <div>- und <a>-Elementen. Ich sehe zig </p>'s, aber keinen einzigen Start-Tag für einen Absatz. Gruselig.

Sasku · 28. Februar 2017

cheft schrieb:
Hallo,
ergänze mal "float:left;" bei div#Contact:

Code:

div#Contact { width: 50%; float:left; }

das sollte dann theoretisch funktionieren...

Danke dir! das hat funktioniert!

Reglohln schrieb:
Hier muss man erstmal grundsätzlich am Markup Hand anlegen. Das besteht ausschließlich aus <div>- und <a>-Elementen. Ich sehe zig </p>'s, aber keinen einzigen Start-Tag für einen Absatz. Gruselig.

ich weiß schon. Die Datei soll von mir auch nur soweit angepasst werden damit sie auf das neue Layout passt, persönlich hätte ich das ganze auch anders gelöst.

Ozzy83 · 28. Februar 2017

Tipp: F12 im Browser drücken, über die Elemente hovern und sich anschauen wie das CCS dazu aussieht. Dort kannst du dann in Echtzeit etwas verändern um zu sehen wie es sich auswirkt.

Tipp2: Achte bei jeder CSS Option darauf mit welchen Browsern diese läuft. Besonders den Internet Explorer schießt man schneller ab als man denkt.

Sasku · 28. Februar 2017

Ozzy83 schrieb:
Tipp: F12 im Browser drücken, über die Elemente hovern und sich anschauen wie das CCS dazu aussieht. Dort kannst du dann in Echtzeit etwas verändern um zu sehen wie es sich auswirkt.

Tipp2: Achte bei jeder CSS Option darauf mit welchen Browsern diese läuft. Besonders den Internet Explorer schießt man schneller ab als man denkt.

Danke! Und die Sache mit den Browsern ist immer ein Problem, allerdings habe ich das ganze jetzt mal im IE und in Chrome getestet; Hat in beiden funktioniert!

Suche

CSS Divs übereinander Legen

Sasku

Gast

Umbel

Lt. Commander

Madman1209

Fleet Admiral

Reglohln

Commander

Sasku

Gast

cheft

Lt. Junior Grade

Reglohln

Commander

Sasku

Gast

Ozzy83

Lt. Junior Grade

Sasku

Gast

Ähnliche Themen