Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Div in div Container mit Logo füllen und ausrichten - wie?

Frage Entwicklung CSS

Mitglied: 85232

85232 (Level 1)

05.06.2010 um 14:22 Uhr, 7724 Aufrufe, 5 Kommentare

Hallo Community,
ich benötige mal wieder eure Hilfe. Und zwar versuche ich mich gerade daran ein LogoBereich in CSS zu schreiben. Jedoch sieht das Ergebnis nicht so aus, als ich es mir wünsche würde und bitte daher um eure Hilfe.

Wie oben schon geschrieben versuche ich gerade ein Logobereich mit CSS zu definieren. Es sollen später zwei Logos eingefügt werden, das eine soll linksbündung und das andere rechtsübundig ausgelegt werden. Ich habe mir dazu überlegt, einen div Container mit dem Namen LogoBereich zu erstellen, der im MainContainer ist. Im div LogoBereich füge ich einfach zwei div-Container hinzu. Der eine geht von links bis zur mitte und der andere von der Mitte (div LogoAdministrator1) bis nach rechts (div LogoAdministrator2). Danach fülle ich die div Container mit den Bildern und richte das das Logo "LogoAdministrator1" rechtsbündig an" und das Logo "LogoAdminstrator2" linksbündig am Container an.

Leider klappt es nicht so, wie ich mir das gedacht habe. Habe ich da einfach ein Denkfehler (ich bin noch Anfänger in CSS) oder ist es ein Programmierfehler?
Was mich auch wundert ist, das das zweite Logo über den MainContainer hinübergeht.

Zur besseren Demonstation habe ich euch zwei Screenshots angehängt. Das eine Picture zeigt das derzeitige aussehen der Page. Das andere Picture zeigt meinen Gedankengang. Außerdem ist hier noch der Code den ich dazu verwende.

4fee3d9eaf1d36486da4075177e586f1 - Klicke auf das Bild, um es zu vergrößern
5b3ce3643012100b23def6bcedfa9091 - Klicke auf das Bild, um es zu vergrößern


Ich hoffe ihr könnt mir bei diesem Problem helfen und evtl. noch ein paar Verbesserungsvorschläge machen.

Gruß,
speckles


Hier mein HTML-Code:
01.
</head> 
02.
 
03.
<body> 
04.
         <div id="MainContainer"> 
05.
 
06.
                 <div id="LogoBereich"> 
07.
 
08.
                      <div id="LogoAdministrator1"> 
09.
                       <img src="images/LogoAdministrator1.png" alt="Text: Logo - Administrator1" /> 
10.
                      <!-- Ende von LogoAdministrator1 --> 
11.
                      </div> 
12.
 
13.
 
14.
 
15.
                      <div id="LogoAdministrator2"> 
16.
                         <img src="images/LogoAdministrator2.png" alt="Text: Logo - Administrator2" /> 
17.
                      <!-- Ende von LogoAdministrator2 --> 
18.
                      </div> 
19.
 
20.
 
21.
</body> 
22.
</html>
Hier mein CSS-Code:
01.
body { 
02.
	font-family: "Trebuchet MS", "Bitstream Vera Sans", "Helvetica", sans-serif; 
03.
	font-size: 10pt; 
04.
	background: #FF530D url("images/HintergrundRahmen.png") top center repeat-y; 
05.
06.
 
07.
 
08.
#MainContainer { 
09.
	width: 1150px; 
10.
	margin: 20px auto 20px auto; 
11.
12.
 
13.
 
14.
#LogoBereich #LogoAdministrator1 { 
15.
	padding: 5px 10px; 
16.
	margin: 20px 20px 20px 20px;	 
17.
	width: 150px; 
18.
	float: left; 
19.
20.
 
21.
 
22.
#LogoBereich #LogoAdministrator2 { 
23.
	padding: 5px 10px;	 
24.
	margin: 20px 20px 20px 20px;	 
25.
	width: 150px; 
26.
	float: right; 
27.
}
Mitglied: Fritzchen
05.06.2010 um 17:19 Uhr
Hallo speckles.

Frage. Wo hast du Eigenschaften für den div Container LogoBereich festgelegt? In deiner CSS Datei kann ich hierzu nichts finden.

Die Einbindung des Hintergrundbildes ist auch nicht korrekt. Näheres hierzu findest du hier.
http://de.selfhtml.org/navigation/css.htm#hintergrund

Noch ein schönes Wochenende von der Küste.
Fritzchen
Bitte warten ..
Mitglied: dog
06.06.2010 um 00:28 Uhr
Die Einbindung des Hintergrundbildes ist auch nicht korrekt. Näheres hierzu findest du hier.

Klär mich auf, was soll da nicht richtig sein?

margin: 20px auto 20px auto;

lässt sich zusammenfassen auf

margin: 20px auto;

Bevor ich mit CSS anfange füge ich aber immer erstmal folgenden Code ein:
01.
* { 
02.
  padding: 0; 
03.
  margin: 0; 
04.
}
Ansonsten läuft man in zu viele Browser-Differenzen.

Für den Rest müsste ich mal CSSEdit auspacken.
Bitte warten ..
Mitglied: Bulletproof
06.06.2010 um 20:31 Uhr
Ohne getestet zu haben:

#LogoBereich #LogoAdministrator2 {
padding: 5px 10px;
margin: 20px 20px 20px 20px; <---------- diesen Wert (das 4. 20px) um 190px erhöhen.
width: 150px;
float: left;
}

Das würde der Breite des ersten Bildes entsprechen zzgl. den Margins des ersten Bildes.

Wie gesagt, ungetestet.
Bitte warten ..
Mitglied: 14695
14.06.2010 um 16:06 Uhr
Hi,

was die Ausrichtung angeht, versuch's mal so (unter FF 3.6.3 funktioniert's):

01.
<html> 
02.
<head> 
03.
	<style type="text/css"> 
04.
		#main { 
05.
			width:1150px; 
06.
			margin: 20px auto 20px auto; 
07.
08.
		#logo #a1 { 
09.
			background: #0F0; 
10.
			float: left; 
11.
			margin: 20px 20px 20px 20px; 
12.
			padding: 5px 10px; 
13.
			width: 150px; 
14.
15.
		#logo #a2 { 
16.
			background: #F00; 
17.
			float: right; 
18.
			margin: 20px 20px 20px 20px; 
19.
			padding: 5px 10px; 
20.
			width: 150px; 
21.
22.
		.clear { 
23.
			clear:both; 
24.
25.
	</style> 
26.
</head> 
27.
<body> 
28.
<div id="main"> 
29.
	<div id="logo"> 
30.
		<div id="a1"> 
31.
		boo 
32.
		</div> 
33.
		<div id="a2"> 
34.
		baa 
35.
		</div> 
36.
		<div class="clear"></div> 
37.
	</div> 
38.
	<div id="content"> 
39.
		bim 
40.
	</div> 
41.
</div> 
42.
 
43.
</body> 
44.
</html>
Ansonsten schau dir mal diese seite hier an. Unter "Tutorials/Artikel" findest bestimmt, was du suchst...

Grüße
Oliver
Bitte warten ..
Mitglied: szimmer
16.07.2010 um 16:48 Uhr
Hi,

also wenn ich mir deinen Quelltext ansehe fehlt aufjedenfall ein clear Element unter den floating Boxen für die Logos.

Kann man behilfsweise auch mal mit einem <span style="clear:both;"></span> machen. (Der muss innerhalb deines divlogos gesetzt werden da dieser ja die beiden Umfluss Elemte beinhaltet)

Weiterer Tip: In deinem HTML Quelltext geht der umfassende DIV nicht wieder zu d.h. es fehlt ein </div>

s. den Quelltext von Omix. Der schaut gut aus!

Grüße,
Simon
Bitte warten ..
Neuester Wissensbeitrag
Humor (lol)

Linkliste für Adventskalender

(3)

Information von nikoatit zum Thema Humor (lol) ...

Ähnliche Inhalte
JavaScript
gelöst Externen DIV-Container via jQuery anzeigen (6)

Frage von Akrosh zum Thema JavaScript ...

HTML
gelöst DIV-Container mit variabler Höhe (4)

Frage von dimaqw zum Thema HTML ...

Hyper-V
Benötige Hilfe bei Hyper-V-Core 2016 div. Befehle gesucht (4)

Frage von Stefan007 zum Thema Hyper-V ...

Heiß diskutierte Inhalte
Windows Server
DHCP Server switchen (25)

Frage von M.Marz zum Thema Windows Server ...

SAN, NAS, DAS
gelöst HP-Proliant Microserver Betriebssystem (14)

Frage von Yannosch zum Thema SAN, NAS, DAS ...

Grafikkarten & Monitore
Win 10 Grafikkarte Crash von Software? (13)

Frage von Marabunta zum Thema Grafikkarten & Monitore ...

Windows 7
Verteillösung für IT-Raum benötigt (12)

Frage von TheM-Man zum Thema Windows 7 ...