Danke, doch auch mit einem "display-inline" wurde die LOGOPOSITION nicht richtig dargestellt.
Der IE6 macht es eigentlich richtig. Er positioniert das neue DIV- Element unter dem davor.
Der Firefox macht das nicht, sondern genau dahinter. Deshalb habe ich mal bei dem Menü geschaut.
Dessen Position ist fixiert, was der IE6 nicht kann und vom Firefox scheinbar so interperetiert wird, dass er die darunterliegenden Div's in diesem Fall dahinter anordnet.
Hallo, ich bin mal wieder auf ein Problem gestoßen.
Meine Webseite nährt sich dem Ende und ich wollte auf der linken Seite eine Grafik unter meiner fixierten Menüleiste positionieren. Dafür habe ich jeweils ein paar Div's angelegt. Leider stellt der IE6 es völlig anders, als der Firefox dar. Beim Firefox befindet sich das Bild an der gleichen Stelle wie das Menü. Beim IE6 genau darunter, wie ich es eigentlich auch wollte.
Stelle ich nun in der CSS die Position für die Grafik "inhaltbwilogo" ein, befindet sich das Bild im Firefox an der richtigen Stelle, nur der IE6 schiebt es ganz weit nach unten, weil sich das margin-top ja an der Unterkante des Menüs ausrichtet.
Für Antworten wäre ich wie immer sehr dankbar.
http://img818.imageshack.us/img818/1945/oberflaeche.jpg
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<title>Mal sehen</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="Lee Roe" content="Adobe GoLive" />
<meta name="keywords" content="Da weiß ich noch nicht"/>
<link rel="stylesheet" type="text/css" media="screen" href="screen.css"/>
</head>
<body>
<div id="main-container">
<div id="top_section">
<img src="images/kopf.png" alt="Auch noch nichts" />
</div>
<div id="inhalt">
<div id="inhalt-haupt">
<div id="inhaltglossy">
<ul class="glossymenu">
<li><a href="index.php">Das Programm</a></li>
<li><a class="navi_self navi_first" href="oberflaechen.php">Die Oberfläche</a></li>
<li><a href="mailer.php">Die E-Mailfunktion</a></li>
<li><a href="technisches.php">Technisches</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</div>
<div id="inhaltbwilogo">
<img src="images/bwi.gif" alt="Gähnende Leere" />
</div>
</div>
<div id="inhalt-sub">
<div id="fusszeile">
<p class="bottom-right"><a href="impressum.php">Impressum</a></p>
<p class="fusszeile">Webdesign by </p>
</div>
</div>
</div>
<div id="fuss">
</div>
</div>
</body>
</html>* {
margin: 0px;
padding: 0px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
background: #cccccc;
}
#main-container {
width: 880px;
height:auto;
margin: 10px 0px 10px 120px;
background: url("images/hintergrund.png") 0px 0px repeat-y;
}
#top_section {
height:172px;
margin:0px;
padding:0px;
}
#inhalt {
margin-top: 0px;
}
#inhalt-haupt {
float:left;
width: 219px;
height:350px;
padding-right: 1px;
}
#inhaltglossy {
float:left;
width: 219px;
padding-right: 1px;
}
#inhaltbwilogo{
float:left;
width: 167px;
height:90px;
margin:0px 0px 0px 40px;
}
#inhalt-sub {
float: right;
border-left: 1px dotted #999999;
width: 650px;
}
.glossymenu{
position:fixed;
list-style-type: none;
margin: 5px 0;
padding: 0px 0px 0px 40px;
width: 170px;
}
.glossymenu li a{
background: white url(images/menübutton.bmp) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
margin-bottom: 2px;
width: auto;
padding: 9px 0;
padding-left: 10px;
text-decoration: none;
}
#fusszeile {
clear: both;
margin-top:2em;
padding:0px;
}
#fusszeile .bottom-right {
text-decoration: underline;
text-align:justify;
font-weight:normal;
font-style:normal;
font-size:80%;
line-height:1em;
color:black;
padding-top:5px;
padding-right:3px;
float: right;
}
#fuss{
clear:both;
width: 880px;
height:53px;
margin:0px;
padding:0px;
background: url("images/fuss.png");
}p span...das war es dann. vielen Dank!
yexxx
Hallo Leute, ich bin gerade wieder mal auf ein Problem gestoßen, was ich nicht zu lösen mag. Mir geht es darum, einzelne Wörter im Text anders zu schreiben. Die Methoden Strong und Em sind mir bekannt, aber nicht das, was ich möchte.
Am Besten würde mir die gleiche Schriftart wie unter <p> in der CSS definiert ist, gefallen, nur eben 2 Größen kleiner und als font-weight "bold". Mit einer Klasse geht das nicht, da ich dann jedes Mal hinter und vor dem Wort einen Absatz habe. Hat jemand eine Idee?
viele Grüße
Yexxx
Vielen, vielen Dank, mein Blutdruck hat sich normalisiert. Das mit den Abmessungen war es dann. Repeat-n? Ich meine damit wohl no-repeat>hust.
Jetzt ist die Seite rund. Yippi!
Super, danke, es hat geklappt. Doctype war drin, hatte ich nur nicht mit ausgeschnitten. Seite ist validiert und in Ordnung.
Habe jetzt in der CSS folgenens:
#fuss{
margin-top:0px;
background: url("images/fuss.png")0px 0px repeat-y;
}Sobald ich das "repeat-y auf repeat-n setze, ist die Fussgrafik leider weg. Zudem muss ich irgendetwas in die Fusszeile schreiben, damit diese angezeigt wird. Geht das auch irgendwie ohne?
viele Grüße und vielen Dank nochmal
yexxx
Sorry! Ich dachte, das angehängte Bild reicht.
Hier noch mal über ImageShack:
Beim letzten Bild sieht man, dass unten der Hintergrund um eine Zeile weiter geführt wird.
Hallo Forenfreunde, ich bin am verzweifeln. Ich habe eine Webseite in Planung, die sich grafisch aus einem Kopfteil, einem Hintergrund und einem Fussteil. Ich habe die Grafik so gestaltet, dass die Ecken abgerundet sind. Leider wird unten die Hintergrundgrafik genau um ein Höhe über die Fussgrafik hinaus angezeigt. Beim Kopfteil macht er das seltsamerweise nicht.
CSS
![<!-- m --><a class="postlink" href="http://img823.imageshack.us/img823/8343/fuss.png">http://img823.imageshack.us/img823/8343/fuss.png</a><!-- m --><!-- m --><a class="postlink" href="http://img17.imageshack.us/img17/9729/hintergrundg.png">http://img17.imageshack.us/img17/9729/hintergrundg.png</a><!-- m --><!-- m --><a class="postlink" href="http://img204.imageshack.us/img204/682/kopff.png">http://img204.imageshack.us/img204/682/kopff.png</a><!-- m --><!-- m --><a class="postlink" href="http://img441.imageshack.us/img441/3962/webseite.jpg">http://img441.imageshack.us/img441/3962/webseite.jpg</a><!-- m -->](https://www.html-seminar.de/%3Cbr%3E<!--%20m%20--><a%20class="postlink"%20href="http://img823.imageshack.us/img823/8343/fuss.png">http://img823.imageshack.us/img823/8343/fuss.png</a><!--%20m%20-->%3Cbr%3E<!--%20m%20--><a%20class="postlink"%20href="http://img17.imageshack.us/img17/9729/hintergrundg.png">http://img17.imageshack.us/img17/9729/hintergrundg.png</a><!--%20m%20-->%3Cbr%3E<!--%20m%20--><a%20class="postlink"%20href="http://img204.imageshack.us/img204/682/kopff.png">http://img204.imageshack.us/img204/682/kopff.png</a><!--%20m%20-->%3Cbr%3E<!--%20m%20--><a%20class="postlink"%20href="http://img441.imageshack.us/img441/3962/webseite.jpg">http://img441.imageshack.us/img441/3962/webseite.jpg</a><!--%20m%20-->%3Cbr%3E){kind=link}
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
background-color: #cccccc;
}
#main-container {
width: 880px;
margin: 0px 0px 0px 100px;
background: url("images/hintergrund.png") 0px 0px repeat-y;
}
#top_section {
background-color:rgb(255,255,255);
height:90px;
margin:0px;
padding:0px;
}
#fusszeile {
clear:left;
margin-top:0px;
border-top: 1px dotted gray;
text-align:center;
padding:0px;
}
h1,h2,h3,p,ul,ol {
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-left:30px;
margin-right:30px;
}html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Groß Schulzendorf</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="Lee Roe" content="Adobe GoLive" />
<meta name="keywords" content="Groß Schulzendorf"/>
<link rel="stylesheet" type="text/css" media="screen" href="screen.css"/>
</head>
<body>
<div id="main-container">
<div id="top_section">
<img src="images/kopf.png" alt="Kopfzeile" />
</div>
<div id="inhalt-haupt">
<h2>Willkommen auf unserer Seite</h2>
<p>Lorem ipsum .......</p>
</div>
<div id="fuss">
<img src="images/fuss.png" alt="Fussgrafik" />
</div>
</div>
</body>
</html>Für Vorschläge wäre ich sehr dankbar.
yexxx
Hallo liebe Forenmitglieder,
ich bin Dank dieser Seite mit meiner Homepage schon ein bedeutendes Stück weiter gekommen. Fast Alles funktioniert, wie es sein sollte, nur der IE macht mir etwas Sorgen. Beim Aufrufen der Seite mit der Lightboxbildergalerie wird mir "Das Anzeigen aktiver Inhalte, die auf dem Computer...aus Sicherheitsgründen eingeschränkt.Klicken Sie hier...."
Das ist ja gut und schön, doch weshalb wird das bei der Lightbox2 Seite (<!-- m --><a class="postlink" href="http://www.huddletogether.com/projects/lightbox2/">http://www.huddletogether.com/projects/lightbox2/</a><!-- m -->), die einen ähnlichen den Code benutzt, nichr auch angezeigt.
Das ist mir ein riesen Rätsel und ich wäre für Antworten sehr dankbar.
viele Grüße
yexxx
Genau das ist ja mein Problem, sobald ich eine Seitengröße mit
#seitenbereich {
background-color:rgb(251,241,225);
background-image:url(back-h.png);
background-repeat:repeat-y;
min-height:100%; /* Mindesthöhe in modernen Browsern */
height:auto !important; /* auto-height mit !important-Regel für moderne Browser, damit sie die nachfolgende height-Deklaration ignorieren */
height:100%; /* Mindesthöhe in IE */
width: 90%
}
definiere, habe ich zwar einen Rand. Doch der ist fest und läßt sich nicht wegzoomen.
Vielen Dank, seid ihr schnell.
Also ich dachte da an so eine Seite. <!-- m --><a class="postlink" href="http://www.textlog.de/">http://www.textlog.de/</a><!-- m --> nur, dass meine Seite bisher so aussieht:
[Blockierte Grafik: http://img24.imageshack.us/img24/8113/layoutks.jpg]
Ich hätte gerne rechts diesen weißen Balken, damit das Bild nicht so gestreckt ist.
Von der Art her sollte dann soetwas passieren, wie bei <!-- m --><a class="postlink" href="http://www.html-seminar.de/">https://www.html-seminar.de/</a><!-- m -->. Beim Vergrößern zoomt die Seite bis zu einem bestimmten Punkt, und die Schrift verbleibt darüberhinweg trotzdem im Fenster.
Edit: Die #div's in der CSS zeigen bei mir keinerlei Wirkung. Die Oberfläche bleibt so, wie sie ist. Habe ich eventuell etwas falsch gemacht?
Ein herzliches Hallo an Alle Forenmitglieder!
Ich bin neu hier und brüte gerade über meiner neuen Webseite, wobei ich doch ganz schnell an meine Grenzen stoße. Ich würde es gerne realisieren, dass ich nur eine gewisse prozentuale Breite habe und der Rand rechts weiß oder einer anderen Farbe ist.
Wenn man dann zoomt, sollte die Schrift nicht nicht über den Rand "Rauszoomen", sondern wie es sich gehört, zusammenrücken.
Die Hauptseie hier (<!-- w --><a class="postlink" href="http://www.HTML-Seminar.de">https://www.html-seminar.de</a><!-- w -->) macht das sehr schön, sogar nach beiden Seiten. Wie wurde das realisiert?
Sobald ich bei einer der beiden Deklarierungen "width: 90%;" eingebe, habe ich lediglich einen festen weißen Rand, was nicht gewollt ist.
html, body {
margin:0px;
padding:0px;
background-color:rgb(255,255,255);
background-image:url(back-h.png);
background-repeat:repeat-y;
height:100%;
}
#seitenbereich {
background-color:rgb(251,241,225);
background-image:url(back-h.png);
background-repeat:repeat-y;min-height:100%; /* Mindesthöhe in modernen Browsern */
height:auto !important; /* auto-height mit !important-Regel für moderne Browser, damit sie die nachfolgende height-Deklaration ignorieren */
height:100%; /* Mindesthöhe in IE */
}Für Hilfe wäre ich sehr dankbar.