CSS der Module greift nicht mehr!

berlingfx

unregistriert

Dienstag, 5. Mai 2009, 17:12

Hallo meine Lieben!
Bin nun dabei ein neues Design an's W3blabor anzupassen, da das erste Design einfach nicht wollte.
Nun habe ich wieder ein Problem, welches ich nicht behoben bekomme.

Das CSS der Formulare etc., greift nicht mehr - so sieht das Kontaktformular z.B. so aus:

was mach ich falsch?

main.css

Quellcode

/********************************************
   HTML ELEMENTS
********************************************/ 

/* top elements */
* { margin: 0;padding: 0; }

body {
margin: 0; padding: 0;
font: 70%/1.5 Verdana, Tahoma, Arial, Helvetica, sans-serif;
color: #333; 
background: #FFF url(http://berlin-gfx.de/includes/templates/bgfx/images/bg.gif) repeat-x;
}

/* links */
a {
color: #003366;
background-color: inherit;
text-decoration: none;
}
a:hover {
color: #CC0001; 
background-color: inherit;
}

/* headers */
h1, h2, h3 {
font-family: Arial, 'Trebuchet MS', Sans-Serif;
font-weight: bold;
color: #333;
}
h1 {
font-size: 120%;
letter-spacing: .5px;
}
h2 {
font-size: 115%;
text-transform: uppercase; 
}
h3 {
font-size: 115%;
color: #003366;
}

/* images */
img {
border: 2px solid #CCC;
}
img.float-right {
  margin: 5px 0px 10px 10px;  
}
img.float-left {
  margin: 5px 10px 10px 0px;
}

h1, h2, h3, p {
padding: 0;
margin: 10px;
}

ul, ol {
margin: 10px 20px;
padding: 0 20px;
}

code {
  margin: 10px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
  border-left: 4px solid #CC0000;
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
margin: 10px;
 padding: 0 0 0 32px;  
  background: #FAFAFA url(http://berlin-gfx.de/includes/templates/bgfx/images/quote.gif) no-repeat 5px 10px !important; 
background-position: 8px 10px;
border: 1px solid #f2f2f2; 
border-left: 4px solid #CC0000; 
font-weight: bold;  
}

/* form elements */
form {
margin:10px; padding: 0 5px;
border: 1px solid #f2f2f2; 
background-color: #FAFAFA; 
}
label {
display:block;
font-weight:bold;
margin:5px 0;
}
input {
padding: 2px;
border:1px solid #eee;
font: normal 1em Verdana, sans-serif;
color:#777;
}
textarea {
width:400px;
padding:2px;
font: normal 1em Verdana, sans-serif;
border:1px solid #eee;
height:100px;
display:block;
color:#777;
}
input.button { 
margin: 0; 
font: bolder 12px Arial, Sans-serif; 
border: 1px solid #CCC; 
padding: 1px; 
background: #FFF;
color: #CC0000;
}
/* search form */
form.search {
position: absolute;
top: 5px; right: 5px;
padding: 0; margin: 0;
border: none;
background-color: transparent; 
}
form.search input.textbox { 
margin: 0; 
width: 120px;
border: 1px solid #CCC; 
background: #FFF;
color: #333; 
}
form.search input.searchbutton { 
margin: 0; 
font-size: 100%; 
font-family: Arial, Sans-serif; 
border: 1px solid #CCC; 
background: #FFFFFF url(http://berlin-gfx.de/includes/templates/bgfx/images/headerbg.gif) repeat-x bottom left; 
padding: 1px; 
font-weight: bold; 
height: 23px;
color: #333;
width: 60px;
}

/**********************************
  LAYOUT 
***********************************/
#wrap {
margin: 0 auto; 
width: 780px;
}

/* header */
#header {
position: relative;
margin: 0; padding: 0;
height: 60px;
}
#header span#slogan {
z-index: 3;
position: absolute;
left: 3px; bottom: 7px;
font: bold 1.2em Verdana, Arial, Tahoma,  Sans-serif;
color: #FFF;
}

#header-logo {
position: relative;
clear: both;
height: 50px; 
margin: 0; padding: 0;
}
#header-logo #logo {
position: absolute;
top: 3px; left: 5px;
font: bold 30px "trebuchet MS", Arial, Tahoma, Sans-Serif;
margin: 0; padding: 0;
letter-spacing: -1px;
color: #000;
}

/* navigation tabs */
#header ul {
position: absolute;
   margin:0;
   list-style:none;
right:-18px ; bottom: 3px;
font: bold 13px 'Trebuchet MS', Arial, Sans-serif;
}
#header li {
   display:inline;
   margin:0; padding:0;
}
#header a {
   color: #FFF; 
   float:left;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
   
}
#header a span {
   color: #CC0000; 
   float:left;
   display:block;
   padding:5px 15px 4px 6px;
   color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span {float:none;}
/* End IE5-Mac hack */
#header a:hover span {
color:#FFF;
}
#header a:hover {
   background-position:0% -42px;
}
#header a:hover span {
   background-position:100% -42px;
}
#header #current a {
   background-position:0% -42px;
}
#header #current a span {
   background-position:100% -42px;
}

/* main column */
#main {
float: right;
margin: 0; padding: 0;
width: 545px;
}
#main h1 {
margin: 10px 0;
padding: 4px 0 4px 8px; 
font-size: 105%;
color: #FFF;
text-transform: uppercase; 
background-color: #CC0000;
letter-spacing: .5px;
}

/* sidebar */
#sidebar {
float: left;
width: 220px;
margin: 0; padding: 0; 
background-color: #FFFFFF; 
}
#sidebar h1 {
margin: 10px 0 0 0; 
padding: 4px 0 4px 8px; 
font: bold 105% Arial, Sans-Serif;
color: #FFF;
text-transform: uppercase; 
background: #333; 
letter-spacing: 1px;
}
#sidebar .left-box {
border: 1px solid #EBEBEB;
margin: 0 0 5px 0;
background: #FFF;
}
#sidebar ul.sidemenu {
list-style: none;
text-align: left;
margin: 3px 0px 8px 0; padding: 0;
text-decoration: none;
}
#sidebar ul.sidemenu li {
border-bottom: 1px solid #f2f2f2; 
background: url(http://berlin-gfx.de/includes/templates/bgfx/images/bullet.gif) no-repeat 3px 2px;
padding: 3px 5px 3px 25px;
margin: 0;
}
#sidebar ul.sidemenu a {
font-weight: bolder;
padding: 3px 0px;
background: none;
}

/* footer */
.footer { 
clear: both; 
border-top: 1px solid #f2f2f2;
background: #FFF url(http://berlin-gfx.de/includes/templates/bgfx/images/footerbg.gif) repeat-x;
padding: 2px 0 10px 0; 
text-align: center;  
line-height: 1.5em;
font-size: 95%;
}
.footer a { 
text-decoration: none; 
font-weight: bold;
}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes  */
.clear {clear: both; }
.red   { color: #CC0000; }
.comments { 
margin: 20px 10px 5px 10px; 
padding: 3px 0;
border-bottom: 1px dashed #EFF0F1; 
border-top: 1px dashed #EFF0F1;
}


<!-- -->


#text {

width: 520px;
padding: 18px;

}

#text h1, #text h1 a {

font-size: 18px;
font-weight: normal;
margin: 0px 0px 15px 0px;
color: #00ccff;
font-family: "Arial" , "Verdana" , "Tahoma" , "MS Sans Serif" , Helvetica , sans-serif;
line-height: 24px;

}

#text h2, #text h2 a {

font-weight: normal;
margin: 4px 0px 6px 0px;
font-size: 11px;
line-height: 17px;
color: #cbd3d5;
font-family: "Verdana";
line-height: 11px;
background: url(../images/datum.gif) left no-repeat;
padding-left: 15px;

}

#text h3 {

margin: 0px 0px 17px 0px;
font-size: 11px;
font-weight: normal;
font-family: "Verdana";
font-weight: bold;
line-height: 18px;

}

#text p {

margin: 0px 0px 17px 0px;

}

#text p.hell {

color: #cbd3d5;

}

#text hr {

background: #fff;
border: none;
border-bottom: 1px solid #e8edf0;
height: 1px;
margin: 15px 0px 17px 0px;
line-height: 0px;

}

#footer {

width: 574px;
text-align: left;
margin: 0px;
line-height: 50px;
position: relative;
padding: 0px 1px;
overflow: hidden;
float: left;
color: #bcc1c4;
font-family: "Tahoma" , "Arial" , "MS Sans Serif" , Helvetica , sans-serif;
font-size: 10px;

}

#text a.zurueck {

width: 21px;
height: 21px;
background: url(../images/zurueck.gif) left no-repeat;
display: block;

}

#text a:hover.zurueck {

width: 21px;
height: 21px;
background: url(../images/zurueck_hover.gif) left no-repeat;
display: block;

}

#text a.weiter {

width: 21px;
height: 21px;
background: url(../images/weiter.gif) left no-repeat;
display: block;

}

#text a:hover.weiter {

width: 21px;
height: 21px;
background: url(../images/weiter_hover.gif) left no-repeat;
display: block;

}

#text .blog {

margin: 0px 0px 17px 0px;
text-align: justify;

}

#footer .left {

float: left;

}

#footer .left a {

color: #bcc1c4;
text-decoration: none;
font-weight: bold;

}

#footer .left a:hover {

color: #858b8b;
text-decoration: none;
font-weight: bold;

}

#footer .right {

float: right;

}

#footer .right a {

color: #bcc1c4;
text-decoration: none;

}

#footer .right a:hover {

color: #858b8b;
text-decoration: none;

}

global.css

Quellcode

/* - TABELLEN INLAY STYLES FÜR MODULE + MELDUNGEN - */


table.inlay {

	border: 1px solid #e0e0e0;
	background: #f0f0f0;
	overflow: hidden;
	text-align: left;
	color: #595959;
	position: relative;
	margin: 0px 0px 20px 0px;

}

table.inlay tr td {

	padding: 20px 20px 0px 20px;

}

table.inlay tr td p {

	margin: 0px;
	overflow: hidden;
	
}

table.inlay tr td .formular {

	width: 98%;
	height: 18px;
	padding: 4px 0px 0px 5px;
	margin: 2px 0px 2px 0px;
	background: #fff;
	border: 1px solid #e0e0e0;
	font-size: 11px;
	color: #595959;
	font-family: "Verdana";
	
}

table.inlay tr td .textarea {

	width: 98%;
	height: 150px;
	padding: 4px 0px 0px 5px;
	margin: 2px 0px 2px 0px;
	background: #fff;
	border: 1px solid #e0e0e0;
	font-size: 11px;
	color: #595959;
	font-family: "Verdana";
	
}

table.inlay tr td .button {

	height: 24px;
	background: #f0f0f0;
	overflow: hidden;
	margin: 4px 0px 0px 0px;
	padding: 0px 0px 0px 5px;
	border: none;
	color: #595959;
	font-size: 9px;
	font-family: "Verdana";
	font-weight: bold;
	text-align: right;
	cursor: pointer;
	
}

Zum Seitenanfang

w3bcms

Profi

Beiträge: 1 282

CMS Version: 4.x/5.x

Beruf: Webentwickler

Paypal:

2

Dienstag, 5. Mai 2009, 17:14

Also entweder stimmen wieder die Pfade nicht, oder es stimmen die Container nicht.
Dazu müsste man das ganze aber mal online begutachten.

Und Du hast nicht wirklich folgendes mitten im CSS stehen, oder?

	Quellcode
1	<!-- -->

Zum Seitenanfang

berlingfx

unregistriert

3

Dienstag, 5. Mai 2009, 17:26

Doch. Habe das Kommentar eingefügt, um den Zusatz-CSS abzutrennen.
Ist ein leeres Kommentar mitten im Code nicht gut?

http://berlin-gfx.de/

so ist eben online.

Zum Seitenanfang

w3bcms

Profi

Beiträge: 1 282

CMS Version: 4.x/5.x

Beruf: Webentwickler

Paypal:

4

Dienstag, 5. Mai 2009, 17:38

ist nur in HTML Code erlaubt, nicht in CSS.
Damit legst Du dein ganzes CSS File lahm, ab dem Punkt wo <!-- beginnt.
Im CSS dürfen Kommentare nur mit /* ... */ kommentiert werden, wie Du es auch ganz oben hast.

Zum Seitenanfang

berlingfx

unregistriert

5

Dienstag, 5. Mai 2009, 17:57

Wunderbar!
Schnelle Antwort und sofort gelöst!
Dann versuch ich noch 2 offene Probleme mit Deiner Hilfe zu lösen:

Gleiche Page: www.berlin-gfx.de

Links das Menü wo SUBMENÜ steht. Dort möchte ich mit dem Befehl:

	PHP-Quelltext
1	<?php page_submenu(); ?>

Die Untermenüs einfügen. Das Ganze sieht aber nicht so aus, wie ich möchte. Sondern so:
(bild folgt gleich!)

Was muss ich machen?

----------------
2. Oben wo jetzt Home Kontakt steht möchte ich, dass zwischen jedem Menüpunkt ein // steht, wo definiere ich das?

Zum Seitenanfang

berlingfx

unregistriert

6

Dienstag, 5. Mai 2009, 19:28

	Quellcode
1 2 3 4 5 6 7	<div id="sidebar"> <h1>Submenü</h1> <div class="left-box"> <ul class="sidemenu"> <li><a href=""><?php page_submenu(); ?></a></li> </ul> </div>

So habe ich das eingefügt. Das <a></a> muss ich da lassen, da es noch schlimmer wird, wenn ich das weglasse.

Sieht dann so aus, wie aktuell auf berlin-gfx.de zu sehen.
Würde mich über Hilfe sehr freuen!

Zum Seitenanfang

w3bcms

Profi

Beiträge: 1 282

CMS Version: 4.x/5.x

Beruf: Webentwickler

Paypal:

7

Dienstag, 5. Mai 2009, 19:43

Das is ja auch komplett falsch!

<?php page_submenu(); ?>

baut folgendes auf:

<ul>
<li><a>...</a></li>
....
</ul>

Versuch es also mal damit:

	Quellcode
1 2 3 4 5	<div id="sidebar"> <h1>Submenü</h1> <div class="left-box"> <?php page_submenu(); ?> </div>

Zum Seitenanfang

berlingfx

unregistriert

8

Mittwoch, 6. Mai 2009, 13:40

Hallo meine Lieben!

Danke erstmal für die Hilfe, hat mir geholfen - und ich habe das Eine, oder Andere dazugelernt.

Nachdem ich die index.html ausversehen falsch überschrieben und kein Backup gemacht habe, ist das alte Design total verschandet gewesen und ich habe gleich, um auf diese Weise mehr zu lernen und weil mir das aktuelle einfach besser gefällt, ein neues gewählt.
Habe das ganze soweit auch schon ganz gut angepasst. Jedoch stellen sich mit noch drei offene Fragen, welche ich hier ausführlich ansprechen werde und hoffe auf Hilfe, den Rest sollte ich eigentlich alleine schaffen.

==> www.berlin-gfx.de/admin/index.php
user: testuser
password: testpw
(Ich gebe diese Daten in Vertrauen an Euch alle, bitte behandelt das Vertrauen so, wie ihr es selbst gerne hättet!)

Störenfried No 1.:
Klickt zum Beispiel mal auf Kontakt unten rechts, also auf: http://berlin-gfx.de/index.php?seite=3.kontaktformular
Das Gleiche ebenfalls bei allen anderen Modulen: anderes Bsp.: http://berlin-gfx.de/index.php?seite=6.gbook&action=0

Mein Problem seht ihr sofort. Diesmal handelt es sich nicht um ein Kommentar im CSS. Die global.css wird orgnungsgemäß eingefügt, ich weiß nicht - was da los ist, würde mich über Hilfe sehr freuen. Die main.css & global.css, füge ich am Ende des Beitrages bei!

ps. Hat das Aussehen von http://berlin-gfx.de/index.php?seite=13.…o&action=1.show auch etwas damit zu tun? Das ist SO natürlich nicht normal, oder?

Störenfried No 2.:
Geht mal mit der Maustaste über mein Menü oben rechts. Der Mouseover funktioniert nicht mehr so, wie ich es gerne hätte. Eigentlich wird beim Hover links auch noch eine Grafik eingefügt, in der die linke Rundung eingefügt wird, dies ist - seit einfügen des Hauptmenüs - jedoch nicht mehr so. Wenn wir grad dabei sind, hätte ich gerne die Info, wo und wie man einstellt, dass eine bestimmte Pixelanzahl zwischen den einzelnen Menüpunkten Platz geschaffen wird.

Störenfried No 3.:
Links, das Menü - in dem aktuell deutsche und englische Beispieltexte drin sind.
Dort möchte ich EIGENTLICH das Hauptmenü einfügen, welches aktuell oben rechts ist und oben rechts soll dann das Submenü eingefügt werden, also einfach einmal umgekehrt denken

.. Hätte gerne, dass das Hauptmenü da autom. eingefügt wird, mit einer GLEICHEN GRAFIK vor dem Menüpunkt, die müssen sich also nicht unterscheiden - wie schaff ich das?

/// =>> das wären also alle meine offenen Fragen, welche mich aktuell noch stören und mich daran hintern, mit dem Grundgerüst abzuschließen und mich an die Füllung der Page zu machen.

index-und-main.zip

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »berlingfx« (7. Mai 2009, 16:32)

Zum Seitenanfang

fusion

Anfänger

Beiträge: 3

Wohnort: Basel

9

Donnerstag, 7. Mai 2009, 00:12

Hey,

kannst du eventuell ein Screenshot von Problem N.1 machen? Auch wenn ich mich einlogge kommt immer wieder Wartungsmodus beim anschauen der Seite.

Zum Seitenanfang

berlingfx

unregistriert

10

Donnerstag, 7. Mai 2009, 03:18

Problem 2 & 3 habe ich selbst lösen können.
Es ist nur noch Problem 1 vorhanden und das verunstaltet meine ganze Page, hoffentlich könnt ihr helfen.

Ich denke im folgenden Bild ist zu sehen, was mein Problem ist. Habe mehrere Beispiele zusammengefügt.

ps. da die Logindaten eh nicht gehen, werde ich den Account wieder löschen!

Zum Seitenanfang

cms2day Forum - Community & Support rund ums cms2day