mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Di 16.04.2024 14:33 Benutzername: Passwort: Auto-Login

Thema: HTML & CSS Problem vom 16.07.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> HTML & CSS Problem
Autor Nachricht
chris413
Threadersteller

Dabei seit: 19.08.2008
Ort: Thun
Alter: 32
Geschlecht: Männlich
Verfasst Do 16.07.2009 08:28
Titel

HTML & CSS Problem

 Antworten mit Zitat Zum Seitenanfang
hello, ich bin HTML CSS anfänger und komme einfach nicht mehr weiter. Im Safari sieht das ganze gut aus, doch im firefox und IE wird wird die seite nicht richtig dargestellt.


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">

body {
   padding: 20px;
   background-color: #d6d6d6;
}

#newsletter {
   word-spacing: 2px;
   padding-left: 26px;
   padding-bottom: 26px;
   padding-right: 26px;
   padding-top: 10px;
   background-color: white;
   height: auto;
   position: relative;
      margin-left: auto;
      margin-right: auto;
   width: 600px;
   font-family: Cambria, serif;
   font-style: italic;
   font-weight: normal;
   text-transform: normal;
   letter-spacing: normal;
   line-height: 1.3em;

}
#header {
   border-color: black;
   border-width: 1px;
   border-style: solid;
   background-image: url(header.jpg);
   height: 269px;
   width: 598px;

}

.top {
   width: 652px;
   margin-left: auto;
      margin-right: auto;
      margin-bottom: 5px;
   text-align: right;
   padding-right: 0px;
   padding: 2
   color: white;
   font-family: Arial;
   font-size: x-small;
   color: #321b0c;
}
.intro {
   padding-left: 15px;
   padding-bottom: 10px;
   padding-right: 15px;
   padding-top: 10px;
   letter-spacing: 0.4px;
   border-right-color: black;
   border-left-color: black;
   border-right-width: 1px;
   border-right-style: solid;
   border-left-style: solid;
   border-left-width: 1px;
   border-bottom-color: #131313;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   color: #321b0c;
   text-align: justify;
   background-color: #c9c2ac;
}
#news {
   clear: both;
   border-bottom-color: black;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-right-color: #131313;
   border-left-color: #131313;
   border-right-width: 1px;
   border-right-style: solid;
   border-left-style: solid;
   border-left-width: 1px;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 0px;
   height: 345px;
   width: auto;
   
}
.newsbox {
   display: inline;
   clear: left;
   margin-bottom: 20px;
   margin-top: 5px;
   width: auto;
   position: absolute;
   height: 165px;
      float: left;

}
.newsbild {
   display: inline;
   margin-bottom: 5px;
   margin-top: 5px;
   margin-right: 10px;
   height: 205px;
   width: 150px;
   float: left
}
.newstext {
   padding-bottom: 5px;
   margin-top: 5px;
   width: 590px;
   padding-right: 10px;
   padding-top: 5px;
   font-size: 15px;
}
.main {
   top: 250px;
   padding-left: 26px;
   padding-bottom: 10px;
   padding-top: 2px;
   background-position: 0px 0px;
   background-repeat: no-repeat;
   background-image: url(title2.png);
   height: 100px;
   width: 512px;
   position: absolute;
   display: run-in;
   margin-left: -14px;
}
p {
}
#linie {
   margin-bottom: 10px;
   margin-top: 20px;
   position: static;
   margin-right: 26px;
   background-color: black;
   height: 1px;
}
h1 {
   letter-spacing: 3px;
   font-size: 25px;
   color: white;
}
h2 {
   font-size: 20px;
   letter-spacing: 1px;
   margin-top: 5px;
   margin-bottom: 5px;
}
h3 {
   position: relative;
   font-size: 15px;
   letter-spacing: 0.2px;
   color: black;
   margin-left: -5px;
   margin-bottom: 5px;
   margin-right: -5px;
   margin-top: -4px;
}
#logo {
   margin-bottom: 15px;
   margin-top: 10px;
   width: 244px;
   margin-right: auto;
   margin-left: auto;
}
.footer {
   border-right-color: black;
   border-left-color: black;
   border-bottom-color: black;
   border-right-width: 1px;
   border-right-style: solid;
   border-left-style: solid;
   border-bottom-style: solid;
   border-left-width: 1px;
   border-bottom-width: 1px;
   padding: 5px;
   width: auto;
   height: 15px;
   background-color: #c9c2ac;
   text-align: right;
   padding-right: 8px;
   font-family: Arial;
   font-style: normal;
   font-size: x-small;
   color: #321b0c;

}

img {
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

.footerlink:link {color: black; text-decoration:none}


a:link {
   color: #afafaf;
}
a:hover {
   color: #131313;
}
a:visited {
   color: #131313;
}
a:active {
   color: #131313;
}




</style>
   <title>Panache Newsletter </title>
   
</head>

<body>
   

           
<div class="top">Email wird nich richtig angezeigt? Schauen Sie es im Browser an</div>


<div id="newsletter">
<div id="logo">  <img src="logo.png" alt="Logo">  </div>





<div class="main"> <h1>Newsletter August</h1> </div>


<div id="header">    </div>


<div class="intro"><h2>Oborperos dolore ver ad modignibh</h2> Oborperos dolore ver ad modignibh et doloreetue volent ute ea facin ullum venit ulputem exerillut lutpat. Ut aliquam, velesto et in voleniam, veliquate del ipsustrud eu facipit, consendio eum vullaorper il utat luptat, qui blandrem in venim dolobore consed elessecte magnis delenim iril eugait prat. Idunt ullaor alit niam, sis nullan velenit nostinit acip etumsan utpat lor sequissed estie veleniam, commole nissecte velisi bla facil ut venit wis  </div>

<div id="news">
<div class="newsbox">
<div class="newsbild"><img src="http://panachex.ch/newsletter/news1.jpg" alt="News 1"></div>
<div class="newstext"><h3>Eisinger</h3> 
Als Repräsentantin der Designwerkstatt Eisinger verlangt der Auftritt in der Broschüre nach einer adäquat eigenwilligen und anspruchsvollen Bildsprache.  <p><a href="http://www.panache.ch/" target="_blank">Mehr auf unserer Webseite</a></p> </div>

<div id="linie"> </div>


<div class="newsbox">
<div class="newsbild"><img src="http://panachex.ch/newsletter/news2.jpg" alt="News 2"></div>
<div class="newstext"><h3>Neuer Auftritt Brasserie Obstberg</h3> 
Das über 100-jährige Traditionsrestaurant im Berner Obstberg-Quartier erhält unter neuer Führung nicht nur ein inhaltliches «Freshup» <p><a href="http://www.domain.ch/" target="_blank">Mehr auf unserer Webseite</a></p></div>
</div>
</div>
</div>

<div class="footer"> <a  href="mailto:info@domain.ch" class="footerlink">info@domain.ch </a> &iota; </div>

</div>

</body>
</html>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Snifferdog

Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht: Männlich
Verfasst Do 16.07.2009 08:35
Titel

Antworten mit Zitat Zum Seitenanfang
Morgen,

um was genau geht es dir denn?
Meinst du, dass der 2. Eintrag nach rechts verschoben ist ?

Also bei mir klappts und ich habe jetzt folgendes geändert:

- du hast bei dem ersten "Eintrag" das Div Newsbox nicht geschlossen
- bei der Klasse für Newsbox position: absolute und display: inline entfernen

Gruß
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
chris413
Threadersteller

Dabei seit: 19.08.2008
Ort: Thun
Alter: 32
Geschlecht: Männlich
Verfasst Do 16.07.2009 08:43
Titel

Antworten mit Zitat Zum Seitenanfang
Hat funktioniert. nun sollte der 2 eintrag nicht so weit unten sein..
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">

body {
   padding: 20px;
   background-color: #d6d6d6;
}

#newsletter {
   word-spacing: 2px;
   padding-left: 26px;
   padding-bottom: 26px;
   padding-right: 26px;
   padding-top: 10px;
   background-color: white;
   height: auto;
   position: relative;
      margin-left: auto;
      margin-right: auto;
   width: 600px;
   font-family: Cambria, serif;
   font-style: italic;
   font-weight: normal;
   text-transform: normal;
   letter-spacing: normal;
   line-height: 1.3em;

}
#header {
   border-color: black;
   border-width: 1px;
   border-style: solid;
   background-image: url(header.jpg);
   height: 269px;
   width: 598px;

}

.top {
   width: 652px;
   margin-left: auto;
      margin-right: auto;
      margin-bottom: 5px;
   text-align: right;
   padding-right: 0px;
   padding: 2
   color: white;
   font-family: Arial;
   font-size: x-small;
   color: #321b0c;
}
.intro {
   padding-left: 15px;
   padding-bottom: 10px;
   padding-right: 15px;
   padding-top: 10px;
   letter-spacing: 0.4px;
   border-right-color: black;
   border-left-color: black;
   border-right-width: 1px;
   border-right-style: solid;
   border-left-style: solid;
   border-left-width: 1px;
   border-bottom-color: #131313;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   color: #321b0c;
   text-align: justify;
   background-color: #c9c2ac;
}
#news {
   clear: both;
   border-bottom-color: black;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-right-color: #131313;
   border-left-color: #131313;
   border-right-width: 1px;
   border-right-style: solid;
   border-left-style: solid;
   border-left-width: 1px;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 0px;
   height: 345px;
   width: auto;
   
}
.newsbox {
   clear: left;
   margin-bottom: 10px;
   margin-top: 5px;
   width: auto;
   height: 165px;
      float: left;

}
.newsbild {
   display: inline;
   margin-bottom: 5px;
   margin-top: 5px;
   margin-right: 10px;
   height: 205px;
   width: 150px;
   float: left
}
.newstext {
   padding-bottom: 5px;
   margin-top: 5px;
   width: 590px;
   padding-right: 10px;
   padding-top: 5px;
   font-size: 15px;
}
.main {
   top: 250px;
   padding-left: 26px;
   padding-bottom: 10px;
   padding-top: 2px;
   background-position: 0px 0px;
   background-repeat: no-repeat;
   background-image: url(title2.png);
   height: 100px;
   width: 512px;
   position: absolute;
   display: run-in;
   margin-left: -14px;
}
p {
}
#linie {
   margin-bottom: 5px;
   margin-top: 17px;
   position: static;
   margin-right: 26px;
   background-color: black;
   height: 1px;
}
h1 {
   letter-spacing: 3px;
   font-size: 25px;
   color: white;
}
h2 {
   font-size: 20px;
   letter-spacing: 1px;
   margin-top: 5px;
   margin-bottom: 5px;
}
h3 {
   position: relative;
   font-size: 15px;
   letter-spacing: 0.2px;
   color: black;
   margin-left: -5px;
   margin-bottom: 5px;
   margin-right: -5px;
   margin-top: -4px;
}
#logo {
   margin-bottom: 15px;
   margin-top: 10px;
   width: 244px;
   margin-right: auto;
   margin-left: auto;
}
.footer {
   border-right-color: black;
   border-left-color: black;
   border-bottom-color: black;
   border-right-width: 1px;
   border-right-style: solid;
   border-left-style: solid;
   border-bottom-style: solid;
   border-left-width: 1px;
   border-bottom-width: 1px;
   padding: 5px;
   width: auto;
   height: 15px;
   background-color: #c9c2ac;
   text-align: right;
   padding-right: 8px;
   font-family: Arial;
   font-style: normal;
   font-size: x-small;
   color: #321b0c;

}


.footerlink:link {color: black; text-decoration:none}


a:link {
   color: #afafaf;
}
a:hover {
   color: #131313;
}
a:visited {
   color: #131313;
}
a:active {
   color: #131313;
}




</style>
   <title>Panache Newsletter </title>
   
</head>

<body>
   

           
<div class="top">Email wird nich richtig angezeigt? Schauen Sie es im Browser an</div>


<div id="newsletter">
<div id="logo">  <img src="logo.png" alt="Logo">  </div>





<div class="main"> <h1>Newsletter August</h1> </div>


<div id="header">    </div>


<div class="intro"><h2>Oborperos dolore ver ad modignibh</h2> Oborperos dolore ver ad modignibh et doloreetue volent ute ea facin ullum venit ulputem exerillut lutpat. Ut aliquam, velesto et in voleniam, veliquate del ipsustrud eu facipit, consendio eum vullaorper il utat luptat, qui blandrem in venim dolobore consed elessecte magnis delenim iril eugait prat. Idunt ullaor alit niam, sis nullan velenit nostinit acip etumsan utpat lor sequissed estie veleniam, commole nissecte velisi bla facil ut venit wis  </div>

<div id="news">
<div class="newsbox">
<div class="newsbild"><img src="http://panachex.ch/newsletter/news1.jpg" alt="News 1"></div>
<div class="newstext"><h3>Eisinger</h3> 
Als Repräsentantin der Designwerkstatt Eisinger verlangt der Auftritt in der Broschüre nach einer adäquat eigenwilligen und anspruchsvollen Bildsprache.  <p><a href="http://www.panache.ch/" target="_blank">Mehr auf unserer Webseite</a></p> </div>

<div id="linie"> </div>


<div class="newsbox">
<div class="newsbild"><img src="http://panachex.ch/newsletter/news2.jpg" alt="News 2"></div>
<div class="newstext"><h3>Neuer Auftritt Brasserie Obstberg</h3> 
Das über 100-jährige Traditionsrestaurant im Berner Obstberg-Quartier erhält unter neuer Führung nicht nur ein inhaltliches «Freshup» <p><a href="http://www.panache.ch/" target="_blank">Mehr auf unserer Webseite</a></p></div>
</div>
</div>
</div>

<div class="footer"> <a  href="mailto:info@panache.ch" class="footerlink">info@panache.ch </a> &iota; Panache AG &iota; Thunstrasse 20 &iota; 3000 Bern 6</div>

</div>

</body>
</html>


Zuletzt bearbeitet von chris413 am Do 16.07.2009 09:01, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
chris413
Threadersteller

Dabei seit: 19.08.2008
Ort: Thun
Alter: 32
Geschlecht: Männlich
Verfasst Do 16.07.2009 09:08
Titel

Antworten mit Zitat Zum Seitenanfang
Great! * Ich bin unwürdig * Danke 1000mal * huduwudu! *

Zuletzt bearbeitet von chris413 am Do 16.07.2009 09:08, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen HTML/CSS Problem mit <html><body> komischer Abstand unten
[php] Problem mit html und php
Problem mit HTML/CSS
html problem
[PROBLEM] mit VB In HTML
HTML: Problem bei Logo
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


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.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB