Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 22
Seite [1] 2 >
GaHero


Poststar





Beiträge: 733
 # Thema - 03.03.2008 um 11:25 Uhr
Hallo,

ich habe die letzten Wochen damit verbracht mein Layout (was später zu unserem neuen Design werden soll) an die 3 gängisten Browser anzupassen. Es sieht jetzt auch schonmal auf allen Browsern (Op, FF, INet) gleich aus.
Auch die Validation hab ich bis auf einen kleineren Fehler beid er CSS Datei hinbekommen.
Allerdings bekomme ich den Aufbau des Layouts wie ich ihn gerne hätte nicht hin.

Wenn der Content zu lang wird, muss man selbstverständlich scrollen und der Footer verschiebt sich anch unten. Ich würde es aber gerne so haben, dass dann der Content scrollbar wird und der Footer, Header, Navi und das Menü an ihrem Platz bleiben. Ich hab schon verschiedene Sachen ausprobiert (zB: position: fixed, autoscroll), aber bei allen Versuchen hat irgendwas nicht geklappt. Deswegen suche ich hier mal Hilfe. Ich hoffe es findet sich jmd der da mehr Ahnung hat als ich...


Hier die beiden Dateien:
http://www.foeonline.de/templates/foe_modern/index.htm
http://www.foeonline.de/templates/foe_modern/css/foe_modern.css
Inaktiv
reVerB


Geekboy




Beiträge: 1237
 # Antwort: 1 - 03.03.2008 um 12:52 Uhr
Das ist ganz einfach. Du hast ja wahrscheinlich einen Komplett eigenen Container für den Content erstellt. Diesen muss du nur genau bestimmen. Das heißt Breite UND Höhe. Dann setzt du einfach noch mit ran die CSS-Eigenschaft overflow: auto; ! Dann wird der Content Scrollbar.

Du meinst das doch hoffentlich so wie bei mir: http://www.djreverb.de.gg


Zuletzt editiert von reVerB am 03.03.2008 um 12:53 Uhr (1x Editiert)
Inaktiv
|
GaHero
Thread-Ersteller


Poststar





Beiträge: 733
 # Antwort: 2 - 03.03.2008 um 14:13 Uhr
Ja, genau wie bei dir habe ich mir das vorgestellt.
Das Problem ist: Der Header hat wegen der Grafik eine feste Höhe (Footer ebenso). Der Content soll dann den kompletten Rest einnehmen. Was muss ich dann bei der Höhe hinschreiben?
Bei der Breite ist dasselbe Problem, da hier die Navibreite fest sein wird, aber die Breite des Content variable sein soll. Und soweit ich weiß, kann man ja bei Breite/Höhe keine Pixel und Prozentangaben kombinieren.


Inaktiv
|
reVerB


Geekboy




Beiträge: 1237
 # Antwort: 3 - 03.03.2008 um 14:49 Uhr
Das sollte mit den Prozentangaben auch gehen. Musst du mal probieren. Bin mir da nicht ganz sicher.


Inaktiv
|
GaHero
Thread-Ersteller


Poststar





Beiträge: 733
 # Antwort: 4 - 03.03.2008 um 15:34 Uhr
Irgendwie geht das nicht so... (Guck es dir selbst an: www.foeonline.de )

Hier nochmal der Code:
index.htm +-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{func:title}</title>
<meta http-equiv="Content-Type" content="text/html; charset={func:charset}" />
<!-- {clansphere:navmeta} -->
<link href="css/foe_modern.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/rss+xml" href="../../uploads/rss/news.xml" />
</head>
<body>

<div id="header"> <img src="http://www.foeonline.de/templates/foe_modern/images/header.jpg" alt="Header"/> </div>

<div id="navi-left">

<div class="navi-head"> Login: </div>
<div class="navi-body"> {users:navlogin} </div>
<div class="navi-head"> Banner: </div>
<div class="navi-body"> {banners:navlist} </div>
<div class="navi-head"> Stats: </div>
<div class="navi-body">

<span style="float:right">{count:navone}</span>
<a href="index.php?mod=count&amp;action=online">Online</a><br />
<span style="float:right">{count:navday}</span>
Heute<br />
<span style="float:right">{count:navmon}</span>
Monat<br />
<span style="float:right">{count:navall}</span>
<a href="index.php?mod=count&amp;action=stats">Gesamt</a>


</div>

</div>

<div id="navi-right">

<div class="navi-head"> Nextwars: </div>
<div class="navi-body"> {wars:navnext} </div>
<div class="navi-head"> Lastwars: </div>
<div class="navi-body"> {wars:navlist} </div>
<div class="navi-head"> Downloads: </div>
<div class="navi-body"> {files:navlist} </div>
<div class="navi-head"> Gallery: </div>
<div class="navi-body"> {gallery:navlist} </div>

</div>

<div id="menu">
<div id="rahmen">

<ul id="Navigation">

<li><a href="">Kontakt</a>
<ul>
<li><a href="index.php?mod=joinus&amp;action=new">Joinus</a></li>
<li><a href="index.php?mod=fightus&amp;action=new">Fightus</a></li>
<li><a href="index.php?mod=contact&amp;action=mail">Mailus</a></li>
<li><a href="index.php?mod=contact&amp;action=imprint">Imprint</a></li>
<li><a href="index.php?mod=clansphere&amp;action=about">Scriptinfo</a></li>
</ul></li>

<li><a href="">Service</a>
<ul>
<li><a href="index.php?mod=events&amp;action=calendar">Events</a></li>
<li><a href="index.php?mod=servers">Servers</a></li>
<li><a href="index.php?mod=users">Community</a></li>
<li><a href="index.php?mod=files">Downloads</a></li>
<li><a href="index.php?mod=replays">Replays</a></li>
<li><a href="index.php?mod=links">Links</a></li>
<li><a href="index.php?mod=quotes">Quotes</a></li>
<li><a href="index.php?mod=faq">Faq</a></li>
<li><a href="index.php?mod=articles">Articles</a></li>
<li><a href="index.php?mod=gallery">Gallery</a></li>
</ul></li>

<li><a href="">Clan</a>
<ul>
<li><a href="index.php?mod=members&amp;action=teams">Teams</a></li>
<li><a href="index.php?mod=members">Members</a></li>
<li><a href="index.php?mod=wars">Clanwars</a></li>
<li><a href="index.php?mod=awards">Awards</a></li>
<li><a href="index.php?mod=history">History</a></li>
<li><a href="index.php?mod=rules">Rules</a></li>
<li><a href="index.php?mod=links&amp;action=sponsors">Sponsors</a></li>
</ul></li>

<li><a href="">Gametools</a>

<ul>
<li><a href="">Gothic 3</a></li>
<li><a href="">Gothic 2</a></li>
</ul> </li>

<li><a href="">Main</a>

<ul>
<li><a href="index.php?mod=news&amp;action=recent">News</a></li>
<li><a href="index.php?mod=gbook">Gbook</a></li>
<li><a href="index.php?mod=board">Board</a></li>
<li><a href="index.php?mod=search">Search</a></li>
</ul> </li>

</ul>
</div>
</div>

<div id="content"> {func:show} </div>

<div id="footer">Design (0.0.2) by: <a href="http://www.foeonline.de">FoE</a> - Script (2008.0.0) by: <a href="http://www.clansphere.net">Clansphere</a> - optimiert f&uuml;r (1280x1024): <a href="http://www.mozilla.com">Firefox 2.0.0.11</a> / <a href="http://www.microsoft.com/germany/windows/products/winfamily/ie/">INet Explorer 7</a> / <a href="http://www.opera.com/">Opera 9.25</a> (oder h&ouml;her)</div>

</body>
</html>


css +-
body {
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt;
margin:0px;
text-align:center;
}
a:link, a:visited {
background-color:inherit;
color:#000000;
text-decoration:underline;
}
a:active, a:hover {
background-color:inherit;
color:#333333;
text-decoration:underline;
}
#header {
width: 100%;
height: 125px;
border-width: 0px;
border-style: solid;
border-color: #000000;
background-color: #aaaaaa;
text-align:center;
padding: 0px;
margin: 0px;
}
#navi-left {
float: left;
width: 150px;
border: 0px;
}
#navi-right {
float: left;
width: 150px;
border: 0px;
}
#menu {
background-color: #aaaaaa;
width: 70%;
float: right;
}
#content {
overflow: auto;
float: right;
border: 0px;
background-color: #dddddd;
padding: 0px;
width: 70%;
height: 50%;
}
#footer {
float: left;
border: 0px;
background-color: gray;
width: 100%;
margin: 0px;
padding:4px 0px 4px 0px;
}
.navi-head {
float: left;
width: 100%;
background-color: #cccccc;
padding: 4px 0px 4px 0px;
margin: 0px;
}
.navi-body {
width: 100%;
float: left;
background-color: #aaaaaa;
border: 0px;
list-style:none;
padding: 4px 0px 4px 0px;
margin: 0px;
}
div#Rahmen {
width: 100%;
padding: 5px;
border: 1px solid black;
background-color: silver;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation {
text-align: center;
}

ul#Navigation li {
list-style: none;
float: right;
position: relative;
}

* :first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: 25px; /* Abstand Button - unterer Rand Rahmen*/
}

ul#Navigation li ul {
position: absolute;
top: 23px;
left: -40px;
display: none; /* Unternavigation ausblenden */
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:silver; padding-bottom: 0px;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}

ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0px;
}

ul#Navigation a {
display: block;
width: 75px; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 5px;
text-decoration: none;
font-weight: bold;
border: 0px;
color: black;
background-color: #ccc;
}

ul#Navigation a:hover,ul#Navigation span,li a#aktuell {
color: black;
background-color: gray;
}
#debug {
height:150px;
margin-bottom:20px;
overflow:auto;
padding-left:4px;
width:100%;
text-align:left;
}
#errors {
color:#CC0000;
}
#sql {
color:#666666;
}
.h1 {
color: inherit;
font-size: 14pt;
font-weight: bold;
text-decoration: none;
}
.h2 {
color: inherit;
font-size: 16pt;
font-weight: normal;
text-decoration: none;
}
.h3 {
color: inherit;
font-size: 20pt;
font-weight: normal;
text-decoration: none;
}
.form {
background-color:#383838;
border:1px solid #000000;
color:#8D8D8D;
font-family:Verdana,Helvetica,sans-serif;
font-size:8pt;
margin:2px;
padding-left:3px;
}
.forum {
color:inherit;
margin:auto;
}
.headb {
background-color:#cccccc;
color:inherit;
font-weight:bold;
padding:4px;
text-align:left;
}
.bottom {
background-color:#aaaaaa;
color:inherit;
padding:4px 6px 4px 8px;
text-align:left;
}
.newshead {
background-color:#cccccc;
color:inherit;
font-size:11pt;
font-weight:bold;
padding:4px 6px 4px 8px;
text-align:left;
}
.left,.center,.right {
padding:1px;
}
.leftb,.centerb,.rightb {
background-color:#FFFFFF;
color:inherit;
padding:4px 6px 4px 8px;
}
.leftc,.centerc,.rightc {
background-color:#EEEEEE;
color:inherit;
padding:4px 6px 4px 8px;
}
.left,.leftb,.leftc {
text-align:left;
}
.center,.centerb,.centerc {
text-align:center;
}
.right,.rightb,.rightc {
text-align:right;
}
.quote {
background-color:#444444;
border:1px solid #C4C4C4;
color:inherit;
padding:6px;
text-align:left;
}
.error_message_box {
border: 2px solid #660000;
background:#FFD3D3;
font-weight: bold;
padding: 10px 0;
margin: 0 auto;
}

.calhead {
background-color:#555555;
color:inherit;
padding:4px 2px 4px 2px;
text-align:center;
}
.calday,.calevent,.caltoday, .calweek {
padding:4px 2px 4px 2px;
text-align:right;
}
.calday {
background-color:#666666;
color:inherit;
}
.calevent {
background-color:#444444;
color:inherit;
}
.caltoday {
background-color:#3E3E3E;
color:inherit;
}
.calweek {
background-color:#333333;
color:inherit;
}


Zuletzt editiert von GaHero am 03.03.2008 um 15:36 Uhr (1x Editiert)
Inaktiv
|
reVerB


Geekboy




Beiträge: 1237
 # Antwort: 5 - 03.03.2008 um 17:52 Uhr
Ach ja ! Das Problem. hatte ich auch mal. Musste es dann doch schweren herzens mit einer Tabelle lösen, weil ich in CSS keine Lösung gefunden habe. Das liegt daran, das er bei einer Breitenangabe in % immer vom gesammten Bildschirm bzw. dem Elternelement ausgeht. Wenn du mal genau hinschaust, ist der Content jetzt 70 % vom gesammten Bildschirm breit.

Leider war bei mir die einzige Lösung eine Tabelle.


Inaktiv
|
GaHero
Thread-Ersteller


Poststar





Beiträge: 733
 # Antwort: 6 - 04.03.2008 um 14:27 Uhr
Ich hab leider nicht so ganz viel Ahnung von Websiteentwicklung.
Was ist denn dan einer Tabelle anders, dass ich das oben genannte Problem mit der Kombination von Pixel und Prozentwerten nicht mehr habe?


Inaktiv
|
reVerB


Geekboy




Beiträge: 1237
 # Antwort: 7 - 04.03.2008 um 17:26 Uhr
Eine Tabellen Zelle kann eine andere nicht überlagern. Bei Containern geht das. Außerdem sind die Positionen Statisch. Das heißt die rechte Zelle ist Rechts und die linke links. Da kannst du dann sagen, das die linke Zelle z.B. 150px breit ist und die rechte 100%. Und schon geht die Seite über die Komplette Breite und die Rechte Zelle verschiebt sich nicht unter die linke.


Inaktiv
|
ichraffsnicht ClanSphere Team

Supporter
Supporter



Herkunft: Erdeborn bei Lutherstadt Eisleben
Beiträge: 3191
 # Antwort: 8 - 04.03.2008 um 19:15 Uhr
das proble ist darin, das für container in der höhe quasi keine grenzen gesetzt sind, somit ist die höhenangabe in % nur möglich wenn der container in einen anderen element verschachtelt ist. da das bodytag quasi unendlich ist.

mir fällt gerade ein, das du mit js den vieport (den im browser sichtbaren bereich) mit einer funktion auslesene kannst, also höhe und breite ermitteln... somit könntest du dann nen container machen, derdie mit js ermittelte größe der viewport hat, und somit den sichtbaren bereich komplett ausfülllt


------------------



Zuletzt editiert von X-R4Y ClanSphere Team am 04.03.2008 um 19:17 Uhr (1x Editiert)
Inaktiv
|
GaHero
Thread-Ersteller


Poststar





Beiträge: 733
 # Antwort: 9 - 05.03.2008 um 10:50 Uhr
Ok, ich glaube langsam nähern wir uns der Lösung...
Ich hab das Layout jetzt nochmal schnell mit Tabellen aufgezogen:
Script fehlt noch, ich wollt das jetzt erstmal so hinbekommen. Navi fehlt auch noch, die hab ich weggelassen, da es mit der festen Breiten jetzt klappt, also das kein Prob mehr sein dürfte.
Allerdings passt er den Content immer noch nicht der restlichen Höhen an (obwohl 100%).

Hochgeladen hab ich es auch direkt mal: http://www.foeonline.de/testlayout/

index.htm +-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{func:title}</title>
<!-- <meta http-equiv="Content-Type" content="text/html; charset={func:charset}" />
{clansphere:navmeta} -->
<link href="css/foe_modern.css" rel="stylesheet" type="text/css" />
<!-- <link rel="alternate" type="application/rss+xml" href="../../uploads/rss/news.xml" /> -->
</head>
<body>

<table border="1" cellpadding="0" cellspacing="0" width="100%" height="100%">

<tr>

<td colspan="3" id="header"> <img src="http://www.foeonline.de/templates/foe_modern/images/header.jpg" alt="Header"/> </td>

</tr>

<tr>

<td rowspan="2" style="width:200px" id="navi-left">

<table border="1" cellpadding="0" cellspacing="0" width="125" height="100%">

<tr>
<td></td>
</tr>

<tr>
<td></td>
</tr>

<tr>
<td></td>
</tr>

</table>

</td>
<td rowspan="2" style="width:200px" id="navi-right">

<table border="1" cellpadding="0" cellspacing="0" width="125" height="100%">

<tr>
<td></td>
</tr>

<tr>
<td></td>
</tr>

<tr>
<td></td>
</tr>

</table>

</td>
<td id="menu">

<div id="rahmen">

<ul id="Navigation">

<li><a href="">Kontakt</a>
<ul>
<li><a href="index.php?mod=joinus&amp;action=new">Joinus</a></li>
<li><a href="index.php?mod=fightus&amp;action=new">Fightus</a></li>
<li><a href="index.php?mod=contact&amp;action=mail">Mailus</a></li>
<li><a href="index.php?mod=contact&amp;action=imprint">Imprint</a></li>
<li><a href="index.php?mod=clansphere&amp;action=about">Scriptinfo</a></li>
</ul></li>

<li><a href="">Service</a>
<ul>
<li><a href="index.php?mod=events&amp;action=calendar">Events</a></li>
<li><a href="index.php?mod=servers">Servers</a></li>
<li><a href="index.php?mod=users">Community</a></li>
<li><a href="index.php?mod=files">Downloads</a></li>
<li><a href="index.php?mod=replays">Replays</a></li>
<li><a href="index.php?mod=links">Links</a></li>
<li><a href="index.php?mod=quotes">Quotes</a></li>
<li><a href="index.php?mod=faq">Faq</a></li>
<li><a href="index.php?mod=articles">Articles</a></li>
<li><a href="index.php?mod=gallery">Gallery</a></li>
</ul></li>

<li><a href="">Clan</a>
<ul>
<li><a href="index.php?mod=members&amp;action=teams">Teams</a></li>
<li><a href="index.php?mod=members">Members</a></li>
<li><a href="index.php?mod=wars">Clanwars</a></li>
<li><a href="index.php?mod=awards">Awards</a></li>
<li><a href="index.php?mod=history">History</a></li>
<li><a href="index.php?mod=rules">Rules</a></li>
<li><a href="index.php?mod=links&amp;action=sponsors">Sponsors</a></li>
</ul></li>

<li><a href="">Gametools</a>

<ul>
<li><a href="">Gothic 3</a></li>
<li><a href="">Gothic 2</a></li>
</ul> </li>

<li><a href="">Main</a>

<ul>
<li><a href="index.php?mod=news&amp;action=recent">News</a></li>
<li><a href="index.php?mod=gbook">Gbook</a></li>
<li><a href="index.php?mod=board">Board</a></li>
<li><a href="index.php?mod=search">Search</a></li>
</ul> </li>

</ul>
</div>

</td>

</tr>

<tr>

<td id="content"><div id="div_content">Text</div></td>


</tr>

<tr>

<td colspan="3" id="footer">Design (0.0.2) by: <a href="http://www.foeonline.de">FoE</a> - Script (2008.0.0) by: <a href="http://www.clansphere.net">Clansphere</a> - optimiert f&uuml;r (1280x1024): <a href="http://www.mozilla.com">Firefox 2.0.0.11</a> / <a href="http://www.microsoft.com/germany/windows/products/winfamily/ie/">INet Explorer 7</a> / <a href="http://www.opera.com/">Opera 9.25</a> (oder h&ouml;her)</td>

</tr>

</table>

</body>
</html>


css +-
body {
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt;
margin:0px;
text-align: center;
}
a:link, a:visited {
background-color:inherit;
color:#000000;
text-decoration:underline;
}
a:active, a:hover {
background-color:inherit;
color:#333333;
text-decoration:underline;
}
#header {
width: 100%;
height: 125px;
}
#navi-left {

}
#navi-right {

}
#menu {
width: 100%;
height: 25px;
}
#content {
width: 100%;
height: 100%;
}
#div_content {
overflow: auto;
height: 100%;
}
#footer {
width: 100%;
height: 25px;
}
.navi-head {
float: left;
width: 100%;
background-color: #cccccc;
padding: 4px 0px 4px 0px;
margin: 0px;
}
.navi-body {
width: 100%;
float: left;
background-color: #aaaaaa;
border: 0px;
list-style:none;
padding: 4px 0px 4px 0px;
margin: 0px;
}
div#Rahmen {
width: 100%;
padding: 5px;
border: 1px solid black;
background-color: silver;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation {
text-align: center;
}

ul#Navigation li {
list-style: none;
float: right;
position: relative;
}

* :first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: 25px; /* Abstand Button - unterer Rand Rahmen*/
}

ul#Navigation li ul {
position: absolute;
top: 23px;
left: -40px;
display: none; /* Unternavigation ausblenden */
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:silver; padding-bottom: 0px;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}

ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0px;
}

ul#Navigation a {
display: block;
width: 75px; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 5px;
text-decoration: none;
font-weight: bold;
border: 0px;
color: black;
background-color: #ccc;
}

ul#Navigation a:hover,ul#Navigation span,li a#aktuell {
color: black;
background-color: gray;
}
#debug {
height:150px;
margin-bottom:20px;
overflow:auto;
padding-left:4px;
width:100%;
text-align:left;
}
#errors {
color:#CC0000;
}
#sql {
color:#666666;
}
.h1 {
color: inherit;
font-size: 14pt;
font-weight: bold;
text-decoration: none;
}
.h2 {
color: inherit;
font-size: 16pt;
font-weight: normal;
text-decoration: none;
}
.h3 {
color: inherit;
font-size: 20pt;
font-weight: normal;
text-decoration: none;
}
.form {
background-color:#383838;
border:1px solid #000000;
color:#8D8D8D;
font-family:Verdana,Helvetica,sans-serif;
font-size:8pt;
margin:2px;
padding-left:3px;
}
.forum {
color:inherit;
margin:auto;
}
.headb {
background-color:#cccccc;
color:inherit;
font-weight:bold;
padding:4px;
text-align:left;
}
.bottom {
background-color:#aaaaaa;
color:inherit;
padding:4px 6px 4px 8px;
text-align:left;
}
.newshead {
background-color:#cccccc;
color:inherit;
font-size:11pt;
font-weight:bold;
padding:4px 6px 4px 8px;
text-align:left;
}
.left,.center,.right {
padding:1px;
}
.leftb,.centerb,.rightb {
background-color:#FFFFFF;
color:inherit;
padding:4px 6px 4px 8px;
}
.leftc,.centerc,.rightc {
background-color:#EEEEEE;
color:inherit;
padding:4px 6px 4px 8px;
}
.left,.leftb,.leftc {
text-align:left;
}
.center,.centerb,.centerc {
text-align:center;
}
.right,.rightb,.rightc {
text-align:right;
}
.quote {
background-color:#444444;
border:1px solid #C4C4C4;
color:inherit;
padding:6px;
text-align:left;
}
.error_message_box {
border: 2px solid #660000;
background:#FFD3D3;
font-weight: bold;
padding: 10px 0;
margin: 0 auto;
}

.calhead {
background-color:#555555;
color:inherit;
padding:4px 2px 4px 2px;
text-align:center;
}
.calday,.calevent,.caltoday, .calweek {
padding:4px 2px 4px 2px;
text-align:right;
}
.calday {
background-color:#666666;
color:inherit;
}
.calevent {
background-color:#444444;
color:inherit;
}
.caltoday {
background-color:#3E3E3E;
color:inherit;
}
.calweek {
background-color:#333333;
color:inherit;
}
Inaktiv
|
reVerB


Geekboy




Beiträge: 1237
 # Antwort: 10 - 05.03.2008 um 11:43 Uhr
Frage ich mal anders. Kannst du mir vllt. ein Beispiel im Internet zeigen, wo die Seite den kompletten sichtbaren bereich ausfüllt?


Inaktiv
|
GaHero
Thread-Ersteller


Poststar





Beiträge: 733
 # Antwort: 11 - 05.03.2008 um 14:26 Uhr
Ich versteh deine Frage jetzt nicht wirklich.
Ich will es halt so ähnlich wie bei deiner Seite haben, nur mit einer leicht anderen Anordnung.
Und da es bei dir klappt, müsste es ja auch theoretisch bei mir klappen...


Inaktiv
|
reVerB


Geekboy




Beiträge: 1237
 # Antwort: 12 - 05.03.2008 um 14:56 Uhr
Bei mir wird aber nicht die Komplette größe ausgefüllt. Mein Komplettes Design hat ein und die selbe größe, egal wo du es aufmachst.


Inaktiv
|
GaHero
Thread-Ersteller


Poststar





Beiträge: 733
 # Antwort: 13 - 05.03.2008 um 15:07 Uhr
Also geht das garnicht wie ich das vorhab, oder wie?


Inaktiv
|
reVerB


Geekboy




Beiträge: 1237
 # Antwort: 14 - 05.03.2008 um 17:05 Uhr
Von X-R4Y:
mir fällt gerade ein, das du mit js den vieport (den im browser sichtbaren bereich) mit einer funktion auslesene kannst, also höhe und breite ermitteln... somit könntest du dann nen container machen, derdie mit js ermittelte größe der viewport hat, und somit den sichtbaren bereich komplett ausfülllt


Kannst dich ja mal darüber erkundigen. Vielleicht findest ja was, das dein problem behebt.


Inaktiv
|
GaHero
Thread-Ersteller


Poststar





Beiträge: 733
 # Antwort: 15 - 08.03.2008 um 12:46 Uhr
Habe mich dann für die Variante mit fester Höhe, aber mit variabler Breite entschieden. Klappt auch alles wunderbar, weswegen ich jetzt schonmal ein paar Grafiken eingebaut habe.
Aber eine kleine Frage hätte ich dann noch: Was ist jetzt die optimale Höhe der Page. Wieviele Leute haben noch 1024x764 oder kann ich als Standard 1280x1024 ansetzen und dann Header, Footer, Navileisten des Browsers abziehen. Was würdet ihr sagen?

www.foeonline.de


Zuletzt editiert von GaHero am 08.03.2008 um 12:46 Uhr (2x Editiert)
Inaktiv
|
ichraffsnicht ClanSphere Team

Supporter
Supporter



Herkunft: Erdeborn bei Lutherstadt Eisleben
Beiträge: 3191
 # Antwort: 16 - 08.03.2008 um 13:00 Uhr
dazu gibts statistiken im netz.... such doch mal bei google nach statistik bildschirmauflösung.... z.b. http://www.dphj.de/dphjinfo/stauf.htm


------------------
Inaktiv
|
GaHero
Thread-Ersteller


Poststar





Beiträge: 733
 # Antwort: 17 - 08.03.2008 um 19:53 Uhr
So, wie ihr sehen könnt, wird es so langsam...
Ich habe mir nochmal ein paar Gedanken über diese Sache mit Js gemacht. Das funktioniert dann doch folgendermaßen?: Ich lese die Höhe des sichtbaren Bereiches aus, ziehe Header und Footer ab und teile dann dem Content den Rest zu. Ich habe aber absolut keinen Plan von js. Über wieviele Zeilen Code würden wir hier reden. Könnte das jmd von euch schreiben (wenn es wenig ist). Ich programmiere selber Windowsanwendungen und kann mir denken, wie es funktiniert, aber beim coden hört es dann auf.


Inaktiv
|
ichraffsnicht ClanSphere Team

Supporter
Supporter



Herkunft: Erdeborn bei Lutherstadt Eisleben
Beiträge: 3191
 # Antwort: 18 - 08.03.2008 um 20:46 Uhr
ich schau mal, was ich tun kann.


------------------
Inaktiv
|
GaHero
Thread-Ersteller


Poststar





Beiträge: 733
 # Antwort: 19 - 09.03.2008 um 11:43 Uhr
Vielen Dank. Ich hoffe das wird nicht zuviel...

EDIT: Habe gerade bei Selfhtml folgendes gefunden:
http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htm

Da sist ja genau das was ich haben will, ich versuche es mal so und melde mich dann wenn es nicht geht...


Zuletzt editiert von GaHero am 11.03.2008 um 14:45 Uhr (1x Editiert)
Inaktiv
|
GaHero
Thread-Ersteller


Poststar





Beiträge: 733
 # Antwort: 20 - 14.03.2008 um 13:35 Uhr
So, ich glaube ich bin soweit fertig: http://www.foeonline.de/
Was haltet ihr davon?


Inaktiv
|
Antworten: 22
Seite [1] 2 >


Sie müssen sich registrieren, um zu antworten.