Autor |
Nachricht |
chris413
Threadersteller
Dabei seit: 19.08.2008
Ort: Thun
Alter: 32
Geschlecht:
|
Verfasst Do 16.07.2009 08:28
Titel HTML & CSS Problem |
|
|
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> ι </div>
</div>
</body>
</html>
|
|
|
|
|
|
Snifferdog
Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht:
|
Verfasst Do 16.07.2009 08:35
Titel
|
|
|
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ß
|
|
|
|
|
Anzeige
|
|
|
chris413
Threadersteller
Dabei seit: 19.08.2008
Ort: Thun
Alter: 32
Geschlecht:
|
Verfasst Do 16.07.2009 08:43
Titel
|
|
|
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> ι Panache AG ι Thunstrasse 20 ι 3000 Bern 6</div>
</div>
</body>
</html>
|
Zuletzt bearbeitet von chris413 am Do 16.07.2009 09:01, insgesamt 1-mal bearbeitet
|
|
|
|
|
chris413
Threadersteller
Dabei seit: 19.08.2008
Ort: Thun
Alter: 32
Geschlecht:
|
Verfasst Do 16.07.2009 09:08
Titel
|
|
|
Great! Danke 1000mal
Zuletzt bearbeitet von chris413 am Do 16.07.2009 09:08, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
HTML/CSS Problem mit <html><body> komischer Abstand unten
Problem mit HTML/CSS
html problem
[PROBLEM] mit VB In HTML
[php] Problem mit html und php
[HTML] Anker Problem
|
|