Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag06.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
Beitrag06.06.2009 um 15:04 (UTC)    
Titel:

Hi,

in deinem Code steht bei der Klasse sidebar "padding:27px;",damit kannst die Boxen verschieben,musst sie nur richtig eingeben Wink
______________


Das Forum für alle die sich mit Computern auskennen und/oder sich über Konsolen und Spiele unterhalten wollen !
Beitrag06.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

Beitrag06.06.2009 um 15:14 (UTC)    
Titel:

Oh sorry,hab ich ganz vergessen Embarassed

Du kannst die Befehle mit padding-top oder marginwerten positionieren:

Code:
padding-top:
padding-left:
padding-right:
margin: 0px 0px 0px 0px
Beitrag06.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
Beitrag06.06.2009 um 15:26 (UTC)    
Titel:

Irgendwie funkltionieren beide Tipps nicht...
Ich steh' echt aufm Schlauch Sad
______________
Gruß,
Modgar

Beitrag07.06.2009 um 19:36 (UTC)    
Titel:

*PUSH*
es ist ziemlich wichtig; hat noch jemand andere Vorschläge?
______________
Gruß,
Modgar

Beitrag07.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^^
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de