Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag20.01.2010 um 19:40 (UTC)    
Titel: CSS: Design Problem[erledigt]

Hallöle ..
bis jetz hats mich nich großartig gestört, aber langsam will ich es perfektionieren.
es geht um folgendes.
bei einer Auflösung UNTER 1024*768 ist mein Content verschoben bzw. die boxen rechts schieben sich auf den Content.

da ich irgendwie nich den blassesten schimmer habe und es bestimmt ansich nen klacks is bitte ich euch um hilfe.

EDIT: also fakt ist ,dass sich die mit absolute positionierten elemente NICHT der fenster größe anpassen, dh. bei kleinen auflösungen wandern sie nich mit in die mitte .. ( macht ja auch sinn ) -> sieht man sehr schön wenn man auf meine seite geht, und das browser-fenster mal bissl kleiner macht.
ich bin ratlos..


hier der css-code:

Code:
-->
</style>
<center>
<style type="text/css">
<!--

td[height="102"] {
position:absolute;
left:50%;
margin-left:-376px; }


/* Nullformatierung für alle Browser */
*{margin:0px; padding:0px; }

/* Hintergrund */
body {
background-color: #000000;
background-image: url();
}
a {outline:none;}
/* Hintergrund-Container mit Bild */
#container {
margin:auto;
width:980px;
background-image:url(http://i45.tinypic.com/ibg9wk.jpg);}

#header {
position:absolute;
top:100px;
left:50%;
margin-left:-490px;
width:978px;
height:200px;
bakground-image:url(http://i48.tinypic.com/260eplz.jpg);}

/* Das Textfeld */
#content {
margin-top: 252px;
left:50%;
margin-left:-242px;
padding-left:4px;
width: 602px;
height:auto;
min-height:650px;
color:#FFFFFF;
font-size:13px;
font-family:arial;
text-align:left;
background-color:#262626;
background-image:url();
z-index:1;
border: 0px solid #FFFFFF;}

/* Linkfarben im Textfeld content */
#content a{
color:#CCCCCC;}

#ticker {
position:absolute;
color:#FFFFFF;
padding-top:20px;
padding-left:35px;
top:301px;
left:50%;
margin-left:-490px;
width:978px;
height:75px;
background-image:url(http://i49.tinypic.com/2iu3o9l.jpg);
background-repeat:no-repeat;
}

#footer{
margin:auto;
width: 980px;
height:200px;
color:#FFFFFF;
font-size:10px;
font-family:arial;
text-align:left;
z-index:3;
background-color:#;
background-image:url(http://i49.tinypic.com/4zx2u.png);
background-repeat:no-repeat;}

/* Feld Navigation */
#nav_container {
position:absolute;
z-index:1;
left:50%;
margin-left:300px;
top:220px;
border:0px solid #FFFFFF;}

/* Hintergrund Navi-Buttons */
li.nav_element {
list-style-type: none;
position: relative;
margin-bottom:5px;}

/* Navi-Links */
li.nav_element a {
display: block;
width: 112px;
font-family:arial;
font-size:13px;
text-decoration: none;
text-align: left;
padding-left:5px;
color:#FFFFFF;
background-color:;
background-image:url();
border: 0px solid #C6BA8A;}

/* Hover-Effekt Navi-Links */
li.nav_element a:hover{
color: #FFFFFF;
background-color:#000000;
background-image:url();
border: 0px solid #FFFFFF;}

/* rechte Box */
#sidebar_container {
position: absolute;
left: 50%;
top: 540px;
margin-left: 186px;
width: 230px;
height: 100px;
color: #CCCCCC;
background-color:#333333;
font-size: 12px;
font-family: arial;
overflow: auto;
border: 0px solid #262626;}

#sidebar_container a{
color:#CCCCCC;
text-decoration: none;
}
#sidebar_container a:hover{
color:#FFFFFF;
text-decoration: underline;
}

#spalten {
color:#666666;
padding-top:15px;
font-size:10px;
text-align:left;
}

#spalten a{
text-decoration: none;
font-weight: bold;
cursor: pointer;
text-align:left;
color:#FFFFFF;}

#spalten a:hover{
color:#CCCCCC;
}

#spalten hr{
background-color: #666666; /* Farbe für Opera und Firefox */
color: #666666; /* Farbe für Internet Explorer (IE) */
border: 0;
height: 1px;
margin:auto;
}

#p2 {padding-left:20px;
text-align:left;}

/* Feld unter Textfeld */
#Pic {
position: absolute;
left: 50%;
top: 360px;
margin-left: 186px;
width: 230px;
height: 180px;
background-color:#333333;
color: #FFFFFF;
font-size: 12px;
font-family: arial;
text-align: center;
z-index:1;
border: 0px solid #FFFFFF;}

#banner {
position: absolute;
left: 50%;
top: 640px;
margin-left: 186px;
width: 230px;
height: 90px;
background-color:#333333;
color: #FFFFFF;
font-size: 12px;
font-family: arial;
text-align: center;
z-index:1;
border: 0px solid #FFFFFF;}


#Vote {
position: absolute;
left: 50%;
top: 730px;
margin-left: 186px;
width: 230px;
height: auto;
background-color:#333333;
color: #FFFFFF;
font-size: 12px;
font-family: arial;
text-align: center;
z-index:1;
border: 0px solid #FFFFFF;}

#Umfrage {
position: absolute;
left: 50%;
top: 850px;
margin-left: 186px;
width: 230px;
height: 150px;
background-color:#333333;
color: #FFFFFF;
font-size: 12px;
font-family: arial;
text-align: center;
z-index:1;
border: 0px solid #FFFFFF;}

#Umfrage a{
text-decoration:none;}

#Umfrage a:hover{
text-decoration:underline;}

#newsover {
width: 602px;
height: auto;
background-color:#333333;
color: #CCCCCC;
font-size: 12px;
font-family: arial;
text-align: left;
z-index:1;
border: 0px solid #FFFFFF;}

#newsover a{
text-decoration:none;
font-weight:bold;
}

#newsover a:hover{
text-decoration:none;}

#news {
height:auto;
color: #FFFFFF;
padding:5px;
font-size: 11px;
font-family: arial;
text-align: left;
border: 0px solid #FFFFFF;}

#news a{
color:#CCCCCC;
text-decoration:none;}

#news a:hover{
text-decoration:underline;}

#newsak {
color: #FFFFFF;
width:400px;
padding:5px;
font-size: 11px;
font-family: arial;
text-align: center;
height:auto;
background-color:#333333;
border: 0px solid #FFFFFF;}

#newsak a{
color:#CCCCCC;
text-decoration:none;}

#newsak a:hover{
text-decoration:underline;}

/* Felder die wir nicht benötigen */
h1#header {display:none;}
h2#title {display:none;}
#sidebar_heading{display:none;}
#counter{display:none;}
#nav_heading{display:none;}


bei text unter dem design sind die Div's aufgelistet, müssen die vllt in ne tabelle?!

danke im vorraus .
______________
||__Pure-gfx__||
{"..Design your own world.."}
!!!! AUFTRÄGE/WÜNSCHE BITTE NICHT PER PM! Bitte Über das Kontaktformular!!!!
Support gebe ich per PM!





Zuletzt bearbeitet von pure-gfx am 21.01.2010, 20:48, insgesamt 2-mal bearbeitet
Beitrag20.01.2010 um 20:40 (UTC)    
Titel:

Alle Divs, die dann auf der Seite angezeigt werden, sollten in "Text über dem Design".

Außerdem, wenn sich der Content verschiebt, so mach seine position: absolute
Zitat:

#content {
position: absolute;
margin-top: 252px;
left:50%;
margin-left:-242px;
padding-left:4px;
width: 602px;
height:auto;
min-height:650px;
color:#FFFFFF;
font-size:13px;
font-family:arial;
text-align:left;
background-color:#262626;
background-image:url();
z-index:1;
border: 0px solid #FFFFFF;}

Zitat:


Versuche dies mal Wink

Edit: Ahjo, dann war das wohl eine schlechte Idee von mir, 'tschuldige ^^
______________
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


Zuletzt bearbeitet von blutsegelbukaniere am 20.01.2010, 21:47, insgesamt einmal bearbeitet
Beitrag20.01.2010 um 20:47 (UTC)    
Titel:

danke für die antwort,
wenn ich es in text über dem design mache, verschwindet der footer..
und wenn ich conten mit absolute positioniere, richtet sich der footer doch nicht mehr an dem content aus :/
______________
||__Pure-gfx__||
{"..Design your own world.."}
!!!! AUFTRÄGE/WÜNSCHE BITTE NICHT PER PM! Bitte Über das Kontaktformular!!!!
Support gebe ich per PM!



Beitrag20.01.2010 um 20:49 (UTC)    
Titel:

Stimmt, der Footer muss auch in "Text unter dem Design", jedoch die anderen
Div's nicht. Der Footer muss immer an unterste Stelle sein, dafür auch
"Text unter dem Design" - dadurch ist er immer ganz unten.
______________
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
Beitrag20.01.2010 um 20:53 (UTC)    
Titel:

soo alle divs (ausser der footer) sind überm design + conten ist absolute positioniert, schau dir mal das ergebniss an Sad
______________
||__Pure-gfx__||
{"..Design your own world.."}
!!!! AUFTRÄGE/WÜNSCHE BITTE NICHT PER PM! Bitte Über das Kontaktformular!!!!
Support gebe ich per PM!



Beitrag21.01.2010 um 14:32 (UTC)    
Titel:

*kleiner Push + genuere Problem erklärung.*

also das problem ist schlicht und einfach, dass sich alle mit absolute positionierten elemente "verschieben" wenn man das browser-fenster kleiner macht. (die HPBK - Werbung auch) Das sollte ja nicht so sein.

der Content und der Footer und das Hintergrundbild(die streifen links und rechts) sind NICHT mit absolute positioniert und stehen "fest" im Bild dh. sie haben auch bei geringen Auflösungen einen Abstand zur rechten Bildschirmseite, die Anderen Elemente ( mit position:absolute; positioniert) schieben sich aus dem Bildschirm heraus. (probiern könnt ihr es wenn ich einfach das Browserfenster verkleinert.)

ich hoffe nun ist mein Problem bissl verständlicher.
______________
||__Pure-gfx__||
{"..Design your own world.."}
!!!! AUFTRÄGE/WÜNSCHE BITTE NICHT PER PM! Bitte Über das Kontaktformular!!!!
Support gebe ich per PM!



Beiträge der letzten Zeit anzeigen:   


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