 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
aganym
Threadersteller
Dabei seit: 03.08.2009
Ort: Hamburg
Alter: 39
Geschlecht: 
|
Verfasst So 27.03.2011 20:43
Titel Darstellungsproblem im IE - inner und outer (HTML und CSS) |
  |
|
Oje, ich hoffe dieses Thema gab es nicht schon, aber ich habe wirklich gesucht. 
Ich bin eigentlich eher im Printbereich unterwegs und habe hier ein für mich ganz neues Problem.
Die Website die ich programmiert habe wird im IE nicht richtig dargestellt.
Es ist ein dreispaltiges Layout ('links, #inhalt, #rechts), in dem die rechte Seite aus Bildern und Untertitel besteht. Im IE liegen die Bilder ohne Abstand neben der mittleren Spalte (#inhalt) und überlagern sich auch noch. Ich habe eigentlich extra ein "Outer" und "Inner" im CSS eingefügt um dies zu vermeiden.  Vermutlich muss ich diese ändern. Ich hoffe euch fällt etwas auf!
Falls ihr mehr Infos braucht stelle ich diese gerne bereit. Bitte habt Verständnis dafür, dass ich die URL nicht angeben möchte.
relevantes CSS:
| Code: | body {
background-color: #F4E196;
font-size: 10px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
padding:0px;
margin:0px;
}
#container {
width: 900px;
padding:0px;
margin-left: auto;
margin-right: auto;
background-color: #F4E196;
margin-top: 0px;
margin-bottom: 0px;
height: auto;
}
/* ----------outer und inner----------------- */
#outer{
background-color: #F4E196; /* Farbe fuer Inhalt Spalten */
border-right-width: 300px;
border-left-width: 200px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #F4E196;
border-left-color: #F4E196;
}
#inner{margin:0; width:100%;
}
#links {
width: 200px;
float: left;
position: relative;
margin-right:1px;
margin-left:-200px;
list-style-type: none;
background-color: #F4E196;
}
#inhalt {
position: relative;
background-color: #FFCC99;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #990000;
line-height: 15px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-left: 10px;
padding-right: 10px;
}
#rechts{
width:300px;
float:right;
position:relative;
margin-right: -300px;
margin-left:1px;
top: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #993300;
text-align: center;
height: auto;
}
.rechts-img {
margin: 0px;
width: 250px;
vertical-align: middle;
height: auto;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 30px;
}
.rechts_kl_img {
padding-top: 260px;
height: auto;
width: 90px;
margin-left: -100px;
}
.rechts_p {
clip: rect(auto,auto,auto,auto);
margin-top: -22px;
} |
Zuletzt bearbeitet von Smooth-Graphics am So 27.03.2011 21:58, insgesamt 2-mal bearbeitet
|
|
| |
  |
 |
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht: 
|
Verfasst So 27.03.2011 21:42
Titel
|
|
|
|
Entsprechender HTML-Teil und nen Screenshot von deiner Problematik wären hilfreich. Bin mir bei deiner Erläuterung nicht sicher, ob ich sie richtig interpretiere.
|
|
| |
|
|
|
Anzeige
|
|
|
aganym
Threadersteller
Dabei seit: 03.08.2009
Ort: Hamburg
Alter: 39
Geschlecht:
|
Verfasst So 27.03.2011 22:17
Titel
|
|
|
Hallo Easteregg,
mit Screenshots von der Ansicht im Internet Explorer kann ich nicht dienen, da ich am Mac arbeite und es keinen aktuellen IE dafür gibt; ich habe den Fehler bei einer Freundin begutachtet. Es fehlt der Abstand zur mittleren Spalte und die Bilder überlappen teilweise oeben und unten. [url]http://img22.imageshack.us/i/problemie.png/]Hier[/url] ein Screenshot wie es aussehen sollte – allerdings nur ein Ausschnitt, sonst kann ich die Anonymität nicht gewährleisten, meine Kundin würde sich nicht freuen.
Hilft das so weiter? Links sieht man den Content-Bereich in Apricot, die rechte Spalte hat einen gelben Farbton als HG.
Hier ist der HTML-Teil, Inhalte abgekürzt:
...
</head>
<!-- Ende der Metadaten -->
<body>
<div id="container">
<div id="outer" >
<div id="inner">
<div id="links">
<div id="logo"><a href="index.html"><img style="border:none" src="img/navi-logo.gif" alt="Logo_XY"></a></div>
<!-- Anfang Navigation links -->
<ul id="navi">
<li><a href="vita.html" target="_self">Kundenname</a></li>
<li><a id="navi_aktuelle_Seite" href="kurse.htm">Kursprogramm</a></li>
<li><a href="workshops.htm">Workshops</a></li>
<li><a href="xxx.htm">XXX</a></li>
<li><a href="yyy.htm">YYY</a></li>
...
</ul>
</div>
<!-- Ende Navigation links -->
<div id="rechts">
<!-- Bereich für Bilder -->
<img class="rechts-img" src="img/Zitat.png">
<p class="rechts_p">ein Name</p>
<img class="rechts-img" src="img/einbild.JPG" alt="blabla">
<p class="rechts_p">Foto aus "XY", copyright: Name</p>"
<img class="rechts-img" src="img/Flyer_Januar.JPG" alt="Begriff">
<p class="rechts_p">Foto aus "XY": Name</p>
<!-- Ende Bereich für Bilder -->
</div>
ES FOLGT EIN DIV FÜR INHALT, und dann der Abschluss:
</div><!-- Ende inner -->
</div><!-- Ende outer -->
</div><!-- Ende container -->
</body>
</html>
|
|
| |
|
|
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Do 31.03.2011 02:12
Titel
|
|
|
|
Das mit den Bildern kriegst du hin, indem du statt padding auf margin in .rechts-img zurückgreifst. Da ich aber nicht genauer feststellen kann, ob das alle deine Darstellungsfehler waren, ist nochmal Feedback von dir notwendig.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Darstellungsproblem zwischen IE 7 und FF html / css
[HTML] Darstellungsproblem im Firebird
Ebene zusammen mit outer glow pixelgenau markieren
FF/IE Darstellungsproblem
Darstellungsproblem im IE7
darstellungsproblem im ie 7
|
|
|
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.
|
|
