Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 11
Seite [1]
Hellhound


Wannabe poster





Beiträge: 32
 # Thema - 01.10.2008 um 11:31 Uhr
Hallo,

ich zähle nicht zu den erfahrensten Menschen im Umgang mit HTML etc. und habe ein Problem.
Ich habe ein Standard Design geändert, etwas mit div Boxen gespielt und Breiten festgelegt. Um das Ganze auf der Seite zu zentrieren habe ich um alle Boxen außer den Header eine Box (id=main) gelegt und diese zentriert.
Im FF sieht das Ganze auch so aus wie ich mir das Vorstelle, nur mit dem Hintergrund haperts etwas. Wenn jetzt z.B. der Content länger ist als die Navigation dann habe ich dort bis zum bottom die Farbe des "body" anstatt der Farbe der "main" Box. Ziel ist eine Einfarbige Fläsche zwischen "header" und "bottom" unabhängig von der Länge des "contet" und der Navigation.

Zum IE: Hier stimmt das Box Layout leider nicht, der "content" hängt am Ende der Seite vor dem "bottom". Dies kann ich zwar beheben indem ich den "content" vor die "nav-right" setze aber dann stimmts im FF nicht mehr da dort die "nav-right" um das Maß des "top" nach unten versetzt ist.
"content" + 2x "nav" = "main" Breite in px (im FF wunderbar), doch im IE hängt die "nav-right" dann zu tief. Wenn ich den "content" jetzt ein paar Pixel schmäler mache passt es im IE, jedoch entsteht im FF dann eine Lücke mit der "body" Farbe zwischen "content" und "nav-right".

Vielleicht kann mir jemand von den Cracks hier ein parr Kniffe sagen um die Probleme zu beheben.

http://www.hasihund.de/karate/cs/

Index.htm +-
<body>
<div id="head"></div>
<div id="main">
<div id="nav-left"></div>
<div id="top"></div>
<div id="nav-right"></div>
<div id="content"></div>
<div id="bottom"></div>
</div>
</body>

clanshpere.css +-
#head:
height:130px;
width:950px;
margin:auto;

#main:
margin:auto;
width:950px;

#nav-left:
width:175px;
float:left;
margin:auto;

#top:
width:600px;
height:110px;
float:left;
margin:auto;

#nav-right:
width:175px
float:right;

#content:
width:600px;
float:left;
margin:auto;

#bottom:
width:950px;
height:30px;
float:left;
margin:auto;


P.S.: Nicht über die Domain wundern, ist nur eine Testinstallation.




Inaktiv
Fr33z3m4n ClanSphere Team


Medal of Honor




Herkunft: Hamm
Beiträge: 11094
 # Antwort: 1 - 02.10.2008 um 16:32 Uhr
öhm unterhalb von Startseite ist ja garnix, keine box nix, da kann dann auch nix angezeigt werden.


------------------
mfg
Patrick "Fr33z3m4n" Jaskulski

Antoine de Saint-Exupéry: Wenn Du ein Schiff bauen willst, so trommle nicht Männer zusammen, um Holz zu beschaffen, Aufgaben zu verteilen, sondern lehre die Männer die Sehnsucht nach dem endlosen weiten Meer.

Inaktiv
|
Hellhound
Thread-Ersteller


Wannabe poster





Beiträge: 32
 # Antwort: 2 - 02.10.2008 um 17:44 Uhr
Die Startseite ist ja auch nur ein Platzhalter aber wenn man z.B. aufs Forum geht, dann entsteht links und rechts davon eine schwarze Fläsche (body Farbe). Ich dachte eigentlich, wenn ich alles unterhalb des Headers in ein Box packe und der eine Farbe zuweise orientiert er sich am längsten Inhalt (z.B. der Content beim Forum), da ich davon ausgegangen bin das der div immer rechteckig ist und ja auch noch den bottom mit einschließt. Oder liege ich da falsch?


Inaktiv
|
fUnK3r ClanSphere Team


Specialist





Beiträge: 1656
 # Antwort: 3 - 02.10.2008 um 17:57 Uhr
schreib mal das:

<div style="clear: both;"></div>

zwischen dein <div id="main">
also ich habs bei mir vor dem endtag stehen

hatte das nämlich auch mal, das er mir die bg-color nicht übernommen hat, dann hab ich diesen clear Teil rein, danach gings


------------------
Grüßle Jo
><(((°> Son of God through Jesus Christ his Son <°)))><
www.funk3r.de
while (!asleep() ) sheep++;
Inaktiv
|
Hellhound
Thread-Ersteller


Wannabe poster





Beiträge: 32
 # Antwort: 4 - 03.10.2008 um 00:48 Uhr
Hey, cool es klappt! Danke! Wenn jetzt noch jemand eine Idee wegen der IE/FF Anpassung hätte wäre das toll. Im FF ist es jetzt genauso wie es sein soll, nur schaut euch das mal im IE an wo der Content hängt und die Nav-right.


Zuletzt editiert von Hellhound am 03.10.2008 um 00:51 Uhr (1x Editiert)
Inaktiv
|
fUnK3r ClanSphere Team


Specialist





Beiträge: 1656
 # Antwort: 5 - 03.10.2008 um 23:57 Uhr
Freut mich das es geklappt hat


Also zwischen ff3 und IE6 sehe ich gerade keinen Unterschied auf deiner Seite, außer das im IE die Rahmen größer sind wie im FF


------------------
Grüßle Jo
><(((°> Son of God through Jesus Christ his Son <°)))><
www.funk3r.de
while (!asleep() ) sheep++;
Inaktiv
|
ichraffsnicht ClanSphere Team

Supporter
Supporter



Herkunft: Erdeborn bei Lutherstadt Eisleben
Beiträge: 3191
 # Antwort: 6 - 04.10.2008 um 10:02 Uhr
nur zur verständlichkeit. clear both übernimmt nicht die hintergrundfarbe, sondern bewirkt, das die kind-elemente in dem element eingeschlossen werden. dazu gibts in clansphere auch standardmäßig ne klasse. .clearfix ist der schlüssel zum erfolg.

mfg


------------------
Inaktiv
|
fUnK3r ClanSphere Team


Specialist





Beiträge: 1656
 # Antwort: 7 - 04.10.2008 um 12:44 Uhr
Oh, danke,
wieder mal was dazugelernt
danke X-R4Y


------------------
Grüßle Jo
><(((°> Son of God through Jesus Christ his Son <°)))><
www.funk3r.de
while (!asleep() ) sheep++;
Inaktiv
|
Hellhound
Thread-Ersteller


Wannabe poster





Beiträge: 32
 # Antwort: 8 - 05.10.2008 um 13:13 Uhr
03.10.2008 um 23:57 Uhr - fUnK3r:
Also zwischen ff3 und IE6 sehe ich gerade keinen Unterschied auf deiner Seite, außer das im IE die Rahmen größer sind wie im FF

Wenn ich die Seite im IE öffne ist die rechte Navigation nach unten verschoben und der content hängt unten links unter der linken Navigation.


04.10.2008 um 10:02 Uhr - X-R4Y:
nur zur verständlichkeit. clear both übernimmt nicht die hintergrundfarbe, sondern bewirkt, das die kind-elemente in dem element eingeschlossen werden. dazu gibts in clansphere auch standardmäßig ne klasse. .clearfix ist der schlüssel zum erfolg.

mfg

Dann probiere ich das auch mal aus, danke.


Inaktiv
|
Nachtmeister


Specialist




Herkunft: Bern
Beiträge: 2091
 # Antwort: 9 - 06.10.2008 um 14:15 Uhr
Es gibt keinen spezifischen CSS Befehl, der in allen Browser funktioniert und eine DIV dynamisch in der Höhe verändert.

Was du brauchst ist die Faux Columns methode, um das Ergebnis zu erzielen, das du möchtest.
http://alistapart.com/articles/fauxcolumns/

Zusammengefasst: Gib deinem Container ein Hintergrundbild das dann sichtbar wird, wenn die Navigationen zu Ende sind. Es wird der Effekt erzielt, den du möchtest.


------------------
"God created the universe in 1 Day, and then spent 5 days making it look good In Internet Explorer"

Zuletzt editiert von Nachtmeister am 07.10.2008 um 18:20 Uhr (1x Editiert)
Inaktiv
|
Hellhound
Thread-Ersteller


Wannabe poster





Beiträge: 32
 # Antwort: 10 - 07.10.2008 um 18:16 Uhr
Dankeschön, da werde ich mich mal einlesen. Als Neueinsteiger steht man manchmal da wie der berühmte Ochse vor dem Berg da man nicht so weiß wonach, bzw. nach welchem Befehl man suchen soll.
Mal schauen obs klappt...


Zuletzt editiert von Hellhound am 07.10.2008 um 18:16 Uhr (1x Editiert)
Inaktiv
|
Hellhound
Thread-Ersteller


Wannabe poster





Beiträge: 32
 # Antwort: 11 - 05.08.2009 um 11:34 Uhr
Ich muß meinen Thread nochmal aus der Versenkung holen. Ich habe da ein kleines Problem mit meinen Div-Boxen. FF alles super, aber schaut mal in den IE (bei mir Version 8). Die Box mit dem Unterteil des Männchens oben rechts hängt irgendwo unten links zwischen Bottom und Nav-left.

http://www.hasihund.de/karate/cs/

CSS:
mehr... +-
/* $Id: clansphere.css 232 2006-08-19 16:07:22Z hajo $ */

body {
background: url(images/background.png) 50% 0;
color:#000000;
font-family:Verdana,Helvetica,sans-serif;
font-size:8pt;
text-align:center;
}
a:link, a:visited {
color:#000000;
text-decoration:none;
}
a:active, a:hover {
color:#fec800;
text-decoration:underline;
}
div,span {
color:#000000;
font-family:Verdana,Helvetica,sans-serif;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
select, input, textarea {
background-color:#f2f2f2;
color:#000000;
font-family:Verdana,Helvetica,sans-serif;
font-size:8pt;
margin:2px;
padding-left:3px;
}
img {
border:0px;
}
form {
display:inline;
}
td {
color:#F2F2F2;
font-size:8pt;
vertical-align:top;
}
textarea {
width:710px;
}
ul {
margin:0px;
}

#nav-left,#content,#bottom {
float:left;
}

#nav-left {
width:110px;
margin-left:70px;
}
#nav-right {
background-image:url(images/navright.png);
background-repeat:no-repeat;
float:right;
height:190px;
width:180px;

}
#content {
color:#000000;
text-align:center;
width:770px;
}
#bottom {
background-image:url(images/bottom.png);
background-repeat:no-repeat;
height:330px;
width:1130px;
}
#head {
margin:auto;
background-image:url(images/header.png);
height:290px;
width:1130px;
}
#header {
height:120px;
width:1130px;
padding-top:20px;
padding-left:20px;
text-align:center;
}
#left {
float:left;
height:150px;
width:250px;
}
#termine {
float:left;
text-align:center;
height:150px;
width:315px;
}
#aktuell {
float:left;
text-align:center;
height:150px;
width:315px;
}
#right {
float:right;
height:150px;
width:250px;
}
#ticker {
float:left;
padding-left:250px;
padding-right:250px;
height:20px;
width:630px;
}
#main {
background: url(images/bg.png) repeat-y center;
margin:auto;
width:1130px;
}
#debug {
height:150px;
margin-bottom:20px;
overflow:auto;
padding-left:4px;
width:100%;
text-align:left;
}
#errors {
color:#CC0000;
}
#sql {
color:#777777;
}
.h1 {
color: #333333;
font-size: 14pt;
font-weight: bold;
text-decoration: none;
}
.h2 {
color: #333333;
font-size: 16pt;
font-weight: normal;
text-decoration: none;
}
.h3 {
color: #333333;
font-size: 20pt;
font-weight: normal;
text-decoration: none;
}
.forum {
background-color:#f2f2f2;
color:inherit;
margin:auto;
}
.headb {
background-color:#cdcdcd;
color:#000000;
font-weight:bold;
padding:4px;
text-align:left;
}
.headb a:link, .headb a:visited { color:#FFFFFF; }
.bottom {
background-color:#f2f2f2;
color:inherit;
padding:4px 6px 4px 8px;
text-align:left;
}
.newshead {
background-color:#cdcdcd;
color:#000000;
font-size:11pt;
font-weight:bold;
padding:4px 6px 4px 8px;
text-align:left;
}
.left,.center,.right {
padding:1px;
}
.leftb,.centerb,.rightb {
background-color:#cdcdcd;
color:#000000;
padding:4px 6px 4px 8px;
}
.leftc,.centerc,.rightc {
background-color:#f2f2f2;
color:#222222;
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:#f2f2f2;
border:1px solid #cdcdcd;
color:inherit;
padding:6px;
text-align:left;
}
.navhead,.navhead2 {
font-weight:bold;
padding:4px;
text-align:left;
}
.navbodyb,.navbody2b {
list-style:none;
padding:4px 6px 4px 8px;
text-align:left;
}
.login {
text-align:center;
}
.calhead {
background-color:#cdcdcd;
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:#f2f2f2;
color:inherit;
}
.calevent {
background-color:#ff1414;
color:inherit;
}
.caltoday {
background-color:#fec800;
color:inherit;
}
.calweek {
background-color:#cdcdcd;
color:inherit;
}


index.html
mehr... +-
<!-- $Id: index.htm 232 2006-08-19 16:07:22Z hajo $ -->
<!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>
<meta http-equiv="Content-Type" content="text/html; charset={func:charset}" />
{clansphere:navmeta}
<link href="clansphere.css" rel="stylesheet" type="text/css" />
<link href="clansphere_div.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/rss+xml" href="../../uploads/rss/news.xml" />
</head>
<body>
{users:navlogin}</div>
<div id="head">
<div id="ticker">{ticker:display}</div>
<div id="header"></div>
<div id="left"></div>
<div id="termine">{events:navnext}</div>
<div id="aktuell">{news:navlist}</div>
<div id="right"></div>
</div>
<div id="main">
<div id="nav-left">
<div class="navhead">Main</div>
<ul class="navbodyb">
<li><a href="{url:static_view,id=1}">Home</a></li>
<li><a href="{url:news_recent}">Aktuelles</a></li>
<li><a href="{url:gbook}">Gästebuch</a></li>
<li><a href="{url:board}">Forum</a></li>
</ul>
<div class="navhead">Verein</div>
<ul class="navbodyb">
<li><a href="{url:static_view,id=4}">Was ist Karate</a></li>
<li><a href="{url:history_list}">Über Uns</a></li>
<li><a href="{url:static_view,id=5}">Die Trainer</a></li>
<li><a href="{url:static_view,id=3}">Trainingszeiten</a>< /li><br/>
<li><a href="{url:faq_list}">Häufige Fragen</a></li><br/>
<li><a href="{url:events_calendar}">Termine</a></li>
<li><a href="{url:articles_list}">Artikel</a></li>
<li><a href="{url:gallery_list}">Gallerie</a></li>
<li><a href="{url:users_list}">Community</a></li>
<li><a href="{url:files_list}">Downloads</a></li>< br/>
<li><a href="{url:links_list}">Links</a></li>
</ul>
<div class="navhead">Kontakt</div>
<ul class="navbodyb">
<li><a href="{url:contact_mail}">eMail</a></li>
<li><a href="{url:contact_imprint}">Impressum</a></li>
<li><a href="{url:clansphere_about}">About</a></li>
</ul>
<div class="navhead">Online Users</div>
<div class="navbodyb" id="navonline">{users:navonline}</div>
</div>
<div id="content">{func:show}</div>
<div id="nav-right"</div>
<div style="clear: both;"></div>
<div id="bottom"></div>
</div>
<div class="login">Online:{count:navone} Heute:{count:navday} Monat:{count:navmon} <a href="{url:count_stats}">Gesamt:</a>{count:nav all}</div>
</body>
</html>


Es wäre super wenn jemand einen Hinweis für mich hätte, danke.

Edit: Problem gelöst, hing mit margin - padding zusammen.


Zuletzt editiert von Hellhound am 07.08.2009 um 07:11 Uhr (2x Editiert)
Inaktiv
|

Dieses Thema wurde von duRiel ClanSphere Team PM geschlossen.
Antworten: 11
Seite [1]