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

Frage Entwicklung CSS

GELÖST

Ausrichtung der HP offline zu online sieht anders aus

Mitglied: SamTrex

SamTrex (Level 1) - Jetzt verbinden

14.11.2009, aktualisiert 19:46 Uhr, 4361 Aufrufe, 5 Kommentare

Seh ich mir die Seite offline an (IE7) -> ist das Layout mittig.
Seh ich mir die Seite 1:1 online an (IE7) -> ist das Layout links!

Warum?

Hallo zusammen.
Ja, wie oben beschrieben habe ich da ein Verständnisproblem. Die Seite ist 1:1 kopiert (also offline / online). Auch der Browser ist der gleiche.
Verstehe das einfach nicht. Über Google hab ich bereits danach gesucht, aber hauptsächlich habe ich das Problem gefunden das die Leute das
Layout erst gar nicht ausgerichtet bekommen ....

Brauche nur einen Tipp... denke ich.
Danke euch!

Gruß Sam

Link zur Seite: http://www.projects.lenzing.it/khazri

CSS-File:
01.
body { 
02.
	margin: 120px 0 0 0; 
03.
	padding: 0; 
04.
	background: #FCF7E8 url(images/img01.jpg) repeat-x left top; 
05.
	text-align: center; 
06.
	font: 15px Arial, Helvetica, sans-serif; 
07.
	color: #626262; 
08.
09.
       
10.
h1, h1 a, h2, h2 a, h3, h3 a { 
11.
	margin: 0; 
12.
	text-decoration: none; 
13.
	font-family: Tahoma, Georgia, "Times New Roman", Times, serif; 
14.
	font-weight: normal; 
15.
	color: #444444; 
16.
17.
 
18.
h1 { 
19.
	letter-spacing: -1px; 
20.
	font-size: 2.2em; 
21.
	font-family: Verdana, Arial, Helvetica, sans-serif; 
22.
23.
 
24.
h2 { 
25.
	letter-spacing: -1px; 
26.
	font-size: 2em; 
27.
28.
 
29.
h3 { 
30.
	font-size: 1em; 
31.
32.
 
33.
p, ol, ul { 
34.
	margin-bottom: 2em; 
35.
	line-height: 200%; 
36.
37.
   
38.
a { 
39.
	color: #473701; 
40.
41.
 
42.
a:hover { 
43.
	text-decoration: none; 
44.
45.
 
46.
/* Header */ 
47.
 
48.
#header { 
49.
	height: 42px; 
50.
	width: 800px; 
51.
52.
 
53.
#logo h1, #logo p { 
54.
	float: left; 
55.
	text-transform: lowercase; 
56.
57.
 
58.
#logo h1 { 
59.
	font-size: 2.4em; 
60.
	padding: 0px 0 0 40px; 
61.
62.
 
63.
#logo p { 
64.
	margin: 0; 
65.
	padding: 18px 0 0 4px; 
66.
	line-height: normal; 
67.
	font-family: Verdana, Arial, Helvetica, sans-serif; 
68.
	font-size: 14px; 
69.
	font-weight: bold; 
70.
71.
 
72.
#logo a { 
73.
	text-decoration: none; 
74.
	color: #E47F07; 
75.
76.
 
77.
#logo p a { 
78.
	color: #473701; 
79.
80.
 
81.
#logo .firmenlogo { 
82.
	background: url(images/firmenlogo.jpg) no-repeat left center; 
83.
84.
 
85.
 
86.
/* Page */ 
87.
 
88.
#page { 
89.
	padding: 40px 0 0 0; 
90.
	width:800px; 
91.
92.
 
93.
/* Menu */ 
94.
#menu { 
95.
	float: left; 
96.
	width: 200px; 
97.
98.
 
99.
#menu ul { 
100.
	margin: 0; 
101.
	padding: 0; 
102.
	list-style: none; 
103.
104.
 
105.
#menu li { 
106.
	display: block; 
107.
	float: top; 
108.
109.
 
110.
#menu a { 
111.
	display: block; 
112.
	width: 100px; 
113.
	padding: 2px 20px 2px 20px; 
114.
	background: url(images/img03.jpg) repeat-x left top; 
115.
	border: 4px 4px 4px 4px solid #fdefbf; 
116.
	margin-top: 2px; 
117.
	margin-bottom: 2px; 
118.
	text-decoration: none; 
119.
	text-align: center; 
120.
	font-family: Verdana, Arial, Helvetica, sans-serif; 
121.
	font-weight: normal; 
122.
	font-size: 14px; 
123.
	color: #C78C04; 
124.
125.
 
126.
#menu .last { 
127.
	margin-bottom: 20px; 
128.
129.
 
130.
#menu a:hover { 
131.
	background: url(images/img02.jpg) repeat-x left top; 
132.
	color: #FFFFFF; 
133.
134.
 
135.
#menu .current_page_item { 
136.
137.
 
138.
#menu .current_page_item a { 
139.
	background: url(images/img02.jpg) repeat-x left top; 
140.
	color: #FFFFFF; 
141.
142.
 
143.
/* Content */ 
144.
 
145.
#content { 
146.
	background: #FFFFFF url(images/img04.jpg) repeat-y left bottom; 
147.
	margin: 0 0 0 200px; 
148.
	width: 600px; 
149.
	border-top: 6px #F4BA0F solid; 
150.
151.
 
152.
.post { 
153.
	padding-top: 30px; 
154.
	margin: 10px 20px 0 20px; 
155.
	text-align: left; 
156.
157.
 
158.
.post .title { 
159.
	font-family: Tahoma, Georgia, "Times New Roman", Times, serif; 
160.
161.
 
162.
.post .title h2 { 
163.
	padding: 0px 30px 5px 0px; 
164.
	font-weight: normal; 
165.
	font-size: 2.2em; 
166.
	text-align: left; 
167.
	color: #473701; 
168.
169.
 
170.
.title h2 a { 
171.
	color: #473701; 
172.
173.
 
174.
.post .title p { 
175.
	margin: 0 0 0 20px; 
176.
	padding: 10px 0 10px 30px; 
177.
	background: url(images/img12.gif) no-repeat left center; 
178.
	border-top: 1px #D8DFE6 dotted; 
179.
	line-height: normal; 
180.
	color: #BABABA; 
181.
182.
 
183.
.post .title p a { 
184.
	color: #EEA90B; 
185.
186.
   
187.
.post .links { 
188.
	padding: 5px 0; 
189.
	border-top: 1px #D8DFE6 dotted; 
190.
	border-bottom: 1px #D8DFE6 dotted; 
191.
	margin-top: 10px; 
192.
	text-align: right; 
193.
194.
 
195.
.post .links a { 
196.
	font-weight: bold; 
197.
198.
 
199.
.post .links a:hover { 
200.
201.
 
202.
/* Footer */ 
203.
 
204.
#footer { 
205.
	padding: 20px 0 10px 0; 
206.
	width: 800px; 
207.
	border-top: 6px #F4BA0F solid; 
208.
	background: #473701; 
209.
210.
 
211.
#footer p { 
212.
	margin-bottom: 1em; 
213.
	text-align: center; 
214.
	line-height: normal; 
215.
	font-size: .9em; 
216.
	color: #FFFFFF; 
217.
218.
 
219.
#footer a { 
220.
	padding: 0 20px; 
221.
	text-decoration: none; 
222.
	color: #F4BA0F; 
223.
224.
 
225.
#footer a:hover { 
226.
	color: #FFFFFF; 
227.
228.
 
229.
#footer .impressum { 
230.
	background: url(images/paragraph.png) no-repeat left center; 
231.
232.
 
Mitglied: dog
14.11.2009 um 20:51 Uhr
Also in Safari und Firefox ist sie auch linksbündig was eher für einen konzpetionellen Fehler spricht

Ich sehe in deinem CSS-Code auch nicht die einzige relevante Methode um divs zu zentrieren (text-align ist keine!):

01.
#el { 
02.
  width: 800px; 
03.
  margin: 0 auto; 
04.
}
PS: Du machst doch hoffentlich nicht den Kardinalsfehler eine Website im IE zu entwickeln?

Grüße

Max
Bitte warten ..
Mitglied: SamTrex
15.11.2009 um 10:17 Uhr
Hallo dog,
danke für den Tipp, werde mich gleich mal darum kümmern.

Was den IE betriffft würde ich mal sagen "jain". In PhpED ist Mozilla als Embedded Browser integriert. Allerdings nutze ich sonst ausschließlich den IE.
Werde mir wohl dann auch mal den Firefox und Opera zulegen ...

Gruß Sam
Bitte warten ..
Mitglied: SamTrex
15.11.2009 um 15:50 Uhr
So, habe es jetzt....
Ich habe bei den DIV's "Header", "Page" und "Footer" ein margin: 0 auto; eingetragen.
Was mich jetzt noch ein wenig wundert: Im Body steht doch ein margin: 120px 0 0 0; -> Wenn ich daraus ein 120px 0 0 auto; oder ein 120px auto 0 auto; mache geht es nicht. ????

Werde mir jetzt noch einen "vernünfigen" Browser zulegen ....


Aber nochmal zurück zu meiner eigentlichen Frage:
Warum hat er mir das offline zentriert angezeigt und online linksbündig???

Gruß Sam
Bitte warten ..
Mitglied: dog
15.11.2009 um 15:56 Uhr
Hinter margin: stecken eigentlich 3 Möglichkeiten:

01.
margin: 5px; /* Margin nach allen Seiten */ 
02.
margin: 10px 5px; /* Oben und unten 10 px, links und rechts 5px */ 
03.
margin: 3px 5px 7px 10px; /* Oben 3, rechts 5, unten 7, links 10 */
Das sollte auch deine Verwunderung klären

Das mit dem Online/Offline kann ich dir so nicht sagen, ich würde aber auf ein Caching-Problem tippen.
In Firefox kann man die Caches mit Strg+Shift+R (Force-Reload) leicht umgehen.
Außerdem sollte man immer Firebug und die webdeveloper toolbar installiert haben, die helfen beim Debuggen ungemein.

Grüße

Max
Bitte warten ..
Mitglied: SamTrex
15.11.2009 um 18:25 Uhr
Hallo Dog,
alles klar - danke für die Hinweise.

Dann werde ich mir die 2 Tools mal besorgen

Gruß Sam


/* Werde das ganze dann mal schließen ...
Bitte warten ..
Ähnliche Inhalte
Windows 8
HP-Drucker meldet sich unerwartet offline
Anleitung von InternetterWindows 85 Kommentare

Ist es euch auch schon passiert? Ihr habt euren Netzwerk-Drucker eingeschaltet und wollt drucken und dann meldet sich der ...

Microsoft
Suche flexibles Patch Management online offline
gelöst Frage von durankuMicrosoft8 Kommentare

Hallo zusammen, aktuell ist meine Firma auf der Suche nach einem flexiblem Patch Management. Es sollte in der Lage ...

LAN, WAN, Wireless
Netzwerkstruktur mit LAN, WLAN und Online und Offline Anforderung
gelöst Frage von RoeRo72LAN, WAN, Wireless3 Kommentare

Folgendes Problem. Wir haben ein kleines Netzwerk. Oder eigentlich 2 kleine Netzwerke. Netz 1: #Windows Home Server - 1. ...

Cloud-Dienste
Routenplaner mit der Möglichkeit bestimmte Punkte zu umfahren - online oder offline
Frage von mabue88Cloud-Dienste

Hallo, ich suche einen Routenplaner, dem ich für die Planung von Routen Informationen zu z.B. temporär gesperrten Strassen mitgeben ...

Neue Wissensbeiträge
Linux

Meltdown und Spectre: Linux Update

Information von Frank vor 18 StundenLinux

Meltdown (Variante 3 des Prozessorfehlers) Der Kernel 4.14.13 mit den Page-Table-Isolation-Code (PTI) ist nun für Fedora freigegeben worden. Er ...

Tipps & Tricks

Solutio Charly Updater Fehlermeldung: Das Abgleichen der Dateien in -Pfad- mit dem Datenobject ist fehlgeschlagen

Tipp von StefanKittel vor 1 TagTipps & Tricks

Hallo, hier einmal als Tipp für alle unter Euch die mit der Zahnarztabrechnungssoftware Charly von Solutio zu tun haben. ...

Sicherheit

Meltdown und Spectre: Wir brauchen eine "Abwrackprämie", die die CPU-Hersteller bezahlen

Information von Frank vor 1 TagSicherheit12 Kommentare

Zum aktuellen Thema Meltdown und Spectre: Ich wünsche mir von den CPU-Herstellern wie Intel, AMD oder ARM eine Art ...

Sicherheit

Meltdown und Spectre: Realitätscheck

Information von Frank vor 1 TagSicherheit9 Kommentare

Die unangenehme Realität Der Prozessorfehler mit seinen Varianten Meltdown und Spectre ist seit Juni 2017 bekannt. Trotzdem sind immer ...

Heiß diskutierte Inhalte
Sicherheit
Meltdown und Spectre: Die machen uns alle was vor
Information von FrankSicherheit25 Kommentare

Aktuell sieht es in den Medien so aus, als hätten die Hersteller wie Intel, Microsoft und Co den aktuellen ...

Netzwerke
Packet loss bei "InternetLeitungsvollauslastung"
gelöst Frage von Freak-On-SiliconNetzwerke17 Kommentare

Servus; Ja der Titel klingt komisch, is aber so. Wenn die Internetleitung voll ausgelastet ist, hab ich extreme packet ...

Ubuntu
Ubuntu - Starter für nicht vertrauenswürdige Anwendungen
Frage von adm2015Ubuntu17 Kommentare

Hallo zusammen, Ich verwende derzeit die Ubuntu Versionen 17.10 bzw. im Test 18.04. Ich habe mehrere .desktop Dateien in ...

Windows 10
Automatische daten kopieren, USB zu USB unter Win10 im Hintergrund
Frage von DerEisigeWindows 1016 Kommentare

Hallo Leute, ich bin auf der Suche nach einem Skript, dass von einem USB Stick automatisch nach dem einstecken ...