integrierte loginbox + css

[askir]

Hallo ..
habe auf meiner Homepage die Standard loginbox auf der rechten Seite integriert und würde die gerne anpassen - die Breite der Kästchen etc hab ich hinbekommen, aber bei 2 Sachen komm ich nciht weiter!

1. den Rahmen um die loginbox bekomm ich nicht weg (siehe Bilder - der äußere schmalere Rahmen ist gewollt, der innere nicht!!)

2. wenn ich mich einloggen, verschiebt es die div-box daneben nach rechts

Würde mich sehr freuen, wenn mir jmd helfen könnte!!

Vielen Dank!

(Typo3 4.1.1)

[unterstrich]

Hallo,
ich denke wir benötigen noch einige Facts...öhm...arbeitest du mit einem Templatesystem? Oder bettest du die CSS per TS ein?

Schicke doch mal die CSS mit...

zu punkt 1, hast du mal geschaut ob der Rahmen vll irgendne DIV Box is, vll kannst du dann anhand des Namens der DIV die Position in der CSS feststellen und dann ändern...

Oder schick ma den Link zu deiner Webapp, dann schauen wa alle ma in den Quelltext...

Gruß
Sven

[askir]

Hallo ...

erstmal Danke für die Antwort.

Hier der Link:

http://bkretzer.gamblerwars.de/

Zum Testen die Logindaten:
name: test
pw: test

[unterstrich]

hmm, also der Quelltext sagt bei der Loginbox das:

<div class="einloggen"><div class="login"> <form action="index.php?id=29  " method="post" >
    <fieldset>
      <input name="user" class="user" type="text" title="Benutzername" value="Username" onfocus="if (this.value==this.defaultValue) this.value=''" size="12" />

      <input name="pass" class="pw" type="password" title="Passwort" value="****" onfocus="if (this.value==this.defaultValue) this.value=''" size="12" />     
      <input type="hidden" name="logintype" value="login" /> <input type="hidden" name="pid" value="36" />
      <input class="submit" name="image" type="submit" value="Login" title="Login" />   
    </fieldset>               
  </form>
</div>
</div>

Das erste was mich etwas wundert ist das du da zwei div boxen hast.
Eine namens "login" --> denke ma die kommt aus dem System...
und eine names "einloggen", die du warscheinlich selber eingebaut hast..richtig?

Wenn du nun, in der css wo du das "einloggen" eingebaut hast, nach dem div login suchts, solltest du denke ich ma erfolg haben und da etwas ändern können...

Kannst du denn die css ändern? Oder wird die von einem TemplateSystem erzeugt...sag ma wie du das gebaut hast...

[askir]

Ich hab eine extra CSS-Datei, die ich auch ändern kann.
Und da hab ich auch versucht eben .login zu definieren und zu ändern, aber ändert überhaupt nichts am Layout!!

body { 
	margin: 0; 
	padding: 0; 
	background: #fff; 
	font: normal .7em Tahoma, Verdana, Arial, Helvetica, Sans-Serif; 
	line-height: 1.6em; 
	color: #333;
}

/*  ------------------ LINKS UND UEBERSCHRIFTEN ----------------------------- */

a { 
	color: #588E03; 
	background: inherit;
	text-decoration: none;
}

a:hover { 
	color: #09460F; 
	background: inherit;
	text-decoration: none;
}
	
h1  { 
	font: bold 2em "Trebuchet MS", Helvetica, Sans-Serif; 
	margin: 0; 
	color: #fff; 
	background-color:transparent; 
	}
	
h2  { 
	font: bold 1.4em "Trebuchet MS", Helvetica, Sans-Serif; 
	}
	
h3 { 
	clear: both; 
	font-size: 1.1em; 
	color: #000; 
	background: #fff url(../images/h3bg.gif) no-repeat center left; 
	padding: 0 14px; 
	margin: 0;
	}

/*  ------------------------ CONTENT WRAPPER UND TOPMENUE----------------- */

#main { 
	width: 900px; 
	margin: 25px auto 0 auto; 
}



#topnavlist
{
	text-align: right;
	padding: 3px 0;
	margin-left: 0;
	border-bottom: 1px solid #F7AE16;
}

#topnavlist li
{
list-style: none;
margin: 0;
display: inline;
}

#topnavlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
background: #fff;
text-decoration: none;
}

#topnavlist li a:link { 
color: #fff; 
background: #fff;
}
#topnavlist li a:visited { 
color: #fff; 
background: #fff;
}

#topnavlist li a:hover {
color: #fff;
background: #fff;
}



#topnavlist li a#current
{
	color: #fff;
background: white;
}



/*  ---------------------------- INTRO LINKS ---------------------------- */	

#intro_links {
	clear: left;
	float: left;
	width: 230px;
	color: #09460F;
	margin: 0 0 1px 0;
	padding-left: 10px;
	border-top: 1px solid #ccc;
}

#intro_links p {
	background: #fff url(../images/h3bg.gif) no-repeat center left;
	padding: 14px 0 14px 13px;
	margin: 0;
	font-weight: bold;
	font-size: 1.1em;
	text-transform: uppercase;
}

/*  ------------------------ HAUPT- UND SUBMENUE ----------------------- */
	
	#menu_1 { 
		float: left;  
		margin: 0 0 6px 0; 
		padding: 0 0 1px 0; 
		border-bottom: 1px solid #ccc; 
	}
		
		
	.menu1-level1-no a {
			display: block; 
			color: #FFF; 
			background: #9cce2e url(../images/arrow-smooth.png) no-repeat 10px; 
			width: 194px; 
			padding: 7px 23px 7px 23px; 
			margin: 0 0 1px 0; 
			font-weight: bold; 
			text-decoration: none;
	
	}
	
	.menu1-level1-no a:hover {
			background: #588E03 url(../images/arrow-smooth.png) no-repeat 10px; 
			color: #fff;
}

	.menu1-level1-act a {
			display: block; 
			color: #FFF; 
			background: #588E03 url(../images/arrow-smooth.png) no-repeat 10px; 
			width: 194px; 
			padding: 7px 23px 7px 23px; 
			margin: 0 0 1px 0; 
			font-weight: bold; 
			text-decoration: none;
}
 
	.menu1-level2-no a {
			display: block; 
			color: #FFF; 
			background: #C3BB1F url(../images/round.png) no-repeat 20px; 
			width: 194px; 
			padding: 7px 15px 7px 31px; 
			margin: 0 0 1px 0; 
			font-weight: bold; 
			text-decoration: none;
}

	.menu1-level2-no a:hover {
			background: #588E03 url(../images/round.png) no-repeat 20px; 
			color: #fff;
}

	.menu1-level2-act a {
			display: block; 
			color: #FFF; 
			background: #588E03 url(../images/round.png) no-repeat 20px; 
			width: 194px; 
			padding: 7px 15px 7px 31px; 
			margin: 0 0 1px 0; 
			font-weight: bold; 
			text-decoration: none;
}

/* ---------------------------- SUBMENUE ----------------------------------*/

	#menu_2 { 
		float: left;  
		margin: 0 0 6px 0; 
		padding: 0 0 1px 0; 
		border-bottom: 1px solid #ccc; 
	}
	
	.menu2-level1-no a {
			display: block; 
			color: #5b5b5b; 
			background: #eee url(../images/arrow-smooth.png) no-repeat 10px; 
			width: 194px; 
			padding: 7px 23px 7px 23px; 
			margin: 0 0 1px 0; 
			font-weight: bold; 
			text-decoration: none; 
	
	}
	
	.menu2-level1-no a:hover {
			background: #ccc url(../images/arrow-smooth.png) no-repeat 10px;
}

	.menu2-level1-act a {
			display: block; 
			color: #5b5b5b; 
			background: #ccc url(../images/arrow-smooth.png) no-repeat 10px; 
			width: 194px; 
			padding: 7px 23px 7px 23px; 
			margin: 0 0 1px 0; 
			font-weight: bold; 
			text-decoration: none;
}
 
	.menu2-level2-no a {
			display: block; 
			color: #5b5b5b; 
			background: #eee url(../images/round.png) no-repeat 20px; 
			width: 194px; 
			padding: 7px 15px 7px 31px; 
			margin: 0 0 1px 0; 
			font-weight: bold; 
			text-decoration: none; 
}

	.menu2-level2-no a:hover {
			background: #ccc url(../images/round.png) no-repeat 20px;
}

	.menu2-level2-act a {
			display: block; 
			color: #5b5b5b; 
			background: #ccc url(../images/round.png) no-repeat 20px; 
			width: 194px; 
			padding: 7px 15px 7px 31px; 
			margin: 0 0 1px 0; 
			font-weight: bold; 
			text-decoration: none;
}
	
			
/*  -------------------------- LOGO -------------------------------------- */
	
#headerlogo {
	float: right;
	width: 651px; 
	background: #fff url(../images/blogo_g.png) no-repeat center;
	color: #547592;
	margin: 0 0 6px 0;
	height: 207px;
	border:1px solid #ccc;
}
	
	
/*  ------------------------- LOGIN LINKS ------------------------------ */
	
#links {
	float: left;
	width: 240px;
}


.einloggen {
	display: block;	
	  float: left;
	  width: 215px;
	  border: 1px solid #ccc;
	  padding: 5px 17px 5px 7px;
	  margin: 0 0 6px 0; 
}



.submit {
	width: 60px;
	
}

.login {
border-style: none;
}


.user {
	font-size: 10px;
	width: 60px;
}

.pw {
	font-size: 10px;
	width: 60px;
}

/* -------------------------- CONTENT RECHTS ---------------------------- */

#rechts {
	float: right;
	width: 653px;
}
	.content { 
		float: left; 
		padding: 12px 15px;
		width: 620px; 
		border: #ccc 1px solid;
		text-align: justify;
		margin: 0 0 10px 0;
	}
	
	.subcontent {
		clear: both;
		margin:0px 0 10px 0;	
		padding: 0px 20px;
		border: 1px solid #ccc;
		color: #444;
	}
	
/* -------------------------- Kontaktormular ----------------------------- */

fieldset.csc-mailform {
	border: 0;
}

fieldset.csc-mailform .csc-mailform-field label {
	display:  block;
	font-weight: bold;
}

fieldset.csc-mailform #mailformname,
fieldset.csc-mailform #mailformemail, 
fieldset.csc-mailform #mailformmessage {
	color: red;
}

/* --------------------------------- FOOTER ------------------------- */

#footer { 
	clear: both; 
	padding: 5px; 
	border-top: 1px solid #F7AE16; 
	}

[unterstrich]

Ah ja,

ne ne, klar da kannst du nix ändern, wie ich ja gesagt habe kommt das aus dem System.
Daher passiert das auch, das das andere Layout sich verschiebt...ah, jetzt wird mir alles klar...

Nochmal meine Frage benutzt du TempVoila oder sowas...?

Wenn ja dann muss man dort ansetzten uns versuchen die CSS Klassen zu deaktievieren...

[askir]

TempViola nicht, aber automaketemplate ...

Du machst mir Hoffnung, daß man den Fehler beheben kann - einen Tipp, wie??

Wenn ja dann muss man dort ansetzten uns versuchen die CSS Klassen zu deaktievieren...

Meinst du damit die "einloggen"-Klasse??

Auf alle vielen Dank, daß Du Dir soviel Mühe gibtst!!

[unterstrich]

automake...ach du meine güte...hmm uhi ja jetzt haste mich ;)
vll ist ja einer unter den jungs und mädels die was von automake verstehen und helfen könnten...ja genau ihr ja..:)

Ne, die einloggen klasse nicht, sondern die "login" klasse...meinte ich, das geht bestimmt aber bei automake bin ich leider überfragt...

Auf alle vielen Dank, daß Du Dir soviel Mühe gibtst!!

Kein Ding, alte 3third level Supporter Krankheit ;)