Antworten auf deine Fragen:
Neues Thema erstellen

Lücke im Layout - CSS Problem im Firefox

tiroler

Hat es drauf

Hi,
auf folgender Seite habe ich das Problem:

http://villa-oberhofer-edenkoben.de

hier der Code dazu.
Html
Code:
<html>
<head>
<title>Villa-Oberhofer-Edenkoben- herzlich willkommen an der s&uuml;dlichen Weinstrasse in Edenkoben</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Villa, Edenkoben, Zimmer, &Uuml;bernachtung, Pfalz, Pesnion, G&auml;stehaus, Pf&auml;lzer Wald, s&uuml;dliche Weinstrasse, Villa Ludwigsh&ouml;he, Pfalzwein">
<meta name="description" content="Die Villa Oberhofer in Edenkoben bietet ihnen neben im Jugendstil m&ouml;bilierten Zimmern einen weitl&auml;ufigen Garten zum Relaxen und nat&uuml;rlich delikate Weinproben aus eigenem Anbau.">
<meta name="language" content="de">

<link rel="stylesheet" type="text/css" href="style.css"><style type="text/css"></style>


<style type="text/css">

a:link { color:#FFffff; }
a:hover { color:#888888}
a:visited { color:#FF9900; }
a:active { color:#FF9944; }
</style>
</head>
<body bgcolor="#c2d7b4">

<div id="wrapper">
<span class="kontakt"><a href="http://villa-oberhofer-edenkoben.de/Kontakt.html">Kontakt</a></span>
<div id="header"> </div>

<div id="headerbild"> </div>

<div id="Container">

<div id="Navi-links">

<ul id="navi">

  <li><a href="http://villa-oberhofer-edenkoben.de/index.html">Home</a></li>
  <li><a href="http://villa-oberhofer-edenkoben.de/Zimmer.html">Zimmer</a></li>
  <li><a href="http://villa-oberhofer-edenkoben.de/*********html">Anfahrt</a></li>
  <li><a href="http://villa-oberhofer-edenkoben.de/Impressum.html">Impressum</a></li>

</ul>

  </div>


  <div id="Content">

<table width="740" border="0">
 <tr>
  <td style="padding-left:18px">
<div align="center"><img src="http://villa-oberhofer-edenkoben.de/images/Frontbild.jpg" width="530" height="384" border="0" alt=""></div>
 <br/>
Recht herzlich willkommen in unserem G&auml;stehaus in Edenkoben!<br><br>
Im Jahre 1903 erbaut, bietet ihnen unsere Jugendstilvilla in Edenkoben jeglichen Komfort.<br>Neben den im Jugendstil m&ouml;bilierten Zimmern, bieten wir ihnen auch einen wundersch&ouml;nen weitl&auml;ufigen Gastgarten zum Relaxen.<br><br>
Die N&auml;he zum Pf&auml;lzerwald ( 10 Gehminuten ), die bekannten Ausflugsziele, wie das Hambacher Schloss, Schlo&szlig; Ludwigsh&ouml;he oder die Reidburgbahn, bieten ihnen vielf&auml;ltige M&ouml;glichkeiten Edenkoben und die Pfalz kennen zu lernen.<br><br>
Auch der Genuss des herrlichen Pf&auml;lzer Weines aus eigenem Anbau und der regionalen, deftigen K&uuml;che, sind es wert einen Abstecher an die s&uuml;dliche Weinstrasse zu machen.<br><br>Sch&ouml;nen Urlaub,<br>w&uuml;nscht Familie Oberhofer.
  </td>
 </tr>
</table>

</div><!--Ende Content -->

</div><!--Ende Container -->

<div id="footer"> </div>

</div><!--Ende Wrapper -->





</body>
</html>

CSS
Code:
#wrapper {
width:1000px;
height:1300px;
position:absolute;
margin-top:10px;
left: 50%;
margin-left: -500px;

font-family:Verdana, Geneva, sans-serif;
font-size:12px;
margin-bottom:20px;

        }



#header {
width:1000px;
height:36px;
background-image:url(http://villa-oberhofer-edenkoben.de/images/index_01.jpg);

        }


#headerbild {
width:1000px;
height:411px;
background-image:url(http://villa-oberhofer-edenkoben.de/images/index_02.jpg);

        }


#container {
width:1000px;
height:762px;
background-color:#f4e2d6;

         }



#Navi-links {
                 width:246px;
                 height:762px;
                 background-image:url(http://villa-oberhofer-edenkoben.de/images/index_03.jpg);
                 list-style:none;
                 padding-top:45px;
                 float: left;
                 repeat: no-repeat;
                   }



#Content {
                width:754;
                height:762;
                float: left;
                background-image:url(http://villa-oberhofer-edenkoben.de/images/index_04.jpg);
                background-color:#f4e2d6;
                }


#footer {
                width:1000;
                height:91;
                background-image:url(http://villa-oberhofer-edenkoben.de/images/index_05.jpg);
                clear:both;
}

ul#navi {
                padding:0px;
                margin:0px;
                position:absolute;
                font-size:16px;

        }

ul#navi li {
                list-style:none;
                margin-left:55px;
                padding-top:18px;
                color:#FFF;

        }

.farbe {
                 color: #FFF;
                 font-weight: bold;

}

#Container #Content table tr td {
        text-align: justify;
}
.kontakt {
        color: #FFF;
        padding-left:930px;
        font-size:16px;
}
.fusszeile {
        color: #FFF;
        font-family: Verdana, Geneva, sans-serif;
}

Entweder bin ich übermüdet oder blind oder sonst was- im IE zeigt es alles ok an.

Danke im Voraus für die Unterstützung.
 

tiroler

Hat es drauf

AW: Lücke im Layout - CSS Problem im Firefox

korrekt, aber das löst das Problem noch nicht....
(merci)

habe mal den Doctype aktualisiert:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
Zuletzt bearbeitet:
AW: Lücke im Layout - CSS Problem im Firefox

Hallo!

#Navi-links hat ein padding-top von 45px, #Content hat das nicht, deshalb ist #Navi-links um eben diesen Wert zu hoch.
 

tiroler

Hat es drauf

AW: Lücke im Layout - CSS Problem im Firefox

dachte das zählt nur für den inneren Inhalt sprich die Navigation-
rückt mir nur die Links wieder hoch
 

tiroler

Hat es drauf

AW: Lücke im Layout - CSS Problem im Firefox

erledigt-danke.
Im footer haben noch px Angaben gefehlt usw....
Rest angepasst

Bettzeit :)
 

hub

nicht ganz neu hier

AW: Lücke im Layout - CSS Problem im Firefox

Moin moin,
dein Footer befindet sich kurz unter deinem Header. Ich denke, du musst das float auch wieder beenden. Füge mal zum Test ein
PHP:
<div style="clear: both;"></div>
<div id="footer ..."
in deinem Script ein. Dann hast du deine Footer wieder :)

Gruß Ulli
 

hub

nicht ganz neu hier

AW: Lücke im Layout - CSS Problem im Firefox

Moin,
habe gerade deine Korrektur gesehen, du hast dem footer ein float: left verpasst. er ist jetzt unten, weil dein Wrapper eine Breite von 1000px hat und die Folge der Container umgebrochen wird, nicht weil den footer wirklich unten positioniert ist. In deinem Fall funktioniert es, kann aber auch nach hinten los gehen ...

Gruß Ulli
 

tiroler

Hat es drauf

AW: Lücke im Layout - CSS Problem im Firefox

jep- und rausgeworfen- war noch eine Altlast.
Mit welchem Browser testest du Ulli ?
 
Zuletzt bearbeitet:

patrick_l

Hat es drauf

AW: Lücke im Layout - CSS Problem im Firefox

Mit welchem Browser testest du Ulli ?

Ich bin zwar nicht Ulli, teste aber meine Websites im Firefox, Chrome (Webkit), Opera und im IE. Die meiste Zeit wird allerdings der Firefox benutzt. Dein eigentliches Problem ist gelöst. Trotzdem noch ein paar Worte meinerseits.

Dein Quelltext ist ziemlich schlampig. ;) Unnötige Grafiken und falsche Elemente. Strukturierung (HTML) und Formatierung (CSS) von einander trennen. Also alles in (d)einem externes Stylesheet notieren.

Der Div Wrapper keine fixe Höhe geben, damit er mit dem Content wachsen kann. Grafik im Footer durch Text ersetzten. Reihenfolge der Adresse ändern. Name, Straße und dann der Ort.

Hier mal ein "sauberes" Grundgerüst deiner Website. Alle Formatierungen entsprechend im CSS festhalten. Styleangaben als strickt von den Inhalten trennen.

HTML:
<div id="wrapper">
    <div id="header">
      <!-- header -->
  </div>
  <div id="main">
      <div id="content">
        <!-- Content here! -->
    </div>
    <div id="sidebar">
        <ul id="nav">
          <li><a href="#">page 1</a></li>
        <li><a href="#">page 2</a></li>
        <li><a href="#">page 3</a></li>
      </ul>
    </div>
  </div>
  <div id="footer">
      <!-- Footer here -->
  </div>
</div>
Edit:
Noch kurz etwas zu den einzelnen Grafiken und dessen Formate. Einfarbige Hintergründe (und Verläufe mit CSS3) können einfach mit CSS erstellt werden.

Bilder sollten im Jpg Format, andere Grafiken z.B. mit wenigen Farben, Details und oder Transparenzen im Gif oder Png-Format genutzt werden. Auch sollten sie fürs Web angepasst sein (Größe, Kompression).

Wie gesagt, nur Bilder und Grafiken verwenden, die auch wirklich benötigt werden. Ausnahme wären Schatten, runde "Ecken" und der Gleichen, die auch in älteren Browsern sein sollen. Wobei man in der Regel darauf verzichten kann.

Zuletzt noch etwas zur Domain. Sie ist meiner Meinung nach unnötig in die Länge gezogen. Die Domain Villa-Oberhofer ist noch nicht vergeben, wäre also vielleicht eine Überlegung wert, bevor die Website bei Gästen bekannt wird.

Je schneller man zu dir (euch) findet, umso besser. Also unnötige Schreiberei vermeiden. Nur so als Tipp von mir. Edenkoben ist ja nur der Ort, in dem die Villa steht oder?

Liebe Grüße, Patrick
 
Zuletzt bearbeitet:

hub

nicht ganz neu hier

AW: Lücke im Layout - CSS Problem im Firefox

Moin moin,
ich teste mit FF, Chrome, Safari und IE - wobei mir für solche Sachen die Tools vom IE am liebsten sind - aber da hat jeder Browser so seine Vor- und Nachteile, es kommt auf das zu lösende Problem an

Gruß Ulli
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben