Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag22.12.2011 um 21:47 (UTC)    
Titel: Iceblue: Design auf bestimmte Breite verbreitern!?

Hi Leute,
ich bräuchte Hilfe beim Design ^^
ich will jetzt die content tabelle vergrößern und hab folgenden script:

<style type="text/css">
<!--
.edit_content {width:1000p}
-->
</style>

aber iwie wird das nicht umgesetzt.

Dann bräuchte ich noch Hilfe beim Header und zwar will ich wieder die Breite vergrößern. Da hab ich den Script:


<style type="text/css">
<!--
.edit_header_full {width:1000p}
-->
</style>

Danke für die Hilfe =)


Zuletzt bearbeitet von shinto-assassins am 26.12.2011, 14:33, insgesamt 2-mal bearbeitet
Beitrag23.12.2011 um 10:09 (UTC)    
Titel:

Probiere es mal jeweils mit
Code:
... {width:1000px} ...
Beitrag23.12.2011 um 12:50 (UTC)    
Titel:

leider tut sich da nichts
und vorher hab ich ja auch nur mit p gearbeitet und alles hat funktioniert
Beitrag23.12.2011 um 16:37 (UTC)    
Titel:

Hallo,

td.edit_content ist die Tabellenspalte mit dem Seiteninhalt.
Wenn du diese verbreiterst, passiert nichts.

Da sitzen aber noch 2 Tabellen drum herum , die auch eine Breite im Quellcode stehen haben.

Aber selbst wenn wir die verbreitern, passiert noch nichts.
Um das Design Iceblue herum sitzen noch 2 weitere Tabellen,
die das ganze Design zusammen halten, auch diese haben eine feste Breite.

Du musst diese Klassen auch anpassen Very Happy

Erste Tabelle um Iceblue = table.edit_main_table (bekommt Designbreite)
zweite Tabelle um Icblue = table.edit_second_table (bekommt Designbreite)
dritte Tabelle um Iceblue = table.edit_third_table (bekommt Designbreite)
Tabelle um Seiteninhalt = table.edit_rechts_tabelle (ca 610 Pixel, wenn Boxen und Navi vorhanden sind)


Wenn deine Besucher mit 1024 x 768 Bildschirmauflösung noch etwas
vom Hintergrund sehen sollen, dann maximale Designbreite 980 Pixel !

Schreibe statt p bitte px für Pixel Wink
Und ganz wichtig, jede CSS-Eigenschaft muss mit Semikolon ; enden Wink

korrekt dann width: 980px;

Gruß Wolle


Zuletzt bearbeitet von find-templates am 23.12.2011, 18:29, insgesamt 2-mal bearbeitet
Beitrag26.12.2011 um 13:14 (UTC)    
Titel:

Frohe Weihnachten euch allen =)

Nun zum Thema.
Wenn ich die Breite auf 980px stelle, dann passiert immer noch nichts.
hab ich vllt iwas übersehen?

Ich weiß eigentlich ist der viel zu lang, aber man kann hier leider keine spoiler machen.

hier mein Script:

Zitat:
<div style="width:1000px; margin: 0px auto; overflow:hidden; position:relative;">
<style type="text/css">
<!--
table {margin: 0px auto; }
table.edit_main_table {width:980px;}
td.edit_rechts_tabelle{width:100%!important;}
table.edit_second_table {width:980px;}
table.edit_third_table {width:980px;}
table.edit_rechts_tabelle {width:980px;}

.headline,.headline2 {display: none; }
.edit_rechts_sbg {display: none;}

td.edit_header_1{
height: 170px;
}

.edit_rechts_bottom {
display: none; }


/* Headerfeld oben */
td.edit_header_full {
background-image: url(http://h9.abload.de/img/shinto_assassins_head3xakk.png);
height: 170px;}

/* Feld Navigation entfernt mit */
td.edit_navi_headbg { display:none; }

/* Feld hinter Seiteninhalt verbreitert ohne Bild */
td.edit_rechts_cbg {
width:760px;
background-image: url(); }

/* dritte Tabelle um Iceblue */
table.edit_rechts_tabelle{width:750px;}

/* Streifen über Seiteninhalt Farbe statt Bild */
td.edit_content_top {
background-color:#123446;
background-image: url(); }

/* Seiteninhalt weiße Farbe statt Bild */
td.edit_content {
background-color: #FFFFFF;
background-image: url(); }

/* Abschluss im Seiteninhalt Farbe statt Bild */
td.edit_content_bottom {
background-color: #FFFFFF;
background-image: url(); }

/* Tabelle um Counter Farbe statt Bild */
td.edit_content_bottom2 {
background-color:#123446 ;
background-image: url(); }

/* Titel über Box Farbe statt Bild */
td.sidebar_heading {
background-color: #123446;
background-image: url(); }

/* Lücke im Counter entfernt mit */
td.edit_content_bottom2_left_spacer { display:none; }

/* Hintergrund */
body{
background-image:URL(http://www.abload.de/img/shinto_assassins-bg1yzd3.png);
background-attachment: fixed;
background-repeat: no-repeat;}

/* Feld um das Klappmenu */
#klappmenu {
position: absolute;
margin-top: 254px; /* Abstand von oben anpassen */
margin-left: 6px; /* Abstand zur linken Seite anpassbar */
width:1000px; /* die Breite anpassbar */
overflow: hidden;}

#klappmenu ul { list-style-type: none; margin:0px; padding: 0px; }
#liste ul li { margin: 0; border: none; }

/* Button Breite + Rahmen + Abstand */
#liste li {
width: 95px;
float: left;
text-align: center;
border: 1px solid #000000;
margin-right: 2px;
margin-left: 2px; }

/* Button Linkfarbe + Hintergrundfarbe */
#liste a {
display: block;
padding: 5px 5px 5px 5px;
color: #000000;
font-size: 13px;
background-color: #6aba4a;
text-decoration: none; }

/* Button Hover-Farbe */
#liste a:hover {
color: #FFFFFF;
background-color: #008080; }

#liste li ul { display:none; } /* eingeklappt */
#liste li:hover ul { display:block; } /* ausgeklappt */

-->
</style>
<div id="klappmenu">
<ul id="liste">
<li><a href="#">Home</a>
<ul>
<li><a href="/Aktuelles.htm">Aktuelles</a></li>
<li><a href="/Kontakt.htm">Kontakt</a></li>
<li><a href="/Buch der Mitteilungen.htm">Buch der Mitteilungen</a></li>
</ul>
</li>

<li><a href="#">Das Dorf</a>
<ul>
<li><a href="/Yorugakure.htm">Yorugakure</a></li>
<li><a href="/Dorfbewohner.htm">Dorfbewohner</a></li>
</ul>
</li>

<li><a href="#">Story</a>
<ul>
<li><a href="/Story.htm#K1N">Kapitel 1</a></li>
<li><a href="/Story.htm#K2">Kapitel 2</a></li>
<li><a href="/Story.htm#K3">Kapitel 3</a></li>
<li><a href="/Story.htm#K4">Kapitel 4</a></li>
<li><a href="/Story.htm#K5">Kapitel 5</a></li>
<li><a href="/Story.htm#K6">Kapitel 6</a></li>
<li><a href="/Story.htm#K7">Kapitel 7</a></li>
<li><a href="/Story.htm#K8">Kapitel 8</a></li>
<li><a href="/Story.htm#K9">Kapitel 9</a></li>
<li><a href="/Story.htm#K10">Kapitel 10</a></li>
<li><a href="/Story.htm#K11">Kapitel 11</a></li>
<li><a href="/Story.htm#K12">Kapitel 12</a></li>
<li><a href="/Story.htm#K13">Kapitel 13</a></li>
<li><a href="/Story.htm#K14">Kapitel 14</a></li>
<li><a href="/Story.htm#K15">Kapitel 15</a></li>
<li><a href="/Story.htm#K16">Kapitel 16</a></li>
<li><a href="/Story.htm#K17">Kapitel 17</a></li>
<li><a href="/Story.htm#K18">Kapitel 18</a></li>
<li><a href="/Story.htm#K19">Kapitel 19</a></li>
<li><a href="/Story.htm#K20">Kapitel 20</a></li>
<li><a href="/Story.htm#k21">Kapitel 21</a></li>
<li><a href="/Story.htm#K22">Kapitel 22</a></li>
<li><a href="/Story.htm#K23">Kapitel 23</a></li>
<li><a href="/Story.htm#K24">Kapitel 24</a></li>
<li><a href="/Story.htm#K25">Kapitel 25</a></li>
</ul>
</li>

<li><a href="#">Infosammlung</a>
<ul>
<li><a href="Bewerbungsmuster.htm">Wie bewirbt man sich bei uns?</a></li>
<li><a href="/Regeln.htm">Regeln</a></li>
<li><a href="/Preise-f.ue.r-die-R.ae.nge.htm">Preise für Ränge</a></li>
<li><a href="/Aufgabenverteilung.htm">Aufgabenverteilung</a></li>
<li><a href="/Die-verschiedenen-Teams.htm">Die verschiedenen Teams</a></li>
<li><a href="/Aufgaben-der-Teams.htm">Aufgaben der Teams</a></li>
<li><a href="/Dorfinterner-Chat.htm">Dorfinterner Chat</a></li>
</ul>
</li>

<li><a href="#">Diplomatie</a>
<ul>
<li><a href="/Krieg.htm">Krieg</a></li>
<li><a href="/NAP.htm">NAP</a></li>
</ul>
</li>

<li><a href="#">Bündnisse</a>
<ul>
<li><a href="/Krieg.htm">Akuma no mura</a></li>
<li><a href="/NAP.htm">Sunagakure</a></li>
<li><a href="/NAP.htm">Good Boytopia!</a></li>
<li><a href="/NAP.htm">Loguetown</a></li>
</ul>
</li>

<li><a href="#">Teams</a>
<ul>
<li><a href="/Yorugakure.htm">1</a></li>
<li><a href="/Dorfbewohner.htm">2</a></li>
</ul>
</li>

<li><a href="#">Sonstiges</a>
<ul>
<li><a href="/Galerie/index.htm">Galerie</a></li>
<li><a href="/Umfragen.htm">Umfragen</a></li>
<li><a href="/Jinchuurikiris.htm">Jinchuurikis</a></li>
</ul>
</li>

</ul>
</div>


Zuletzt bearbeitet von shinto-assassins am 26.12.2011, 14:24, insgesamt 2-mal bearbeitet
Beitrag26.12.2011 um 13:25 (UTC)    
Titel:

Hallo,
ich habe deinen Code mal etwas verkürzt und überarbeitet,
am besten den alten komplett mit dem neuen Code austauschen.
(siehe deinen Beitrag)

mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:

Iceblue Generator | Red Generator | Butterfly Generator
Beitrag26.12.2011 um 15:24 (UTC)    
Titel:

was genau hast du denn geändert?
außer das rote
Beitrag29.12.2011 um 19:52 (UTC)    
Titel:

so ich hab das eingefügt aber es hat sich nichts verändert

du kannst es dir ja mal auf meiner HP ansehen
am liebsten hätte ich es so, dass beide blaue balken auf einer linie sind

ich wäre euch dankbar wenn ihr mir helfen könntet
Beitrag29.12.2011 um 20:26 (UTC)    
Titel:

Hallo,

in deinem code steht folgendes:
Zitat:

...
table {margin: 0px auto; }
table.edit_main_table {width:980px;}
td.edit_rechts_tabelle{width:100%!important;}
table.edit_second_table {width:980px;}
table.edit_third_table {width:980px;}
table.edit_rechts_tabelle {width:980px;}

.headline,.headline2 {display: none; }
.edit_rechts_sbg {display: none;}
...

/* dritte Tabelle um Iceblue */
table.edit_rechts_tabelle{width:750px;}
...

Es gibt keine Tabellenzelle dieser Klasse. Ändere td in table, das !important kannst du löschen.
Hiermit werden die vorher definierten 100% wieder überschrieben. Musst du also löschen
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 30.12.2011, 00:31, insgesamt 3-mal bearbeitet
Beitrag29.12.2011 um 23:14 (UTC)    
Titel:

oke danke dir
alles funktioniert ^^

jetzt möchte ich noch einen rahmen um content und content_bottom2

.edit_content {
border:();}
.edit_content_bottom2 {
border:();}

und die schriftfarbe von counter
.edit_content_bottom2_counter {
color: #000000;}

kann ich im .edit_content_left_spacer eine schattierung machen?
und rechts auch. wenn ja dann würde ich mich freuen wenn ihr das mit einbaut ^^

danke für die hilfe
Beitrag29.12.2011 um 23:57 (UTC)    
Titel:

Einen Rahmen definierst du, wie du schon fast richtig gemacht hast mit der border Eingenschaft:
Zitat:
border: #XXXXXX XXpx type;

Hexafarbcode
Breite des Rahmens in pixel
Rahmenart, ersetze type mit einem der folgenden Werte:
Arrow dotted => gepunktet
Arrow dashed => gestrichelt
Arrow solid => durchgehend
Arrow double => doppelt
Arrow groove => musst dir anschauen
Arrow ridge => musst dir anschauen
Arrow inset => musst dir anschauen
Arrow outset => musst dir anschauen


Den Schatten kannst du mit der CSS3 box-shadow Eigenschaft bzw. mit Browserspezifischen Eigenschaften machen:
Zitat:
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=XX, Direction=XX, Color='#XXXXXX');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=XX, Direction=XX, Color='#XXXXXX')";
-webkit-box-shadow:Xpx Xpx Xpx Xpx #XXXXXX;
-o-box-shadow:Xpx Xpx Xpx Xpx #XXXXXX;
-moz-box-shadow:Xpx Xpx Xpx Xpx #XXXXXX;
-khtml-box-shadow:Xpx Xpx Xpx Xpx #XXXXXX;
box-shadow:Xpx Xpx Xpx Xpx #XXXXXX;

Hexfarbcode des Schatten
horizontaler Versatz des Schattens
vertikaler Versatz des Schattens
Weichzeichner
Radius des Schatten

Microsoft ist mal wieder besonders:
Stärke
Richtung. Achtung hier sind nur bestimmte Werte erlaubt, welche weiss ich aber auch nicht Auswendig, am besten mal googlen. Ich nutze meist 135 (nach unten rechts).
Edit: Habe gerade in meinen alten unterlagen die entsprechende Liste gefunden:
Zitat:
0 zeigt nach oben.
45 zeigt nach oben rechts.
90 zeigt nach rechts.
135 zeigt nach unten rechts.
180 zeigt nach unten.
225 zeigt nach unten links.
270 zeigt nach links.
315 zeigt nach oben links.


Es können auch mehere Schatten kombiniert werden, dazu einfach die Schattenangaben mit Komma trennen.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 30.12.2011, 01:11, insgesamt 6-mal bearbeitet
Beitrag30.12.2011 um 00:45 (UTC)    
Titel:

ok hab ich soweit begriffen aber wo fügt ich das ein
auch bei text über dem design
und in style? oder wo?
Beitrag30.12.2011 um 00:57 (UTC)    
Titel:

richtig, du möchtest ja 2 Klassen im CSS Code ändern.
Die beiden gewünschten Klassen bekommen die genannten CSS-Eigenschaften einfach mit dazu Wink

.edit_content { und .edit_content_bottom2 { bekommen
mit border: 1px solid #c9c9c9; ihren Rahmen.


Und zum Schatten in den Streifen links und rechts vom Seiteninhalt (edit_content_left_spacer, edit_content_right_spacer),
den Schatten wird man nicht sehen können. Weil die Tabellenspalten dicht an dicht stehen.
Tabellenspalten (td) können keinen Außenabstand bekommen. Das wird also nichts mit dem Schatten .


Zuletzt bearbeitet von red-test am 30.12.2011, 02:04, insgesamt 2-mal bearbeitet
Beitrag30.12.2011 um 01:09 (UTC)    
Titel:

Ich sehe gerade, ich habe deine Frage bezüglich der Schriftfarbe überlesen. Die kannst du in deinem Code wie folgt ändern:
Zitat:
td.edit_content_bottom2_counter {
color:#XXXXXX!important;
}

Hexafarbcode
Wird benötigt, da die Tabellenzelle bereits einen Inline Style hat und dieser eine höhere Priorität hat.

Für den Rahmen:
Zitat:
td.edit_content, td.edit_content_bottom2 {
border:#XXXXXX XXpx type;
}


Für den Schatten:
Zitat:
td.edit_content_left_spacer{
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=XX, Direction=XX, Color='#XXXXXX');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=XX, Direction=XX, Color='#XXXXXX')";
-webkit-box-shadow:Xpx Xpx Xpx Xpx #XXXXXX;
-o-box-shadow:Xpx Xpx Xpx Xpx #XXXXXX;
-moz-box-shadow:Xpx Xpx Xpx Xpx #XXXXXX;
-khtml-box-shadow:Xpx Xpx Xpx Xpx #XXXXXX;
box-shadow:Xpx Xpx Xpx Xpx #XXXXXX;
}

Anpassungen siehe in meinem letzten post.

Einfügen musst du das in deinem CSS code, also zwischen <style type="text/css"> und </style>
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 30.12.2011, 02:10, insgesamt 2-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


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