Problem bei automatischer anpassung

aepha79 · 12. Dezember 2010

Hallo Leute,

erst einmal ein riesen hallo von mir und Respekt zu Eurem Forum.Da ich vor kurzem auch meine Begeisterung am Websites programmieren entdeckt habe,habe ich mir schon den ein oder anderen Tip hier abgeschaut.
Jetzt hänge ich aber doch ein wenig fest.
Problem 1:
Irgendwie bekomme ich es nicht hin,dass die höhe der Site sich automatisch anpasst.Mit der breite habe ich es bereits hin bekommen.Wenn ich aber in der Höhe mit %
arbeite,ist der Inhaltsbereich und meine Seitenränder komplett verschwunden.
Problem 2:

Wenn ich zu dem eingefügten Bild einen Text dazu schreibe,wird dieser nicht unten angezeigt sondern darüber.Dieser verschiebt mir dann teilweise die einzelnen Bereiche.
Hier mal mein Code

HTML

<!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>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  <title>Angelspezies-Altmark.Wir wissen wo der Fisch steht!</title>




  <style type="text/css">
  <!—




  -->
  </style>




</head>
<body>




</body>
</html>




<div id="seitenrand1">







</div>







<div id="seitenrand2">




</div>




<div id="kopfbereich">
<p>Angelspezies-Altmark</p>
</div>










<div id="navi">
<h3><b><a href="index.htm">Startseite</a></b></h3>
<p><br><a href="andre.htm" >Andre´</a></br></p>
<br><a href="p.htm" >Phillip</a></br>




</div>




<img id="bild1" src="bilder/philli.jpg"/>








<div id="inhalt">




</div>










<div id="fusszeile">




    www.angelspezies-altmark.de  -  Kontakt über
<a href="mailto:andre_epha@hotmail.de"> andre_epha@hotmail.de </a>
<a href="impressum.htm">Impressum</a>
  </div>













<style type="text/css">
<!--
#kopfbereich {
  background-color: red;
  background:url(bilder/rute2.jpg) no-repeat left top;
  height:120px;
  margin:0 auto;
  width:80%
  hight:20%
  text-align:left;
  font-family:narkisim;
  border-style:double;







}







-->




#seitenrand1 {
   float:left;
   background-color:#0066FF;
   height:100%;
   width:4%;




}







#seitenrand2 {
   float:right;
   background-color:#0066FF;
   height:100%;
   width:4%;
}










<!--
 #navi {
   float:left;
   background-color:#ffee66;
   width:  10%;
   height: 100%;
   line-height:10pt;
   border-style:double;
   font-size:10pt;
   padding-left:0.4em;

 






 }
-->




<!--




#inhalt {   
   background-color:#ccccff;
   width: 92%;
   height: 100%;
   border-style:double;
   border-width:1px 7px 1px 1px;
   font-size:12pt;
   line-height:30pt;
   text-align:left;



 }




-->




#bild1 {
  float:left;
  width:300px;
  height:200px;
  text-align:right;
}
-->




#fusszeile {
  clear:
  width:100%;
  high:5%;
  background-color:#0000FF;
  border-top:2px solid black;
  font-size:8pt;
}




-->







#links {
  float:left;
  width:200px;
  height:200px;
  padding: 2em 0 0 0.9em;




}
-->






















html, body {
  font: 90% Arial, Helvetica, sans-serif;




}













#kopfbereich p {
  color:black;
  text-align:right;
  font-size:3em;   padding:0.4em 0.9em 0 0; 




}




#navi p, a, br, h3 {
     padding:0.2em 0 0 0.1em;
     color:black;
}







-->







* { 
  margin:0 auto;




}







#inhalt h1, h2, h3, p, ul,{
  padding-bottom:0.20em ; margin-top:10em; 







}
-->







#inhalt ul {
  padding-left:5em;




}




#navi p, a, br, h3 {
     padding:0.2em 0 0 0;
     color:black;
}




-->




</style>

Alles anzeigen

Wie gesagt bin ich anfänger.Bin also für jede Art von Kritik und Anregung zu haben.
Danke im voraus.

Sarkkan · 12. Dezember 2010

Zitat von "aepha79"

Problem 1:
Irgendwie bekomme ich es nicht hin,dass die höhe der Site sich automatisch anpasst.Mit der breite habe ich es bereits hin bekommen.Wenn ich aber in der Höhe mit % arbeite,ist der Inhaltsbereich und meine Seitenränder komplett verschwunden.

..die Höhe der Seite passt sich doch eigentlich immer von alleine an, oder irre ich mich da?
Ansonsten versuch doch bitte mir/uns das Problem genauer zu erklären/verdeutliche es durch eine Grafik/..
Hierbei dann noch 2 Kleinigkeiten:
-> es heiß 'height' nicht 'hight' (du hast es mind. 1x so in deinem Code geschrieben)
-> von welcher Angabe sollte der Browser den bei 100% ausgehen? 100% des Bildschirm? 100% des mögichen Inhalts? In den meisten Fällen wird die höhe so gewählt/berechnet, dass überlegt wird, wie viel den normal genommen wird.
Bei der Breite haben wir bei <div> (welches ein Block-Element ist) die Tatsache, dass es immer die komplette Fensterbreite an Breite bekommt. Nur wenn wir etwas ändern wird dies verändert. (Bsp.: Geben wir einem <div> eine Breite von 50%, wird das <div> auch nur die hälfte des Bildschirms einnehmen.)
Bei der Höhe ist das wiederum anders. Hier sagt man sich, dass ein Objekt nur so hoch sein soll, wie umbedingt sein muss (z.B. weil der Text X höhe benötigt.)
Wenn wir nun eine leer Box haben, dann braucht die Box 0 Platz. und 100% von 0 sind 0, usw. Nur eine Feste Breite (also px) kann vergeben werden.

Zitat von "aepha79"

Problem 2:
Wenn ich zu dem eingefügten Bild einen Text dazu schreibe,wird dieser nicht unten angezeigt sondern darüber.Dieser verschiebt mir dann teilweise die einzelnen Bereiche.
Hier mal mein Code

Das kommt durch folgendes Codestück:

Code

#bild1 {
  float:left;
  width:300px;
  height:200px;
  text-align:right;
}

Mit float geben wir an, dass Inhalte um andere Inhalte herum fließen.
In deinem Fall soll z.B. Text Links um das Objekt herumfließen.
Versuch mal das Float weg zu machen.

Problem bei automatischer anpassung

Jetzt mitmachen!

Teilen