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
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, 4287 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 ..
Neuester Wissensbeitrag
CPU, RAM, Mainboards

Angetestet: PC Engines APU 3a2 im Rack-Gehäuse

(1)

Erfahrungsbericht von ashnod zum Thema CPU, RAM, Mainboards ...

Ähnliche Inhalte
Notebook & Zubehör
HP 8770W - LAN Netzwerkproblem (Aufbau, Geschwindigkeit) (3)

Frage von RiceManu zum Thema Notebook & Zubehör ...

SAN, NAS, DAS
gelöst HP-Proliant Microserver Betriebssystem (14)

Frage von Yannosch zum Thema SAN, NAS, DAS ...

Verschlüsselung & Zertifikate
gelöst Revocation Server innerhalb der PKI wird als offline angezeigt (1)

Frage von Snipes zum Thema Verschlüsselung & Zertifikate ...

Server-Hardware
gelöst HP Microserver Gen8 + ESXi (7)

Frage von runasservice zum Thema Server-Hardware ...

Heiß diskutierte Inhalte
Grafikkarten & Monitore
Win 10 Grafikkarte Crash von Software? (13)

Frage von Marabunta zum Thema Grafikkarten & Monitore ...

DSL, VDSL
DSL-Signal bewerten (13)

Frage von SarekHL zum Thema DSL, VDSL ...

Switche und Hubs
Trunk für 2xCisco Switch. Wo liegt der Fehler? (9)

Frage von JayyyH zum Thema Switche und Hubs ...

Windows Server
Mailserver auf Windows Server 2012 (9)

Frage von StefanT81 zum Thema Windows Server ...