Am besten verlinkst du die beiden CSS Dateien, denn nur dann können wir auch Detail nennen. Aber auch so kann ich schon sagen, dass beide Dateien die gleichen Klassen/IDs definieren. Weshalb immer die zuletzt gefundene Definition genommen wird.
body usw. kannst du nicht umbenennen. Ich fürchte da musst du selber die Konflikte beheben...
Alle bis einschließlich h2 musst du per Hand anpassen. Das heißt, dass du schauen musst welche Eigenschaften kollidieren und diese entsprechen deinem Geschmack anpassen. Deine Idee funktioniert nur wenn du Vererbung nutzt => mehr Aufwand.
Ggf. ist auch das Tauschen der Reihenfolge (der CSS Dateien) hilfreich.
Wie mach ich das am besten hier, ich peil da nicht durch irgendwie versteh ich nur 
<!-- Panel -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>Welcome to Webseite</h1>
<h2>Text! Text! Text! Text! Text! Text!</h2>
<p class="grey">Text! Text! Text! Text! Text! Text! Text! Text!</p>
<h2>Testpage</h2>
<p class="grey">Testpage <a href="http://www.Google.de" title="Testpage">article »</a></p>
</div>
<div class="left">
<!-- Login Form -->
<form class="clearfix" action="#" method="post">
<h1>Member Login</h1>
<label class="grey" for="log">Username:</label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label class="grey" for="pwd">Password:</label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
<a class="lost-pwd" href="#">Lost your password?</a>
</form>
</div>
<div class="left right">
<!-- Register Form -->
<form action="#" method="post">
<h1>Not a member yet? Sign Up!</h1>
<label class="grey" for="signup">Username:</label>
<input class="field" type="text" name="signup" id="signup" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<label>A password will be e-mailed to you.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</form>
</div>
</div>
</div> <!-- /login -->
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Hello Guest!</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Log In | Register</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
</div> <!--panel -->Das kann man pauschal nicht sagen ... dazu kennen wir deine Seite zu schlecht. Am besten baust du zum Testen mal nur die Ursprüngliche CSS Datei ein und schaust was nicht funktioniert oder schlecht aussieht und sprichst uns mit diesen Details noch einmal an.
Gut, dann solltest du als erstes alle Klassen die nicht kollidieren aus der zweiten in die erste CSS Datei übernehmen und erneut schauen.
Doch, kann man. Aber um Anpassungen kommst du nicht herum.
Das wird aber eher an der Überlappung liegen, denn auch wenn viele Bereich des Slieders unsichtbar sind liegen sie dennoch über dem Suchfeld.
Deshalb das Suchfeld am besten etwas nach unten verschieben.
Das ist ganz richtig, denn damit hast du denn unsichtbaren Teil entfernt. Aber auch die paar Pixel Bild am oberen Rand. Musst selbst entscheiden was dir besser gefällt.
Ja, die ist aber umständlich. Du könntest sie per z-index über den unsichtbaren Bereich legen und dann per js beim ausklappen des Slieders ausblenden.
Ojee, das wäre eine super Sache 
kannst mir dabei helfen das so einzurichten? Hab die Searchbar mal nach unten verschoben mit css margin-top aber trotzdem funktioniert diese nicht, diese müsste ja normal aus dem unsichtbaren bereich raus sein oder?
