Suche im Forum:
Suchen


Autor Nachricht
Beitrag13.03.2010 um 00:28 (UTC)    
Titel: CSS-Design zentrieren
Antworten mit Zitat
Vieleicht hat noch jemand eine Idee, ich habe schon alle Codes ausprobiert die ich in den recht zahlreichen Beiträgen darüber finden konnte und bekomm es einfach nicht hin mein Design so zu zentrieren das es auch von oben und unten her in der Bildschirmmitte sitz . Ich vermute mal die "Ebenen" die ich gemacht habe (z-index:2Wink haben etwas damit zu tun!

mein Code bei CSS Code ohne Style-Tags:
Code:
#header_container {display:none}
h1#header {display:none}
#pre_header {display:none}
#pre_content {display:none}
#post_header {display:none}
#post_content {display:none}
#title span {display:none}
#sidebar_heading {display:none}
#extraDiv2 {display:none}
#extraDiv3 {display:none}
#extraDiv4 {display:none}
#extraDiv5 {display:none}
#extraDiv6 {display:none}
#nav_heading {display:none}
#nav_container {display:none}
ul#nav {display:none}
li.nav_element {display:none}


body {
background-image: url(http://img.webme.com/pic/e/emptystreets/bckgrnd.png)}


#container {
position: absolute;
left: 50%;
top: 10px;
margin-left: -623px;
width: 1246px;
height: 513px;
background-image: url(http://img.webme.com/pic/e/emptystreets/dsgn.png)}


#content {
position: absolute;
left: 50%;
top: 70px;
margin-left: -455px;
width: 525px;
height: 321px;
font-family:arial;
font-size:12px;
color: #000000;
padding-left:3px;
padding-right:3px;
overflow: auto;
background-color: #c0c0c0;
border: 2px solid #333333}

#content a {
font-family:arial;
font-size:12px;
color: #808080;
text-decoration: none}

#content a:hover {
font-family:arial;
font-size:12px;
color: #ffffff;
text-decoration: none}


#sidebar_container {
position: absolute;
left: 50%;
top: 70px;
margin-left: +100px;
width: 245px;
height: 321px;
font-family:arial;
font-size:12px;
color: #000000;
padding-left:3px;
padding-right:3px;
overflow: auto;
background-color: #c0c0c0;
border: 2px solid #333333}

#sidebar_container a {
font-family:arial;
font-size:12px;
color: #808080;
text-decoration: none}

#sidebar_container a:hover {
font-family:arial;
font-size:12px;
color: #ffffff;
text-decoration: none}


#below_content {
position: absolute;
left: 50%;
top: 420px;
margin-left: +140px;
width: 200px;
height: 20px}


#counter {
position: absolute;
left: 50%;
top: 229px;
margin-left: -591px;
width: 50px;
height: 42px;
font-family:arial;
font-size:9px;
font-weight: bold;
text-decoration: none;
padding-top:18px;
padding-left:10px;
background-image: url(http://img.webme.com/pic/e/emptystreets/cntr.png)}


#sidebar_head {
position: absolute;
z-index:2;
left: 50%;
top: 60px;
margin-left: +100px;
width: 252px;
height: 18px;
font-family:arial;
font-size:15px;
color:#ffffff;
font-weight: bold;
text-decoration: none;
padding-top:2px;
padding-left:3px;
background-color: #333333}


#es_logo {
position: absolute;
z-index:2;
left: 50%;
top: 10px;
margin-left: -420px;
width: 271px;
height: 50px;
background-image: url(http://img.webme.com/pic/e/emptystreets/es_lg_hvr.png)}

#es_logo a {
display: block;
width: 271px;
height: 50px;
background-image: url(http://img.webme.com/pic/e/emptystreets/es_lg.png)}

#es_logo a:hover {
background-image: url(http://img.webme.com/pic/e/emptystreets/es_lg_hvr.png)}







#up_navi{
position: absolute;
z-index:2;
left: 50%;
top: 60px;
margin-left: -455px;
width:532px;
height:20px;
font-family:arial;
font-size:13px;
text-decoration: none;
padding-left:3px;
background-color:#333333;
border: 0px solid #000000;}


#up_navi a {
font-family:arial;
font-size:13px;
text-decoration: none;
text-align: left;
padding-left:5px;
color:#C6BA8A;
background-color:;
background-image:url();
border: 1px solid #C6BA8A;}

#up_navi a:hover{
font-family:arial;
font-size:13px;
text-decoration: none;
color: #2D261C;
background-color:#C6BA8A;
background-image:url();
border: 1px solid #FFFFFF;}


#down_navi{
position: absolute;
z-index:2;
left: 50%;
top: 520px;
margin-left: -400px;
width:600px;
height:15px;
font-family:arial;
font-size:13px;
text-decoration: none;
background-color:;
border: 1px solid #000000;}


#down_navi a {
font-family:arial;
font-size:13px;
text-decoration: none;
text-align: left;
padding-left:5px;
color:#C6BA8A;
background-color:;
background-image:url();
border: 1px solid #C6BA8A;}

#down_navi a:hover{
font-family:arial;
font-size:13px;
text-decoration: none;
color: #2D261C;
background-color:#C6BA8A;
background-image:url();
border: 1px solid #FFFFFF;}









#login{
position: absolute;
z-index:2;
left: 50%;
top: 55px;
margin-left: +380px;
width:54px;
height:40px;
background-image:url(http://img.webme.com/pic/e/emptystreets/lgn_hvr.png);
border: 0px solid #000000;}


#login a {
display: block;
width: 54px;
height: 40px;
font-family:arial;
font-size:13px;
text-decoration: none;
text-align: left;
padding-left:0px;
color:#C6BA8A;
background-color:;
background-image:url(http://img.webme.com/pic/e/emptystreets/lgn.png);
border: 0px solid #C6BA8A;}

#login a:hover {
color:;
background-color:;
background-image:url(http://img.webme.com/pic/e/emptystreets/lgn_hvr.png)}


#mp3_text {
position: absolute;
z-index:2;
left: 50%;
top: 452px;
margin-left: +140px;
width: 173px;
height: 21px;
font-family:arial;
font-size:13px;
text-decoration: none;
padding-top:4px;
color:#000000;
background-image: url(http://img.webme.com/pic/e/emptystreets/mp3_txt.png);}

#mp3_text a {
font-family:arial;
font-size:13px;
text-decoration: none;
color:#000000}

#mp3_text a:hover {
font-family:arial;
font-size:13px;
text-decoration: none;
color:#ffffff}




#mp3_i {
position: absolute;
z-index:2;
left: 50%;
top: 452px;
margin-left: +315px;
width: 25px;
height: 25px;
color:#000000;
background-image: url(http://img.webme.com/pic/e/emptystreets/mp3_i_hvr.png);}

#mp3_i a {
display: block;
width: 25px;
height: 25px;
text-decoration: none;
color:#ffffff;
background-image: url(http://img.webme.com/pic/e/emptystreets/mp3_i.png);}

#mp3_i a:hover {
text-decoration: none;
color:#ffff00;
background-image: url(http://img.webme.com/pic/e/emptystreets/mp3_i_hvr.png);}



Text über dem Design:
Code:
<div id="up_navi">
<a href="http://www.emptystreets.de/Seite-3.htm" target="_self" >Seite 33333333</a><a href="http://www.emptystreets.de/Seite-2.htm" target="_self">Seite 2</a></div>

<div id="down_navi">
<a href="http://www.emptystreets.de/Seite-3.htm" target="_self" >Impressum</a><a href="http://www.emptystreets.de/Seite-3.htm" target="_self" >Kontakt</a><a href="http://www.emptystreets.de/Seite-3.htm" target="_self" >FAQ</a><a href="http://www.emptystreets.de/Seite-2.htm" target="_self">Seite 2</a></div>

<div id="login"><a href="http://www.emptystreets.de/Login-Seite.htm" target="_self" ></a></div>

<div id="mp3_i"><a href="http://www.emptystreets.de/Login-Seite.htm" target="_self" ></a></div>

<div id="mp3_text"><marquee scrollamount="2"><strong><span style="font-size: small;">First I Killed The Memories - Break These Walls   </span></strong><a target="_blank" href="http://myspace.com/fiktm"><strong>MYSPACE.COM/FIKTM</strong></a></marquee></div>

<div id="es_logo"><a href="http://www.emptystreets.de/Home.htm" target="_self" ></a></div>



<div id="sidebar_head">Daily World</div>


Ich würde mich sehr freuen wenn jemand Hilfe für mich hat!!
↑
Beitrag13.03.2010 um 08:33 (UTC)    
Titel:
Antworten mit Zitat
Gebe deinen Container (Wo dein Hintergrundbild positioniert wird) einfach einen
Prozentwert (zum Beispiel top: 25%), wodurch es dann weiter nach unten rutscht,
bei jeder Auflösung gleich.

Jedoch musst du dann auch 1-2 Änderung vornehmen, denn einige sind fest
positioniert.
______________
Spendet jetzt für den User -Name entfernt - , damit er sich ein Duden kaufen kann, da seine Schreibkünste die einens 11-jährigen sehr stark ähneln. Smile
↑
Beitrag13.03.2010 um 13:16 (UTC)    
Titel:
Antworten mit Zitat
Danke ich versuch das mal und geb dan hier bescheid wie es geklabt hat!!
↑
Beitrag13.03.2010 um 13:40 (UTC)    
Titel:
Antworten mit Zitat
Also ist von der Idee her ganz gut das Problem ist das meine selbst definierten Klassen natürlich nicht mit machen... der Content und sidebar_container orientiert sich ja an dem container aber der ganze rest orientiert sich an oben und deshalb würden bei Verschiedenen Auflösungen die Klassen unterscheidlich auf dem Hintergrund (container) angezeigt! Gibt es eine möglichkeit den selbst definierten Klassen zu sagen das sie sich an dem container ausrichten sollen??
↑
Beitrag13.03.2010 um 15:02 (UTC)    
Titel:
Antworten mit Zitat
Hab jetzt selber noch etwas ausprobiert und mit folgendem Erfolg gehabt!

Wie oben beschrieben: mit top: 15%; (oder anderen Wert) den gesamten Bereich ein wenig in die Mitte setzen und dann mit margin-top: +20px;
(oder anderen Wert) ...wie gewohnt ausrichten. Das ganze muss dann leider für jede Klasse gemacht werden... immer selben % Wert und dann mit margin ausrichten!


Vieleicht kann es ja jemand anderen von euch noch weiter helfen!!

Danke für den Tip mit den "top%"!

kann zu gemacht werden!!


Zuletzt bearbeitet von emptystreets am 13.03.2010, 16:03, insgesamt einmal bearbeitet
↑
Beiträge der letzten Zeit anzeigen:   
  • Seite 1 von 1

  •  
    • Gehe zu:  


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

© 2025 webme GmbH, Deutschland. Alle Rechte vorbehalten.