Steh grad auf dem Schlauch

NiAlMa · 18.02.2011

Hallo,

habe mir 2 html-Seiten erstellt - eine mit 3 Spalten und eine mit 2 Spalten. Nun ist mir eingefallen/aufgefallen, dass ich noch eine Seite mit 2 Spalten mit jeweils 50% Breite benötige.

Schaff es allerdings nicht die CSS und html entsprechend anzupassen.

Könnte mir evtl. jemand da helfen?

index.html (2-spaltig)

HTML:

<!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="de" lang="de">
 <head>
<meta http-equiv="content-type" content="text/html charset=utf-8" />
 
  <title>DariHair</title>
  <meta name="language" content="de" />
  <meta name="author" content="nialma" />
  <meta name="copyright" content="2011 darihair" />
  <link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
  <link href="css/navigation.css" rel="stylesheet" type="text/css" media="all" />
  <!--[if lte IE 6]>
  <link href="patches/ie6/nav_ie6.css" rel="stylesheet" type="text/css" media="all" />
  <![endif]-->
  <script type="text/javascript">
startList = function() {
  if (document.all&&document.getElementById) {
    navRoot = document.getElementById("menu");
    for (i=0; i<navRoot.childNodes.length; i++) {
      node = navRoot.childNodes[i];
      if (node.nodeName=="LI") {
        node.onmouseover=function() {
          this.className+=" over";
        }
        node.onmouseout=function() {
          this.className=this.className.replace(" over", "");
      }
      }
    }
  }
}
window.onload=startList;
</script>
 </head>
 <body>
  <div id="container">
   <div id="header">
        <div id="hdTop">
      <img id="logo" src="img/logo.gif" alt="" />
      <div id="navTop">
        <ul>
          <li id="home"><a href="#">Home</a></li>
          <li id="kontakt"><a href="#">Kontakt</a></li>
          <li id="sitemap"><a href="#">Impressum</a></li>
        </ul>
          </div>
    </div>
    <div id="hdMenu">
      <ul id="menu">
            <li><a href="#">Über uns</a>
             <ul id="subMenu">
                <li><a href="#">Geschäft</a></li>
                <li><a href="#">Personal</a></li>
                <li><a href="#">Werdegang</a></li>
              </ul>
            </li>
            <li><a href="#">Leistungen & Preise</a>
              <ul id="subMenu">
                <li><a href="#">Damen</a></li>
                <li><a href="#">Herren</a></li>
                <li><a href="#">Kinder</a></li>
              </ul>
            </li>
            <li><a href="technologie.html">Haarverlängerungen</a></li>
            <li><a href="#">Hochzeitsservice</a></li>
            <li><a href="#">Produkte</a>
             <ul id="subMenu">
                <li><a href="#">Hersteller 1</a></li>
                <li><a href="#">Hersteller 2</a></li>
                <li><a href="#">Hersteller 3</a></li>
                <li><a href="#">Hersteller 4</a></li>
              </ul>
            </li>
      </ul>
    </div>
   </div>
    <div id="content">
     <div id="mainContent">
      <h1>Technologie</h1>
      <img src="img/highbridge.png" class="fl" alt="" />
      <p>Contraho. Ora Fluctus, sis suo Nequam gaudium vox Amitto duco polleo, compleo mille lex tamen incrementabiliter Lentus, reproba mox acies, pax Valde subobscurus acer aequor Labiosus ora dux Fluo Palor procellosus intempestivus furiosus ut exstasis Arma eu sto se Simulatio en volubiliter, sed Crocinus mos Absit iam Cunctator transero. Dux Vehiculum, se vicis Inco. Prompte mos Quando ut laxamentum. Ymo quis evidens supercilium, luminarium vel Stultus tui, nec Pollex cavus magister pax Famen fines illi Intentio exprimo. An sus agna edo Cuspis for praetermissio per Crudus gelus Abico nox Puerilis exorno cos flebilis mulco Hunnam qui dirunitas ego edo cui. Camur puer fio tam vae at Curto. 
      <span class="mehrInfo"><a href="#">MEHR INFO</a></span></p>
      <div class="subcol fl">
              <h3>Einige der längsten Hängebrücken der Welt</h3>
        <p>Mittelspannweite ist die am häufigsten verwendete Messgröße, um Hängebrücken miteinander zu vergleichen. Falls eine Brücke eine längere Spannweite besitzt als eine andere, bedeutet dies nicht, dass die Länge von Ufer zu Ufer zwingend größer sein muss.</p>
        <table cellspacing="0" class="bridges" summary="Diese Tabelle listet einige der längsten Hängebrücken der Welt auf.">
         <thead>
          <tr>
           <th>Brückenname</th>
           <th>Länge</th>
           <th>Land</th>
          </tr>
         </thead>
         <tfoot>
          <tr>
           <td colspan="3">Quelle: Wikipedia</td>
          </tr>
         </tfoot>
         <tbody>
          <tr>
           <td>Akashi-Kaikyō-Brücke</td>
           <td>3911 m</td>
           <td>Japan</td>
          </tr>
          <tr class="alt">
           <td>Storebælt-Brücke</td>
           <td>2694 m</td>
           <td>Dänemark</td>
          </tr>
          <tr>
           <td>Tsing-Ma-Brücke</td>
           <td>2160 m</td>
           <td>China</td>
          </tr>
          <tr class="alt">
           <td>Golden Gate Bridge</td>
           <td>2737 m</td>
           <td>USA</td>
          </tr>
         </tbody>
        </table>
      </div>
      <div class="subcol fr">
              <h3>Lösungen</h3>
         <p>Occatio ter aut Aliusmodi vel Fugo redigo, iam ops tam Plaga consulo sui ymo Zephyr humilitas. Ivi praebalteata Occumbo congruens seco, lea qui se surculus sed abhinc praejudico in forix curo.</p>
        <p>Sui aut hoc refectorium celo hos iam Upilio Ars retineo etsi lac damnatio imcomposite for oneratus sacrificum ora navigatio. St incultus Vox inennarabilis ludo per dis misericordaliter Sum.</p>
       <p>Sui aut hoc refectorium celo hos iam Upilio Ars retineo etsi lac damnatio imcomposite for oneratus sacrificum ora navigatio. St incultus Vox inennarabilis ludo per dis misericordaliter Sum.</p>
        </div>
          </div>
     <div id="sidebarLeft">
      <h2>Projekt der Woche<span class="ut">bei BridgIT</span></h2>
      <p>Murus, re in munita, opto ala leo Certamen spoliatio, curvo Exemplar annecto per hic commorantes, ater ut poema Basilice, sic Venor acer caballus. Nos districtus delinquentes sesquioctavus cras hoc silva Concedo, abeo repere nam Familia lignarius cado sesquimellesimus Se, volo tergo duco.
      <span class="mehrInfo"><a href="#">MEHR INFO</a></span></p>
            <h3>Hintergrund</h3>
       <p>Ulti Transigo construo. Pax Soleo magis exuo quo produco Rabies dum iam eia Cura, latet cui ludus conscendo. Exundo proles upilio sumo libido adversarius pius, tui freno miseratio dux Denuntio res nec perago Ita tui Deduco se. Belliger ivi. Late ubi norma ex fugio paciscor arx ars arx Ceno pia Proles, palpito demo una lex Illae no accuse propinquitas, en doxa latro Daci Successio, qui quot viciss.</p>
            <p>Io, mensa plures utor to tutamen eia Extundo sentus ita Novus, his Securus, tam nam Crepundia, Torreo fas Prolixus, nec flecto alibi peragro. Nam Deficio contradictio ops Posco laeto aeger Freno ruo, votum Spero ergo Penetro, Pulmo pro, ops infra Vacuus ususfructus qui Perturpis, neco Illas his Libro. Vel emo mons liberalis longe vir ingredior, sui cautor Concito, far, Comitatus mus Ambiguus palm.</p>
     </div>
      <div class="clearfloat"></div>
    </div>
    <div id="footer">
      <p>&copy; 2011 darihair</p>
    </div>
   </div>
  </div>
 </body>
</html>

basic.css

HTML:

/*------------------- CSS RESET ---------------------
---------------------------------------------------*/
* {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
ul,
ol {
list-style: none;
}
b,
strong {
font-weight: bold;
}
img,
a img {
border: none;
}
/*------------------SCHRIFT / GRÖSSE ----------------
---------------------------------------------------*/
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 76%;
color: #666666;
background: #c8c8c8 url(../img/bgImg/bodyBg.gif) repeat left top;
line-height: 1.5em;
text-align: left;
}
h1,
h2,
h3 {
font-weight: bold;
margin-bottom: 0.7em;
line-height: 1.1em;
}
h1,
h2,
.subcol h3 {
font-family: 'Times New Roman','Trebuchet MS', serif;
color: #ad1910;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2.0em;
}
h3 {
font-size: 1.2em;
color: #505862;
}
h3.datum {
color: #505862;
font-size: 0.95em;
}
blockquote {
color: #f18110;
background: url(../img/anfuehrungszeichen.png) no-repeat left top;
padding: 20px;
}
a:link,
a:visited {
color: #666666;
text-decoration: none;
}
a:hover,
a:focus,
a:active {
color: #ad1910;
text-decoration: underline;
}
/*------------------- LAYOUT ---------------------
---------------------------------------------------*/
#container {
width: 90%;
min-width: 600px;
max-width: 1200px;
background-color: #ffffff;
border: 4px solid #dcdcdc;
padding: 4px;
margin: 0 auto;
}
#header {
background-color: #e2e7ed;
position: relative;
}
#hdTop {
background: url(../img/bgImg/topBg.gif) repeat-x left top;
height: 90px;
}
#logo {
padding-top: 10px;
padding-left: 20px;
}
#hdMenu {
background: url(../img/bgImg/empfang.png) no-repeat 230px 0;
height: 230px;
position: relative;
}
#content {
background-color: transparent;
padding: 30px 20px;
}
#sidebarLeft {
width: 35%;
float: left;
}
#mainContent {
margin: 0;
float: right;
width: 60%;
}
#wrapper {
float: left;
width: 70%;
}
#sidebarRight {
width: 27%;
float: right;
}
#footer,
.clearfloat {
clear: both;
}
#content p {
margin-bottom: 20px;
}
#sidebarRight ul li {
background: url(../img/bullet.gif) no-repeat 0 10px;
padding: 5px 0 5px 20px;
}
#sidebarRight ul li a:link,
#sidebarRight ul li a:visited {
text-decoration: underline;
}
#footer p {
font-size: 0.9em;
text-align: center;
}
/*------------------- ALLGEMEIN --------------------
---------------------------------------------------*/
.fl {
float: left;
padding-right: 1em;
}
.fr {
float: right;
padding-left: 1em;
}
.clearfloat {
clear: both;
}
.ut {
color: #000;
font-size: 0.65em;
font-weight: bold;
font-variant: small-caps;
font-family: Tahoma,Arial,Helvetica,sans-serif;
margin-right: 30px;
display: block;
text-align: right;
}
.mehrInfo {
font-size: 0.8em;
margin-top: 8px;
display: block;
text-align: right;
}
.mehrInfo a:link,
.mehrInfo a:visited {
padding: 3px 20px;
background: url(../img/mehrInfo.gif) no-repeat right 0;
}
.mehrInfo a:hover,
.mehrInfo a:focus,
.mehrInfo a:active {
text-decoration: none;
background: url(../img/mehrInfo.gif) no-repeat right -38px;
}
/*-----------2-spaltiges Design 1/2 ---------------------------------
-----------------------------------------------------------------*/
.techno #sidebarLeft {
width: 27%;
}
.techno #mainContent {
width: 70%;
}
.techno #hdMenu {
background: url(../img/nachtbruecke.png) no-repeat 230px 0;
}
.subcol {
width: 46%;
}
/*-----------------TABELLE-------------------------------------
----------------------------------------------------------------*/
.bridges {
width: 100%;
background: #f0f0f0;
color: #000;
border-collapse: collapse;
}
.bridges td,
.bridges th {
border: 1px solid #fff;
padding: 3px 8px;
}
.bridges th {
background: #e9583f;
color: #fff;
font-weight: bold;
}
.bridges tr.alt{
background: #e2e7ed;
}
.bridges tr:hover{
background: #a7c7ee;
}
.bridges tfoot {
font-size: 0.9em;
text-align: right;
}
.bridges tfoot td {
border-bottom: 2px solid #e9583f;
padding: 0px 8px;
}
.bridges tfoot tr:hover {
background: none;
}

ich blick nicht grad nicht mehr durch!

holger2 · 18.02.2011

AW: Steh grad auf dem Schlauch

mach dir doch für jede seite eine eigene css datei da hast du einen besseren überblick und lade das ganze jeweils über @import rein. ansonsten 1 div-container und da packst du die 2 anderen container rein gibst jedem 50% fertig. würde aber (ausser deine seite ist sehr textlastig) eher mit px werten arbeiten .

NiAlMa · 18.02.2011

AW: Steh grad auf dem Schlauch

wie müsste das dann aussehen mit dem @import?
Aufbau:
/img/
/css/navigation.css
/css//basic.css
/patches/
index.html

rockscientist01 · 18.02.2011

AW: Steh grad auf dem Schlauch

Hi,

wenn ich das richtig sehe, dann hast du ja sidebarLeft und mainContent.

Für eine 3. html Seite, in der sidebarLeft und mainContent jew. 50% Breite haben sollen, müsstest du deine index.html kopieren, darin die divs sidebarLeft und mainContent umbennen, alles bisherigen styles wieder zuweisen ausser width. Width muss bei beiden dann auf 50% geändert werden.
Is doch eigentlich ganz easy...? Hast doch schon alles...
Ob du ein stylesheet mit @import einbindest oder per link ist egal. Aber du könntest tatsächlich pro html seite einmal ein allgemeines css und dann ein spezielles css einbinden, in dem nur die Änderungen zum allgemeinen css notiert sind. Etwa so, auf Seite_1:
<link href="basic.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" media="all" />
<link href="seite_1.css" rel="stylesheet" type="text/css" media="all" />

auf Seite_2:
<link href="basic.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" media="all" />
<link href="seite_2.css" rel="stylesheet" type="text/css" media="all" />

und dann kannste in seite_2.css z.B. nur

#sidebarLeft, #mainContent {width: 50%;}

einfügen.

Hoffe, das hilft.
AO