Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 7
Seite [1]
herrherrmann


Rock the board




Herkunft: Berlin
Beiträge: 84
# Thema - 09.03.2008 um 22:24 Uhr
Moin moin,

ich muss euch mal wieder mit meinen lästigen Anfängerproblemen belästigen.

Ich habe eine Seite erstellt, im Tabellenlayout, und diese wird im Internet Explorer (vermutlich versionsunabhängig) falsch dargestellt bzw. zu breit gezogen.

Die Rede ist von http://www.rocs-berlin.de/.

Wäre nett, wenn mir jemand ein paar helfende CSS-Befehle flüstern könnte.
Über sonstige Vorschläge (z.B. designbezogene) würde ich mich natürlich auch freuen.

Vielen Dank im Vorraus,
bastman


------------------
bastArt

Zuletzt editiert von bastman am 09.03.2008 um 22:26 Uhr (1x Editiert)
Inaktiv
duRiel ClanSphere Team


Weltmeister




Herkunft: Cambridge
Beiträge: 7300
# Antwort: 1 - 09.03.2008 um 22:54 Uhr
hi!
gib mal .content ne hintergrundfarbe um zu gucken wie breit der ist. dann siehst du ob der content zu breit ist oder ob da was anderes falsch ist.

gruß
duRiel


Inaktiv
|
herrherrmann
Thread-Ersteller


Rock the board




Herkunft: Berlin
Beiträge: 84
# Antwort: 2 - 09.03.2008 um 23:44 Uhr
Ich habe den Hintergrund mal grau gefärbt und die td-Rahmen sichtbar gemacht, im Anhang ist ein Screenshot.

Viel schlauer bin ich jetzt nicht, hatte das ja auch vorher schon probiert, die mittlere Zelle (content) bekomme ich einfach nicht verkleinert.
Dateianhänge:
jpg rocs_fehler.jpg (106.32 KiB - 66 mal heruntergeladen )


------------------
bastArt

Zuletzt editiert von bastman am 09.03.2008 um 23:45 Uhr (1x Editiert)
Inaktiv
|
reVerB


Geekboy




Beiträge: 1237
# Antwort: 3 - 10.03.2008 um 02:39 Uhr
Das Problem kenne ich. Mach um die Ganze Seite eine Extra Tabelle mit der festen gesamtbreite. Wenn du das nicht machst, spielen in einigen Browsern die Zellen verrückt, da diese keine Grenze nach außen haben. Wenn du eine Tabelle bestehend aus einer Zelle mit einer festen Breite hast, KANN die eigentliche Layout-Tabelle sich nur in dem Bereich bewegen und somit ist das Problem gelöst.

Wenn du vvlt. ein wenig Geld investieren möchtest, passe ich dir das gerne in HTML/CSS ohne Tabellen an. Das ganze ist dann auch übersichtlicher. Außerdem ist der Code dann kleiner und der Seiten-Aufbau schneller.

Mit 15 ¤ biste dabei.

djreverb (at) gmx (dot) de
Kannst dich ja bei interesse melden.


Zuletzt editiert von reVerB am 10.03.2008 um 13:21 Uhr (1x Editiert)
Inaktiv
|
herrherrmann
Thread-Ersteller


Rock the board




Herkunft: Berlin
Beiträge: 84
# Antwort: 4 - 10.03.2008 um 08:16 Uhr
Danke für die Hilfe, ist leider keine super Lösung, aber anscheinend habe ich keine andere Wahl ...

Und danke für dein Angebot, aber ich wurde selbst schon für die Umsetzung bezahlt und bin recht zufrieden damit.


------------------
bastArt

Inaktiv
|
reVerB


Geekboy




Beiträge: 1237
# Antwort: 5 - 10.03.2008 um 13:21 Uhr
Achso ! Naja gut. Aber mit dem oberen Tipp soltest du es mal probieren.


Inaktiv
|
herrherrmann
Thread-Ersteller


Rock the board




Herkunft: Berlin
Beiträge: 84
# Antwort: 6 - 10.03.2008 um 14:56 Uhr
10.03.2008 um 13:21 Uhr - reVerB:
Achso ! Naja gut. Aber mit dem oberen Tipp soltest du es mal probieren.

Nein, das hat leider nicht geholfen, die breite Content-Zelle sprengt immer wieder die Uber-Tabelle, egal, ob ich deren Breite durch CSS oder direkt im HTML-Element definiere.

Hier ist btw der CSS-Quelltext:
style.css +-
/* System */
body {
background-color: Gray;
color: Black;
font-family: Verdana,Helvetica,sans-serif,Arial;
font-size: 11px;
text-align: center;
}
a:link, a:visited {
color: Black;
font-weight: bold;
text-decoration: none;
}
a:active, a:hover {
color: Black;
background-color: #ffcc00;
text-decoration: none;
}
div,span {
color: Black;
font-family:Verdana,Helvetica,sans-serif,Arial;
margin: 0px;
padding: 0px;
}
img {
border:0px;
}
form {
display: inline;
font-size: 11px;
}
table {
margin: auto;
padding: 0px;
}
tr, td {
background-color: inherit;
color: Black;
font-size: 11px;
vertical-align: top;
margin: 0px;
padding: 0px;
border: 1px solid Black;
}
textarea {
width: 90%;
background-image: none;
background-position: center;
}
ul {
margin:0px;
}
#debug {
height:150px;
margin-bottom:20px;
overflow:auto;
padding-left:4px;
width:100%;
text-align:left;
}
#errors {
color:#CC0000;
}
#sql {
color:#777777;
}
.h1 {
font-size: 14pt;
font-weight: bold;
text-decoration: none;
}
.h2 {
font-size: 16pt;
font-weight: normal;
text-decoration: none;
}
.h3 {
font-size: 20pt;
font-weight: normal;
text-decoration: none;
}
.form {
background-color: White;
border: 1px solid Black;
color: Black;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
padding: 1px;
}
.form:hover {
border: 1px solid Black;
color: Black;
background-color: #ffcc00;
}
.form:active {
border: 1px solid Black;
}
.forum {
background-color: Black;
color: Black;
margin: auto;
}
.headb {
background-color: Black;
color: White;
font-weight: bold;
padding: 4px;
text-align: left;
}
.headb a:link, .headb a:visited {
color: White;
}
.headb a:active, .headb a:hover {
color: Black;
background-color: #ffcc00;
}
.headb div {
color: White;
}
.bottom {
background-color: #E3E3E3;
color: inherit;
padding: 1px 4px 1px 5px;
text-align: left;
border: 1px solid Black;
}
.newshead {
background-image: url(pics/newshead.jpg);
background-repeat: no-repeat;
background-position: top left;
background-color: White;
color: White;
font-size: 15px;
font-weight: bold;
padding: 3px 4px 3px 5px;
text-align: left;
}
.news {
background-color: White;
color: Black;
font-family: Verdana,Helvetica,sans-serif,Arial;
font-size: 11px;
padding: 5px 10px 5px 10px;
text-align: left;
}
.left,.center,.right {
padding:1px;
}
.leftb,.centerb,.rightb {
background-color: White;
color: inherit;
padding: 4px 6px 4px 8px;
margin: 0px;
}
.leftc,.centerc,.rightc {
background-color: #e9e9e9;
color: inherit;
padding: 2px 6px 2px 8px;
margin: 0px;
}
.leftd,.centerd,.rightd {
background-color: White;
color: Black;
padding: 2px 1px 2px 1px;
margin: 0px;
}
.left,.leftb,.leftc {
text-align:left;
}
.center,.centerb,.centerc {
text-align:center;
}
.right,.rightb,.rightc {
text-align:right;
}
.quote {
background-color: transparent;
border: 1px dashed Gray;
color: inherit;
padding: 6px;
text-align: left;
}

/* ROCS Design 5 */
.content {
width: 650px;
height: 600px;
background-image: url(pics/content_bg.jpg);
background-repeat: repeat-y;
background-position: top left;
padding: 0px;
margin: 0px;
}
.platz1 {
width: 45px;
}
.sidebar {
text-align: right;
}
.corner_r {
width: 50px;
background-image: url(pics/corner_r.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}
.corner_b {
height: 50px;
/* width: 700px; */
background-image: url(pics/corner_b.jpg);
background-repeat: no-repeat;
background-position: top right;
text-align: left;
color: #606060;
font-size: 10px;
padding-top: 2px;
}
.corner_b a:link, .corner_b a:visited {
color: #606060;
font-size: 10px;
}
.corner_b a:active, .corner_b a:hover {
color: Black;
font-size: 10px;
}
.infos {
height: 197px;
background-image: url(pics/b_infos.jpg);
background-repeat: no-repeat;
background-position: top right;
text-align: left;
padding: 30px 0px 0px 55px;
}
.infos a:link, .infos a:visited {
font-weight: normal;
text-decoration: underline;
}
.infos a:active, .infos a:hover {
text-decoration: none;
}
.infos h1 {
font-size: 10px;
font-weight: bold;
margin-top: 5px;
margin-bottom: 0px;
}

/* Kalender */
.calhead {
background-color:#D8D4D4;
color:inherit;
padding:4px 2px 4px 2px;
text-align:left;
border: 1px solid black;
}
.calday,.calevent,.caltoday, .calweek {
padding:4px 2px 4px 2px;
text-align:right;
}
.calday {
background-color:#997700;
color:inherit;
}
.calevent {
background-color: #CDCDCD;
color: inherit;
border: 1px solid #9C9C9C;
}
.caltoday {
background-color:#AEE5E2;
color:#CCCCCC;
border: 1px solid black;
}
.calweek {
background-color:#F5EEA2;
color:inherit;
border: 1px solid black;
}


------------------
bastArt

Inaktiv
|
reVerB


Geekboy




Beiträge: 1237
# Antwort: 7 - 10.03.2008 um 17:54 Uhr
Ich weiß leider nicht, wie CSS sich mit Tabellen verhällt. Aber mit Div´s ist das so, das man ab und an mal float oder Display: Block; benutzen sollte. Aber wie gesagt. Wie das bei tables ist, weiß ich nicht. Musst du sehen.

*EDIT*
Im Content-Slector bitte noch einfügen:
overflow: auto;

Und mach mal in den Clansphere-Optionen den Contentbereich nicht auf 100%, sondern etwas weniger. Du musst das Box-Model von CSS beachten. Der Internetexplorer hat ein Problem mit der Interpretation des Box-Models.


Zuletzt editiert von reVerB am 10.03.2008 um 18:01 Uhr (1x Editiert)
Inaktiv
|
Antworten: 7
Seite [1]


Sie müssen sich registrieren, um zu antworten.