Autor |
Nachricht |
-
jumpn-run
|
15.07.2008 um 17:00 (UTC) Titel: CSS-Code ohne style tags |
|
|
Hi,
Ich hab mal ne Frage ,
ich hab mir ein CSS Design gemacht für Iceblue aber man kann ja statt Iceblue noch das Css Design Auswählen wo man den code nur ohne Style tags eingeben soll was bedeutet das (ohne Style tags ) und was brinds wenn ich dass CSS Design statt Iceblue Auswähle
mfg ______________ Günstiges Webhosting.
1 Domain + 3Gb Webspace + unlimited Traffic schon ab 2,90 Euro
http://Luckyhost.de |
|
↑
|
|
|
-
ig444
Wohnort: Rüthen
|
15.07.2008 um 20:33 (UTC) Titel: |
|
|
Hey,
Bei Iceblue kannst du nicht die Position an sich verändern bzw. es ist alles soweit fertig und an seinem Platz
Bei CSS-Design musst du noch die Position bestimmen, die Klassen umändern.
Wenn du jetzt dein Iceblue-Code in das CSS-Design einfügst, sieht es nicht unbedingt mehr nach deinem alten Design aus
Mfg ______________ THE JOY OF NOT BEING SOLD ANYTHING |
|
↑
|
|
|
-
jumpn-run
|
15.07.2008 um 20:36 (UTC) Titel: |
|
|
Danke erst mal und noch was
Ich habe bei mir alles verschoben und zusammengesetzt jetzt hat man mit IE keine chance mehr wenn ich jetzt das Css Design wähle kann es dan auch der IE lesen und was sind style tags? das td. oder? ______________ Günstiges Webhosting.
1 Domain + 3Gb Webspace + unlimited Traffic schon ab 2,90 Euro
http://Luckyhost.de |
|
↑
|
|
|
-
ig444
Wohnort: Rüthen
|
15.07.2008 um 20:39 (UTC) Titel: |
|
|
Also style-tags sind das hier:
<style type=text/css> und das hier </style>
Ja mit der IE liest das auch, aber Firefox zeigt das Design bei mir auch falsch an. Anscheinend hast du da was falsch gecodet
Mfg ______________ THE JOY OF NOT BEING SOLD ANYTHING |
|
↑
|
|
|
-
jumpn-run
|
15.07.2008 um 20:42 (UTC) Titel: |
|
|
hm... ok
Danke ______________ Günstiges Webhosting.
1 Domain + 3Gb Webspace + unlimited Traffic schon ab 2,90 Euro
http://Luckyhost.de
Zuletzt bearbeitet von jumpn-run am 15.07.2008, 21:42, insgesamt einmal bearbeitet
|
|
↑
|
|
|
-
coolplace
Wohnort: USB = United States of Bücken
|
15.07.2008 um 21:52 (UTC) Titel: |
|
|
Noch mal übersichtlich:
Zitat: <style type="text/css">
<!--
-->
</style>
Diese beiden Blöcke musst Du weglassen.
Du schreibst im CSS-Design nur die Anweisungen. |
|
↑
|
|
|
-
jumpn-run
|
15.07.2008 um 21:55 (UTC) Titel: |
|
|
aber dan ist alles verschoben muss ich das td. auch weglassen? ______________ Günstiges Webhosting.
1 Domain + 3Gb Webspace + unlimited Traffic schon ab 2,90 Euro
http://Luckyhost.de |
|
↑
|
|
|
-
coolplace
Wohnort: USB = United States of Bücken
|
15.07.2008 um 22:05 (UTC) Titel: |
|
|
Die Codes selber müssen komplett rein,z.B.:
Zitat: div#header{background-image:url(http://blabla);} |
|
↑
|
|
|
-
jumpn-run
|
15.07.2008 um 22:15 (UTC) Titel: |
|
|
Ok ich werd mal ein bischjen basteln
danke für die Antworten ______________ Günstiges Webhosting.
1 Domain + 3Gb Webspace + unlimited Traffic schon ab 2,90 Euro
http://Luckyhost.de |
|
↑
|
|
|
-
glattwalzwerk
|
16.07.2008 um 01:37 (UTC) Titel: |
|
|
Der Unterschied zwischen dem IceBlue und dem CSS-Design ist gar nicht so riesig.
Du bekommst bei beiden Designs ein fertiges HTML-Grundgerüst gestellt. Die Fähigkeiten von HTML sind allerdings mehr als gering. Du kannst um genau zu sein nicht viel mehr als einen Text erstellen, ihn mit Absätzen formatieren, vielleicht eine Tabelle oder ein Bild hinzufügen. Um jetzt mehr möglichkeiten bei der Gestalltung zu haben gibt es CSS. Mit CSS kannst du z.B. die Schriftfarben und Größen, die Postion eines Bildes im Viewport (So wird der sichtbare Bereich deines Browserfensters genannt, oder auch das Verhalten wie der Text um deine Bilder herumläuft. Es können Abstände festgelegt werden und und und...
Alle das passiert intern auch in Schreibprogrammen wie Word.
Jetzt hast du beim IceBlue-Design schon einen fertigen CSS-Code der das Aussehen deiner Seite regelt und du änderst das Aussehen, indem du neuen CSS-Code hinzufügst. Der Browser liest diesen von oben nach unten und das zu letzt gesagte gilt. Jetzt kannst du dir denken, dass es nicht sehr sinnvoll ist, wenn der Browser erst Befehle einliest, die dann später doch wieder in andere geändert werden, weil es deine Seite langsamer macht.
Diese Probleme hast du im CSS-Design nicht, weil dort kein CSS-Code vorgegeben ist. Du musst ihn ganz selber schreiben. (Soviel ist es allerdings auch nicht was man wissen muss und später hat man viel weniger Probleme.)
Der größte Vorteil ist sicherlich, dass man das Layout seiner Seite komplett den eigenen Wünschen anpassen kann.
Wie gesagt. Der HTML-Code ist ja schon vorgegeben und mit ihm auch die Klassen. Über diese kannst du dann deinen CSS-Code bearbeiten. Eine Klasse oder eine ID ist ein Hilfsmittel.
Der Text einer Webseite kann aus vielen Absätzen bestehen. Wenn du einen von ihnen kursiv geschrieben haben möchtest, dann kannst du diesem Absatz eine ID geben.
Code:
<p id="dingsda"> ... </p>
Eine Id nutzt man wenn man auf ein einziges Element der Webseite zugreifen will. Wenn du jetzt mehre Absätze deiner Webseite bearbeiten willst dann gibst du ihnen eine Klasse. Dazu schreibst du in jeden Tag die Klasse hinzu.
Code:
<p class="vieledingsdas"> ... </p>
Wenn du nun mal deinen Quellcode im Browser betrachtest wirst du feststellen, dass deine Seite viele Klassen hat. Diese kannst du mit CSS bearbeiten.
Mit einem Punkt am Anfang greifst du auf eine Klasse zu.
Code:
.vieledingsgas {
...
}
Eine Raute steht für eine ID.
zwischen die geschweiften Klammern schreibst du nun die Befehle, die regeln wie etwas auf deiner Seite dargestellt wird.
Hier wäre ein Beispiel für einen Code. Er ist natürlich nicht fetig, aber du kannst ihn als ausgangspunkt zum experimentieren benutzen.
Code:
#extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
a:link {
color:#7b7b7b;
font-size:12px;
text-decoration:none;
}
a:visited {
color:#7b7b7b;
font-size:12px;
text-decoration:none;
}
a:hover {
color:gray;
font-size:12px;
text-decoration:none;
}
a:active {
color:gray;
font-size:12px;
text-decoration:none;
}
body {
z-index:1;
background-image:url();
background-repeat:no-repeat;
background-color:white;
margin-top:0px;
margin-left:0px;
top:0%;
left:0%;
font-family:serif;
}
#header_container {
display:block;
position:absolute;
z-index:2;
top:50px;
left:0px;
width:1000px;
height:150px;
background-image:url();
background-repeat:no-repeat;
background-color:black;
border:none;
}
#content {
display:block;
position:absolute;
z-index:3;
top:200px;
left:200px;
width:800px;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
color:black;
font-size:12px;
background-image:url();
background-repeat:no-repeat;
background-color:transparent;
border-style:none;
border-width:0px;
border-color:transparent;
overflow:auto;
text-align:justify
}
#nav_container {
display:block;
position:absolute;
z-index:4;
left:0px;
top:200px;
width:200px;
background-image:url();
background-repeat:no-repeat;
background-color:transparent;
border-style:none;
border-width:0px;
border-color:transparent;
overflow:auto;
}
li.nav_element {
list-style-type:none;
position:relative;
border-style:none;
border-width:0px;
border-color:transparent;
width:140px;
height:25px;
text-align:center;
font-size:0px;
z-index:5;
}
li.nav_element a{
display:block;
background-image:url();
background-color:transparent;
text-decoration:none;
color:white;
}
li.nav_element a:hover {
display:block;
text-decoration:none;
color:lime;
background-position: 0px 50px;
background-color:transparent;
}
li.nav_element a:active {
display:block;
text-decoration:none;
color:lime;
background-position: 0px 25px;
background-color:transparent;
}
#counter {
display:block;
position:absolute;
z-index:6;
left:750px;
top:10px;
width:10px;
height:20px;
font-size:12px;
} |
|
↑
|
|
|
-
jumpn-run
|
16.07.2008 um 14:44 (UTC) Titel: |
|
|
Danke....
Ich habe das Grundegrüst verwendet und alles past perfkt ich habe nur ein Problem und zwar wo ist die recht box/en in den code ?
mfg ______________ Günstiges Webhosting.
1 Domain + 3Gb Webspace + unlimited Traffic schon ab 2,90 Euro
http://Luckyhost.de |
|
↑
|
|
|
-
glattwalzwerk
|
16.07.2008 um 15:40 (UTC) Titel: |
|
|
Die rechten Boxen musst du dir extra erstellen.
Code:
<style type="text/css">
table.Name der Klasse{position:absolute;left:750px;top:250px;width:250px;height:500px; z-index:10}
</style>
<table style="border:none" class="Name der Klasse"><tr><td>
Inhalt der rechten Box
</td></tr></table>
Den Code musst du dann an deine Seite anpassen. Jede Box braucht eine Klasse der du einen Namen gibst. Damit ordnest du die Box dem CSS-Code zu. left ist der Abstand von Links, top, der Abstand von oben, width die Breite, height die Höhe der Box.
Das alles kopierst du in "Text über dem Design".
Ich habe einen Generator geschrieben mit dem du dir solche Boxen erstellen kannst.
http://glattwalzwerk.de.tl/Rechte-Boxen.htm |
|
↑
|
|
|
-
jumpn-run
|
16.07.2008 um 16:05 (UTC) Titel: |
|
|
Also wenn ich das richtig verstanden und ein hintergrundbild einfügen will so oder:
(habe jetz leider keine zeit um es auszuprobieren)
Code: <style type="text/css">
table.News{position:absolute;left:750px;top:250px;width:250px;height:500px;background-image:url(URL); z-index:10}
</style>
<table style="border:none" class="News"><tr><td>
HIER DEN INHALT DER RECHTEN BOX
</td></tr></table> ______________ Günstiges Webhosting.
1 Domain + 3Gb Webspace + unlimited Traffic schon ab 2,90 Euro
http://Luckyhost.de |
|
↑
|
|
|
-
glattwalzwerk
|
17.07.2008 um 00:07 (UTC) Titel: |
|
|
Genau. So wird es funktionieren. |
|
↑
|
|
|
-
jumpn-run
|
17.07.2008 um 08:57 (UTC) Titel: |
|
|
Ok Danke nochmal ______________ Günstiges Webhosting.
1 Domain + 3Gb Webspace + unlimited Traffic schon ab 2,90 Euro
http://Luckyhost.de |
|
↑
|
|
|
|