• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Css in XHTML einbauen!!!

P

prajuritbs

Mitglied
Hallo ich bin neu hier, und habe folgende Frage:

Ich kenn mich mit HTML eigentlich recht gut aus, so habe ich jeztzt einen CSS-Editor aus dem Internet genommen und wollte mein HTML-Script verschöndern aber wo baue ich des in den HTML CODE ein, also das es zu einem Code wird und des miteindander "arbeitet" ?
In den <head> teil ? oder Body ?
Und brauch ich da noch mal einen bestimmten Befehl dafür z.b. <script="css"> oder so?

Hab euch hier mal alle Codes die ich hab, in kKlammern steht immer drüber, was für ein Code des ist.
Wäre net wen mir jmd. helfen könnte!!!

HTML: 
(layout- css code)


/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) central stylesheet
 * (de) zentrales Stylesheet
 *
 * @creator       YAML Builder V1.2.1 (http://builder.yaml.de)
 * @file          my_layout.css
 * @-yaml-minver  3.3
 * 
 */

/* import core styles | Basis-Stylesheets einbinden */
@import url(../yaml/core/base.css);

/* import screen layout | Screen-Layout einbinden */
@import url(../yaml/navigation/nav_slidingdoor.css);
@import url(screen/basemod.css);
@import url(screen/content.css);

/* import print layout | Druck-Layout einbinden */
@import url(../yaml/print/print_draft.css);
HTML: 
(basemode-css code)

/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) stylesheet for screen layout
 * (de) Stylesheet für das Bildschirm-Layout
 *
 * @creator       YAML Builder V1.2.1 (http://builder.yaml.de)
 * @file          basemod.css
 * @-yaml-minver  3.3
 */

@media screen, projection
{
  /** 
   * (en) Forcing vertical scrollbars in IE8, Firefox, Webkit & Opera 
   * (de) Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera 
   *
   * @workaround
   * @affected IE8, FF, Webkit, Opera
   * @css-for all
   * @valid CSS3
   */

  body { overflow-y: scroll; }

  /*-------------------------------------------------------------------------*/

  /* (en) Marginal areas & page background */
  /* (de) Randbereiche & Seitenhintergrund */
  body { background: #3b69ad none; padding: 10px 0; }

  /* Layout Alignment | Layout-Ausrichtung */
  .page_margins { margin: 0 auto; }

  /* Layout Properties | Layout-Eigenschaften */
  .page_margins { width: auto;  min-width: 740px; max-width: 90em; background: #fff; }
  .page { padding: 10px 15px 10px 10px; }
  #header { position:relative; padding: 45px 2em 1em 20px; color: #000; background:#edf2f8 url("../../images/bg_header.gif") repeat-x bottom left; }
  #topnav { position:absolute; top:10px; right:10px; text-align:right; color: #aaa; background: transparent; }
  #nav { overflow:hidden; }
  div.hlist { background-color: #c8ddf3 }
  #main { margin: 10px 0; background: #fff; }
  #footer { padding: 10px 20px; color:#666; background: #f9f9f9; border-top: 5px #efefef solid; }

  /* (en) navigation: horizontal adjustment | (de) horizontale Ausrichtung  */
  #nav ul { margin-left: 20px; }

  /*-------------------------------------------------------------------------*/

  /**
   * (en) Formatting content container
   * (de) Formatierung der Inhalts-Container
   *
   */

  #col1 { float: left; width: 75%}
  #col2 { display:none}
  #col3 { width: auto; margin: 0 0 0 75%}
  #col1_content { padding: 0 10px 0 20px }
  #col3_content { padding: 0 20px 0 10px }


  /* set column dividers */ 
  #col3 { border-left: 1px #ddd dotted }
    
  /*-------------------------------------------------------------------------*/

  .page_margins {
    border: 0 none;
    background-image:  url(../../images/gfxborder/border_left.gif);
    background-repeat:repeat-y;
    background-position:left;
  }

  .page {
    border: 0 none;
    margin: 0 0 0 5px; padding: 10px 15px 10px 10px;
    background-image:  url(../../images/gfxborder/border_right.gif);
    background-repeat:repeat-y;
    background-position:right;
  }


  #border-top {
    overflow:hidden;
    width: auto;
    height: 20px;
    font-size:0;
    margin-bottom: -15px;
    background-image:  url(../../images/gfxborder/border_top.gif);
    background-repeat:repeat-x;
    background-position:top left;
  }

  #border-bottom {
    overflow:hidden;
    width: auto;
    height: 20px;
    margin-top: -15px;
    font-size:0;
    background-image:  url(../../images/gfxborder/border_bottom.gif);
    background-repeat:repeat-x;
    background-position:bottom left;
  }

  #edge-tl {
    float:left;
    width: 20px;
    height: 20px;
    font-size:0;
    background-image:  url(../../images/gfxborder/corner_tl.gif);
    background-position: top left;
  }

  #edge-tr {
    position:relative; /* IE Fix | z-index */
    float:right;
    width: 20px;
    height: 20px;
    font-size:0;
    background-image:  url(../../images/gfxborder/corner_tr.gif);
    background-position: top right;
  }

  #edge-bl {
    float:left;
    width: 20px;
    height: 20px;
    background-image:  url(../../images/gfxborder/corner_bl.gif);
    background-position: bottom left;
  }

  #edge-br {
    position:relative; /* IE Fix | z-index */
    float:right;
    width: 20px;
    height: 20px;
    background-image:  url(../../images/gfxborder/corner_br.gif);
    background-position: bottom right;
  }

}
HTML: 
(pacht_my_layout.css)


/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) IE patch stylesheet 
 * (de) IE-Anpassungs-Stylesheet
 *
 * @creator       YAML Builder V1.2.1 (http://builder.yaml.de)
 * @file          patch_my_layout.css
 * @-yaml-minver  3.3
 */

/* Layout independent adjustments | Layout-unabhängige Anpassungen  */
@import url(../../yaml/core/iehacks.css);

/* Layout-dependent adjustments | Layout-abhängige Anpassungen */
@media screen, projection
{}
HTML: 
(xhtml - code)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" >
<title>Your Page Title</title>
<!-- add your meta tags here -->

<link href="css/my_layout.css" rel="stylesheet" type="text/css" >
<!--[if lte IE 6]>
<script src="js/minmax.js" type="text/javascript"></script>
<![endif]-->

<!--[if lte IE 7]>
<link href="css/patches/patch_my_layout.css" rel="stylesheet" type="text/css" >
<![endif]-->
</head>
<body>
  <div class="page_margins">
    <div id="border-top">
      <div id="edge-tl"></div>
      <div id="edge-tr"></div>
    </div>
    <!-- start: skip link navigation -->
    <!-- end: skip link navigation -->
    <div class="page">
      <div id="header">
        <div id="topnav">
          <!-- start: skip link navigation -->
          <a class="skip" title="skip link" href="#navigation">Skip to the navigation</a><span class="hideme">.</span>
          <a class="skip" title="skip link" href="#content">Skip to the content</a><span class="hideme">.</span>
          <!-- end: skip link navigation --><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a>
        </div>
      </div>
      <div id="nav">
        <!-- skiplink anchor: navigation -->
        <a id="navigation" name="navigation"></a>
        <div class="hlist">
          <!-- main navigation: horizontal list -->
          <ul>
            <li class="active"><strong>Button 1</strong></li>
            <li><a href="#">Button 2</a></li>
            <li><a href="#">Button 3</a></li>
            <li><a href="#">Button 4</a></li>
            <li><a href="#">Button 5</a></li>
          </ul>
        </div>
      </div>
      <div id="main">
        <div id="col1">
          <div id="col1_content" class="clearfix">
            <!-- add your content here -->
            <h1>H1 Heading</h1>
          </div>
        </div>
        <div id="col3">
          <div id="col3_content" class="clearfix">
            <!-- add your content here -->
            <h2>H2 Heading</h2>
          </div>
          <!-- IE Column Clearing -->
          <div id="ie_clearing">   </div>
        </div>
      </div>
      <!-- begin: #footer -->
      <div id="footer">Layout based on <a href="http://www.yaml.de/">YAML</a>
      </div>
    </div>
    <div id="border-bottom">
      <div id="edge-bl"></div>
      <div id="edge-br"></div>
    </div>
  </div>
</body>
</html>
 
Danke. Jetzt habe ich des CSS-Code eingefügt.
Aber wie füge ich die 2 andern noch ein die "Layouts" ...
auch so wie auf der Seite beschrieben ?
Also ich mein den 1 und 3ten Code .
Danke nochmals
 
Theoretisch ja. Aber mit den vielen @include-Regeln… Sollte doch auf der "Yet Another Multicolumn Layout"-Seite erklärt werden, wie man's einbindet, oder?
 
Also ich habe mir des nochmal auf der Seite durchgelesen und da steht man kann des einfach im Head teil als mit nem <link href=""> einfügen, indem man des in einer .txt-Datei speichert.
Also habe ich jetzt die Layout in einer Text Datei gespeichert, natürlich einzeln, und des mit dem <link...> eingefügt, aber trotzdem wird das Layout nicht erkannt.
Auch als ich des als .css file gespeichert hab hat es nicht hingehauen. Oben stehen ja die " Codes kann mir des nicht einfach irgendjemand in den Code einbinden und mir den fertigen Code schicken? Mir wäre wirklich geholfen!!! Danke nochmal.
 
Wir kennen deine Verzeichnisstruktur nicht. Ansonsten könnten wir es außerdem auch nur so machen, wie's auf SELFHTML erklärt wird. So viele Möglichkeiten gibt es da nicht.
 
Vielleicht hast ja ein Attribut vergessen.


HTML: 
<head>
    <link rel="stylesheet" type="text/css" href="dieCSSdatei.css" />
</head>
 
Nein eben nicht. Ja also ich hab den fertigen Code als index.html in einem Ordner gespeichert und die 2 "layout" textdateien auch. (Also im selben:D)
Und dann mit dem Code eingefügt aber anscheinend werden die nicht angenommen, so als wären sie nicht da .

Also so siehtder Code aus, aber was ist da falsch?
(Sorry, irgendwie kann ich des nicht als HTML-Code anzeigen)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" >
<title>Prajuritbs - Technologie and the world - </title>
<!--[if lte IE 6]>
<link href="patch_my_layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/**
* "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
* (en) IE patch stylesheet
* (de) IE-Anpassungs-Stylesheet
*
* @creator YAML Builder V1.2.1 (http://builder.yaml.de)
* @file patch_my_layout.css
* @-yaml-minver 3.3
*/

/* Layout independent adjustments | Layout-unabhängige Anpassungen */yaml/core/iehacks.css);

/* Layout-dependent adjustments | Layout-abhängige Anpassungen */
@media screen, projection
{}

</style>
<link rel="stylesheet" type="text/css" href="my_layout.css">
<style type="text/css">
/**
* "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
* (en) central stylesheet
* (de) zentrales Stylesheet
*
* @creator YAML Builder V1.2.1 (http://builder.yaml.de)
* @file my_layout.css
* @-yaml-minver 3.3
*
*/

/* import core styles | Basis-Stylesheets einbinden */
@import url(../yaml/core/base.css);

/* import screen layout | Screen-Layout einbinden */
@import url(../yaml/navigation/nav_slidingdoor.css);
@import url(screen/basemod.css);
@import url(screen/content.css);

/* import print layout | Druck-Layout einbinden */
@import url(../yaml/print/print_draft.css);
</style>
<![endif]-->

<style type="text/css">
/**
* "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
* (en) stylesheet for screen layout
* (de) Stylesheet für das Bildschirm-Layout
*
* @creator YAML Builder V1.2.1 (http://builder.yaml.de)
* @file basemod.css
* @-yaml-minver 3.3
*/

@media screen, projection
{
/**
* (en) Forcing vertical scrollbars in IE8, Firefox, Webkit & Opera
* (de) Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera
*
* @workaround
* @affected IE8, FF, Webkit, Opera
* @css-for all
* @valid CSS3
*/

body { overflow-y: scroll; }

/*-------------------------------------------------------------------------*/

/* (en) Marginal areas & page background */
/* (de) Randbereiche & Seitenhintergrund */
body { background: #3b69ad none; padding: 10px 0; }

/* Layout Alignment | Layout-Ausrichtung */
.page_margins { margin: 0 auto; }

/* Layout Properties | Layout-Eigenschaften */
.page_margins { width: auto; min-width: 740px; max-width: 90em; background: #fff; }
.page { padding: 10px 15px 10px 10px; }
#header { position:relative; padding: 45px 2em 1em 20px; color: #000; background:#edf2f8 url("../../images/bg_header.gif") repeat-x bottom left; }
#topnav { position:absolute; top:10px; right:10px; text-align:right; color: #aaa; background: transparent; }
#nav { overflow:hidden; }
div.hlist { background-color: #c8ddf3 }
#main { margin: 10px 0; background: #fff; }
#footer { padding: 10px 20px; color:#666; background: #f9f9f9; border-top: 5px #efefef solid; }

/* (en) navigation: horizontal adjustment | (de) horizontale Ausrichtung */
#nav ul { margin-left: 20px; }

/*-------------------------------------------------------------------------*/

/**
* (en) Formatting content container
* (de) Formatierung der Inhalts-Container
*
*/

#col1 { float: left; width: 75%}
#col2 { display:none}
#col3 { width: auto; margin: 0 0 0 75%}
#col1_content { padding: 0 10px 0 20px }
#col3_content { padding: 0 20px 0 10px }


/* set column dividers */
#col3 { border-left: 1px #ddd dotted }

/*-------------------------------------------------------------------------*/

.page_margins {
border: 0 none;
background-image: url(../../images/gfxborder/border_left.gif);
background-repeat:repeat-y;
background-position:left;
}

.page {
border: 0 none;
margin: 0 0 0 5px; padding: 10px 15px 10px 10px;
background-image: url(../../images/gfxborder/border_right.gif);
background-repeat:repeat-y;
background-position:right;
}


#border-top {
overflow:hidden;
width: auto;
height: 20px;
font-size:0;
margin-bottom: -15px;
background-image: url(../../images/gfxborder/border_top.gif);
background-repeat:repeat-x;
background-position:top left;
}

#border-bottom {
overflow:hidden;
width: auto;
height: 20px;
margin-top: -15px;
font-size:0;
background-image: url(../../images/gfxborder/border_bottom.gif);
background-repeat:repeat-x;
background-position:bottom left;
}

#edge-tl {
float:left;
width: 20px;
height: 20px;
font-size:0;
background-image: url(../../images/gfxborder/corner_tl.gif);
background-position: top left;
}

#edge-tr {
position:relative; /* IE Fix | z-index */
float:right;
width: 20px;
height: 20px;
font-size:0;
background-image: url(../../images/gfxborder/corner_tr.gif);
background-position: top right;
}

#edge-bl {
float:left;
width: 20px;
height: 20px;
background-image: url(../../images/gfxborder/corner_bl.gif);
background-position: bottom left;
}

#edge-br {
position:relative; /* IE Fix | z-index */
float:right;
width: 20px;
height: 20px;
background-image: url(../../images/gfxborder/corner_br.gif);
background-position: bottom right;
}

}
</style>
</head>
<body>
<div class="page_margins">
<div id="border-top">
<div id="edge-tl"></div>
<div id="edge-tr"></div>
</div>
<!-- start: skip link navigation -->
<!-- end: skip link navigation -->
<div class="page">
<div id="header">
<div id="topnav">
<!-- start: skip link navigation -->
<a class="skip" title="skip link" href="#navigation">Skip to the navigation</a><span class="hideme">.</span>
<a class="skip" title="skip link" href="#content">Skip to the content</a><span class="hideme">.</span>
<!-- end: skip link navigation --><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a>
</div>
</div>
<div id="nav">
<!-- skiplink anchor: navigation -->
<a id="navigation" name="navigation"></a>
<div class="hlist">
<!-- main navigation: horizontal list -->
<ul>
<li class="active"><strong>Button 1</strong></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
<li><a href="#">Button 5</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="col1">
<div id="col1_content" class="clearfix">
<!-- add your content here -->
<h1>H1 Heading</h1>
</div>
</div>
<div id="col3">
<div id="col3_content" class="clearfix">
<!-- add your content here -->
<h2>H2 Heading</h2>
</div>
<!-- IE Column Clearing -->
<div id="ie_clearing"> * </div>
</div>
</div>
<!-- begin: #footer -->
<div id="footer">Layout based on <a href="http://www.yaml.de/">YAML</a>
</div>
</div>
<div id="border-bottom">
<div id="edge-bl"></div>
<div id="edge-br"></div>
</div>
</div>
</body>
</html>
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Keine Hilfe?

Kann mir wirklich keiner helfen?
Ihr müsst mir ja nur sagen was da falsch ist.
Ich kopiere euch noch einmal den Head Teil rein und mach des Wichtige BIG .

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" >
<title>Prajuritbs - Technologie and the world - </title>
<!--[if lte IE 6]>
<link href="patch_my_layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) IE patch stylesheet
 * (de) IE-Anpassungs-Stylesheet
 *
 * @creator       YAML Builder V1.2.1 (http://builder.yaml.de)
 * @file          patch_my_layout.css
 * @-yaml-minver  3.3
 */

/* Layout independent adjustments | Layout-unabhängige Anpassungen  */
@import url(../../yaml/core/iehacks.css);

/* Layout-dependent adjustments | Layout-abhängige Anpassungen */
@media screen, projection
{}

</style>
<link rel="stylesheet" type="text/css" href="my_layout.css">
<style type="text/css">
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) central stylesheet
 * (de) zentrales Stylesheet
 *
 * @creator       YAML Builder V1.2.1 (http://builder.yaml.de)
 * @file          my_layout.css
 * @-yaml-minver  3.3
 *
 */

/* import core styles | Basis-Stylesheets einbinden */
@import url(../yaml/core/base.css);

/* import screen layout | Screen-Layout einbinden */
@import url(../yaml/navigation/nav_slidingdoor.css);
@import url(screen/basemod.css);
@import url(screen/content.css);

/* import print layout | Druck-Layout einbinden */
@import url(../yaml/print/print_draft.css);
</style>
<![endif]-->
 
Zeig mal einen Link zur betreffenden Seite, denn ohne Bilder kann man sich das hier nicht wirklich vorstellen.
 
Hab ich ja eben noch nicht.
Ich hab des erst alles auf meinem Pc weil ich des da mache.
Ich hab den Code mit dem Texteditor geschrieben und als index.html gespeichert.
Das CSS-Script habe ich ja erfoglreich eingebaut, aber die beiden Layouts die des noch braucht hab ich in einer Textdatei gespeichert in dem Ordner wo auch die index.html Datei drinen ist. Und dann habe ich nach beschriebung von dem Link des versucht zu verknüpfen.

HTML: 
<link href="patch_my_layout.css" rel="stylesheet" type="text/css" />
HTML: 
<link rel="stylesheet" type="text/css" href="my_layout.css">

Dann will ich die Index Datei ausführen klappt auch alles aber des Layout ist nciht dabei.
 
Diese Datei "patch_my_layout.css" hast Du in dem oben stehenden HTML-Code innerhalb von Conditional Comments stehen, direkt nach

HTML: 
<!--[if lte IE 6]>

Dadurch steht diese Datei nur im IE bis einschließlich Version 6 zur Verfügung - in keinem anderen Browser. Wenn die Datei auch bei anderen Browsern verwendet werden soll, schreib sie vor die Zeile

HTML: 
<!--[if lte IE 6]>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben