style.css, alle Elemente verschieben?

Orchidee · 6. Juni 2010

Hi,

bin gerade am Anpassen eines style.css von jcomment (andere Schablone, da ich keine schönere im Netz finde).
Möchte das ganze mehr in die Mitte zentriert verschieben. geht leider durch mein Homepage-Template nicht so gut.
Muss ich alle Elemente einzeln verschieben, oder geht das auch mit einem Befehl, also für alle Elemente, wie z.B. margin-left-irgendwas.

Oder bin ich auf einem ganz falschen Weg. Gibt es Programme, die das "live" machen, also WYSYGIY mit direktem Verschieben der Elemente. Habe gelesen das MS Web Developer Express so ähnlich ermöglicht.

Danke schon mal.

Mr. Snoot · 6. Juni 2010

Wenn sich alle Elemente in einem div befinden genügt es eigentlich, dieses eine div zu zentrieren.

Identify · 6. Juni 2010

Hi,

mach das ganze in ein Div.

<div style="margin:0px auto;>
dein Code der zentriert werden soll
</div>

damit wird dein div immer in der bildschirmmitte zentriert.

hier nochmal zum nachlesen: http://www.bluerobot.com/web/css/center1.html

gruss
chris

ScoutX · 6. Juni 2010

Je nach Komplexität des css ist dies eher unwahrscheinlich zu bewerkstelligen.
Ich kenne kein vernünftiges (wohlmöglich auch noch kostenfreies) Programm, bei dem man mit der Maus die Elemente auf dem Bildschirm verschiebt und dann das style.css dahingehend umgeschrieben wird.
Es ist auch deswegen schwierig, da man immernoch für ältere Browser und gegen Browserinkompatibilitäten arbeiten muss. Viele solcher Wysiwyg arbeiten auch nicht streng HTML 4 respektive 5 konform.

Was man machen kann: Mit Erweiterungen wie Firebug und Ruler arbeiten. Man kann damit die Werte von Webseiten im Cache des Browsers ändern. Wenn Du nicht weißt, was Firebug (oder ähnliche Addons) ist, dann sollte man sich damit beschäftigen. Auch für Anfänger kann man damit schnell Ergebnisse erzielen. Zudem lernt man die HTML-Sprache intuitiv.

Die veränderten Werte trägt man dann in die eigentliche css ein, was eine Sache von Minuten ist.

@ Identify: Das ist nicht dein Ernst, oder? Das funktioniert in der praktischen Anwendung nicht.
Außerdem hilft es dem Threadersteller nicht. Dieser Link kann als depreceted betrachtet werden.

Orchidee · 6. Juni 2010

Ich habe mal das mit DIV ausprobiert, hat leider nicht funktioniert. ScoutX, ist DIV wirklich so falsch, lohnt sich Weiters probieren also nicht.

@Identify, fehlt da noch ein abschließendes " ?

Also muß ich alles von Hand machen?

Die Hälfte habe ich ja schon, aber extrem mühsam für einen Neuling.

Adagio · 6. Juni 2010

Bei Identify fehlt noch eine Breitenangabe mit width, ansonsten ist das Div 100% breit - so kann man es schlecht "zentrieren"

Zeig uns doch mal dein HTML und CSS, dann können wir dir eher helfen.

Orchidee · 6. Juni 2010

Die Hälfte habe ich schon durch "#jc .rbox {margin-left: 150px;margin-right: 170px;width:auto;overflow: hidden}" (9te Zeile von unten) verschoben, aber der untere Teil, wahrscheinlich ab "/* Quote, Code and Hidden block styles */
" geht nicht in die Mitte. Der Teil wird nur eingeblendet, wenn man auf "Kommentar schreiben" klickt.

HTML:

/* content plugin styles */

/* Meine Änderngen mit _*_ gekennzeichnet */

/* _*_Feldhintergrundfarbe #fff zu #dedede (hellgrau) und images jc_rb_x (x=4 mal) zu #dedede gefärbt, */

.jcomments-links {margin-top: 10px; clear:both; text-align: left}
.comments-link, .readmore-link{padding: 0 5px 5px 14px;background-image: url(images/jc_blog.gif);background-repeat: no-repeat}
.comments-link {background-position: 0 -27px}
.readmore-link {background-position: 0 2px}
	
/* JComments common styles */
#jc a:link, #jc a:visited, #jc a:hover {outline: none} 
#jc .clear {clear: both; height: 1px; overflow: hidden}
#jc .busy { display:none; margin: 3px auto; padding: 0; width: 16px; height: 16px; background: url(images/jc_busy.gif) no-repeat; }

#jc h4 {color: #555;background-color: inherit;font-weight: bold;text-align: left;border-bottom: 1px solid #D2DADB;padding: 0 0 2px 0;margin-bottom: 10px}

#jc p.message {color: #777;background-color: inherit; background-image: none; text-align: center;text-decoration: none;text-transform: none;text-indent: 0;padding: 5px 0 0 0;border-top: 1px solid #D2DADB}

#comments {margin: 0;padding: 0;width: 100%;text-align: left;text-decoration: none;text-transform: none;text-indent: 0}
#comments a {color: #849B9F;background-color: inherit;font-weight: normal;text-decoration: none}


/* _*_statt Schrift "Kommentare aktualisieren" rot (#cc0000) nun schwarz (#000). */
#comments a:active, #comments a:focus, #comments a:hover {color: #000}
#comments a[rel*=external] {background: url(images/jc_link.gif) no-repeat center right;padding: 0 10px 0 0;margin: 0 2px}
	
/* RSS and Refresh*/
#comments .rss, #comments .refresh, #comments .subscribe {padding: 0 0 0 14px;margin: 0 0 0 2px;border: none}
#comments .rss {background: url(images/jc_rss.gif) no-repeat center left}
#comments .refresh {background: url(images/jc_refresh.gif) no-repeat center left}
#comments .subscribe {background: url(images/jc_subscribe.gif) no-repeat center left}
#comments h4 .rss, #comments h4 .refresh {padding: 0 0 0 10px;margin: 0 0 0 5px;display: inline}

/* List footer */
#comments-list-footer {margin: 0 0 10px 20px !important}

/* Show/hide form */
#comments-form-link .showform {margin: 5px 0 0 22px;padding: 0 0 5px 14px;background: url(images/jc_blog.gif) no-repeat 0 -28px;border: none;font-weight: bold;display: block}


/* _*_Bein drüberfahren wird "Kommentar schreiben" auch Schwarz (#000). */
#comments-form-link .showform:active, #comments-form-link .showform:focus, #comments-form-link .showform:hover {color: #000}

/* Comment */
#comments .comment-box {margin: 0;padding: 0; color: #999}
#comments .comment-avatar {float: left;margin: 0;padding: 0}
#comments .avatar-indent {padding-left: 40px}

#comments .comment-anchor {color: #777; text-decoration: none; border: none}
#comments .comment-author, #comments .author-homepage {color: #3c452d;font: bold 1em Verdana, Arial, Sans-Serif;margin: 0;padding: 0}
#comments .author-homepage {text-decoration: none; border-bottom: 1px dotted #3c452d}


/* _*_statt Schrift "Titel" rot (#b01625) nun blau (#0B55C4) */
#comments .comment-title {color: #0B55C4;font: bold 1em Verdana, Arial, Sans-Serif;margin: 0;padding: 0}

/* Avatar */
#comments .comment-avatar img {width: 32px;border: none !important;}

/* Date and Time*/	
#comments .comment-date {font-size: 10px;color: #999;margin: 0;padding: 0 0 0 12px;background: url(images/jc_date.gif) no-repeat center left}
#comments .comment-body {color: #777;margin: 6px 0 0;padding:0 0 2px}

/* Quote, Code and Hidden block styles */
#comments .quote, #comments blockquote, #comments .code, #comments code, #comments pre {margin: 5px 0 5px 10px; display: block; clear: both; background-image: none}
#comments blockquote, #comments .hidden, #comments code, #comments pre {color: #849B9F;text-align: left;padding: 8px;margin-bottom: 8px}
#comments blockquote, #comments .hidden {border: 1px dashed #849B9F}
#comments code, #comments pre {border: 1px solid #dedede;overflow: hidden;white-space:normal}
#comments .code {background: none; border: none; padding:0}
#comments .quote {color: #777}
#comments .hidden {clear: both;display: block;margin: 5px 0}

/* Quote and Reply to buttons panel */
#comments .comments-buttons {height: 15px;float: right}

#comments .email, #comments .emailactive {font: normal 1em Verdana, Arial, Sans-Serif; text-decoration: none; white-space: normal; margin: 0; padding: 0; line-height: 10px; cursor: pointer; border-bottom: 1px dotted #999}
#comments .email {color: #444; background-color: inherit}
#comments .emailactive {color: #cc0000; background-color: inherit}
#comments .email img, #comments .emailactive img {padding: 0}

#comments p {font: normal 1em Verdana, Arial, Sans-Serif;margin: 5px 5px 5px 0;	padding: 0; text-decoration: none; text-transform: none; text-indent: 0}

#comments .comment-body img {padding: 0; border: 0 none}
#comments .comment-body .img {padding: 4px 0 !important; max-width: 500px}
#comments .toolbar {clear: both;color: #ccc;border-top: 1px solid #ccc;margin: 8px 0 0 0;padding: 5px 0 0 0}
#comments .toolbar img{cursor: pointer; padding: 0; margin: 0}

/* Comments list */
#comments .comments-list {margin-left: 20px;height: 1%}
#comments .even, #comments .odd {background-image: none;background-color: transparent;color: #3c452d;border: none; margin-left: 0;margin-bottom: 10px;padding: 0}

#comments-list .comments-inline-edit {padding: 5px; margin: 5px 0; color: inherit;background-color: #dedede;border: 1px solid #ccc}

/* Comment form */
div.comments-policy {color: #777; text-align: left;text-decoration: none;text-transform: none;text-indent: 0; background-color: inherit; border: 1px dotted #ccc; padding: 5px; margin: 5px 0 5px 20px; margin-left: 20px !important;}
div.comments-policy ol, div.comments-policy ul {margin: 0px;padding: 5px 0 0 20px;line-height: 5px}
div.comments-policy ol li, div.comments-policy ul li {font: normal 1em Verdana, Arial, Sans-Serif; margin: 0;padding: 0;border: none;line-height: 5px}

#comments-form, #comments-form p, #comments-report-form, #comments-report-form p, #comments-form span, #comments-form .counter {text-align: left;text-decoration: none;text-transform: none;text-indent: 0}
#comments-form p, #comments-report-form p, #comments-form span, #comments-form .counter {color: #777;font: normal 1em Verdana, Arial, Sans-Serif}
#comments-form p, #comments-form #comments-form-buttons, #comments-form #comments-form-error, #comments-form #comments-form-captcha-holder {font: normal 1em Verdana, Arial, Sans-Serif;margin-left: 20px !important;margin-top: 10px;margin-bottom: 8px;overflow: hidden;padding: 0}

#comments-inline-edit {border: 1px solid #ccc;margin: 5px 0 0 0;background: #dedede}
#comments-inline-edit #comments-form p, #comments-inline-edit #comments-form #comments-form-buttons,
#comments-inline-edit #comments-form-error {font: normal 1em Verdana, Arial, Sans-Serif;margin-left: 5px !important;margin-left: 5px;margin-top: 5px;margin-bottom: 2px;padding: 0}

#comments-form img.smile {margin: 0 3px 3px 0;padding: 0;border: none;cursor: pointer}
#comments-form img.captcha {padding: 0;margin: 0 0 3px 0;border: 1px solid #ccc}

/* _*_refreshg.gif (grau) zu refresh.gif (grün) geändert. */
#comments-form span.captcha {padding: 0 0 0 12px; color: #777; background: url(images/jc_refresh.gif) no-repeat 0 2px;cursor: pointer}
/* _*_Bein drüberfahren wird Captcha "Aktualisieren" auch Schwarz (#000). */
#comments-form span.captcha:active, #comments-form span.captcha:focus, #comments-form span.captcha:hover {color: #000}

#comments-form label, #comments-report-form label {color: #777; background-color: inherit; line-height: 1.5em; padding: 0;margin: 0;vertical-align: middle}
#comments-form input, #comments-report-form input, #comments-form textarea {color: #444;background-color: #dedede;padding: 0 !important;margin: 0;border: 1px solid #ccc}
#comments-form input {width: 170px;margin-bottom: 2px;height: 1.5em}


/* _*_Schriftfarbe beim Tippen Schwarz (#000) */
#comments-form input.selected, #comments-form textarea.selected {color: #000;background-color: #dedede !important;border: 1px solid #849B9F}
#comments-form input.error, #comments-form textarea.error {border: 1px solid #f00;text-decoration:none;text-transform:none;background-color: #dedede}

#comments-form input.checkbox {width: 16px; line-height: 1.5em; padding: 0; margin: 0; vertical-align: middle; border: none}
#comments-form input.captcha {width: 116px; margin: 3px 0 5px 0}
#comments-form textarea {max-width: 400px !important;width: 350px;margin:0}

#comments-form-message {padding: 5px 5px 5px 25px;margin-right: 5px;display: block}
.comments-form-message-error {background: #FFD86F url(images/jc_error.gif) no-repeat 4px 50%}
.comments-form-message-info {background: #DFEEFF url(images/jc_info.gif) no-repeat 4px 50%}

#comments-form .counterpanel {height:13px;display:block;overflow:hidden;color: #ccc;padding: 0;margin:0;border:1px solid #ddd;border-top-width:0;max-width: 400px !important;width: 350px;background-color: #eee}

#comments-form .grippie {height:13px;display:block;overflow:hidden;color: #ccc;padding: 0;margin:0;border:1px solid #ddd;border-top-width:0;max-width: 400px !important;width: 350px;cursor:s-resize;background: #eee url(images/resize.gif) no-repeat right 2px}
#comments-form .grippie .counter {font-size: 10px;padding: 0; margin: 0}
#comments-form .grippie span {display:block;float:left}
#comments-form .grippie span span {display:inline;float:none}

#comments-form .btn, #comments-report-form .btn {float: left; background: url(images/jc_btnl.gif) no-repeat; margin-right: 5px}
#comments-form .btn div, #comments-report-form .btn div {margin:0 -1px 0 0; float: left;background: url(images/jc_btnr.gif) 100% 0 no-repeat}
#comments-form .btn a, #comments-report-form .btn a {text-decoration: none; height: 22px;line-height: 22px;font-size: 12px;font-weight: bold;color: #777;padding: 0 5px;border: none}


/* _*_statt Buttonschrift blau (#0B55C4) nun schwarz (#000) */
#comments-form .btn a:hover , #comments-report-form .btn a:hover {text-decoration: none; color: #000}
#comments-form-smilespanel {display: none;cursor: pointer;padding: 2px;max-width: 200px;background-color: #dedede;border: 1px solid #ccc;overflow: auto;left: 0;top: 0;position:absolute;z-index: 999999 !important;}

#comments-footer, #comments-footer a {color: #ccc !important; background-color: inherit; font: normal 9px Verdana, Arial, Sans-Serif !important}
#comments-footer {display: block;height: 14px;border-top: 1px solid #ccc;padding-top: 1px;margin-top: 4px;text-align: right}
#comments-footer a {text-decoration: none !important;text-transform: none;padding: 0;margin: 0;border: none !important;float: right; background: none !important}

/* Pagination */
body #jc #nav-bottom, body #jc #nav-top {line-height: 19px !important;line-height: 17px;height: auto !important;text-align: center; margin: 0 auto;}
#jc #nav-bottom span.page, #jc #nav-top span.page {color: #777;background-color: #eee;border: 1px solid #d6dadd}
#jc #nav-bottom span.hoverpage, #jc #nav-top span.hoverpage {color: #777;background-color: #e8e9ea;border: 1px solid #d6dadd}
#jc #nav-bottom span, #jc #nav-top span {color: #777;background-color: inherit;font-size: 10px;font-family: Arial, sans-serif;margin: 0 2px;height: 15px;padding: 2px 8px;cursor: pointer;vertical-align: top}
#jc #nav-bottom span.activepage, #jc #nav-top span.activepage {color: inherit;background-color: white}
#jc div#nav-bottom, #jc div#nav-top {position: relative;z-index: 2;width: 100%}
#jc div#nav-bottom {margin: 10px 0 0 0;padding: 0;background: url(images/jc_dot.gif) repeat-x top left}
#jc #nav-bottom span.activepage {border-bottom: 1px solid #d6dadd;border-left: 1px solid #d6dadd;border-right: 1px solid #d6dadd;border-top: 1px solid white}
#jc div#nav-top {margin: 10px 0;background: url(images/jc_dot.gif) repeat-x bottom}
#jc #nav-top span.activepage {border-top: 1px solid #d6dadd;border-left: 1px solid #d6dadd;border-right: 1px solid #d6dadd;border-bottom: 1px solid white}

/* Vote */
#jc span.comments-vote {width: 6em;height: 15px;float: right}
#jc span.comments-vote a{width: 15px;height: 14px;float: left;margin: 0 3px 0 0;display: block;background-repeat: no-repeat;background-image: url(images/jc_vote.gif);border: none !important; text-decoration: none}
#jc span.comments-vote .busy{margin: 0; float: right; width: 16px}
#jc .vote-good{background-position: 0 0}
#jc .vote-poor{background-position: -15px 0}
#jc span.vote-good,#jc span.vote-poor,#jc span.vote-none{margin: 0;float: right;font: bold 1em Verdana, Arial, Sans-Serif;line-height: 14px}
#jc span.vote-good{color: #339900}

#jc span.vote-poor{color: #cc0000}
#jc span.vote-none{color: #A9A9A9}

/* BBCode */
#jc span.bbcode{width: auto;height: 23px;display: block;margin-bottom: 5px}
#jc .bbcode a, #jc .bbcode a:focus, #jc .bbcode a:active, #jc .bbcode a:hover{width: 23px;height: 23px;float: left;margin: 0 2px 0 0;display: block;background-color:transparent !important;background-repeat: no-repeat;background-image: url(images/jc_bbcodes.gif);text-decoration:none;border:none !important}
#jc a.bbcode-empty{background-position: 0 0}
#jc a.bbcode-b{background-position: -30px 0 !important}
#jc a.bbcode-i{background-position: -60px 0 !important}
#jc a.bbcode-u{background-position: -90px 0 !important}
#jc a.bbcode-s{background-position: -120px 0 !important}
#jc a.bbcode-url{background-position: -150px 0 !important}
#jc a.bbcode-img{background-position: -180px 0 !important}
#jc a.bbcode-list{background-position: -210px 0 !important}
#jc a.bbcode-hide{background-position: -240px 0 !important}
#jc a.bbcode-quote{background-position: -270px 0 !important}
#jc a.bbcode-smile{background-position: -300px 0 !important}
#jc a.bbcode-youtube{background-position: -330px 0 !important}
#jc a.bbcode-google{background-position: -360px 0 !important}
#jc a.bbcode-wiki{background-position: -390px 0 !important}
#jc a.bbcode-facebook{background-position: -420px 0 !important}
#jc a.bbcode-flickr{background-position: -450px 0 !important}

#jc span.bbcode img {width: 23px;height: 23px;float: left;margin: 0 2px 0 0}
#jc .custombbcode {width: 23px;height: 23px;float: left;margin: 0 2px 0 0;display: block;text-decoration:none;cursor: pointer}

/* Rounded comments */
#jc .rbox {margin-left: 150px;margin-right: 170px;width:auto;overflow: hidden}
#jc .rbox div {text-align: left;margin: 0}
#jc .rbox_t {margin: 0;border-top: 1px solid #ccc;background-color: #dedede}
#jc .rbox_tl {background: url(images/jc_rb_tl.gif) 0 0 no-repeat;padding-left: 13px}
#jc .rbox_tr {height: 10px;overflow: hidden;background: url(images/jc_rb_tr.gif) 100% 0 no-repeat;padding-right: 13px}
#jc .rbox_m {border-left: 1px solid #ccc;border-right: 1px solid #ccc;width: auto;padding: 0 8px; background-color:#dedede;line-height: 100%}
#jc .rbox_b {margin-top: -5px;border-bottom: 1px solid #ccc;background-color: #dedede;height: 12px;line-height: 12px}
#jc .rbox_bl {background: url(images/jc_rb_bl.gif) 0 100% no-repeat;padding-left: 13px}
#jc .rbox_br {height: 13px;background: url(images/jc_rb_br.gif) 100% 100% no-repeat;padding-right: 13px}

Edit
Meinst du die index.html:
<html><body bgcolor="#FFFFFF"></body></html>

Ergänzung (6. Juni 2010)

Das ist ja eine mühsame Arbeit, aber fast geschafft. ein paar Elemente hat es einfach mit verschoben und ich bekomme die nicht zurück. Wenn die Hersteller schon die Möglichkeit bieten verschiedene Templates zu laden, dann sollte man doch mit Parametern arbeiten und dokumentieren. Egal jcomments ist ja Free und sehr gut.

Aber warum geht das mit DIV nicht? Habe mal den ganzen CSS-Text rein genommen, aber wahrscheinlich war die Anweisung nicht korrekt. Das Ändern von einzelnen Werten ist auf jeden Fall nichts mehr für die Zukunft.

ScoutX · 6. Juni 2010

Zugegeben ich habe deinen Code nur überflogen. Ich möchte dich aber auf einige Schwierigkeiten aufmerksam machen, da Du immer nach Div bzw. einem Container fragst.

Zurück zu Identify. Wie schon angemerkt wurde, fehlt mindestens noch der Wert "width", aber selbst dann arbeiten viele immer noch mit der Hilfskrücke text-align.
Dies war und ist leider noch Mittel zum Zweck, einen Container zu zentrieren. Leider wird text-align insbesondere vom IE aber auch von Firefox und Co. nicht immer so interpretiert wie man es denkt (einfach googeln).
Identify wollte Dir sicherlich sagen, pack deine gesamte Seite in einen weiteren Container.
Den Inhalt selbst mittig zu bekommen geht damit nicht.

Nochmals betont. Den Inhalt mittig zu bekommen, ist einer der schwierigsten Aufgaben des Webseitenstylens. Die früheren Möglichkeiten sind von der W3C als depricated erklärt worden,
funktionieren bei einigen Browsern so auch nicht mehr. Insbesondere Inhalte von Tabellen (und damit auch den meisten Navigationsmenüs) in Kombination zu anderen Elementen exakt auszurichten, ist Sysiphusarbeit und man muss dann noch Browsereigenarten umschiffen können.
Es wird auch in absehbarer Zukunft keine ordentlichen Wysiwyg dafür geben können, denn ich behaupte, es gibt kaum (k)einen Programmierer, der alle Lücken und alle Browsereigenheiten regelkonform umschiffen kann.
Schaut man sich selbst die Templates großer Content Management Systeme an, sind diese mit Fehlern übersät.

Dein Code sieht zwar sauber aus, aber erstens ist er in einer sehr nur jcomments typischen Abart aufgeschrieben worden und zweitens arbeitet das Style mit veralteten Dingen wie font-weight und es wird wenig über em (für die Schrift) definiert.
Meine persönliche Meinung: Das Jc System insbesondere dieses Template ist alles andere als optimal geschrieben und ist nicht dafür geeignet, aufwendige Seiten präzise umzustylen.

Adagio · 6. Juni 2010

aber selbst dann arbeiten viele immer noch mit der Hilfskrücke text-align.
Dies war und ist leider noch Mittel zum Zweck, einen Container zu zentrieren. Leider wird text-align insbesondere vom IE aber auch von Firefox und Co. nicht immer so interpretiert wie man es denkt (einfach googeln).

Das ist schlichtweg falsch.

Allein der alte IE5.x und der IE6 im Quirksmodus interpretieren margin: 0 auto nicht korrekt, hier muss man (auch wenn es falsch ist) mit text-align zentrieren.

Den IE5 kann man aber vergessen und dem IE6 braucht man nur einen ordentlichen Doctye geben - somit muss man diese "Hilfe" nicht nutzen.

Alle anderen Browser interpretieren text-align und margin: 0 auto korrekt.

font-weight gehört zum normalen CSS, da ist nichts "falsches" dran.

Nochmals betont. Den Inhalt mittig zu bekommen, ist einer der schwierigsten Aufgaben des Webseitenstylens

Da muss ich widersprechen. Es ist alles andere, aber nicht Schwer.

Es ist echt erstaunlich, was hier als "Wissen" weiter gegeben wird - so kommt ein Fragender nie wirklich zum Ziel.

ScoutX · 6. Juni 2010

"viele" = viele Programmierer, nicht Browser.
Centern ist sehr schwer, denn man zentriert Container schon über width. Somit sackt man sich zig Probleme bei verschieden Auflösungen ein, wenn mehrere Container in einem Block sind.
Insbesondere Tabelleninhalte liegen im Nirvana gegenüber anderen Elementen, wenn man margin: auto verwendet. Auch Bilder können u.U. merkwürdige Verhaltensweisen zeigen.
Wenn Du meinst, Inhalte einfach zentriert ausrichten zu können, dass diese in jedem Browser an der exakt selben Stelle bei verschiedenen Auflösungen liegen, hast Du mir definitiv etwas voraus. Zugegeben: Ich versuche immer den Spagat zwischen absoluten und relativen Elementen, um den Widescreen-Besitzern auch zu Gute zu kommen.
Dass man das width Element einsetzen muss, damit margin: auto funktioniert, ärgert mich schon sehr lange.

Font-weight: Im CSS nicht falsch aber varaltet, wenn man font-weight: normal schreibt.
Bläht den Code auf. Ich bezog dies auf sein JS Template. Dies ist mir eben beim überfliegen des Codes aufgefallen.

Mr. Snoot · 6. Juni 2010

Wieso über width?

Ich mach das so:

Code:

body
{
  text-align:center; /* für < IE7 */
}

#div
{
  text-align:left; /* Seiteninhalt wieder links ausrichten */
  margin:0 auto;   /* standardkonforme horizontale Zentrierung */
}

Funktioniert in allen mir bekannten Browsern und natürlich auch unabhängig von der Auflösung.

Adagio · 6. Juni 2010

Centern ist sehr schwer, denn man zentriert Container schon über width

Nein, über width gibst du einem Blockelement nur eine Breite - zentriert wird es dann mit margin: 0 auto.

Insbesondere Tabelleninhalte liegen im Nirvana gegenüber anderen Elementen

Eine Tabelle ist auch kein normales Blockelement - zumal sollte man für reine Designzwecke schon lange keine Tabelle mehr nutzen (außer für tabellarische Daten).

Wenn Du meinst, Inhalte einfach zentriert ausrichten zu können, dass diese in jedem Browser an der exakt selben Stelle bei verschiedenen Auflösungen liegen, hast Du mir definitiv etwas voraus. Zugegeben: Ich versuche immer den Spagat zwischen absoluten und relativen Elementen, um den Widescreen-Besitzern auch zu Gute zu kommen.

Nun ja, ich mache das ja auch seit einigen Jahren hauptberuflich. Allerdings arbeite ich fast nur mit floats und vermeide absolute / relative Positionierungen.

Font-weight: Im CSS nicht falsch aber varaltet, wenn man font-weight: normal schreibt.

Es ist auch nicht "veraltet" - wenn überhaupt, ist es schlichtweg unnötig, weil es der Standardwert für viele (nicht alle!) Elemente ist.

Bei einem H1 bis H6 macht font-weight: normal allerdings Sinn, da der Standardwert hier fett (=bold!) ist.

Orchidee · 6. Juni 2010

Ich muss auch eher sagen, dass es keine besondere Leistung ist so Elemente zu verschieben. Es ist nur sehr mühsam und langweilig zu raten, wenn man nicht gerade den Code wie ein Buch lesen kann. Anfänger machen immer wieder den Fehler das Rad neu erfinden zu müssen, daher auch meine Frage: geht es leichter? Nagut, dann muss ich weiter lesen. Ausgang, Code und Ergebnis ist ja jetzt da. Hat einer eine Idee für zukünftige, ähnliche Probleme.

Leider hat es mir die Icons und den Aktualisieren-Text nach rechts verschoben, was ich gar nicht wollte. Jetzt bin ich am Suchen wo ich die Elemente wieder zurück bekomme.

Viele Template lassen es zu Inhalte in Bereiche zu setzen, aber meines macht da einfach nicht mit. Wenn ich etwas mittig haben will, muss ich links und rechts des zu zentrierenden Bereichs etwas stehen haben und dann habe ich noch einen Rahmen, den ich nicht will.
Egal mehr zentrieren muss ich nicht, aber das musste ich machen. Das Feld Kommentare klappt nur bei Klick auf. Im IE8 läuft es auch.

Adagio · 6. Juni 2010

Es wäre hilfreicher wenn du dein Teil online stellen würdest, dann könnten wir besser sehen was (und wie) du angestellt hast

Orchidee · 6. Juni 2010

das kann ich leider noch nicht machen.

Adagio · 6. Juni 2010

Öh, wenn du meinst ...

ScoutX · 6. Juni 2010

Viele Menüleisten sind zusammengewürfelte Tabellen. Mit denen habe ich die besagten Probleme.
@Adagio: Ich schreib nächstes Mal genauer

. Du nimmst also floats. Ich benutze diese selten, da mir schon einige lustige Anzeigefehler dadurch erschienen sind.
Für einen Gelegenheitsprogrammierer (wie mich) sind floats recht unübersichtlich.

@Orchidee: Nutzt Du nun Firebug?

Orchidee · 7. Juni 2010

ScoutX, deine Empfehlung werde ich sicher mal installieren und mich damit beschäftigen, wenn wieder so etwas ansteht. Jetzt bin ich aber fertig. Musste sogar teilweise margin und padding hinzufügen bzw. entfernen.

Ob das alles stimmt und Regelkonform ist? Es läuft auf jeden Fall im FF und IE. Das linke ist das Original (Schablone heißt es dort).
Das ganze würde bestimmt noch schöner gehen und morgen finde ich bestimmt eine im Netz, aber es reicht mir. Nur noch Schrift anpassen fertig.

Könnte man diese Werte als Parameter eintragen und die konkreten Werte in einer .ini Datei zuweisen? Das wäre es doch.

Ergänzung (7. Juni 2010)

Wen es interessiert. Hier die style.css. Einfach auf Webspace im Verzeichnis /xxx/components/com_jcomments/tpl eine Kopie des Verzeichnisses default machen und umbenennen (z.B. zentriert) und diese style.css hineinkopieren und die vorhandene ersetzen. In JComments kann man dann unter Einstellungen -> Aufbau die neue Schablone wählen.

Graue Ecken (MD5 vom RAR 42f4906601c47695d22a15777ef8eff4) ins neue Verzeichnis/images und
style.css zentriert (rechtes Bild) für JComments 2.2.0.0 [13/05/2010]. Ins Notepad++ kopieren (15639chars, 16100bytes, 217lines) und mit der Kodierung UTF-8 ohne BOM als style.css speichern. Hoffe das stimmt.

(Ich meine das mit UTF-8 ohne BOM, der Rest stimmt sicher!)

Code:

/* content plugin styles */

/* Meine Änderngen mit _*_ gekennzeichnet */

/* _*_Feldhintergrundfarbe #fff zu #dedede (hellgrau) und images jc_rb_x (x=4 mal) zu #dedede gefärbt, */

.jcomments-links {margin-top: 10px; clear:both; text-align: left}
.comments-link, .readmore-link{padding: 0 5px 5px 14px;background-image: url(images/jc_blog.gif);background-repeat: no-repeat}
.comments-link {background-position: 0 -27px}
.readmore-link {background-position: 0 2px}
	
/* JComments common styles */
#jc a:link, #jc a:visited, #jc a:hover {outline: none} 
#jc .clear {clear: both; height: 1px; overflow: hidden}
#jc .busy { display:none; margin: 3px auto; padding: 0; width: 16px; height: 16px; background: url(images/jc_busy.gif) no-repeat; }

/* _*_"Kommentare oben": text-align: left; zu margin-left: 171px; geändert*/
#jc h4 {color: #555;background-color: inherit;font-weight: bold;margin: 0 171px 0 171px;border-bottom: 1px solid #D2DADB;padding: 0 0 2px 0;margin-bottom: 10px}

#jc p.message {color: #777;background-color: inherit; background-image: none; text-align: center;text-decoration: none;text-transform: none;text-indent: 0;padding: 5px 0 0 0;border-top: 1px solid #D2DADB}

#comments {margin: 0;padding: 0;width: 100%;text-align: left;text-decoration: none;text-transform: none;text-indent: 0}
#comments a {color: #849B9F;background-color: inherit;font-weight: normal;text-decoration: none}


/* _*_statt Schrift "Kommentare aktualisieren" rot (#cc0000) nun schwarz (#000). */
#comments a:active, #comments a:focus, #comments a:hover {color: #000}
#comments a[rel*=external] {background: url(images/jc_link.gif) no-repeat center right;padding: 0 10px 0 0;margin: 0 2px}
	
/* RSS and Refresh*/
#comments .rss, #comments .refresh, #comments .subscribe {padding: 0 0 0 14px;margin: 0 0 0 2px;border: none}
#comments .rss {background: url(images/jc_rss.gif) no-repeat center left}
#comments .refresh {background: url(images/jc_refresh.gif) no-repeat center left}
#comments .subscribe {background: url(images/jc_subscribe.gif) no-repeat center left}
#comments h4 .rss, #comments h4 .refresh {padding: 0 0 0 10px;margin: 0 0 0 5px;display: inline}

/* List footer */
/* _*_"Kommentarliste aktualisieren": margin: 0 0 10px 20px zu margin: 0 0 10px 168px geändert*/
#comments-list-footer {margin: 0 0 10px 168px !important}

/* Show/hide form */
/* _*_"Kommentar schreiben": text-margin: 5px 0 0 22px; zu margin: 5px 0 0 170px; geändert*/
#comments-form-link .showform {margin: 5px 0 0 170px;padding: 0 0 5px 14px;background: url(images/jc_blog.gif) no-repeat 0 -28px;border: none;font-weight: bold;display: block}

/* _*_Bein drüberfahren wird "Kommentar schreiben" auch Schwarz (#000). */
#comments-form-link .showform:active, #comments-form-link .showform:focus, #comments-form-link .showform:hover {color: #000}

/* Comment */
#comments .comment-box {margin: 0;padding: 0; color: #999}
#comments .comment-avatar {float: left;margin: 0;padding: 0}
#comments .avatar-indent {padding-left: 40px}

#comments .comment-anchor {color: #777; text-decoration: none; border: none}
#comments .comment-author, #comments .author-homepage {color: #3c452d;font: bold 1em Arial, Verdana, Sans-Serif;margin: 0;padding: 0}
#comments .author-homepage {text-decoration: none; border-bottom: 1px dotted #3c452d}

/* _*_statt Schrift "Titel" rot (#b01625) nun blau (#0B55C4) */
#comments .comment-title {color: #0B55C4;font: bold 1em Arial, Verdana, Sans-Serif;margin: 0;padding: 0}

/* Avatar */
#comments .comment-avatar img {width: 32px;border: none !important;}

/* Date and Time*/	
#comments .comment-date {font-size: 10px;color: #999;margin: 0;padding: 0 0 0 12px;background: url(images/jc_date.gif) no-repeat center left}
#comments .comment-body {color: #777;margin: 6px 0 0;padding:0 0 2px}

/* Quote, Code and Hidden block styles */
#comments .quote, #comments blockquote, #comments .code, #comments code, #comments pre {margin: 5px 0 5px 10px; display: block; clear: both; background-image: none}
#comments blockquote, #comments .hidden, #comments code, #comments pre {color: #849B9F;text-align: left;padding: 8px;margin-bottom: 8px}
#comments blockquote, #comments .hidden {border: 1px dashed #849B9F}
#comments code, #comments pre {border: 1px solid #dedede;overflow: hidden;white-space:normal}
#comments .code {background: none; border: none; padding:0}
#comments .quote {color: #777}
#comments .hidden {clear: both;display: block;margin: 5px 0}

/* Quote and Reply to buttons panel */
#comments .comments-buttons {height: 15px;float: right}

#comments .email, #comments .emailactive {font: normal 1em Arial, Verdana, Sans-Serif; text-decoration: none; white-space: normal; margin: 0; padding: 0; line-height: 10px; cursor: pointer; border-bottom: 1px dotted #999}
#comments .email {color: #444; background-color: inherit}
#comments .emailactive {color: #cc0000; background-color: inherit}
#comments .email img, #comments .emailactive img {padding: 0}

#comments p {font: normal 1em Arial, Verdana, Sans-Serif;margin: 5px 5px 5px 0;	padding: 0; text-decoration: none; text-transform: none; text-indent: 0}

#comments .comment-body img {padding: 0; border: 0 none}
#comments .comment-body .img {padding: 4px 0 !important; max-width: 500px}
#comments .toolbar {clear: both;color: #ccc;border-top: 1px solid #ccc;margin: 8px 0 0 0;padding: 5px 0 0 0}
#comments .toolbar img{cursor: pointer; padding: 0; margin: 0}

/* Comments list */
#comments .comments-list {margin-left: 20px;height: 1%}
#comments .even, #comments .odd {background-image: none;background-color: transparent;color: #3c452d;border: none; margin-left: 0;margin-bottom: 10px;padding: 0}

#comments-list .comments-inline-edit {padding: 5px; margin: 5px 0; color: inherit;background-color: #dedede;border: 1px solid #ccc}

/* Comment form, Regeln */
/* _*_ text-align: left; von left zu text-align: center; und background-color: inherit zu #f4ceb2 */
div.comments-policy {color: #777; text-align: center; text-decoration: none;text-transform: none;text-indent: 0; background-color: #f4ceb2; border: 1px dotted #ccc; padding: 5px; margin: 5px 0 5px 20px; margin-left: 0px !important;}
div.comments-policy ol, div.comments-policy ul {margin: 0px;padding: 5px 0 0 20px;line-height: 5px}
div.comments-policy ol li, div.comments-policy ul li {font: normal 1em Arial, Verdana, Sans-Serif; margin: 0;padding: 0;border: none;line-height: 5px}

/* _*_"Neuen Kommentar schreiben": text-align: left; von left zu margin-left: 152px; */
#comments-form, #comments-form p, #comments-report-form, #comments-report-form p, #comments-form span, #comments-form .counter {margin-left: 152px;text-decoration: none;text-transform: none;text-indent: 0}

/* _*_ margin: 0 für Buttons mit bold, smilies... und Anzahl verfügbarer Zeichen */
#comments-form p, #comments-report-form p, #comments-form span, #comments-form .counter {margin: 0; color: #777;font: normal 1em Arial, Verdana, Sans-Serif}
#comments-form p, #comments-form #comments-form-buttons, #comments-form #comments-form-error, #comments-form #comments-form-captcha-holder {font: normal 1em Arial, Verdana, Sans-Serif;margin-left: 20px !important;margin-top: 10px;margin-bottom: 8px;overflow: hidden;padding: 0}

#comments-inline-edit {border: 1px solid #ccc;margin: 5px 0 0 0;background: #dedede}
#comments-inline-edit #comments-form p, #comments-inline-edit #comments-form #comments-form-buttons,
#comments-inline-edit #comments-form-error {font: normal 1em Arial, Verdana, Sans-Serif;margin-left: 5px !important;margin-left: 5px;margin-top: 5px;margin-bottom: 2px;padding: 0}

#comments-form img.smile {margin: 0 3px 3px 0;padding: 0;border: none;cursor: pointer}
#comments-form img.captcha {padding: 0;margin: 0 0 3px 0;border: 1px solid #ccc}

/* _*_refreshg.gif (grau) zu refresh.gif (grün) geändert. */
#comments-form span.captcha {margin: 0; padding: 0 0 0 14px; color: #777; background: url(images/jc_refresh.gif) no-repeat 0 2px; cursor: pointer}

/* _*_Bein drüberfahren wird Captcha "Aktualisieren" auch Schwarz (#000). */
#comments-form span.captcha:active, #comments-form span.captcha:focus, #comments-form span.captcha:hover {color: #000}

/* _*_"Benachrichtige mich üner nachfolgende Kommentare */
#comments-form label, #comments-report-form label {color: #777; background-color: inherit; line-height: 1.5em; margin: 0px; padding: 0 0 0 10px; vertical-align: middle}
#comments-form input, #comments-report-form input, #comments-form textarea {color: #444;background-color: #dedede;padding: 0 !important;margin: 0;border: 1px solid #ccc}
#comments-form input {width: 170px;margin-bottom: 2px;height: 1.5em}

/* _*_Schriftfarbe beim Tippen Schwarz (#000) */
#comments-form input.selected, #comments-form textarea.selected {color: #000;background-color: #dedede !important;border: 1px solid #849B9F}
#comments-form input.error, #comments-form textarea.error {border: 1px solid #f00;text-decoration:none;text-transform:none;background-color: #dedede}

#comments-form input.checkbox {width: 16px; line-height: 1.5em; padding: 0; margin: 0; vertical-align: middle; border: none}
#comments-form input.captcha {width: 116px; margin: 3px 0 5px 0}
#comments-form textarea {max-width: 400px !important;width: 350px;margin:0}

#comments-form-message {padding: 5px 5px 5px 25px;margin-right: 5px;display: block}
.comments-form-message-error {background: #FFD86F url(images/jc_error.gif) no-repeat 4px 50%}
.comments-form-message-info {background: #DFEEFF url(images/jc_info.gif) no-repeat 4px 50%}

#comments-form .counterpanel {height:13px;display:block;overflow:hidden;color: #ccc;padding: 0;margin:0;border:1px solid #ddd;border-top-width:0;max-width: 400px !important;width: 350px;background-color: #eee}

#comments-form .grippie {height:13px;display:block;overflow:hidden;color: #ccc;padding: 0;margin:0;border:1px solid #ddd;border-top-width:0;max-width: 400px !important;width: 350px;cursor:s-resize;background: #eee url(images/resize.gif) no-repeat right 2px}
#comments-form .grippie .counter {font-size: 10px;padding: 0; margin: 0}
#comments-form .grippie span {display:block;float:left}
#comments-form .grippie span span {display:inline;float:none}

#comments-form .btn, #comments-report-form .btn {float: left; background: url(images/jc_btnl.gif) no-repeat; margin-right: 5px}
#comments-form .btn div, #comments-report-form .btn div {margin:0 -1px 0 0; float: left;background: url(images/jc_btnr.gif) 100% 0 no-repeat}
#comments-form .btn a, #comments-report-form .btn a {text-decoration: none; height: 22px;line-height: 22px;font-size: 12px;font-weight: bold;color: #777;padding: 0 5px;border: none}


/* _*_statt Buttonschrift blau (#0B55C4) nun schwarz (#000) */
#comments-form .btn a:hover , #comments-report-form .btn a:hover {text-decoration: none; color: #000}
#comments-form-smilespanel {display: none;cursor: pointer;padding: 2px;max-width: 200px;background-color: #dedede;border: 1px solid #ccc;overflow: auto;left: 0;top: 0;position:absolute;z-index: 999999 !important;}

#comments-footer, #comments-footer a {color: #ccc !important; background-color: inherit; font: normal 9px Arial, Verdana, Sans-Serif !important}
#comments-footer {display: block;height: 14px;border-top: 1px solid #ccc;padding-top: 1px;margin-top: 4px;text-align: right}
#comments-footer a {text-decoration: none !important;text-transform: none;padding: 0;margin: 0;border: none !important;float: right; background: none !important}

/* Pagination */
body #jc #nav-bottom, body #jc #nav-top {line-height: 19px !important;line-height: 17px;height: auto !important;text-align: center; margin: 0 auto;}
#jc #nav-bottom span.page, #jc #nav-top span.page {color: #777;background-color: #eee;border: 1px solid #d6dadd}
#jc #nav-bottom span.hoverpage, #jc #nav-top span.hoverpage {color: #777;background-color: #e8e9ea;border: 1px solid #d6dadd}
#jc #nav-bottom span, #jc #nav-top span {color: #777;background-color: inherit;font-size: 10px;font-family: Arial, sans-serif;margin: 0 2px;height: 15px;padding: 2px 8px;cursor: pointer;vertical-align: top}
#jc #nav-bottom span.activepage, #jc #nav-top span.activepage {color: inherit;background-color: white}
#jc div#nav-bottom, #jc div#nav-top {position: relative;z-index: 2;width: 100%}
#jc div#nav-bottom {margin: 10px 0 0 0;padding: 0;background: url(images/jc_dot.gif) repeat-x top left}
#jc #nav-bottom span.activepage {border-bottom: 1px solid #d6dadd;border-left: 1px solid #d6dadd;border-right: 1px solid #d6dadd;border-top: 1px solid white}
#jc div#nav-top {margin: 10px 0;background: url(images/jc_dot.gif) repeat-x bottom}
#jc #nav-top span.activepage {border-top: 1px solid #d6dadd;border-left: 1px solid #d6dadd;border-right: 1px solid #d6dadd;border-bottom: 1px solid white}

/* Vote */
#jc span.comments-vote {width: 6em;height: 15px;float: right}
#jc span.comments-vote a{width: 15px;height: 14px;float: left;margin: 0 3px 0 0;display: block;background-repeat: no-repeat;background-image: url(images/jc_vote.gif);border: none !important; text-decoration: none}
#jc span.comments-vote .busy{margin: 0; float: right; width: 16px}
#jc .vote-good{background-position: 0 0}
#jc .vote-poor{background-position: -15px 0}
#jc span.vote-good,#jc span.vote-poor,#jc span.vote-none{margin: 0;float: right;font: bold 1em Arial, Verdana, Sans-Serif;line-height: 14px}
#jc span.vote-good{color: #339900}

#jc span.vote-poor{color: #cc0000}
#jc span.vote-none{color: #A9A9A9}

/* BBCode */
#jc span.bbcode{width: auto;height: 23px;display: block;margin-bottom: 5px}
#jc .bbcode a, #jc .bbcode a:focus, #jc .bbcode a:active, #jc .bbcode a:hover{width: 23px;height: 23px;float: left;margin: 0 2px 0 0;display: block;background-color:transparent !important;background-repeat: no-repeat;background-image: url(images/jc_bbcodes.gif);text-decoration:none;border:none !important}
#jc a.bbcode-empty{background-position: 0 0}
#jc a.bbcode-b{background-position: -30px 0 !important}
#jc a.bbcode-i{background-position: -60px 0 !important}
#jc a.bbcode-u{background-position: -90px 0 !important}
#jc a.bbcode-s{background-position: -120px 0 !important}
#jc a.bbcode-url{background-position: -150px 0 !important}
#jc a.bbcode-img{background-position: -180px 0 !important}
#jc a.bbcode-list{background-position: -210px 0 !important}
#jc a.bbcode-hide{background-position: -240px 0 !important}
#jc a.bbcode-quote{background-position: -270px 0 !important}
#jc a.bbcode-smile{background-position: -300px 0 !important}
#jc a.bbcode-youtube{background-position: -330px 0 !important}
#jc a.bbcode-google{background-position: -360px 0 !important}
#jc a.bbcode-wiki{background-position: -390px 0 !important}
#jc a.bbcode-facebook{background-position: -420px 0 !important}
#jc a.bbcode-flickr{background-position: -450px 0 !important}

#jc span.bbcode img {width: 23px;height: 23px;float: left;margin: 0 2px 0 0}
#jc .custombbcode {width: 23px;height: 23px;float: left;margin: 0 2px 0 0;display: block;text-decoration:none;cursor: pointer}

/* Rounded comments margin-left: 151px statt 0*/
/* Kommentare-Liste */
#jc .rbox {margin-left: 151px;margin-right: 171px;width:auto;overflow: hidden}
#jc .rbox div {text-align: left;margin: 0}
#jc .rbox_t {margin: 0;border-top: 1px solid #ccc;background-color: #dedede}
#jc .rbox_tl {background: url(images/jc_rb_tl.gif) 0 0 no-repeat;padding-left: 13px}
#jc .rbox_tr {height: 10px;overflow: hidden;background: url(images/jc_rb_tr.gif) 100% 0 no-repeat;padding-right: 13px}
#jc .rbox_m {border-left: 1px solid #ccc;border-right: 1px solid #ccc;width: auto;padding: 0 8px; background-color:#dedede;line-height: 100%}
#jc .rbox_b {margin-top: -5px;border-bottom: 1px solid #ccc;background-color: #dedede;height: 12px;line-height: 12px}
#jc .rbox_bl {background: url(images/jc_rb_bl.gif) 0 100% no-repeat;padding-left: 13px}
#jc .rbox_br {height: 13px;background: url(images/jc_rb_br.gif) 100% 100% no-repeat;padding-right: 13px}

style.css, alle Elemente verschieben?

Lt. Junior Grade

Mr. Snoot

Gast

Lieutenant

Captain

Lt. Junior Grade

Adagio

Gast

Lt. Junior Grade

Anhänge

Captain

Adagio

Gast

Captain

Mr. Snoot

Gast

Adagio

Gast

Lt. Junior Grade

Anhänge

Adagio

Gast

Lt. Junior Grade

Adagio

Gast

Captain

Lt. Junior Grade

Anhänge

Ähnliche Themen