Css Steuerung, Position

[Anfaenger]

Hallo!

ich bin ein absoluter Anfänger und habe echt null Ahnung.

Aber ich habe da mal eine Frage:

Kann ich irgendwie erkennen welche Angaben in der Css was auf der Homepage steuern?

Ich habe da eine Homepage erstellt und komme nun nicht weiter weil ich bei manchen Sachen nicht weiss, wo ich in der Css was eingeben muss um diesen Punkt zu steuern.

Ich hoffe ich habe die Frage richtig gestellt, so dass die einer auch versteht.

Danke schon mal für eure Hilfe!

[Laus]

Hallo

Ich versteh grad nicht ganz wie du das meinst?
Wenn du die Grundlagen von CSS wissen willst, dann empfehle ich dir diesen Workshop mal anzusehen. Auchhierwir dir schön erklärt, wie du mit CSS deine Seite erstellst und was welcher Befehl in welchem zusammenhang bewirkt.
Für weitere fragen poste doch mal einen Link zur Seite, oder wenigstens den Quelltext mit CSS.

Gruß Xaver

[Anfaenger]

Hallo Xaver,

danke für deine schnelle Reaktion!

Es geht mir eigentlich um ganz bestimte Dinge:

Menüpunkt Kontakt :
die liste ist zu weit Links, müsste weiter rechts (weiss nicht wo ich das einstelle)

Menüpunkt Kontakt > einen Kontakt auswählen:
Alles unter dem Namen und der Position müsste etwas tiefer (weiss nicht wo ich das einstelle)
und bei Mozilla zeig er mir nen Streifen rechts über die ganze seite an, der da gar nicht hin soll.

Menüpunkt Fotogalerie:
im IE wird es richtig angezeigt etwas weiter rechts und bei Mozilla wird es zu weit links angezeigt (wo kann ich das ändern, so dass es über all weiter rechts ist?)

Hier der Link zur seite:

http://www.2doing.de/htdocs/CMS/

Wie füge ich hier die CSS denn ein? Einfach so mit in den Text? Sorry, schreibe aber das erste Mal in ein Forum.

[Anfaenger]

Hier auch die CSS:

[/list]

/* General */
body{
font-family: Geneva, Arial, Helvetica, sans-serif;
line-height: 1.166;
margin: 0px;
padding: 0px;
font-size: 11px;
background-color: #AD2624;
}
#wrapper{
text-align: center;
background-attachment: fixed;
background-image: url(../images/pie.jpg);
background-repeat: no-repeat;
background-position: center bottom;
background-color: #AD2624;
}
#header_top{
background-color: #AD2624;
padding: 10px;
height: 15px;
background-repeat: no-repeat;
background-position: center bottom;
}

#header {
width: 950px;
margin-left:auto;
margin-right:auto;
text-align: left;}



div#menu_top {
font-weight: 950;
height: 8px;
text-align: right;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
float: center;
}
div#menu_top a{

font-weight: 700;
color: #000000;
text-decoration: none;
padding-right: 15px;
font-size: 11px;
}
div#menu_top a:hover{
font-weight: 700;
color: #000000;
text-decoration: underline;
}

#decoration_top{
padding: 10px;
height: 80px;
background-repeat: repeat;
background-position: center;
}

#pathway {
height: 20px;
text-align: left;
margin-right: 12px;
margin-left: 0px;
font-size: 10px;
color: #000000;
padding-top: 3px;
margin-left: 53px;
margin-top: 10px;

}
#pathway a{
color: #000000;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #000000;
}
#pathway a:hover{
color: #000000;
text-decoration: none;

}

#page{
clear: both;
text-align:center;
margin: 0px;
padding: 0px;

}
#contenido {
clear: both;
text-align: center;
width: 950px;
margin-left:auto;
margin-right:auto;
}
#cuerpo {
clear: both;
text-align: left;
width: 950px;
margin-left:auto;
margin-right:auto;
background-color: #F2E8C7;
float: left;
padding-left: 0px;
}

#leftbar{
float: left;
padding: 5px;
margin-top: 0px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 15px;
}

#rightbar{
float:right;
padding: 5px;
margin-right: 15px;
margin-left: 15px;
}

#content0{
float: left;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #AD2624;
border-left-color: #AD2624;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
#content1{
float: left;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #AD2624;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
#content2{
float: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #AD2624;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
#content3{
float: left;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;

}

#pretil{
background-image: url(../images/top1.jpg);
background-repeat: no-repeat;
background-position: center bottom;
height: 180px;
width: 950px;

}

div#menu {
height: 25px;
text-align: center;
padding-top: 15px;
font-size: 1.3em;
}
div#menu a{
text-align: center;
vertical-align: middle;
padding-right: 15px;
padding-left: 15px;
color: #F2E8C7;
text-decoration: none;
font-weight: 800;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #F2E8C7;
}
div#menu a:hover{
color: #FFFFFF;
text-decoration: none;

}


#siteInfo1{
clear: both;
width: 950px;
margin-left:auto;
margin-right:auto;
padding: 10px 10px 10px 10px;

}

#siteInfo1 #st1_left .moduletable h3, #siteInfo1 #st1_right .moduletable h3{
color: #F2E8C7;
background-color: #F2E8C7;}

#siteInfo1 #st1_left .moduletable ul a, #siteInfo1 #st1_right .moduletable ul a{
color: #F2E8C7;}
#siteInfo1 #st1_left .moduletable ul li, #siteInfo1 #st1_right .moduletable ul li{
list-style-position: outside;
list-style-image: url(../images/bullet.png);
}


#st1_left{float: left;width: 450px; text-align: left;}

#st1_right{
float: right;
width: 450px;
text-align: left;
}

#pie{
text-align:center;
}
#footer{
clear: both;
color: #F2E8C7;
font-size: 10px;
text-align: center;
margin-top: 5px;
padding-top: 5px;
}
#footer a, #zaragoza a{
color: #F2E8C7;
}
#zaragoza{
color: #F2E8C7;
font-size: 10px;
text-align: center;
padding-bottom: 10px;
}
/*GENERALES*/

/*links*/
a:link{ color: #AD2624;text-decoration: none;}
a:visited{color: #AD2624;text-decoration: none;}
a:hover{color: #666666;text-decoration: underline;}

/*listas*/
ul {list-style-type: none;}
li {
padding-bottom: 10px;
padding-left: 20px;
}

ul a{color: #AD2624;text-decoration: none;font-size: 1.3em}
ul a:visited{color: #AD2624;text-decoration: none;}
ul a:hover{color: #AD2624;text-decoration: none;font-size: 1.5em;}

/*menus*/
.moduletable_menu {
margin: 0px;
padding: 0px;

}
.menu ul{}
.menu li{
list-style-image: url(../images/list_menu.jpg);
border-bottom-width: 1px;
margin-right: 30px;
border-bottom-style: dotted;
border-bottom-color: #AD2624;
padding-bottom: 10px;padding-top: 10px;
vertical-align: middle;
font-size: 1.2em;
}

.menu a{color: #000000;text-decoration: none;}
.menu a:visited{color: #000000;text-decoration: none;}
.menu a:hover{color: #AD2624;text-decoration: none;font-size: 1.4em;}

/*imagenes botones*/
td.buttonheading img {
border:none;
}

/*separador*/
#separador, span.article_separator {
clear: both;
display: block;
height: 5px;
border-bottom-width: 0px;
border-bottom-style: none;
border-bottom-color: #CCCCCC;
margin-bottom: 5px;
}



/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/


/* headers */

.contentpagetitle{
color: #F2E8C7;
font-size: 16px;
font-weight: 700;
text-decoration: none;




}
div.componentheading {
padding-left: 10px;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #000000;
padding-bottom: 10px;
margin-top: -50px;
margin-bottom: 50px;
margin-left: 93px;

}

h1 {
padding: 0;
font-size: 1.4em;
font-weight: 700;
vertical-align: bottom;
color: #000000;
text-align: left;
width: 100%;


}

h2, .contentheading {
font-size: 1.4em;
font-weight: 700;
color: #000000;
text-align: left;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #000000;
padding-left: 15px;

}

table.contentpaneopen h3 {
margin-top: 25px;
padding-left: 100px;

}

h4 {
color: #000000;

}

h3, .componentheading, table.moduletable th, legend {
font-weight: 700;
font-size: 1.4em;
padding-left: 8px;
margin-bottom: 10px;
padding-top: 0px;
text-align: left;
height: 10px;
border-bottom-width: 0px;
border-bottom-style: solid;
border-bottom-color: #000000;
color: #000000;
}

/* small text */
.small {
font-size: 0.8em;
color: #AD2624;
font-weight: normal;
text-align: left;
}

.modifydate {
height: 20px;
vertical-align: bottom;
font-size: .80em;
color: #999;
font-weight: normal;
text-align: left;
}

.createdate {
height: 20px;
vertical-align: top;
font-size: .80em;
color: #999;
font-weight: normal;
vertical-align: top;
padding-bottom: 5px;
padding-top: 0px;

}


/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }


/** overlib **/

.ol-foreground {
background-color: #f6f6f6;
}

.ol-background {
background-color: #666;
}

.ol-textfont {font-size: 10px;}

.ol-captionfont {
font-size: 12px;
color: #f6f6f6;
font-weight: 700;
}
.ol-captionfont a {
color: #F2E8C7;
text-decoration: none;
font-size: 12px;
}

.ol-closefont {}

.article_column {
padding-right: 5px;

}

.column_separator {
border-left: 1px dashed #F2E8C7;
padding-left: 10px;
}

div#maindivider {
border-top: 1px solid #F2E8C7;
margin-bottom: 10px;
overflow: hidden;
height: 1px;
}

table.blog span.article_separator {
display: block;
height: 20px;

}

/* edit button */
.contentpaneopen_edit{
float: left;
}

/* table of contents */
table.contenttoc {
margin: 5px;
border: 0px solid #ccc;
padding: 5px;

}

table.contenttoc td {
padding: 0 5px;

}


/* content tables */
td.sectiontableheader {
background: #F2E8C7;
color: #AD2624;
font-weight: 700;
padding: 4px;
border-right: 0px solid #AD2624;

}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 4px;
color: #000000;
padding-right: 0px;
padding-top: 10px;


}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
padding: 3px;
color: #AD2624;
padding-right: 0px;
padding-top: 10px;

}


/* content styles */
table.contentpaneopen, table.contentpane {
margin-left: 93px;
padding: 0;
width:679px;
padding-right: 0px;
padding-top: 10px;
padding-bottom: 30px;
margin-top: -65px;
margin-bottom: 150px;
}

table.contentpaneopen li {
margin-bottom: 10px;


}

table.contentpaneopen fieldset {
border: 0px;
border-right: 0px solid #000000;
}

table.contentpaneopen h3 {
margin-top: 25px;
padding-right: 225px;
}

table.contentpaneopen h4 {
color: #ccc;
}

.highlight {
background-color: #fffebb;
}

/* module control elements */
table.user1user2 div.moduletable {
margin-bottom: 0px;
padding-left: 65px;
}

div.moduletable, div.module {
margin-bottom: 25px;
}

div.module_menu h3 {
font-size: 12px;
font-weight: 700;
color: #eee;
margin: -23px -4px 5px -5px;
padding-left: 10px;
padding-bottom: 2px;
}

div.module_menu {
margin: 0;
padding: 0;
margin-bottom: 15px;
}

/* forms */
table.adminform textarea {
width: 540px;
height: 400px;
font-size: 1em;
color: #000099;
}

div.search input {
width: 145px;
border: 1px solid #ccc;
margin: 15px 0 10px 0;
}

/* thumbnails */
div.mosimage { margin: 5px; }
div.mosimage_caption { font-size: .90em; color: #666; }

div.caption { padding: 0 10px 0 10px; }
div.caption img { border: 1px solid #CCC; }
div.caption p { font-size: .90em; color: #666; text-align: center; }

/* Parameter Table */
table.paramlist {
margin-top: 5px;
}

table.paramlist td.paramlist_key {
width: 128px;
text-align: left;
height: 30px;
}

table.paramlist td.paramlist_value {
}

div.message {
font-weight: 700;
font-size : 14px;
color : #c30;
text-align: center;
width: auto;
background-color: #f9f9f9;
border: solid 1px #d5d5d5;
margin: 3px 0px 10px;
padding: 3px 20px;
}

/* System Messages */
/* see system general.css */

.pagination span { padding: 2px; }
.pagination a { padding: 2px; }

/* Polls */
.pollstableborder td {
text-align: left;
}

/* WebLinks */
span.description {
display:block;
padding-left: 30px;
}

/* Frontend Editing*/
fieldset {
border: 1px solid #ccc;
margin-top: 15px;
padding: 15px;
}

legend {
margin: 0;
padding: 0 10px;
}

td.key {
border-bottom:1px solid #eee;
color: #666;
}

/* Tooltips */

.tool-tip {
float: left;
background: #ffc;
border: 1px solid #D4D5AA;
padding: 5px;
}

.tool-title {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: 700;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
}

.tool-text {
font-size: 100%;
margin: 0;
}

/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}

form#form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#form-login ul { padding-left: 10px; }


/*template selector styles*/

.templateselector #description_template_first {
margin: 0px;
padding: 0px;
}
.templateselector #description_template_first {
font-weight: 700;
color: #666666;
padding-bottom: 10px;
}
.templateselector #description_template_last{
font-weight: 700;
color: #666666;
padding-bottom: 10px;
}
.templateselector #active_template {
padding-bottom: 10px;
font-style: italic;
}
.templateselector #thumbs {
padding-top: 5px;
padding-bottom: 5px;
}
.templateselector #thumbs img {
margin: 2px;
}
.templateselector form {
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
font-size: 0.9em;
color: #999999;
}
.templateselector ul {
margin-top: 0px;
padding-top: 0px;
padding-bottom: 10px;
margin-bottom: 0px;
}
.templateselector form select {
font-size: 1em;
color: #999999;
}
.templateselector form input {
font-size: 1em;
color: #000000;
}
#banners3{
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCCCCC;
}

/*end template selector styles*/

[renernyc]

man schaue sich einfach den html quell code an, css erkennst du da wenn sachen in solchen: <div...... klammer stehen.

darin steht dann meist id="x" oder class="x"

das x ist dann der name den du im css stylesheet finden solltest.

jeholfen?

[Anfaenger]

Hallo,

Also sowas steht dann im Quellcode: (Nur ein Auszug)

<tbody>
<tr>
<td>
1 </td>
<td>
<a>
RALF PICHEL</a>
</td>
<td>
Inhaber / Geschäftsführer </td>
</tr>
<tr>
<td>
2 </td>
<td>
<a>
EUGENIA SCHILL</a>
</td>


Und wenn ich den sectionbableentry1 oder 2 ändere, also padding-left: 65 px; dahin schreibe tut sich nichts!

Mache ich irgendwas falsch?

[Anfaenger]

Ah, Sorry,
so wird nun alles angezeigt:


<tr class="sectiontableentry1">
<td align="right" width="5">
1 </td>
<td height="20">
<a href="/htdocs/CMS/index.php?option=com_contact&amp;view=contact&amp;id=1%3Arp&amp;catid=12%3Akontakte&amp;Itemid=83" class="category">
RALF PICHEL</a>
</td>
<td>
Inhaber / Geschäftsführer </td>
</tr>
<tr class="sectiontableentry2">
<td align="right" width="5">
2 </td>
<td height="20">
<a href="/htdocs/CMS/index.php?option=com_contact&amp;view=contact&amp;id=3%3Aeugenia-schill&amp;catid=12%3Akontakte&amp;Itemid=83" class="category">
EUGENIA SCHILL</a>
</td>

[renernyc]

ah ok ich glaube ich weiss was das problem ist....


die daten hier die du gepostet hast sind in einer tabelle...tabellen an sich kannst du mit css kaum beeinflussen nur die schrift art usw die darin vorkommt aber padding usw musst du an der tabelle selbst ändern mit so sachen wie :valign="top" etc. bei einer tabelle kannst du aber einen DIV um die tabelle anlegen und sie dann so positionieren.


also ich würde dir empfehlen die tabellen raus zulöschen und den inhalt der tabellen einfach mit css formatieren das wäre zumindestens zeitgemäß ...denn tabellen sind ja mal voll out.

[renernyc]

ah ok ich glaube ich weiss was das problem ist....


die daten hier die du gepostet hast sind in einer tabelle...tabellen an sich kannst du mit css kaum beeinflussen nur die schrift art usw die darin vorkommt aber padding usw musst du an der tabelle selbst ändern mit so sachen wie :valign="top" etc. bei einer tabelle kannst du aber einen DIV um die tabelle anlegen und sie dann so positionieren.


also ich würde dir empfehlen die tabellen raus zulöschen und den inhalt der tabellen einfach mit css formatieren das wäre zumindestens zeitgemäß ...denn tabellen sind ja mal voll out.

[Anfaenger]

Danke für deine Antwort!

leider weiss ich jetzt nicht was ich machen muss!?

Wie gesagt, totaler Anfänger.

Also, die Seite bearbeite ich über Joomla.de, das Template habe ich mir auch da runtergeladen und in der CSS etwas verändert.

Der Punkt Kontakt ist eine Komponente bei Joomla. Den habe ich einfach angewählt, dort unsere Kontaktdaten eingetragen und auf Menü oben gesetzt. So wird es nun angezeigt.

Ich weiss nicht wie ich das nun in Css formatieren soll.

Oder wo ich es "an der Tabelle selbst" ändern kann?

Es tut mir echt leid, dass ich es hier so schwer mache, aber würde ich es verstehen, wäre alles einfacher !

[renernyc]

ok ich glaube css in zusammenhang mit joomla ....da solltest du es vieleicht mal in einem joomla forum probieren, ich weiss nur das es bei den meisten CMS und shopsysteme eine zentrale css stylesheet datei gibt , da ja die seite ansich immer wieder produziert wird. die ansonstigen anpassungen was den inhalt angeht formatiert man ja eh im backend bereich...


solltest du aber tatsächlich vieleicht probieren das template umzugestalten, dann solltest du dich direkt über dieses thema informieren.

[Anfaenger]

Trotzdem vielen Dank für deine schnellen Antworten und deine Hilfe!

Dann versuche ich es da mal.

Gruß

[Laus]

Hallo

Menüpunkt Kontakt :
die liste ist zu weit Links, müsste weiter rechts (weiss nicht wo ich das einstelle)

Code: Alles auswählen

tr.sectiontableentry0 td, tr.sectiontableentry1 td, tr.sectiontableentry2 td {
color:#000000;
padding:30px 0 4px 4px;
}

den letzten wert in padding entsprechend vergrößern.
Für die anderen Sachen habe ich heute leider keine Zeit mehr

[Anfaenger]

Hallo Xaver,

mit Sectiontabelentry geht es nicht, habe ich schon alles ausprobiert. dann verändert er den Abstand zwischen den Spalten aber nicht die Komplette Tabelle nach rechts.

Ich bin so entnervt, dass ich da mittlerweile schon mit leben kann.

Aber hast du eine Lösung für (wenn man nen Kontakt anwählt) das BIld was tiefer muss?
Scheinbar wird der komplette Kram mit contentheading gesteuert, aber wie verschiebe ich denn nur das Bild?

Weil contentheading steuert auch die Überschriften für "Messe" "Event" .. usw.., da kann ich nichts ändern.