Antworten zum Thema „wie kann ich dieüberschrift h1 eingrenzen?“

rottweiler85 · 07.09.2010

Hallo mein problem sieht folgendermaßen aus ich möchte gerne eine unsortierte liste mit Links oben recht neben meine Überschrift H1 setzen allerdings bin ich noch ein ziemlicher anfänger was html/css angeht und eine such bei google und etlichen anderen foren brachte mich nicht weiter hoffe ihr könnt mir helfen.
hier ein auszug der html datei:

<body>

<div id="holder">
<h1 class="callout">CSS Einsendeaufgabe</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

sokie · 07.09.2010

AW: wie kann ich dieüberschrift h1 eingrenzen?

du kannst sie einerseits absolut positionieren, sodass sie rechts neben der überschrift steht, oder beide element links floaten, wobei in dem Fall beiden Elementen (h1 und div#nav) eine breite zugewiesen sein muss.
style:

Code:

h1,#nav{
float-left;
}
h1{
width: 500px; /*ausprobieren*/
}
#nav{
  width: 200px; /*ausprobieren*/
}

fexx · 07.09.2010

AW: wie kann ich dieüberschrift h1 eingrenzen?

ich würde das ganze wohl auch eher über floats lösen ... du darfst aber nicht vergessen das ganze zu "clearen"

Code:

.clearer {
clear: both;
}

Landorien · 07.09.2010

AW: wie kann ich dieüberschrift h1 eingrenzen?

Im Prinzip sind die div-Tags, welche du verwendest überflüssig.

HTML:

<!DOCTYPE html>
<head>

<title>test</title>

<style type="text/css">
* { margin:0; padding:0; }
html { height:100.5%; font: 100.01%/1.4em arial, sans-serif; color: #000; background:#fff; }
body { font-size:1em; width:auto; height:auto; margin:0 auto; background:#fff; }

li { list-style:none; }

h1, ul#nav { float:left; }
h1 { font-size:1em; width:25%; background:#666; }
ul#nav { width:75%; background:#f1f1f1; }

.clear { clear:both; }
</style>
</head><body>

    <h1>Überschrift</h1>
    <ul id="nav">
        <li>Punkt1</li>
        <li>Punkt2</li>
        <li>Punkt3</li>
    </ul>

<div class="clear"><!--clear--></div>

</body></html>

Gruß
Lando