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, 7935 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 ..
Ähnliche Inhalte
CSS
DIV Container einheitliche Höhe (7)

Frage von Yanmai zum Thema CSS ...

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

Frage von Akrosh zum Thema JavaScript ...

Entwicklung
Seite automatisch wieder ausrichten mit css oder javascript? (2)

Frage von rababar2014 zum Thema Entwicklung ...

HTML
gelöst Iframe wird zu klein in div angezeigt (7)

Frage von Thomas91 zum Thema HTML ...

Neue Wissensbeiträge
Linux Netzwerk

Ping und das einstellbare Bytepattern

(1)

Erfahrungsbericht von LordGurke zum Thema Linux Netzwerk ...

Windows Update

Microsoft Update KB4034664 verursacht Probleme mit Multimonitor-Systemen

(3)

Tipp von beidermachtvongreyscull zum Thema Windows Update ...

Viren und Trojaner

CNC-Fräsen von MECANUMERIC werden (ggf.) mit Viren, Trojanern, Würmern ausgeliefert

(4)

Erfahrungsbericht von anteNope zum Thema Viren und Trojaner ...

Heiß diskutierte Inhalte
SAN, NAS, DAS
MSA 2050 RAID Konfig (27)

Frage von Leo-le zum Thema SAN, NAS, DAS ...

Netzwerkmanagement
Windows Server 2008 R2: "netsh reset" nicht verfügbar? (11)

Frage von RickTucker zum Thema Netzwerkmanagement ...

Outlook & Mail
Outlook Suche liefert kein Ergebnise mehr (8)

Frage von Bjoern-B zum Thema Outlook & Mail ...

Windows Server
gelöst "Kiosk"System für Demoversion und neue Versionen einer Anwendung (7)

Frage von kpieper zum Thema Windows Server ...