zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Mit CSS datei alles kaputt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.02.2009, 11:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.11.2008
Beiträge: 15
Sahyre befindet sich auf einem aufstrebenden Ast
Standard Mit CSS datei alles kaputt

Hi.
Ich habe folgendes Problem.
Ich hab mir ein schönes fertiges CSS Layout besorgt, das aus einer einzigen Datei bestanden hat. Also die HTML-Seite und die CSS Informationen sind in der selben HTML-Datei enthalten.

Im ganzen sieht die "fertige" Seite am Ende so aus:



Ich möchte jetzt aber das die CSS Informationen in einer seperaten CSS-Datei ausgelagert werden. Wenn ich das mache, dann zerbombt es mir aber die Ausgabe.
Es wird im Layout 3 Container erstellt. Die ersten 2 sind fest und der linke soll sich bis zum rechten Bildschirmrand füllen. Leider macht er das nur in der Version wo alles in einer Datei liegt.

In der Version mit der ausgelagerten CSS-Datei sieht es so aus:


Die css-datei sieht so aus:
Zitat:
body {font-size:76%; font-family:"trebuchet MS", verdana, arial, sans-serif; background:#f0f0f0; word-wrap:break-word;}

#header {background:#a31e39;}

#outer1 {float:left; width:180px; padding:10px; background:#e0d0d0;}
#outer2 {float:left; width:180px; padding:10px; background:#b0b0b0;}
#outer3 {background:#c0c0c0; padding:10px; min-height:420px;}

#outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;}
#wrapper {overflow:hidden; background:#c0c0c0;}
#footer {clear:both; background:#455c5a;}

.content {padding:10px;}
h1 {font-size:20px; margin:0; padding:10px 0; color:#fff;}
h3 {font-size:18px; margin:0; padding:8px 0;}
p {font-size:12px; line-height:1.5em; margin:0; padding:5px 0;}
#footer p,
#header p {color:#fff;}
#footer a {color:#fff;}
#footer a:hover {text-decoration:none;}


<!--[if lte IE 7]>
body {word-wrap:break-word;}
#outer3 {float:left; display:inline; margin-left:0;}
#wrapper {display:inline-block;}
<![endif]-->
Aufrufen tu ich sie in meiner HTML-Datei so:
Zitat:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Dark Moon Clan </title>
<link type="text/css" href="dmc.css" rel="stylesheet" media="screen" />
<meta name="Author" content="" />
<meta name="Keywords" content="style, cascading, sheets, Experiments, code, CSSplay, Stu, Nicholls, demonstrations, menus, layouts, flexible, multi-column, equal height" />
<meta name="Description" content="CSS only flexible widths with equal height columns" />
<meta http-equiv="imagetoolbar" content="no" />


</head>

<body>
<div id="header">
<div class="content">
<h1>Dark Moon Clan</h1>
<p>Resize you browser window and watch it stay in shape. NO graphics have been used in this demonstration (except for the 'Donate' button).</p>
</div>
</div> <!-- end header -->

<div id="wrapper">
<div id="outer1">
<h3>Hauptmenue</h3>
<br>
<br>
<br>
<br>
Menue<br>
Menue<br>
Menue<br>
<br>
<br>
<br>
<br>

</div>


<div id="outer2">
<h3>Untermenue</h3>
<br>
<br>
<br>
<br>
UnterMenue<br>
UnterMenue<br>
UnterMenue<br>
<br>
<br>
<br>
<br>

</div>



<div id="outer3">
<h3>Spielfenster</h3>
<br>
<br>
<br>
<br>
123
<br>
<br>
<br>
<br>
123

</div>


</div><!-- end #wrapper -->

<div id="footer">
<div class="content">
<h1>Daub-Solutions</h1>
<p> Meins </p>
</div>
</div> <!-- end footer -->

</body>
</html>
Wenn ihr mir helfen könntet wäre ich wirklich sehr sehr dankbar
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.02.2009, 11:34
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

Servus!

Der Teil darf nicht in der CSS stehen, der gehört in den <head> des html:
Zitat:
<!--[if lte IE 7]>
body {word-wrap:break-word;}
#outer3 {float:left; display:inline; margin-left:0;}
#wrapper {display:inline-block;}
<![endif]-->
vieleicht wars das ja schon...
vergiss nicht, der IE kleiner oder gleich 7 bekommt über diese Anweisung, auf den von dir reklamierten Block ein float zugewiesen. Das bedeuted auch, das der Block nur mehr so breit wie sein Inhalt wird. Wobei float:left und display:inline zusammen eher Quatsch ist.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.02.2009, 11:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.11.2008
Beiträge: 15
Sahyre befindet sich auf einem aufstrebenden Ast
Standard

@ paracelsus

Super besten und geilsten dank
ES FUNZT.


und auch besten dank für die weiteren infos, werd mir das mim iexplorer mal genauer angugen
Mit Zitat antworten
  #4 (permalink)  
Alt 17.02.2009, 11:46
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von paracelsus Beitrag anzeigen
Wobei float:left und display:inline zusammen eher Quatsch ist.
Keineswegs: Der IE bis einschließlich Version 6 verdoppelt den horizontalen margin fließender Blöcke, wenn er kein display:inline auf den Kopf kriegt.
__________________
toscho.de
Mit Zitat antworten
  #5 (permalink)  
Alt 17.02.2009, 12:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.11.2008
Beiträge: 15
Sahyre befindet sich auf einem aufstrebenden Ast
Standard

Vielleicht könnt ihr mir doch noch einen Denkanstoss geben.
So wie im oberen Bild hab ich ganz rechts das "Spielfenster" (heißt immo noch so, weil ich es so als layout runtergeladen hab^^)

wenn ich im block ganz rechts inhalte eingebe, die von der zeilenanzahl länger sind, als die von den linken blöcken (Hauptmenü und Untermenü) dann werden die auch unter den menüblöcken angezeigt.

quasi so:



ich hab jetzt per hand einfach unter die Menüpunkte soviele
Zitat:
<br>
<br>
<br>
eingebaut, bis der Text nichtmehr unter den menüs auftaucht......sollte aber wohl keine gute lösung sein.

kann mir jemand nen denkanstoss geben, wie ich da noch ein block oder so integriere das das alles auf der rechten seite im richtigen block bleibt? bin grad am basteln, aber ich glaub mir fehlt das know how
Mit Zitat antworten
  #6 (permalink)  
Alt 17.02.2009, 13:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.11.2008
Beiträge: 15
Sahyre befindet sich auf einem aufstrebenden Ast
Standard

Also hab jetzt selbst mal einfach einen Container in den rechten Container eingebaut. scheint so zu gehen.
aber falls das doch falsch sein sollte, bitte kurz informieren ^^

Zitat:
#outer3 {background:#c0c0c0; padding:10px; min-height:420px;}
#outer4 {float:left; padding:10px; background:#c0c0c0;}
outer 3 ist der block wie er normal ist
und der outer 4 ist im outer 3 drin verschachtelt
Mit Zitat antworten
  #7 (permalink)  
Alt 17.02.2009, 13:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Zitat:
wenn ich im block ganz rechts inhalte eingebe, die von der zeilenanzahl länger sind, als die von den linken blöcken (Hauptmenü und Untermenü) dann werden die auch unter den menüblöcken angezeigt.
Ist ja auch logisch. Denn der rechte Text umläuft ja deine linken (gefloateten) Blöcke. Wie Text in einem Buch, der um ein Bild geht. Und dein rechter Inhalt hat ja keine Begrenzung nach links und rutscht dann wieder rüber. Mit dem Container rechts hast du nun eine Begrenzung geschaffen, die den Text/Inhalt immer rechts hält.

Hoffe, das war verständlich
Mit Zitat antworten
  #8 (permalink)  
Alt 17.02.2009, 13:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Meinst du nicht, es wäre besser, dich erstmal in Grundlagen einzuarbeiten? Du hast doch schon Lektüreempfehlung bekommen.

Dieses von Stu Nicholls "besorgte" Layout halte ich für untauglich für jemanden, der nicht ganz genau weiß, was er tut.
Mit Zitat antworten
  #9 (permalink)  
Alt 17.02.2009, 13:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.11.2008
Beiträge: 15
Sahyre befindet sich auf einem aufstrebenden Ast
Standard

will da nicht mit dir diskuttieren fricca. du hast ja voll und ganz recht. aber immo hab ich eigentlich garkeine zeit um mich damit zu beschäftigen. das interresse is aber so hoch ^^
ich brauch das alles eigentlich garnicht, aber bin von natur aus bissl verspielt und wollt schon immer mal ne eigene tolle hp haben.
nix für ungut, ich will euch ja nicht nerven
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.02.2009, 13:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Zitat:
[...] und wollt schon immer mal ne eigene tolle hp haben. [...]
Also brauchst du es ja doch :P

Verstehe, was du meinst, aber von nichts kommt leider nichts. Klar kannst du probieren. Ist ja nichts gegen einzuwenden. Aber hier kann dir immer nur schwer bei allen kleinen Problemchen beholfen werden, was Anfängerfehler betrifft. Spätestens nach der 3. Frage wird man dir nahelegen, CSS/HTML richtig oder zumindest ein wenig mehr zu lernen.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 17:09
Hintergrund mittels CSS Datei wechseln fledermaus CSS 1 04.02.2007 23:44
Brauche dringend Hilfe Liste in ext. CSS Datei elcomportal CSS 4 28.01.2006 20:36
in einer rss datei auf ein css verlinken? new user CSS 3 25.02.2004 19:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:45 Uhr.