Druckversion des Themas

Hier klicken um das Topic im Orginalformat anzusehen

Forum Sefrengo.org _ Offtopic _ Ich brauch Hilfe bei der Erstellung einer css Datei !!!

Geschrieben von: Yvette Tue. 19. October 2010, 14:16

Ich brauche dringend hilfe beim erstellen des layout und der css datei, vielleicht kann mir jemand die folgenden angaben anpassen, wäre sehr dankbar da ich es einfach nicht hinbekomme.

/*
501
Author: Till
Rev: Y. Kollega
Version: Dec 2009
*/





/* Layout
----------------------------------------------- */

.body { text-align:center;}


div#cc-tp-container {
width:888px;
margin:0 auto;
background:url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/bg.png) repeat-y;
text-align:left;
}


* html div#cc-tp-container {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/bg.png');
}


div#cc-tp-header {
position:relative;
width:846px;
margin:0 20px 0px 20px;
}


div#cc-tp-emotion { width:846px; }


div#cc-tp-wrapper { width:868px; }


div#cc-tp-navi {
float:left;
width:178px;
margin-top:16px;
margin-left:7px;
background:url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/navi.png) top left repeat-y;
}

* html div#cc-tp-navi {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/navi.png');
}

html > body div#cc-tp-navi { margin-left:15px; }


div#cc-tp-content {
float:left;
width:457px;
margin:16px 0px 35px 6px;
background:url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/tent.png) top left repeat-y;
}

* html div#cc-tp-content {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/tent.png');
}


div#cc-tp-sidebar {
position:relative;
float:left;
width:206px;
margin:16px 0px 35px 4px;
background:url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/sidebar_bg.png) top right repeat-y;
}


div#cc-tp-footer {
padding:15px 10px 5px 10px;
}


div#cc-tp-footer-bg {
position:relative;
top:7px;
width:888px;
height:7px;
background:url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/footer.png) top left no-repeat;
}


* html div#cc-tp-footer-bg {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image', src='http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/footer.png');
}





/* Innenabstaende
----------------------------------------------- */

div#cc-tp-sidebar .cc-tp-gutter { padding:0px 7px 15px 17px; position:relative; }
div#cc-tp-content .cc-tp-gutter { padding:0 20px; }
div#cc-tp-footer .cc-tp-gutter { padding:0px 15px; }
div#cc-tp-button .cc-tp-gutter { padding:0 0 0 11px; }








/* Fonts
----------------------------------------------- */

div#cc-tp-footer,
div#cc-tp-footer a, div#cc-tp-footer a:visited,
div#cc-tp-footer td,
div#cc-tp-footer p {
color:white;
}









/* Navigation
----------------------------------------------- */

ul.mainNav1,
ul.mainNav2,
ul.mainNav3 {
margin:0;
padding:0;
list-style-type:none;
}


ul.mainNav1 li a { padding: 5px 0; }
ul.mainNav2 li a { padding: 5px 0; }
ul.mainNav3 li a { padding: 2px 0; }


ul.mainNav1 li { display:inline; }


ul.mainNav1 li a, ul.mainNav1 li a:visited {
display: block;
width:156px;
margin:0;
border-top:1px solid black;
outline:none;
background:#ccc url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/button_var.png) no-repeat left bottom;
text-align:center;
text-decoration:none;
cursor:pointer;
color:white;
}


ul.mainNav1 li a:hover {
color:white;
background:#CEB580 url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/mouseover.png) no-repeat left bottom;
}

* html ul.mainNav1 li a:hover {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/mouseover.png');
}


ul.mainNav1 li a.current, ul.mainNav1 li a.current:visited,
ul.mainNav1 li a.parent, ul.mainNav1 li a.parent:visited {
color:white;
background:#CEB580 url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/mouseover.png) no-repeat left bottom;
}


ul.mainNav2 li a, ul.mainNav2 li a:visited,
ul.mainNav3 li a, ul.mainNav3 li a:visited {
display: block;
width:156px;
margin:0;
border-top:1px solid black;
outline:none;
background: #444;
filter:none;
text-align:center;
text-decoration:none;
color:white;
}


ul.mainNav3 li a, ul.mainNav3 li a:visited {
font-size:80%;
color:#CCC;
}


ul.mainNav2 li a:hover,
ul.mainNav3 li a:hover {
filter:none;
background:#999;
}


* html ul.mainNav2 li a:hover,
* html ul.mainNav3 li a:hover {
filter:none;
background:#999;
}


ul.mainNav2 li a.current, ul.mainNav2 li a.current:visited,
ul.mainNav2 li a.parent, ul.mainNav2 li a.parent:visited,
ul.mainNav3 li a.current, ul.mainNav3 li a.current:visited {
color:#444;
filter:none;
background:#CEB580;
}








/* Header Sub-Elements
----------------------------------------------- */

div#cc-tp-header span#cc-tp-btop {
position:absolute;
z-index:9;
left:-7px;
top:0;
width:860px;
height:11px;
background:url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/h_border_t.png) no-repeat left top;
}

* html div#cc-tp-header span#cc-tp-btop {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image', src='http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/h_border_t.png');
}


div#cc-tp-header span#cc-tp-bright {
position:absolute;
z-index:8;
left:840px;
top:11px;
width:13px;
height:152px;
background:url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/h_border_r.png) no-repeat left top;
}

* html div#cc-tp-header span#cc-tp-bright {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image', src='http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/h_border_r.png');
}


div#cc-tp-header span#cc-tp-bbottom {
position:absolute;
z-index:7;
left:-7px;
top:163px;
width:860px;
height:15px;
background:url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/h_border_b.png) no-repeat left bottom;
}

* html div#cc-tp-header span#cc-tp-bbottom {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image', src='http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/h_border_b.png');
background: none;
}


div#cc-tp-header span#cc-tp-bleft {
position:absolute;
left:-7px;
top:11px;
z-index:6;
width:13px;
height:152px;
background:url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/h_border_l.png) no-repeat left top;
}

* html div#cc-tp-header span#cc-tp-bleft {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image', src='http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/h_border_l.png');
}







/* Navi Sub-Elements
----------------------------------------------- */

div#cc-tp-navi span#cc-tp-top {
display:block;
width:178px;
height:12px;
background:url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/na_top.png) no-repeat left top;
}

* html div#cc-tp-navi span#cc-tp-top {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image', src='http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/na_top.png');
}


div#cc-tp-navi span#cc-tp-bottom {
display:block;
width:178px;
height:14px;
background:url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/na_bottom.png) bottom left no-repeat;
}

* html div#cc-tp-navi span#cc-tp-bottom {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image', src='http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/na_bottom.png');
}







/* Content Sub-Elements
----------------------------------------------- */

div#cc-tp-content span#cc-tp-ctop {
display:block;
width:457px;
height:15px;
background:url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/co_border_t.png) no-repeat left top;
}

* html div#cc-tp-content span#cc-tp-ctop {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image', src='http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/co_border_t.png');
}


div#cc-tp-content span#cc-tp-cbottom {
position:relative;
display:block;
width:457px;
height:14px;
background:url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/co_border_b.png) no-repeat left top;
}

* html div#cc-tp-content span#cc-tp-cbottom {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image', src='http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/co_border_b.png');
}






/* Sidebar Sub-Elements
----------------------------------------------- */

div#cc-tp-sidebar span#cc-tp-sidetop {
display:block;
width:206px;
height:16px;
background:url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/sid_border_t.png) top left no-repeat;
}


div#cc-tp-sidebar span#cc-tp-sidebottom {
display:block;
width:206px;
height:16px;
background:url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/sid_border_b.png) top left no-repeat;
font-size:0px;
}

Geschrieben von: pawel Tue. 19. October 2010, 17:23

Das ist doch nicht dein Ernst, dass du uns hier eine CSS-Datei um die Ohren klatscht.
Stell Dir mal eine (Word)Formatvorlage ohne Dokument vor. Das ist komplett sinnvoll.
Stylesheets müssen sich auf eine Dokumentenstruktur (also das HTML) beziehen.

Am besten Du fragst den Autor.
Ansonsten brauche ich regelmäßig auch Hilfe, sage aber nicht wofür und wobei.

Geschrieben von: Yvette Tue. 19. October 2010, 18:49

da hast du mich wohl bischen missverstanden aber egal....

es ging um die einträge wie z.B.

* html div#cc-tp-content span#cc-tp-cbottom {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image', src='http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/co_border_b.png');

ich habe bereits ein layout "HTML" und eine css datei mit den regeln erstellt aber es gibt hier in dieser css datei einträge wie z.b. der hier oben, womit ich nicht weiß wohin

und z.b. solche einzträge padding:15px 10px 5px 10px;

Geschrieben von: pawel Tue. 19. October 2010, 20:14

Du willst also die CSS erklärt haben?
Diese wurde für alte IE entwicklt, die noch keine Alphatransparenzen beherrschten. Kannst du heute vermutlich ersatzlos streichen.

Für eine Anpassung der CSS ist es nötig, die HTML-Struktur zu kennen.


Geschrieben von: Yvette Thu. 21. October 2010, 12:21

ja, so ungefähr.

es handelt sich hierbei um eine seite die momentan noch bei einem anderem anbieter ist und ich möchte die jetzt in sefrengo einbinden und dann bei dem anderem anbieter kündigen.

wie komme ich an die html-struktur ran? über seitenquelltext ?

Geschrieben von: FireFlyer Thu. 21. October 2010, 17:23

Über den Quelltext, genau!

Geschrieben von: Yvette Thu. 21. October 2010, 18:30

Bsten Danke FireFlyer, das ist doch mal nen korrekte antwort, ich versuchs ob ich klar komme

Geschrieben von: paulinsche Fri. 22. October 2010, 07:46

Hier ein paar Links zu den Themen HTML und CSS:
http://little-boxes.de/
http://www.css4you.de/
http://de.selfhtml.org/


Geschrieben von: Yve Wed. 3. November 2010, 15:01

habe das soweit jetzt alles hinbekommen bis auf die navigation (weil drei ebenen und 1. und 2. / 3. verschieden) dabei brauche ich auf jeden fall hilfe danke schon mal im voraus

/* Navigation
----------------------------------------------- */

ul.mainNav1,
ul.mainNav2,
ul.mainNav3 {
margin:0;
padding:0;
list-style-type:none;
}


ul.mainNav1 li a { padding: 5px 0; }
ul.mainNav2 li a { padding: 5px 0; }
ul.mainNav3 li a { padding: 2px 0; }


ul.mainNav1 li { display:inline; }


ul.mainNav1 li a, ul.mainNav1 li a:visited {
display: block;
width:156px;
margin:0;
border-top:1px solid black;
outline:none;
background:#ccc url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/button_var.png) no-repeat left bottom;
text-align:center;
text-decoration:none;
cursor:pointer;
color:white;
}


ul.mainNav1 li a:hover {
color:white;
background:#CEB580 url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/mouseover.png) no-repeat left bottom;
}

* html ul.mainNav1 li a:hover {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/mouseover.png');
}


ul.mainNav1 li a.current, ul.mainNav1 li a.current:visited,
ul.mainNav1 li a.parent, ul.mainNav1 li a.parent:visited {
color:white;
background:#CEB580 url(http://u.jimdo.com/www25/o/layout/l16350a48357ab226/img/mouseover.png) no-repeat left bottom;
}


ul.mainNav2 li a, ul.mainNav2 li a:visited,
ul.mainNav3 li a, ul.mainNav3 li a:visited {
display: block;
width:156px;
margin:0;
border-top:1px solid black;
outline:none;
background: #444;
filter:none;
text-align:center;
text-decoration:none;
color:white;
}


ul.mainNav3 li a, ul.mainNav3 li a:visited {
font-size:80%;
color:#CCC;
}


ul.mainNav2 li a:hover,
ul.mainNav3 li a:hover {
filter:none;
background:#999;
}


* html ul.mainNav2 li a:hover,
* html ul.mainNav3 li a:hover {
filter:none;
background:#999;
}


ul.mainNav2 li a.current, ul.mainNav2 li a.current:visited,
ul.mainNav2 li a.parent, ul.mainNav2 li a.parent:visited,
ul.mainNav3 li a.current, ul.mainNav3 li a.current:visited {
color:#444;
filter:none;
background:#CEB580;
}

Geschrieben von: jwitt Wed. 3. November 2010, 16:13

und wie lautet die Frage?

Geschrieben von: Yve Wed. 3. November 2010, 16:25

die frage lautet....

wie ich das jetzt in sefrengo umsetze ...

die erste ebene habe ich

Geschrieben von: luxli Thu. 4. November 2010, 00:06

Hallo Yve

Dein Problem hat eigentlich nichts mit Sefrengo zu tun. Hilfe für CSS und HTML hole ich in der Regel im http://www.html.de/forum.php das dürfte auch in deinem Fall die richtige Adresse sein.

Dies als Ergänzung zu den von paulinsche erwähnten Adressen.

Geschrieben von: paulinsche Thu. 4. November 2010, 12:02

Schau dir doch die Dokumentation http://wiki.sefrengo.org/handbuch/schnelleinstieg-tutorial-die-erste-sefrengo-webseite-erstellen an.
Da ist alles sehr gut erklärt. Und bei der Navigation schaust du dir am besten erst mal an, wie das Modul den Code ausgibt und erstellt dann die CSS dementsprechend.

Unterstützt von Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)