CSS div neben h1 verschiebt nachfolgenden Inhalt

  • Ersteller Ersteller Mr. Snoot
  • Erstellt am Erstellt am
M

Mr. Snoot

Gast
Hio,

ich möchte neben einer h1-Überschrift gerne ein div platzieren; das klappt im Grunde auch, wie folgender Code eindrucksvoll beweist (:D):
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">

      body { font-family:Verdana; }
      h1   { width:516px; height:19px; border-bottom:1px solid #AAA; float:left; margin-top:0; font-family:Georgia; font-size:18px; }
      div  { width:74px;  height:19px; border-bottom:1px solid #AAA; float:left; background:#EFEFEF}
      ol   { font-size:11px; clear:left; }

    </style>
  </head>

  <body>

    <h1>Inhalt</h1>
      <div>&lt;div&gt;</div>

      <ol>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ol>

  </body>

</html>
Bau ich das ganze aber so auf meiner Seite ein, dann verschiebt es alles nach dem div ein ganzes Stück nach unten.

Weiß jemand, wo sich der Fehlerteufel versteckt? Ist ja im Grunde identisch :confused_alt:
 
Ich blick' da jetzt ehrlich gesagt nicht ganz durch, was auch an der Qualität des Quelltextes liegt. Versuche doch bitte zuerst einmal, sämtliche Fehler im Quelltext zu beheben, denn erst, wenn der Quelltext fehlerfrei (= 0 Fehler im Validator) ist, kannst du gezielt nach dem Fehler suchen, sollte dieser weiterhin bestehen. Das gilt sowohl fürs Markup als auch für die Präsentation (HTML und CSS).
 
0 Fehler ist schon mal unmöglich wegen der Verwendung von autocomplete.

Was gefällt dir denn sonst nicht?


edit: hab mal alles was möglich ist gefixt; jetzt will ich aber auch ne Lösung ;)
 
Zuletzt bearbeitet: (Geändert von Tonntonno (Übermorgen um 14:43 Uhr))
Doch, es ist möglich: Einfach HTML5 verwenden! =) Ansonsten benutzt du Attribute wie "align" oder "style", welche einfach nicht erlaubt oder schlecht zu warten sind.
 
Ja es kommt auf den CSS Standard halt an den du verwendest.

Zu Postion:
HTML:
 <style type="text/css">
      div  { width:74px;  height:19px; border-bottom:1px solid #AAA; float:left; background:#EFEFEF;position:relative;top:<hier eine postive(runter) oder negative(rauf) Pixel Angabe>}
    </style>

Nimm mal das margin-top:0; bei H1 raus...

was das position angeht du kannst es mit top kombinieren und somit das div schieben.
 
@ S.o.T.: HTML ist bis auf das autocomplete (was nichts mit dem Layout zu tun hat) valide; CSS sowieso

@ squirreljam: das postition am div beeinflusst den nachfolgenden Inhalt nicht, und auch das margin von h1 nicht. jetzt versteh ich was, du meinst. Das floaten muss natürlich dann weg. Danke :)
 
Zuletzt bearbeitet:
Schöner wäre ein img-Tag mit Alt-Attribut anstatt ein div für den Sprache-Button.

Eine andere Möglichkeit der Positionierung besteht darin, den Sprache-Button an erster Stelle nach
HTML:
<div id="content">
zu setzen und anschließend per
HTML:
float: right;
zu positionieren.
 
Also mit float:right verschwindet der Button irgendwo im Nirwana.

Das mit dem <img>-Tag ist mir irgendwie unsympatisch (hab ich allerdings rechts daneben beim 'Drucken-Button'); obwohl so ein leerer <a>-Tag auch nicht das Wahre ist :D

Muss ich mal drüber nachdenken.
 
Im Nirvana sollte der Button nicht verschwinden, evtl. muss man dem div#content eine Breite zuweisen.

Ob sympathisch oder nicht, Stichwort Barrierefreiheit. Div ist doch kein Allheilmittel ...
 
Zurück
Oben