Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

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

Ausrichtung der HP offline zu online sieht anders aus

Frage Entwicklung CSS

Mitglied: SamTrex

SamTrex (Level 1) - Jetzt verbinden

14.11.2009, aktualisiert 19:46 Uhr, 4340 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
Microsoft
Suche flexibles Patch Management online offline (8)

Frage von duranku zum Thema Microsoft ...

Windows 8
HP-Drucker meldet sich unerwartet offline (5)

Anleitung von Internetter zum Thema Windows 8 ...

Sicherheits-Tools
gelöst Kaspersky Offline Installer (10)

Frage von Markowitsch zum Thema Sicherheits-Tools ...

Neue Wissensbeiträge
Sicherheit

How I hacked hundreds of companies through their helpdesk

Information von SeaStorm zum Thema Sicherheit ...

Erkennung und -Abwehr

Ccleaner-Angriff war nur auf große Unternehmen gemünzt

(10)

Information von Lochkartenstanzer zum Thema Erkennung und -Abwehr ...

Sicherheit

Eventuell neue Lücke in Intels ME

Information von sabines zum Thema Sicherheit ...

Heiß diskutierte Inhalte
Humor (lol)
gelöst Freidach Beitrag (40)

Frage von Penny.Cilin zum Thema Humor (lol) ...

Windows 7
gelöst SSD - Win7 Lags (20)

Frage von ph5555 zum Thema Windows 7 ...

Firewall
gelöst Firewall Firmeneimsatz (19)

Frage von wiesi200 zum Thema Firewall ...