Autor |
Nachricht |
-
der-pott
|
06.06.2009 um 14:58 (UTC) Titel: Positionierung der rechten Boxen (Design: Profi-CSS) |
|
|
Hallo,
Ich habe ein Problem mit meinen rechten Boxen, ich kriege diese irgendwie überhaupt nicht positioniert. Leider weiß ich (wie sollte es auch anders sein^^) nicht, woran dies liegen könnte.
Hier mein Code:
Text über dem Design:
Code: <div id="design">
<div style="text-align: center;"><img src="" alt="" /></div>
<div id="Mein_Bild"></div>
<div id="Nav_Allgemein"><div style="text-align: center;font-family:Arial;font-size:13px;font-weight:bold;">
<br/><br/>
<a href="http://www.der-pott.de.tl/Startseite.htm">Startseite</a>
<br/>
<a href="http://der-pott.de.tl/-Ue-ber-Uns.htm">Über Uns</a>
<br/>
<a href="http://der-pott.de.tl/Das-Ruhrgebiet.htm">Das Ruhrgebiet</a>
<br/>
<a href="http://der-pott.de.tl/Die-Stadt-Essen.htm">Die Stadt Essen</a>
<br/>
<a href="http://der-pott.de.tl/Fr.ue.hlingsbilder.htm">Frühlingsbilder</a>
<br/>
<a href="http://der-pott.de.tl/Das-Essener-ABC.htm">Das Essener ABC</a>
<br/>
<a href="http://der-pott.de.tl/Kultur-in-Essen.htm">Kultur in Essen</a>
<br/>
<a href="http://der-pott.de.tl/Erholungsm.oe.glichkeiten.htm">Erholungsmöglichkeiten</a>
<br/>
<a href="http://der-pott.de.tl/Sport-in-Essen.htm">Sport in Essen</a>
</div></div>
<div id="Nav_Service"><div style="text-align: center;font-family:Arial;font-size:13px;font-weight:bold;">
<br/><br/>
<a href="http://der-pott.de.tl/Kontakt.htm">Kontakt</a>
<br/>
<a href="http://der-pott.de.tl/G.ae.stebuch.htm">Gästebuch</a>
<br/>
<a href="http://der-pott.de.tl/Updates.htm">Updates</a>
<br/>
<a href="http://der-pott.de.tl/Partnerseiten.htm">Partnerseiten</a>
<br/>
<a href="http://der-pott.de.tl/Unser-Service.htm">Unser Service</a>
<br/>
<a href="http://der-pott.de.tl/Bildaufnahme.htm">Bildaufnahme</a>
</div></div>
<div id="Nav_Rechtliches"><div style="text-align: center;font-family:Arial;font-size:13px;font-weight:bold;">
<br/><br/>
<a href="http://der-pott.de.tl/Impressum.htm">Impressum</a>
<br/>
<a href="http://der-pott.de.tl/Haftungsausschluss.htm">Haftungsausschluss</a>
</div></div>
<div id="Content_Bottom">©2009 by "Der-Pott.de.tl" | Optimiert für Mozilla Firefox (ab Vers. 2) | Alle Rechte vorbehalten</div></div>
<div id="Rechts">
<div id="sidebar"><br/><br/>Wollt ihr unser Partner werden?!<br/>Dann meldet <br/>euch doch einfach bei <br/><a href="http://www.der-pott.de.tl/Kontakt.htm">Kontakt</a> oder unter unserer Email-Adresse der.pott[at]googlemail.com</div></div>
</div>
<div id="Under_Bottom"></div></div>
</div>
CSS-Code ohne Style-Tags:
Code: #extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
h1#title{display: none;}
#pre_header {display: none;}
#pre_content {display: none;}
div.header{display: none;}
#post_header {display: none;}
#nav_container {display:none;}
#design{
width: 974px;
background-color: transparent;
margin: 0 auto;}
a:link {
color: #000000;
font-size: 13px;
text-decoration: none;}
a:visited {
color: #000000;
font-size: 13px;
text-decoration: none;}
a:hover {
color: #4993bb;
font-size: 13px;
text-decoration: none;}
body {
background-image:url(http://img.webme.com/pic/d/derpott-test/body_hintergrund.png);}
*{ padding: 0; margin: 0; }
#Mein_Bild {
margin: 0 auto;
width: 980px;
height:500px;
background-image:url();}
#header_container {
position: absolute;
left: 50%;
margin-left:-490px;
top:40px;
width: 980px;
height:130px;
background-color:transparent;
background-image:url(http://img.webme.com/pic/d/der-pott/header2.png);
color:#FFFFFF;
font-size:13px;
border: 1px solid #FFFFFF;}
#content {
position: absolute;
left: 50%;
top: 171px;
margin-left:-313px;
width: 598px;
height:710px;
padding:10px;
color: #000000;
font-family:Arial;
font-size:13px;
background-color:#FFFFFF;
background-image:url();
border: 1px solid #FFFFFF;
overflow:auto;}
h2#title span{
font-family:Arial;
font-size:16px;
font-weight:bold;
color:#4993bb;}
#Nav_Allgemein{
position:absolute;
height:190px;
width:165px;
background-image:url(http://img.webme.com/pic/d/der-pott/nav_allgemein.png);
top:171px;
border:0px;
background-color:transparent;
background-repeat:no-repeat;
float:left;
}
#Nav_Service{
position:absolute;
height:141px;
width:165px;
background-image:url(http://img.webme.com/pic/d/der-pott/nav_service.png);
background-color:#transparent;
background-repeat:no-repeat;
top:364px;
border:0px;
float:right;}
#Nav_Rechtliches{
position:absolute;
height:78px;
width:165px;
background-image:url(http://img.webme.com/pic/d/der-pott/nav_rechtliches.png);
background-color:transparent;
background-repeat:no-repeat;
top:510px;
border:0px;
float:left;}
#Rechts{
position:absolute;
background-color:transparent;
border:0px;
margin-left:920px;
top:171px;
height:500px;
width:198px;}
#counter{
position: absolute;
left: 50%;
top:373px;
width: 172px;
height:100px;
font-family: Arial;
text-align:center;
color:#000000;
font-size:12px;
border: 0px;
background-color:transparent;
background-image:url(http://img.webme.com/pic/d/der-pott/counter.png);
background-repeat:no-repeat;
float:right;;}
#sidebar{
position:absolute;
padding:10px;
font-family:Arial;
height:190px;
width:180px;
background-image:url(http://img.webme.com/pic/d/der-pott/partner.png);
top:0px;
font-size:13px;
border:0px;
background-color:transparent;
background-repeat:no-repeat;
margin:27px;
float:right;}
#Content_Bottom{
font-size:12px;
left:50%;
margin-left:-313px;
top:903px;
width:620px;
height:28px;
border:0px;
background-image:url(http://img.webme.com/pic/d/der-pott/footer.png);
position:absolute;
background-color:transparent;
text-align:center;
font-family:Arial;}
#Under_Bottom{
visibility:hidden;
left:50%;
margin-left:-490px;
top:944px;
width:980px;
height:29px;
border:0px solid #FFFFFF;
background-image:url();
position:absolute;}
Ich hoffe, ihr könnt mir helfen! ______________ Gruß,
Modgar
Zuletzt bearbeitet von der-pott am 06.06.2009, 15:59, insgesamt einmal bearbeitet
|
|
↑
|
|
|
-
nico1970
|
|
↑
|
|
|
-
der-pott
|
06.06.2009 um 15:08 (UTC) Titel: |
|
|
Der Befehl "Padding" ist doch soweit ich weiß für das Element innerhalb dieser Klasse gemeint (also z.B. Text), oder irre ich mich da? ______________ Gruß,
Modgar
|
|
↑
|
|
|
-
nico1970
|
06.06.2009 um 15:14 (UTC) Titel: |
|
|
Oh sorry,hab ich ganz vergessen
Du kannst die Befehle mit padding-top oder marginwerten positionieren:
Code: padding-top:
padding-left:
padding-right:
margin: 0px 0px 0px 0px |
|
↑
|
|
|
-
kdl-design
|
06.06.2009 um 15:15 (UTC) Titel: |
|
|
schreibe mal bei sidebar folgendes dazu: margin-left: -100px ______________
Der Link führt nicht mehr zu KDL-Design sondern zu meinen neuen Projekt
|
|
↑
|
|
|
-
der-pott
|
06.06.2009 um 15:26 (UTC) Titel: |
|
|
Irgendwie funkltionieren beide Tipps nicht...
Ich steh' echt aufm Schlauch ______________ Gruß,
Modgar
|
|
↑
|
|
|
-
der-pott
|
07.06.2009 um 19:36 (UTC) Titel: |
|
|
*PUSH*
es ist ziemlich wichtig; hat noch jemand andere Vorschläge? ______________ Gruß,
Modgar
|
|
↑
|
|
|
-
poddi
|
07.06.2009 um 19:57 (UTC) Titel: |
|
|
Positionieren der Sidebar geht mit Margin-Werten (Padding ist Innenabstand^^)
Also gib folgendes noch in deinen sidebar code:
Zitat: margin: 0px 0px 0px 0px;
Jetzt nur noch die Zahlen ändern!
ERKLÄRUNG:
Die 1. Zahl ist Außenabstand von OBEN
Die 2. Zahl ist Außenabstand von RECHTS
Die 3. Zahl ist Außenabstand von UNTEN
Die 4. Zahl ist Außenabstand von LINKS
Ach uznd vergiss das ";" nicht am ende^^
Und hol dafür erst mal den marginwert "margin:27px;" aus dem code^^ |
|
↑
|
|
|
|