Abstände

hume · 16. Juni 2010

Hallo, ich möchte dass bei der Grafik sowie bei der Fußzeile kein Abstand nach rechts oder links ist sowie oben. Hab es schon mit margin-left
oder margin-right versucht scheint nicht wirklich zu klappen. Hab mal einen Screenshot gemacht, was ich genau meine.

[Blockierte Grafik: http://s5.directupload.net/images/user/100616/d2j86wga.jpg]

Anonymous · 16. Juni 2010

moinsen, du musst auch mal das html-seminar lernen oder hier die videos dazu --> <a class="postlink" href="http://www.youtube.com/user/webmastercrashkurs">http://www.youtube.com/user/webmastercrashkurs</a>

speziell Boxmodell, da wird genau beschrieben wie du vorgehen musst, such nach padding, das ist dein stichwort...

<a class="postlink" href="http://www.html-seminar.de/box-modell.htm">http://www.html-seminar.de/box-modell.htm</a>

musst auch mal eigeninitative zeigen wenn du schon ernsthaft vorhast eine seriöse professionelle Hp zu machen. Dazu gehört auch ne gewisse semantische logik im Code

hume · 16. Juni 2010

Zitat

moinsen, du musst auch mal das html-seminar lernen oder hier die videos dazu --> <a class="postlink" href="http://www.youtube.com/user/webmastercrashkurs">http://www.youtube.com/user/webmastercrashkurs</a>

Komm manchmal ein wenig durcheinander, hab wenigstens den rechten Rand schon hin bekommen dass es aufschließt, habe folgendes Problem was ich nicht verstehe, wenn ich padding-left nehme erwarte ich eigentlich dass er den linken Abstand nimmt, dass Gegenteil ist der fall statt den linken wird der rechte Rand genommen. Hier mal die Website <a class="postlink" href="http://www.bhkwpartner.de/test">http://www.bhkwpartner.de/test</a>

Hier mal der Code:

index.html

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>
          <title>
            BHKWPartner - das optimale BHKW von Ihrem Installateur!
          </title>
          <link href="./design.css" type="text/css" rel="stylesheet" />
      </head>
      <body>




          <div id="header">

         </div>
          <ul id="navigation">
            <li> <a href="index.html">Startseite</a> </li>       
            <li> <a href="simulation.html">Simulationsanfrage </a> </li>
            <li> <a href="planung.html">BHKW-Planung </a> </li> 
            <li> <a href="abrechnung.html">BHKW-Abrechnung </a> </li>
            <li> <a href="aktuelles.html">Aktuelles </a> </li> 
            <li> <a href="info.html">Info </a> </li> 
            <li> <a href="agb.html"> AGB </a> </li> 
            <li> <a href="impressum"> Impressum </a> </li> 
          </ul>

          <div id="fusszeile">
          </div>
      </body>




  </html>

Alles anzeigen

CSS Datei

Code

* { 
  margin:1;
  padding:0;
  border:0;
  list-style:none;
  text-decoration:none;
  font-family: Arial, Helvetica, sans-serif;
}




div#header {
  background:url(images/header.gif)no-repeat left top;
  visibility: visible;
  height:110px;
  padding-top:1,5%;
  padding-left: 102%;




  





} 
    div#header h1 {
       font-size:14pt;
       color:#fff;

    }




    ul#navigation li {
        margin: 5px;
        width: 20%;
    }




    ul#navigation li a {
        display: block;
        border: 1px outset #FFA500;
        background: #616161;
        padding: 10px;
        color: #FFFFFF;
        font-weight: bold;
        border-style: outset;
    }




    ul#navigation li a:hover {
        display: block;
        border: 1px outset #FFA500;
        background: #FFA500;
        color: #FFFFFF;
        border-style: outset;
    }




div#fusszeile {




background: #FFA500;
visibility: visible;
width: 100 px;
height: 100px;
border-right-width: medium;




}

Alles anzeigen

lauras · 16. Juni 2010

Zitat

* {
margin:1;
padding:0;
border:0;
list-style:none;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
}

Alles anzeigen

Du gibst jedem Element einen margin von 1.. was erwartest du?

Sören · 16. Juni 2010

Wenn ich auf deine Seite gehe ist der Header und Footer am Rand, außer unten rechts.
Was soll den padding als %-Angabe, wenn du keinen Abstand willst must du 0 nehmen.

hume · 16. Juni 2010

Ok, es klappt

Möchte folgendes machen, möchte dass DIV von der Fußzeile eins nach unten setzen also, nach Impressum, wenn ich es mit padding-top mache, verändert sich aber nichts

lauras · 16. Juni 2010

Nochmal der Hinweis darauf, dir das Box-Modell anzugucken:
http://www.html-seminar.de/box-modell.htm

padding meint den Innenabstand vom Text zum Rahmen, margin den Außenabstand vom Rahmen zu anderen Elemente. Folglich ist padding hier wohl die falsche Wahl...

LG

hume · 16. Juni 2010

Ok, ich hab es hin bekommen. Habe noch ein kleines Problem mit DIV und zwar möchte ich dass zwischen den Links oben und unten der weiße Bereich gefüllt wird, kann mir aber jetzt nicht erklären warum mir dass nicht angezeigt wird.

Hier mal mein Code:

Index.html

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>
          <title>
            BHKWPartner - das optimale BHKW von Ihrem Installateur!
          </title>
          <link href="./design.css" type="text/css" rel="stylesheet" />
      </head>
      <body>




          <div id="header">   
          </div>

          <div id="linksoben">
          </div>

          <ul id="navigation">
            <li> <a href="index.html">Startseite</a> </li>       
            <li> <a href="simulation.html">Simulationsanfrage </a> </li>
            <li> <a href="planung.html">BHKW-Planung </a> </li> 
            <li> <a href="abrechnung.html">BHKW-Abrechnung </a> </li>
            <li> <a href="aktuelles.html">Aktuelles </a> </li> 
            <li> <a href="info.html">Info </a> </li> 
            <li> <a href="agb.html"> AGB </a> </li> 
            <li> <a href="impressum"> Impressum </a> </li> 
          </ul>

          <div id="fusszeile">
          </div>
      </body>




  </html>

Alles anzeigen

CSS Datei

Code

* { 
  margin:0;
  padding:0;
  border:0;
  list-style:none;
  text-decoration:none;
  font-family: Arial, Helvetica, sans-serif;
}




div#header {
  background:url(images/header.gif)no-repeat left top;
  visibility: visible;
  height:110px;
  padding-top:1,5%;
  padding-left: 100%;
  margin-bottom:1cm;
  }

div#linksoben {
background: #FFA500;
visibility: visible;
height:100%;
margin:0;







}

    div#header h1 {
       font-size:14pt;
       color:#fff;

    }




    ul#navigation li {
        margin: 5px;
        width: 20%;
        margin:0

    }




    ul#navigation li a {
        display: block;
        border: 1px outset #FFA500;
        background: #616161;
        padding: 10px;
        color: #FFFFFF;
        font-weight: bold;
        border-style: outset;
    }




    ul#navigation li a:hover {
        display: block;
        border: 1px outset #FFA500;
        background: #FFA500;
        color: #FFFFFF;
        border-style: outset;
    }




div#fusszeile {




background: #FFA500;
visibility: visible;
height: 110px;
padding-left:100%;
padding-top:1%;
padding-bottom:2%;
margin-top:1cm;




}

Alles anzeigen

PS: Die Höhe entspricht nicht den echten Wert, da es nur zum testen ist.

[Blockierte Grafik: http://s5.directupload.net/images/user/100616/temp/kz7q8aa7.jpg]

Anonymous · 16. Juni 2010

Och..so hab ich auch mal angefangen. Jag deinen Quellcode immer hierdurch, wenn das alles passt, also keine Fehler mehr angezeigt werden kannste damit kommen...

HTML Korrektur: <a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a>

Css Korrektur: <a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a>

Dann kommt beim Sternchen i. d. R. nur

Code

margin: 0; padding: 0;

hin, den rest packst du in

Code

body {
font-size: 14px;
font-family: arial, sans-serif, verdana;
line-height: 28px;
...
}

Um auf die Lösung deines Problems zu kommen, solltest alle paddings nochmal entfernen bzw die vom jeweiligen div und dann neue werte setzen, zudem immer selbe massangabe(nicht px, em, %). Das kannst machen wenn du etwas mehr übung hast(da zerfetzt dir es nicht nur einmal das komplette layout, ich sprech da aus eigener erfahrung.

die margins kannste weglassen, haste ja oben für alle elemente margin und padding auf 0 gesetzt. Nur wenn du was anderes als 0 haben willst musst du es dem elemtent wieder vergeben

Und Rück mal dein Quellcode richtig ein, keine Leerzeichen dazwischen, sondern tab taste!!!! Ich hatte jetzt keine lust ihn anzupassen, da er nicht korrekt eingerückt ist.

HTML lernen ist halt oft Ausprobieren, lesen, Kopieren, Wieder probieren

hume · 16. Juni 2010

Zitat

Och..so hab ich auch mal angefangen. Jag deinen Quellcode immer hierdurch, wenn das alles passt, also keine Fehler mehr angezeigt werden kannste damit kommen...

Ich hab mal die index.html und die CSS Datei validiert und die Fehler beseitigt. Weiteres Problem der obere Header was man in Screenshot sieht müsste normal auf der Seite <a class="postlink" href="http://www.bhkwpartner.de/test">http://www.bhkwpartner.de/test</a>
zu sehen sein, bei mir ist es zu sehen.
Aber für den ich die Website mache, sieht den Header oben nicht... dass verstehe ich nicht ganz. Er hat den Browserverlauf sogar gelöscht und nochmal neu aufgerufen ohne Erfolg.

Zitat

m auf die Lösung deines Problems zu kommen, solltest alle paddings nochmal entfernen

Ja, werde ich machen.

Hier mal der Fehlerfreie Code:

Index.html

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>
          <title>
            BHKWPartner - das optimale BHKW von Ihrem Installateur!
          </title>
          <link href="./design.css" type="text/css" rel="stylesheet" />
      </head>
      <body>




          <div id="header">   
          </div>

          <div id="linksoben">
          </div>

          <ul id="navigation">
            <li> <a href="index.html">Startseite</a> </li>       
            <li> <a href="simulation.html">Simulationsanfrage </a> </li>
            <li> <a href="planung.html">BHKW-Planung </a> </li> 
            <li> <a href="abrechnung.html">BHKW-Abrechnung </a> </li>
            <li> <a href="aktuelles.html">Aktuelles </a> </li> 
            <li> <a href="info.html">Info </a> </li> 
            <li> <a href="agb.html"> AGB </a> </li> 
            <li> <a href="impressum"> Impressum </a> </li> 
          </ul>

          <div id="fusszeile">
          </div>
      </body>




  </html>

Alles anzeigen

CSS Datei

Code

* { 
  margin:0;
  padding:0;

}




div#header {
background:url(images/header.gif)no-repeat left top;
visibility: visible;
height:110px;
padding-left: 100%;
margin-bottom:1cm;
  }

div#linksoben {
background: #FFA500;
visibility: visible;
height:100%;
margin:0;







}

div#header h1 {
font-size:14pt;
color:#fff;

}




ul#navigation li {
margin: 5px;
width: 20%;
margin:0

}




ul#navigation li a {
display: block;
border: 1px outset #FFA500;
background: #616161;
padding: 10px;
color: #FFFFFF;
font-weight: bold;
border-style: outset;
}




ul#navigation li a:hover {
display: block;
border: 1px outset #FFA500;
background: #FFA500;
color: #FFFFFF;
border-style: outset;
}




div#fusszeile {




background: #FFA500;
visibility: visible;
height: 110px;
padding-left:100%;
padding-top:1%;
padding-bottom:2%;
margin-top:1cm;




}

Alles anzeigen

Sören · 16. Juni 2010

Zitat von "hume"

In Firefox funktionierts, in IE nicht.

Anonymous · 17. Juni 2010

nimm mal das "left, top" aus background: url(images/header.gif) no-repeat; raus. Für was ist das da drin??

Und das hier genauso raus(zumnidest mal aus header raus=

<a class="postlink" href="http://www.css4you.de/example/visibility.html">http://www.css4you.de/example/visibility.html</a>

Für Was????(du willst doch das man dein Inhalt sieht??)

hume · 17. Juni 2010

Zitat

Für Was????(du willst doch das man dein Inhalt sieht??)

Ja sicher will ich dass man meinen Inhalt sieht, wer will dass auch nicht.
Hätte es für die Kachel vorgesehen. Das left top wäre für den Abstand vorgesehen.

Anonymous · 17. Juni 2010

jetzt klappts ja im IE8 auch mit deinem Header :lol:

hume · 17. Juni 2010

Dann ist es ja gut

Abstände

Jetzt mitmachen!

Teilen