Abstände

[Thomas]

Hi!

.menu
{
position:absolute;
top:150px;
width:180px;
height:600px;

margin-left: 0px;

background-color:#ffaa0d;
border:1px solid #ffffff;
}

.haupt
{
position:absolute;
top:150px;
height:600px;

margin-left:200px;

background-color:#ffaa0d;
border:1px solid #ffffff;
}

ergibt folgendes:
http://f1manager.uttx.net/work/test.jpg

Ich möchte aber, das der rechte orangene Bereich wie mit dem roten Pfeil angedeutet, bis 10 Pixel Abstand zum rechten Rand geht. margin-right:10px hilft allerdings nicht!

Thomas

[Zeromancer]

Hallo Thomas,

.menu
{
position:absolute;

.haupt
{
position:absolute;

ergibt folgendes:
http://f1manager.uttx.net/work/test.jpg
Ich möchte aber, das der rechte orangene Bereich wie mit dem roten Pfeil angedeutet, bis 10 Pixel Abstand zum rechten Rand geht. margin-right:10px hilft allerdings nicht!

ich verstehe meist nicht, wieso soviel mit position:absolute gearbeitet wird?! Es handelt sich nach meinem Empfinden um ein ganz normales 2-spaltiges Layout. Wie man dazu kommt? http://de.selfhtml.org/css/layouts/mehrspaltige.htm#zweispaltig

Mit freundlichen Grüßen,
André

[Thomas]

Hallo Thomas,

.menu
{
position:absolute;

.haupt
{
position:absolute;

ergibt folgendes:
http://f1manager.uttx.net/work/test.jpg
Ich möchte aber, das der rechte orangene Bereich wie mit dem roten Pfeil angedeutet, bis 10 Pixel Abstand zum rechten Rand geht. margin-right:10px hilft allerdings nicht!

ich verstehe meist nicht, wieso soviel mit position:absolute gearbeitet wird?! Es handelt sich nach meinem Empfinden um ein ganz normales 2-spaltiges Layout. Wie man dazu kommt? http://de.selfhtml.org/css/layouts/mehrspaltige.htm#zweispaltig

Mit freundlichen Grüßen,
André

Hi! Habs jetzt mal umgearbeitet:
.menu
{
position:absolute;
top:150px;

float: left; width: 180px;
border: 1px dashed silver;
}

.haupt
{
position:absolute;
top:150px;
margin-left: 200px;

border: 1px dashed silver;
min-width: 16em;
}

Das mit dem absolute kommt daher, dass darüber noch ein Bild eingefügt wurde, ich das ganze also 150 px nach unten verschoben beginnen lassen muss.
Aber egal.
Ich hätte noch ne andere Frage: Wenn ich jetzt das ganze mache und einen langen Text einfüge, dann geht der Bereich nach rechts hinaus, obwohl er das nicht sollte. Wie kann ich das verhindern??

[Zeromancer]

Hallo Thomas,

ich verstehe meist nicht, wieso soviel mit position:absolute gearbeitet wird?! Es handelt sich nach meinem Empfinden um ein ganz normales 2-spaltiges Layout. Wie man dazu kommt? http://de.selfhtml.org/css/layouts/mehrspaltige.htm#zweispaltig

Das mit dem absolute kommt daher, dass darüber noch ein Bild eingefügt wurde, ich das ganze also 150 px nach unten verschoben beginnen lassen muss.

Wenn du dem Bild per CSS die Eigenschaft display:block zuweist oder das Bild in ein Blockelement packst, dann kannst du die Positionierungsangaben unterlassen und die Elemente ihrem normalen Fluss lassen.

Bsp:

  
<p><img src="" width="" height="150" alt="" title="" /></p>  
<div id="left">Text</div>  
<div id="right">Text</div>  

CSS
****

  
div#left {  
  width:12em;  
  float:left;  
}  
div#right {  
  margin-left:13em;  
  margin-right:3em;  
}  

Mit freundlichen Grüßen,
André

[Thomas]

.menu
{
width:14%;
float:left;

}

.haupt
{

width:80%;
float:right;

}

Hab jetzt eins gefunden, das das macht was ich will, aber jetzt muss ichs noch nach unten verschieben, oben stand ja was von display:block; ,aber das geht nicht, andere Vorschläge, wie ich die Boxen 150 px nach unten bring auch ohne position:absolute, weil sonst das ganze nicht mehr geht??

Thomas

[Detlef G.]

Hallo Thomas

Hab jetzt eins gefunden, das das macht was ich will, aber jetzt muss ichs noch nach unten verschieben,

Wozu?
Du schriebst, darüber soll noch ein Bild.
Woher kommt dieses?
Wie kommt das dahin?
Wo steht dieses Bild in deinem Quelltext?

Wenn du dieses Bild nicht mittels position:absolute irgendwo auf die Seite
klebst, dann nimmt es sich selbst den Platz, den es dort braucht.

oben stand ja was von display:block;

Für das Bild!

aber das geht nicht, andere Vorschläge, wie ich die Boxen 150 px nach unten bring auch ohne position:absolute, weil sonst das ganze nicht mehr geht??

Wie baust du deine Seite auf?
Erstmal ein paar Elemente irgendwo auf die Seite kleben, dann noch eins,
dann wieder eins, aber schön Platz lassen, für Elemente, die überhaupt noch
nicht vorhanden sind?

Bevor(!) du die präzise Seitengestaltung mittels CSS angehst, sollten die
Inhalte _alle_ im HTML-Code bereits vorhanden sein!

Alles andere ist relativ sinnlos!

Auf Wiederlesen
Detlef

[Thomas]

.header {
position:absolute;
top:0px;
right:0px;

}

So bau ich das Bild ein!

Thomas

[Detlef G.]

Hallo Thomas

.header {
position:absolute;
top:0px;
right:0px;

}

So bau ich das Bild ein!

Warum?
Absolute Positionierung sollte Sonderfällen vorbehalten bleiben, wenn man
genau weiß, was man tut.
Eine Webseite ist doch keine Kollage!

Auf Wiederlesen
Detlef

[Zeromancer]

Hallo Thomas,

.header {
position:absolute;

So bau ich das Bild ein!

warum schaust du nicht mal in den Beispielen bei Selfhtml?

  
<!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">  
<head>  
<title>Testseite</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />  
<meta http-equiv="Content-Style-Type" content="text/css" />  
<style type="text/css">  
<!--  
body {  
  margin:0px;  
  padding:0px;  
}  
p {  
  border:solid 1px #f00;  
}  
#left {  
  width:13em;  
  float:left;  
  border:solid 1px #0f0;  
}  
#right {  
  margin:0 3em 0 14em;  
  border:solid 1px #00f;  
}  
-->  
</style>  
</head>  
  
<body>  
  
<p><img src="" width="100%" height="150" alt="" /></p>  
  
<div id="left">  
<ul>  
<li><a href="">Link 1</a></li>  
<li><a href="">Link 2</a></li>  
</ul>  
</div>  
<div id="right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque metus. Maecenas quam. Aliquam ac neque. Vestibulum faucibus ipsum vel tortor. Integer elit pede, rhoncus at, laoreet ut, volutpat sed, tellus. Fusce interdum feugiat odio. Ut felis mi, laoreet nec, molestie non, congue quis, lectus. Etiam adipiscing. Proin lorem massa, molestie quis, dictum a, volutpat ac, eros. Vivamus vitae tellus non eros tincidunt vestibulum. Integer augue magna, tincidunt eget, tincidunt sit amet, vehicula consectetuer, tortor. Mauris viverra. Etiam dapibus odio eget sapien.  
  
Etiam euismod, velit eu rutrum feugiat, lectus est mollis risus, vitae lacinia urna nunc et nisl. Praesent hendrerit pellentesque leo. Etiam semper, nibh eget molestie lacinia, ligula elit dapibus mi, sed posuere sem est mollis nisl. Aenean vehicula ultricies mi. Sed neque pede, bibendum ut, ultricies nec, viverra non, nisl. Phasellus tempor. Vestibulum tincidunt nunc faucibus dui accumsan auctor. Donec eu felis. Nullam felis neque, congue non, rhoncus vitae, faucibus quis, tellus. Nulla interdum tristique magna.  
</div>  
  
</body>  
</html>  

Dies _könnte_ ein erster Ansatz werden. Statt des <p> um das img-Element kannst du das Bild auch selbst als Blockelement mittels display:block setzen.

Mit freundlichen Grüßen,
André

[Thomas]

.header {
position:absolute;
top:0px;
right:0px;

}

So bau ich das Bild ein!

Thomas