 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Batchu
Threadersteller
Dabei seit: 06.12.2005
Ort: -
Alter: 42
Geschlecht: 
|
Verfasst Mi 28.12.2005 18:33
Titel CSS: Probleme bei der Darstellung beim IExplorer |
  |
|
Ein freundliches Hallöchen erstmal an alle,
ich habe ein Design erstellt und dann mit einem schlichten Editor versucht das Ganze zu coden, bzw. ein Layout zu erstellen. Jetzt habe ich einige Probleme bei der Darstellung unter dem Browser Internet Explorer.
1. es ist ein komischer Abstand da
2. ein merkwürdiger und nicht so schöner Zeilenumbruch
Unter Mozilla Firefox, sieht das Ganze einiger maßen in Ordnung aus:
so nun aber die Probleme bei der Darstellung unter dem IE:
Ich bin kein Profi und das ist mein erstes Design und die ersten ernstn Codingversuche. Würde mich freuen, wenn mir jemand weiterhelfen könnte.
Index.html
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta name="author" content="Roman">
<title>Design - your life !</title>
<!--[if IE]>
<link rel="stylesheet" type="text/css" title="IE Bugfixing Stylesheet" href="style_ie.css" media="screen" />
<![endif]-->
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div id="content">
<!-- Header -->
<span id="header"> </span>
<!-- Navigation -->
<ul class="navi">
<li><a href="#" id="navi1"> </a></li>
<li><a href="#" id="navinews"> </a></li>
<li><a href="#" id="navirefer"> </a></li>
<li><a href="me.html" id="navime"> </a></li>
<li><a href="#" id="navilinks"> </a></li>
<li><a href="#" id="naviartwork"> </a></li>
<li><a href="#" id="navi2"> </a></li>
</ul>
<!-- Line -->
<!-- Content -->
<div id="main">
<div id="news1"> </div>
<div id="news2"> </div>
<div id="box1">
<span id="text1">29.12.2005</span>
<br><span id="text2">Ein freundliches Hallo du anonymes Wesen, es freut mich,
dass du auf meine Website gestossen bist. Wie du siehst funktioniert
noch nicht alles, aber ich freue mich über jeden Besuch auf meiner
Website und hoffe, dass du öfters mal hier reinschaust.</span></br>
</div>
<div id="box2">
<br></br>
<img src="file3.jpg" width="252" height="225" />
</div>
</div>
<!-- Footer -->
<div id="footer">
<div id="kontakt"></div>
<div id="box3">
<ul class="kontakt">
<li>Roman Tscherkasski</li>
<li>e-mail: R.Tscherkasski@gmx.de</a></li>
<li>ICQ: 220339157 </a></li>
<li>www:</a></li>
<li><a href="http://www.design-life.de.vu" id="link" target="_blank">www.design-life.de.vu</a></li>
<li><a href="http://www.batchu.de.vu" id="link" target="_blank">www.batchu.de.vu</a></li>
</ul>
</div>
<div id="box4"> </div>
</div>
<!-- Footer2 -->
<div id="foot"> </div>
</div>
</body>
</html>
|
Style.css
| Code: |
/* Background Images */
body {
margin:0;
padding:0;
background-color:#351C10;
background-repeat:repeat-y;
background-position:center;
background-image:url(body_bg2.jpg);
color: #525252;
font-family:Verdana, Arial, Helvetica, sans-serif, tahoma;
}
/* Page centered */
div#content {
width:575px;
margin:auto;
}
/* Header */
span#header {
margin:auto;
padding:auto;
width:555px;
height:127px;
display:block;
background-position:center;
background-repeat:no-repeat;
background-image:url(header2.jpg);
}
/* Navigation */
ul.navi {
margin:0;
padding:0;
list-style-type:none;
}
ul.navi li {
float:left;
}
.navi a {
display:block;
text-decoration:none;
}
a#navi1 {
width:8px;
height:38px;
background-image:url(1.jpg);
}
a#navinews {
width:111px;
height:38px;
background-image:url(news.jpg);
}
a#navirefer {
width:111px;
height:38px;
background-image:url(refer.jpg);
}
a#navime {
width:113px;
height:38px;
background-image:url(me.jpg);
}
a#navilinks {
width:112px;
height:38px;
background-image:url(links.jpg);
}
a#naviartwork {
width:109px;
height:38px;
background-image:url(artwork.jpg);
}
a#navi2 {
width:9px;
height:38px;
background-image:url(2.jpg);
}
/* Lines */
div#line {
height:4px;
display:block;
background-color:#351C10;
}
/* Inhalt main*/
div#main {
margin:auto;
padding:auto;
width:555px;
height:355px;
background-color::#4E4742;
background-repeat:repeat-y;
}
div#news1 {
margin:auto;
padding:auto;
float:left;
width:295px;
height:26px;
background-image:url(news1.jpg);
}
div#news2 {
margin:auto;
padding:auto;
float:left;
width:260px;
height:26px;
background-image:url(news2.jpg);
}
div#box1 {
float:left;
width:295px;
height:285px;
background-color:#655D59;
}
div#box2 {
float:left;
width:260px;
height:285px;
background-color:#655D59;
}
/* Footer */
div#footer {
margin:auto;
padding:auto;
width:555px;
height:158px;
background-color:#433D39;
background-repeat:repeat-y;
}
div#kontakt {
margin:auto;
padding:auto;
float:left;
width:555px;
height:18px;
background-image:url(kontakt.jpg);
}
div#box3 {
float:left;
width:295px;
height:133px;
background-color:#443D39;
}
div#box4 {
float:left;
width:260px;
height:133px;
background-color:#443D39;
}
/* Footer 2*/
div#foot {
margin:auto;
padding:auto;
width:555px;
height:22px;
display:block;
background-image:url(footer.jpg);
}
/* Text*/
span#text1 {
font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: orange;
}
span#text2 {
font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: white;
}
span#text3 {
font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: white;
white-space:pre
}
/* Kontakt */
ul.kontakt {
margin:10px;
padding:10px;
list-style-type:none;
font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: white;
}
/* Hyperlinkformatierung */
a#link {
font-family: tahoma;
font-size: 10px;
color: red;
font-weight: bold;
}
|
Hab die Page ist erreichbar unter:
http://www.design-life.de.vu
Danke Euch und ein frohes Neues Jahr!
|
|
| |
  |
 |
dastef
Dabei seit: 03.11.2003
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 28.12.2005 18:47
Titel
|
|
|
ich weis zwar bei gott nicht warum jeder denkt, css wäre irgendwas
mit "programmierung" oder so .. aber wie dem auch sei .. ich
schiebs mal rüber » Allgemeines - Nonprint!
|
|
| |
|
|
|
Anzeige
|
|
|
rob
Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht:
|
Verfasst Mi 28.12.2005 19:44
Titel
|
|
|
jag deinen code erstmal durch einen validator.
da sind noch fehler drin. wenn die behoben sind, kann man noch mal schauen, ob da noch darstellungsfehler auftreten.
du verwendest die html 4.01 transitional dtd, dann folgt aber xhtml-code. du gibst sogar einen xhtml-namespace an...
dann sehe ich das du die id "link" gleich mehrfach vergeben hast. eine id muß immer eindeutig sein. die darf nicht mehrfach vorkommen. hier solltest du eine klasse einsetzen.
deinen image-tags fehlen alt-attribute. das hat zwar nichts mit deiner darstellung zu tun, ist aber halt ein fehler. alt-attribute darf man zwar leer lassen, aber nicht weglassen, wenn man gültigen code schreiben will.
br ist ein inhaltsleeres tag. das solltest du in xhtml am besten als <br/> schreiben und nicht als <br></br>. ich könnte mir vorstellen, daß einige html-parser das nicht mögen und hier eventuell doppelte zeilenumbrüche fabrizieren... du verwendest ja eine html-dtd und keine xhtml-dtd...
würdest du eine xhtml-dtd verwenden, würden im übrigen noch mehr fehler auftreten, weil du tags wie meta nicht mit einem / abschliesst...
ich würde dazu raten, die xhtml 1.0 strict-dtd zu verwenden, den code durch den w3c-validator zu jagen und dann alle gemeldeten fehler zu korrigieren.
dann zur css:
bei den schriften sollte der generische schrifttyp immer als letztes angegeben werden.
also
font-family:Verdana, Arial, Helvetica, tahoma, sans-serif;
statt
font-family:Verdana, Arial, Helvetica, sans-serif, tahoma;
ansonsten macht diese angabe nicht soviel sinn...
eine generische schriftart (serif, sans-serif, monospace) sollte übrigens zur sicherheit immer angegeben werden. das tust du aber nicht überall.
dann hast du da wohl einige elemente, die du mit css falsch formatierst. wenn ich das beim überfliegen des codes so sehe, hast du da einige inline-elemente, denen du eigenschaften zuordnest, die nur boxen haben.
ein block-level-element erzeugt immer eine eigene box (mit margin, padding, border, ...), inline-elemente wie a oder span aber halt nicht.
dann versuchst du trennlinien mit leeren divs zu erzeugen? wieso benutzt du dazu nicht einfach das element hr und formatierst es entsprechend?
naja, aber wie gesagt: erst mal validator und fehler korrigieren und dann noch mal weiter schauen...
Zuletzt bearbeitet von rob am Mi 28.12.2005 19:46, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[css] Probleme mit Darstellung im IE6
[Safari] Probleme bei Darstellung
Probleme bei der Darstellung mit css in Dreamwaver
Probleme bei Darstellung Mozilla Safari
Probleme bei der Darstellung im Internet Explorer
probleme im internet explorer beim darstellung? css fehler?
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
