• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Komplettes Layout verschiebt sich durch zoomen

B

Basilisk

Neues Mitglied
Hi,

ich hab grade gesehen, dass sich mein komplettes Layout selbstständig macht, wenn ich rein zoome. Auch wenn ich das Fenster kleiner mache sieht das Ergebnis grauselig aus.


Hab ich was bestimmtes vergessen oder woran liegs?

LG, Alex


Meine CSS-Datei
PHP: 
/* ... Allgemein ... */

body {
  margin: 0;
  padding: 0;
  font-family: arial, sans-serif;
  font-size: 13px;
  color: #2E2611;
  background: url(../Bilder/Hintergrund.jpg) repeat-x;
}
h1 {
  font-family: "Times New Roman", Times, sans-serif;
  font-size: 2.2em;
  font-style: italic;
  text-indent: 0.5em;
  color: #060502;
}
h2 {
  font-family: "Times New Roman", Times, sans-serif;
  font-size: 1.5em;
  font-style: italic;
  text-indent: 1em;
  color: #060502;
}
h3 {
  font-family: "Times New Roman", Times, sans-serif;
  font-size: 1.3em;
  text-indent: 1em;
  color: #060502;
}
fieldset {
  width: 25%;
  border: 1px solid #7A4E0B;
  margin-bottom: 20px;
  margin-left: 20px;
  padding: 10px;
}
input, textarea {
  border: 1px solid #7A4E0B;
  color: #2E2611;
  background-color: #95806C;
  padding: 1px;
}
img {
  border: none
}

/* ... Grundstruktur ... */

#container {
}
#kopf {
  
}
#navigation {
  font-weight: bold;
  font-size: 15px;
}
#navigation a:hover, #navigation a:active, #navigation a:focus {
  Color: #2E2611;
  text-decoration: none;
}
#navigation li {
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}
#navigation ul {
  background-color: #95806C;
  margin-top: 0px;
  margin-right: 350px;
  margin-bottom: 0px;
  margin-left: 350px;
  padding: 10px;
  border: 3px solid #7A4E0B;
  border-bottom: 0px solid #7A4E0B;
  text-align: center;
}
#inhalt {
  background-color: #D3C8BD;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
  margin-right: 50px;
  margin-left: 50px;
  border: 3px solid #7A4E0B;
}
#fuß {
  background-color: #95806C;
  margin-right: 50px;
  margin-left: 1125px;
  padding: 3px;
  border: 3px solid #7A4E0B;
  border-top: 0px solid #7A4E0B;
  text-align: center;
  font-weight: bold;
}
#fuß a {
  text-decoration: none;
  padding: 0;
}
#fuß a:hover, #fuß a:active, #fuß a:focus {
  Color: #2E2611;
}

/* ... Links ... */

a:link {
  text-decoration: none;
  color: #694005;
}
a:visited {
  text-decoration: none;
  color: #694005;
}
a:focus, a:hover, a:active {
  text-decoration: underline;
  color: #9b630e;
}

/* ... Klassen ... */

.button input {
  border-top: 1px solid #A79380;
  border-right: 1px solid #7A4E0B;
  border-bottom: 1px solid #7A4E0B;
  border-left: 1px solid #A79380;
}
.button input:active {
  border-top: 1px solid #7A4E0B;
  border-right: 1px solid #A79380;
  border-bottom: 1px solid #A79380;
  border-left: 1px solid #7A4E0B;
}

/* ... Sonstiges ...*/

#seitenanfang {
  float: right;
  margin-top: -20px;
  margin-right: -20px;
}
#seitenanfang img:active, #seitenanfang img:focus {
  margin-top: 2px;
}
Meine HTML-Datei (die vom Bild)
PHP: 
<!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>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <link rel="stylesheet" type="text/css" href="../CSS/Formatierung.css"/>
  <link rel="shortcut icon" href="../Bilder/Favicon.png"
  type="image/x-icon"/>
  <link rel="icon" href="../Bilder/Favicon.png" type="image/x-icon"/>
  <title>DeJay GamePlay/Startseite</title>
</head>
<body>
  <a name="top"></a>
  <div id="container">
<!--Beginn der Kopfzeile-->
    <div id="kopf">
      <a href="Startseite.html">
    <img src="../Bilder/Banner.jpg" alt="Home" title="Home"/>
      </a>
    </div>
<!--Ende der Kopfzeile-->
<!--Beginn der Navigation-->
    <div id="navigation">
      <ul>
    <li>Startseite</li>
    <li><a href="Meine Songs.html">Meine Songs</a></li>
    <li><a href="http://www.youtube.com/user/DeeJayGamePlay/" 
    target="blank">YouTube-Kanal</a></li>
    <li><a href="Blog.html">Blog</a></li>
      </ul>
    </div>
<!--Ende der Navigation-->
<!--Beginn des Inhaltes-->
    <div id="inhalt">
    <h1>Home</h1>
    <div id="seitenanfang">
      <a href="#top"><img src="../Bilder/Pfeil.png" alt="zum Seitenanfang" 
      title="zum Seitenanfang"/></a>
    </div>
    </div>
<!--Ende des Inhaltes-->
<!--Beginn der Fußzeile-->
    <div id="fuß">
    <a href="Impressum.html">Impressum</a>
    </div>
<!--Ende der Fußzeile-->
  </div>
</body>
</html>
 
Zuletzt bearbeitet:
hnnnnnnnnnnnnnnn ... nein geht nicht.

wie solls denn aussehen?

ich tipp mal darauf das du nicht floatest und desshalb sich dein Design "selbstständig" macht
 
Hallo.

Du hast in deinem HTML eine id=container die in deinem CSS keine Angaben enthält.

Du hast auch keine festen Größen oder Mindestgroßen vergeben.
Da ist doch klar das alles kleiner wird wenn du den Viewport verkleinerst.

Gruss
Elroy
 
Gib dem Container die gesamtbreite der beinhalteten containern und die höhe der beinhalteten containern oder elementen.
 
OK, ich habs jetzt soweit hingekriegt. Ich müsste nur noch mein Impressum zum Bewegen kriegen. Halt, dass er durch zoomen und verkleinern des Browserfensters mitkommt.

Eine HTML-Dateie
PHP: 
<!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>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <meta name="description" content="Die Homepage von DeeJay GamePlay. Hier werden seine aktullen Songs erstmals vorgestellt"/>
  <meta name="keywords" content="DJ, dj, DeeJay, Deejay, deejay, GamePlay, Gameplay, gameplay, Index, index, Home, home, Hauptseite, hauptseite, Startseite, startseite"/>
  <meta name="robots" content="index, nofollow"/>
  <link rel="stylesheet" type="text/css" href="../CSS/Formatierung.css"
  media="screen"/>
  <link rel="stylesheet" type="text/css" href="../CSS/Ausdruck.css" 
  media="print"/>
  <!--[if gte IE 1]>
  <link rel="stylesheet" type="text/css" href="../CSS/Formatierung_IE.css"
  media="screen"/>
  <![endif]-->
  <link rel="shortcut icon" href="../Bilder/Favicon.png"
  type="image/x-icon"/>
  <link rel="icon" href="../Bilder/Favicon.png" type="image/x-icon"/>
  <title>DeJay GamePlay/Startseite</title>
</head>
<body>
<!--Beginn der Kopfzeile-->
  <div id="kopf">
  <a name="top"></a>
    <a href="Index.html">
      <img src="../Bilder/Banner.jpg" alt="Home" title="Home"/>
    </a>
  </div>
<!--Ende der Kopfzeile-->
<!--Beginn des Containern-->
  <div id="container">
<!--Beginn der Breadcrumbs-Navigation-->
  <div id="breadcrumbs">
    Startseite
  </div>
<!--Ende der Breadcrumbs-Navigation-->
<!--Beginn der Navigation-->
  <div id="navigation">
    <ul>
      <li style="padding: 5px;">Startseite </li>
      <li><a href="Meine Songs.html">Meine Songs </a></li>
      <li><a href="http://www.youtube.com/user/DeeJayGamePlay/" 
      target="blank">YouTube-Kanal </a></li>
      <li><a href="Blog.html">Blog </a></li>
    </ul>
  </div>
<!--Ende der Navigation-->
<!--Beginn des Inhaltes-->
  <div id="inhalt">
    <h1>Home</h1>
    <a id="seitenanfang" href="#top"><img src="../Bilder/Pfeil.png" 
    alt="zum Seitenanfang" title="zum Seitenanfang"/> </a>
  </div>
<!--Ende des Inhaltes-->
<!--Beginn der Fußzeile-->
  <div id="fuss">
    <a href="Impressum.html">Impressum </a>
  </div>
<!--Ende der Fußzeile-->
  </div>
<!--Ende des Containern-->
</body>
</html>
CSS-Datei
PHP: 
/* ... Allgemein ... */

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: arial, sans-serif;
  font-size: 13px;
  color: #2E2611;
  background: url(../Bilder/Hintergrund.jpg) repeat-x;
}
h1 {
  font-family: "Times New Roman", Times, sans-serif;
  font-size: 2.2em;
  font-style: italic;
  text-indent: 0.5em;
  line-height: 2em;
  color: #060502;
}
h2 {
  font-family: "Times New Roman", Times, sans-serif;
  font-size: 1.5em;
  font-style: italic;
  text-indent: 1em;
  line-height: 1.5em;
  color: #060502;
}
h3 {
  font-family: "Times New Roman", Times, sans-serif;
  font-size: 1.3em;
  text-indent: 1em;
  color: #060502;
}

fieldset {
  width: 25%;
  border: 1px solid #7A4E0B;
  margin-bottom: 20px;
  margin-left: 20px;
  padding: 10px;
}
input, textarea {
  border: 1px solid #7A4E0B;
  color: #2E2611;
  background-color: #95806C;
  padding: 1px;
}
img {
  border: none
}

/* ... Grundstruktur ... */

#container {
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 25px;
}
#kopf {
}
#breadcrumbs {
  min-width: 550px;
  max-width: 1139px;
  background-color: #95806C;
  border: 3px solid #7A4E0B;
  border-bottom: 0px;
  font-size: 0.8em;
  padding: 2px;
  padding-left: 5px;
}
#breadcrumbs a {
  text-decoration: none;
}
#navigation {
  float: left;
  width: 120px;
  background-color: #95806C;
  border: 3px solid #7A4E0B;
}
#navigation ul {
  list-style-type: none;
}
#navigation li {
  font-weight: bold;
  border-top: 1px solid #D3C8BD;
  border-bottom: 1px solid #D3C8BD;
}
#navigation a {
  text-decoration: none;
  display: block;
  padding: 5px;
}
#navigation a:hover, #navigation a:focus, #navigation a:active {
  background-color: #D3C8BD;
  border-left: 4px solid #D3C8BD;
  Color: #2E2611;
}
#inhalt {
  min-width: 404px;
  max-width: 993px;
  background-color: #D3C8BD;
  border: 3px solid #7A4E0B;
  margin-left: 123px;
  padding: 1px 20px 10px 10px;
}
#fuss {
  min-width: 100px;
  max-width: 100px;
  background-color: #95806C;
  border: 3px solid #7A4E0B;
  border-top: 0px solid #7A4E0B;
  text-align: center;
  font-weight: bold;
  margin-left: 1046px;
}
#fuss a {
  text-decoration: none;
  display: block;
  padding: 2px;
}
#fuss a:hover, #fuss a:active, #fuss a:focus {
  Color: #2E2611;
  background-color: #D3C8BD;
}

/* ... Links ... */

a:link {
  text-decoration: none;
  color: #694005;
}
a:visited {
  text-decoration: none;
  color: #694005;
}
a:focus, a:hover, a:active {
  text-decoration: underline;
  color: #9b630e;
}

/* ... Klassen ... */

.button input {
  border-top: 1px solid #A79380;
  border-right: 1px solid #7A4E0B;
  border-bottom: 1px solid #7A4E0B;
  border-left: 1px solid #A79380;
}
.button input:active {
  border-top: 1px solid #7A4E0B;
  border-right: 1px solid #A79380;
  border-bottom: 1px solid #A79380;
  border-left: 1px solid #7A4E0B;
}
.radiobutton {
  display: block;
  margin-bottom: 3px;
}

/* ... Sonstiges ...*/

#seitenanfang {
  float: right;
  margin-top: -20px;
  margin-right: -20px;
}
#seitenanfang img:active, #seitenanfang img:focus {
  margin-top: 2px;
}
 
<li style="padding: 5px;">Startseite </li>

oke erst mal das da gehört da eigentlich nicht hin style attribute sollten ausgelagert werden
sprich das element mit einer klasse oder einer id an

2. was meinst du mit dem Impressum das einzige was auf dieser Seite den Namen Impressum trägt ist
ein Link im footer und wenn du möchtest dass der footer auf gleiche sonderbare art und weise
grösser oder kleiner wird wie die anderen elemente der seite dann würde ich den footer in den
container packen oder ihm, wie du das bereits mit dem container gemacht hast ein min-height und
ein min-width geben damit sollte das dann eigentlich gehen.

mfg devilseye

p.s. war spät und kopf tat schlimm brummen ;-)
 
Schreibt der mir um halb fünf Uhr morgens ^^

Nunja, also ich hab jetzt das mit dem Style weggemacht und ne Klasse dafür benutzt.

zum 2. Ich hab dem Container kein min-width gegeben sondern den anderen Ids, sprich Inhalt, Broudcast-Navigation und Navigation.

LG, ALex
 
Das Problem mit dem footer (ich hoffe du meinst mit dem footer die Fuß-Zeile also bei mir dann halt die ID "fuss"), dass sich nicht die ganze Fußzeile nach links bewegt, wenn ich das Fenster entsprechend verkleinere, sondern nur der Kasten kleiner und kleiner wird. Eigendlich sollte sich der Impressumkasten komplett mit nach links bewegen, wenn irh versteht wie ich das meine.

LG, ALex und vieen Dank für die Hilfe
 
sorry kann dir nicht ganz folgen ich seh zwar die id fuss jedoch nur einen link der nach impressum.html verweist
und anchor tag ist kein Kasten oder Box oder Container sondern ein Inline Element
 
Ich würde mal spontan sagen, dann darfst du #fuss kein margin-left: 1046px; setzen. Das heißt ja so viel wie: „Halte einen Abstand links vor diesem Element von 1046 Pixel ein.“
 
könnte dann wohl der grund sein.
Floate das ding nach rechts und setz den abstand auch von rechts
dann sollte das eigentlich gehen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben