Top-Themen

Aktuelle Themen (A bis Z)

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, 7995 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
HTML
DIV-Container mit variabler Höhe
gelöst Frage von dimaqwHTML4 Kommentare

Hallo! Kurz zu meinem Problem: ich habe 3 DIVs (Header, Container und Footer), die untereinander stehen. Es muss erreicht ...

CSS
DIV Container einheitliche Höhe
Frage von YanmaiCSS7 Kommentare

Hallo ihr Administratoren, ich habe DIVs mit der display: inline-block Eigenschaft. An sich funktioniert alles, aber wenn in einem ...

JavaScript
Funktion ausführen nach Refresch von DIV Container
gelöst Frage von wiesi200JavaScript2 Kommentare

Hallo, ich hab gerade auf Grund meiner bescheidenen JavaScript Kenntnisse Probleme beim Ausführen einer Funktion. Aktuell habe ich auf ...

JavaScript
Aktualisieren von DIV Containern per JavaScript
gelöst Frage von wiesi200JavaScript4 Kommentare

Hallo erstmal. aktuell Programmiere ich eine Webseite zur Statusanzeige unserer Fertigungsmaschinen. Ansich nicht's spannendes. Der Grundaufbau ist aktuell vereinfacht ...

Neue Wissensbeiträge
Windows 10

Autsch: Microsoft bündelt Windows 10 mit unsicherer Passwort-Manager-App

Tipp von kgborn vor 1 TagWindows 107 Kommentare

Unter Microsofts Windows 10 haben Endbenutzer keine Kontrolle mehr, was Microsoft an Apps auf dem Betriebssystem installiert (die Windows ...

Sicherheits-Tools

Achtung: Sicherheitslücke im FortiClient VPN-Client

Tipp von kgborn vor 1 TagSicherheits-Tools

Ich weiß nicht, wie häufig die NextGeneration Endpoint Protection-Lösung von Fortinet in deutschen Unternehmen eingesetzt wird. An dieser Stelle ...

Internet

USA: Die FCC schaff die Netzneutralität ab

Information von Frank vor 2 TagenInternet5 Kommentare

Jetzt beschädigt US-Präsident Donald Trump auch noch das Internet. Der neu eingesetzte FCC-Chef Ajit Pai ist bekannter Gegner einer ...

DSL, VDSL

ALL-BM200VDSL2V - Neues VDSL-Modem mit Vectoring von Allnet

Information von Lochkartenstanzer vor 2 TagenDSL, VDSL2 Kommentare

Moin, Falls jemand eine Alternative zu dem draytek sucht: Gruß lks

Heiß diskutierte Inhalte
Batch & Shell
Kann man mit einer .txt Datei eine .bat Datei öffnen?
gelöst Frage von HelloWorldBatch & Shell20 Kommentare

Wie schon im Titel beschrieben würde ich gerne durch einfaches klicken auf eine Text oder Word Datei eine Batch ...

Router & Routing
OpenWRT bzw. L.E.D.E auf Buffalo WZR-HP-AG300H - update
gelöst Frage von EpigeneseRouter & Routing11 Kommentare

Guten Tag, ich habe auf einem Buffalo WZR-HP-AG300H die alternative Firmware vom L.E.D.E Projekt geflasht. Ich bin es von ...

LAN, WAN, Wireless
WLAN Reichweite erhöhen mit neuer Antenne
gelöst Frage von gdconsultLAN, WAN, Wireless8 Kommentare

Hallo, ich besitze einen TL-WN722N USB-WLAN Dongle mit einer richtigen Antenne. Ich frage mich jetzt ob man die Reichweite ...

Windows 10
Autsch: Microsoft bündelt Windows 10 mit unsicherer Passwort-Manager-App
Tipp von kgbornWindows 107 Kommentare

Unter Microsofts Windows 10 haben Endbenutzer keine Kontrolle mehr, was Microsoft an Apps auf dem Betriebssystem installiert (die Windows ...