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

gelöst Positionierung von DIV - Sidebar

Mitglied: chris84

chris84 (Level 1) - Jetzt verbinden

10.11.2015, aktualisiert 16:10 Uhr, 1630 Aufrufe, 5 Kommentare

Hallo Zusammen,

ich möchte gern ein eine Sidebar auf meiner Seite einbauen. Leider wird diese aktuell am DIV "Company" ausgerichtet,
soll aber direkt unter dem DIV "Header-Image" beginnen. So schaut's aktuell aus:

c2b2091a62f5a3646c01f219ee5373ab - Klicke auf das Bild, um es zu vergrößern
Der Code lautet wie folgt:

01.
<!doctype html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<title>Unbenanntes Dokument</title>
06.
<style type="text/css">
07.
#top-line {
08.
	width: 100%;
09.
	background: #169fe6;
10.
	height: 5px;
11.
	display: block;
12.
}
13.

14.
#wrapper 
15.
{
16.
	background: #FFFFFF;
17.
	width: 1020px;
18.
	margin: 0 auto;
19.
	padding: 0;
20.
	box-shadow:  0px 0px 4px 0px rgba(0, 0, 0, 0.2);
21.
	border: dashed thin;
22.

23.
}
24.

25.
.Header-Image
26.
{
27.
	background-color: #A2A0A0;
28.
	background-color: #D38889;
29.
	background-repeat: no-repeat;
30.
	height: 300px;
31.
	border: 1px dotted red;
32.
}
33.

34.

35.
#Header-Logo {
36.
	display: inline;
37.
	float: right;
38.
	overflow: hidden;
39.
	margin: o auto;
40.
	padding: 15px;
41.
	background-color: #FFFFFF;
42.
}
43.

44.
.Title {
45.
	margin: -50px 0 0 0;
46.
	border:thin dotted green;
47.
}
48.

49.
.Overlay {
50.
	max-width: 678px;
51.
	float: left;
52.
	background-color:#3796DB;
53.
	padding: 15px;
54.
	color: #fff;
55.

56.
}
57.

58.
.Sidebar {
59.
    float: right;
60.
    width: 25%;
61.
    max-width: 217px;
62.
    border: none;
63.
	background-color: #A9E7F4;
64.
}
65.

66.
.Button {
67.
	width: 150px;
68.
	height: 20px;
69.
	margin-bottom: 5px;
70.
	padding: 5px;
71.
	background-color:#3796DB;
72.
	color: #ffffff;
73.
}
74.

75.
.Button:hover {
76.

77.
	background-color:#A9E7F4;
78.

79.
}
80.

81.
.Content {
82.
	width: 70%;
83.
	border: 1px dotted blue;
84.
	background-color: #ffffff;
85.
}
86.

87.
.Company {
88.

89.
	padding: 15px;
90.

91.
}
92.
</style>
93.
</head>
94.
<body>
95.
<div id="wrapper">
96.

97.
<div id="top-line"></div>
98.

99.
<div class="Header-Image">
100.
  <div id="Header-Logo">LOGO</div>
101.
</div>
102.

103.
<!--Title Start-->
104.
<div class="Title">
105.
<div class="Overlay">
106.
<h2>Title Title Title</h2>
107.
<h4>Untertitel Untertitel Untertitel</h4>
108.
</div>
109.
</div>
110.
<div style="clear:left;"></div>
111.
<!--Title Ende-->
112.

113.
<!--Sidebar Start-->
114.
<div class="Sidebar">
115.
<div class="Button">Link</div>
116.
<div class="Button">Drucken</div>
117.
<div class="Button">Weitersagen</div>
118.
</div>
119.
<!--Sidebar Ende-->
120.

121.
<!-- Content Start -->
122.
<div class="Content">
123.

124.

125.

126.
<!--Company Info Start-->
127.
<div class="Company">
128.
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
129.
</div>
130.
<!--Company Info Ende-->
131.

132.

133.
</div>
134.
<!-- Content End -->
135.
</div>
136.
</body>
137.
</html>
Bin gerade mit meinem Latein am Ende und auch kein Profi.. Vielleicht hat jemand eine Idee?

Danke & Viele Grüße
Mitglied: 122990
10.11.2015, aktualisiert um 15:30 Uhr
01.
<!doctype html>
02.
<html>
03.
<head>
04.
<meta charset="utf-8">
05.
<title>Unbenanntes Dokument</title>
06.
<style type="text/css">
07.
#top-line {
08.
	width: 100%;
09.
	background: #169fe6;
10.
	height: 5px;
11.
	display: block;
12.
}
13.
#wrapper {
14.
	background: #FFFFFF;
15.
	width: 1020px;
16.
	margin: 0 auto;
17.
	padding: 0;
18.
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
19.
	border: dashed thin;
20.
	position:relative;
21.
}
22.
.Header-Image {
23.
	background-color: #A2A0A0;
24.
	background-color: #D38889;
25.
	background-repeat: no-repeat;
26.
	height: 300px;
27.
	border: 1px dotted red;
28.
}
29.
#Header-Logo {
30.
	display: inline;
31.
	float: right;
32.
	overflow: hidden;
33.
	margin: o auto;
34.
	padding: 15px;
35.
	background-color: #FFFFFF;
36.
}
37.
.Title {
38.
	margin: -50px 0 0 0;
39.
	border: thin dotted green;
40.
}
41.
.Overlay {
42.
	max-width: 678px;
43.
	float: left;
44.
	background-color: #3796DB;
45.
	padding: 15px;
46.
	color: #fff;
47.
}
48.
.Sidebar {
49.
	position:absolute;
50.
	right:0px;
51.
	width: 25%;
52.
	max-width: 217px;
53.
	border: none;
54.
	background-color: #A9E7F4;
55.
}
56.
.Button {
57.
	width: 150px;
58.
	height: 20px;
59.
	margin-bottom: 5px;
60.
	padding: 5px;
61.
	background-color: #3796DB;
62.
	color: #ffffff;
63.
}
64.
.Button:hover { background-color: #A9E7F4; }
65.
.Content {
66.
	width: 70%;
67.
	border: 1px dotted blue;
68.
	background-color: #ffffff;
69.
}
70.
.Company { padding: 15px; }
71.
</style>
72.
</head>
73.
<body>
74.
<div id="wrapper">
75.
  <div id="top-line"></div>
76.
  <div class="Header-Image">
77.
    <div id="Header-Logo">LOGO</div>
78.
  </div>
79.
   <!--Sidebar Start-->
80.
  <div class="Sidebar">
81.
    <div class="Button">Link</div>
82.
    <div class="Button">Drucken</div>
83.
    <div class="Button">Weitersagen</div>
84.
  </div>
85.
  <!--Sidebar Ende--> 
86.
  
87.
  <!--Title Start-->
88.
  <div class="Title">
89.
    <div class="Overlay">
90.
      <h2>Title Title Title</h2>
91.
      <h4>Untertitel Untertitel Untertitel</h4>
92.
    </div>
93.
  </div>
94.
  <div style="clear:left;"></div>
95.
  <!--Title Ende--> 
96.
  
97.
 
98.
  
99.
  <!-- Content Start -->
100.
  <div class="Content"> 
101.
    
102.
    <!--Company Info Start-->
103.
    <div class="Company"> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
104.
    <!--Company Info Ende--> 
105.
    
106.
  </div>
107.
  <!-- Content End --> 
108.
</div>
109.
</body>
110.
</html>

Gruß grexit
Bitte warten ..
Mitglied: chris84
10.11.2015 um 15:15 Uhr
Hallo Grexit!

Super, vielen Dank für die schnelle Info & Lösung!

Nun ist allerdings die ganze Seite bzw. der "Wrapper" nicht mehr zentriert. Kannst du mir evtl sagen woran das liegt?

Danke!
Bitte warten ..
Mitglied: 122990
LÖSUNG 10.11.2015, aktualisiert um 16:15 Uhr
Ach sö, da hatte ich die Position des Wrappers fälschlicherweise auf absolute gesetzt, ist oben geändert.
Bitte warten ..
Mitglied: chris84
10.11.2015 um 15:36 Uhr
Okay, jetzt ist es wieder zentriert. Allerdings ist die Sidebar nun komplett an den rechten Bildschirmrand gefloatet.
Mit einem margin-right kann ich mir helfen - oder gibt es eine bessere Lösung?
Bitte warten ..
Mitglied: chris84
10.11.2015 um 16:10 Uhr
Mein Fehler, nun geht alles. Habe das Position: Relative im Wrapper übersehen.

Vielen Dank für deine Unterstützung!!
Bitte warten ..
Ähnliche Inhalte
CSS
Probleme mit der Positionierung von DIV
gelöst Frage von 127944CSS8 Kommentare

Moin zusammen, ich versuche gerade ein wenig über CSS zu lernen. Bin ganz frisch in dem Thema und darum ...

Installation
DokiWiki Sidebar Haupnamensordner
Frage von STITDKInstallation

Guten Mittag, ich habe eine Frage zu MediaWiki. Ich versuche gerade mir ein MediaWiki aufzuziehen. Meine Frage ist nun. ...

CSS

Div zu übergeordnetem div ausrichten

gelöst Frage von tsunamiCSS2 Kommentare

Hallo, ich möchte sowas wie einen Tagesablauf dokumentieren. 1.2.19 usw. Das Ganze farblich mit Divs dargestellt. Soweit so gut. ...

LAN, WAN, Wireless

Programm für Positionierung Accesspoints Neubau Unternehmen?

Frage von grillinator95LAN, WAN, Wireless6 Kommentare

Hallo, kann mir jemand eine Software empfehlen, die mit meinen Bauplan die empfohlene Positionierung für Accesspoints ausrechnet, bzw. sagen ...

Neue Wissensbeiträge
Humor (lol)

Warum Linux in einer vernetzten Welt einfach keinen Komfort bietet!

Tipp von Snowbird vor 17 StundenHumor (lol)13 Kommentare

Ein interessanter Einblick warum Linux nichts für Geräteübergreifende Arbeit ist :)

Humor (lol)
Zuviel Speicher ist ungesund. :-)
Tipp von Lochkartenstanzer vor 1 TagHumor (lol)14 Kommentare

Moin Kollegen, Heute hatte ich ein ungewöhnliches Aha-Erlebnis: Über das Wochenende habe ich einen einen 6 Jahre alten Bare-Metal ...

Windows Update

KB4517297 verfügbar, behebt Fehler in VB6 VBA VBScript

Information von sabines vor 1 TagWindows Update

Das Update behebt mögliche Fehler in VB6, VBA und VBScript, die durch das Update KB4512486 vom August entstanden sind. ...

Viren und Trojaner

Staatstrojaner soll auch per Einbruch installiert werden können

Information von transocean vor 2 TagenViren und Trojaner5 Kommentare

Moin, Bundesinnenminister Horst Seehofer will dem Verfassungsschutz Wohnungseinbrüche erlauben, um den geplanten Staatstrojaner zu installieren. Gruß Uwe

Heiß diskutierte Inhalte
Hyper-V
Bei Neuaufbau auf Core-Server setzen?
gelöst Frage von dertowaHyper-V33 Kommentare

Hallo zusammen, ich habe vor einigen Monaten die Verantwortung für eine EDV-Landschaft übernommen die seit Jahren von einem Dienstleister ...

Router & Routing
Deinstalliertes Geräte wird in FritzBox noch immer als verbundenes Gerät angezeigt
Frage von imebroRouter & Routing17 Kommentare

Hallo, in meiner FritzBox 7490 wird im Bereich "Funknetz" ein Gereät bei den verbundenen Geräten angezeigt, wobei ich nicht ...

Sonstige Systeme
Ist es möglich ein ISDN-Telefon an einen analogen Anschluss anzuschließen?
Frage von cramtroniSonstige Systeme14 Kommentare

Also anders herum geht es ja, da gibt es ja diese Adapter von RJ11 auf TAE-F, aber gibt es ...

Humor (lol)
Zuviel Speicher ist ungesund. :-)
Tipp von LochkartenstanzerHumor (lol)14 Kommentare

Moin Kollegen, Heute hatte ich ein ungewöhnliches Aha-Erlebnis: Über das Wochenende habe ich einen einen 6 Jahre alten Bare-Metal ...