karl: Abstand zwischen Grafik und DIV

Hallo zusammen,

ich bin ein volkommener Neuling was CSS und class betrifft, habe es trotzdem mal versucht...

Mein Problem:
Zwischen der Grafik und Menüleiste/Hauptteil ist ein Abstand den ich gerne weg hätte. Wer kann mir helfen?

Achja: die seltsame Struktur soll bezwecken, dass der rechts stehende Hauptteil vor dem links stehenden Menü gelesen wird.

class habe ich erreicht indem ich id's "übersetzt" habe... das kan mann vielleicht noch kürzen? Ist mir grad noch zu hoch :-)

Der Quelltext:
------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Titel</title>
<style type="text/css">

body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Arial;
    margin: 0; padding: 1em;
    text-align: center;
  }

.Seite {
    text-align: left;
    margin: 0 auto;
    width: 760px;
    padding: 0;
    background: green;
    border: 1px solid back;
  }

.Hauptteil {
    text-align: left;
    margin: 0 auto;
    width: 587px;
    float: right;
    padding: 0;
    background: orange;
    border: 1px solid black;
  }

h1 {font-size: 1em;
 }

ul.Navigation {
    width: 160px;
    margin: 0; padding: 0;
    border: 1px solid black;
    background-color: red;
  }

ul.Navigation li {
    list-style: none;
    margin: 0; padding: 0px;
    border: none;
    background-color: red;
  }

ul.Navigation a {
    text-decoration: none; font-size: 0.9em; font-weight: bold;
    color: black; background-color: red;
  }

ul.Navigation a:hover {
    color: yellow; background-color: red;
  }

ul.Navigation-2 {
    width: 160px;
    margin: 0; padding: 0;
    border: none;
    background-color: white;
  }

ul.Navigation-2 li {
    list-style: none;
    margin: 0; padding: 0;
    border: none;
    background-color: white;
  }

ul.Navigation-2 a {
    text-decoration: none; font-size: 0.8em; font-weight: normal;
    color: black; background-color: white;
  }

ul.Navigation-2 a:hover {
    color: yellow; background-color: white;
  }

</style>
</head>

<body>

<div class="Seite">

<img src="grafik.jpg" alt="grafik"/>

<div class="Hauptteil">
    <h1>Ueberschrift</h1>
  </div>

<ul class="Navigation">
    <li><a href="link1.htm">Link 1</a></li>
 <ul class="Navigation-2">
 <li><a href="link1_1.htm">Link 1.1</a></li>
     <li><a href="link1_2.htm">Link 1.2</a></li>
 </ul>
    <li><a href="link2.htm">Link 2</a></li>
    <li><a href="link3.htm">Link 3</a></li>
  </ul>

</div>
</body>
</html>

Ich wäre sehr dankbar wenn mir jemand hilft diesen Abstand weg zu bekommen!!!

Karl

  1. Hallo,

    Zwischen der Grafik und Menüleiste/Hauptteil ist ein Abstand den ich gerne weg hätte.

    vielleicht würde ein zusätzlicher Container für die floatenden Elemente
    helfen, mit img{float:right} als erster Versuch sieht es schonmal anders
    aus.

    Grüsse
    Cyx23