Design mit margin-right fust nicht

Samhain · 14. Mai 2010

Hallo alle miteinander

Ich Wollte das Design meiner Webseite „dynamisch“ haben und habe da auch was geschrieben aber das fust nicht so wie ich mir das vorstelle ich denke das es an dem Befehl „margin-right“ liegt.

so solte es aussehen:
[Blockierte Grafik: http://666kb.com/i/bj78cz2ht0vx2mvxd.gif]

und nicht so:
<a class="postlink" href="http://grower.pytalhost.org/index.php">http://grower.pytalhost.org/index.php</a>

hir ist der qweltext:

<div style="width:100%;
height:100%;
border:1px red solid"
>
<div style="position:absolute;
width:100%;
height:125px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
overflow:auto;
border:1px green solid"
>
Kopfbereich
</div>

<div style="position:absolute;
width:150px;
height:100%;
margin-top: 145px;
margin-left: 10px;
margin-bottom: 10px;
overflow:auto;
border:1px green solid"
>
Steuerung
</div>

<div style="position:absolute;
width:100%;
height:100%;
margin-top: 145px;
margin-left: 170px;
margin-right:10px;
margin-bottom: 10px;
overflow:auto;
border:1px green solid"
>
Inhalt
</div>
</div>

Ich danke schonmall für die antworten
mfg Samhain

Sarkkan · 14. Mai 2010

Mit margin erzeugst du einen unsichtbaren Rand um die Objekte.
margin-left erzeugt einen nach Links, margin-right einen nach Rechts,..
[Blockierte Grafik: http://i271.photobucket.com/albums/jj147/Masterfox93/Div2.jpg]
(Der Rote bereich ist der berreich, wo der Inhalt rein kommt)
Nun kann man auch negative margins verwenden:
[Blockierte Grafik: http://i271.photobucket.com/albums/jj147/Masterfox93/Div1.jpg]

Hoffe man erkennt, was ich sagen will, hatte grade lust zu malen xDD

Naja, kurz, benutze negative( -X px) margin-rights und margin-bottom um das so einzupassen.
Kannst du dir ausrechnen^^ um das unten einzupassen:
margin-top[Kopf] + [Kopf] + margin-top[Strg. o. Inhalt]
10px + 125px + 145px = 280px
Das trägst du nun bei margin-bottom in der Steuerung/Inhalt als negative Zahl ein

Samhain · 14. Mai 2010

Danke schonmall
aber ich kann dem Werte geben bis zum umfallen aber die Werte werden munter ignoriert sie und es verändert sich rein Garnichts
:?

maulepan · 14. Mai 2010

naja. ist doch korrekt dargestellt.

margin-left beträgt 170 pixel, und die breite 100%. Das das ganze dann rechts übersteht ist doch klar.

Am besten du lässt das mit der absoluten positionierung besser sein. Das bringt nur verwirrung.

Elroy · 17. Mai 2010

Hallo.

Sarkkan
Das man mit margin einen unsichtbaren Rand erzeugt ist mir völlig neu. Ich habe damit immer Außenabstände angegeben.

Samhain
Dir fehlen anscheined wichtige Grundlagen.

Dein Layout kannst du ganz ohne absolute positionierungen erstellen.

Lies dir das mal durch, dort wird gezeigt wie man es richtig macht: http://www.css4you.de/wslayout1/ex0008.html

Und bitte pack deine Seite doch wenigstens in ein HTML Grundgerüst.
Anzeigefehler können auch dadurch enstehen das der Browser sich im Quirksmodus befindet.

Gruss
Elroy

AnTrOn · 17. Mai 2010

also mein design für sowas hat einen anderen quelltext
und das funktioniert auch
kannst ja den von unten übernehmen

hier:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>




<style type="text/css">
<!--
* {
margin:0;
padding:0;
}




#wrapper {
width:904px;
padding:10px;
margin:10px auto;
border:1px solid #dfdfdf;
text-align:center;
}
#topHeader {
height:64px;
margin-bottom:10px;
border:1px solid #dfdfdf;
background:#f5f5f5;
padding:10px;
text-align:left;
}
#leftColumn {
float:right;
width:650px;
padding:10px 10px 50px 10px;
border:1px solid #dfdfdf;
background:#f5f5f5;
text-align:left;
}




#rightColumn {
float:left;
width:200px;
padding:10px 10px 50px 10px;
border:1px solid #dfdfdf;
background:#f5f5f5;
text-align:left;
}




.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}




.clearfix {display:inline-block;}
* html .clearfix {height:1%;}
.clearfix {display:block;}




-->
</style>




</head>
<body>




<div id="wrapper" class="clearfix">
     <div id="topHeader">

     </div>
	 <div id="rightColumn">

     </div>
     <div id="leftColumn" class="clearfix">

     </div>
</div>




</body>
</html>

Alles anzeigen

Design mit margin-right fust nicht

Jetzt mitmachen!

Teilen