zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Meine erste Webseite (2 Fragen zu CSS & Feedback gesucht)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 23.10.2010, 18:40
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.095
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Hallo

Wegen der Größe: max 990px (+24px Scrollbar= weniger wie 1024px)
Wegen der Aufteilung:
The Golden Ratio in Web Design | Nettuts+
Golden Ratio Calculator

Zu deinem html: eigentlich ist es doch ganz einfach (und logischer).
Zuerst content, dann sidebar. So wie man es auch sieht/liest.
Beide float:left (achte auf die Breiten ). Oder content left, sidebar right.

EDIT: so sollte es gehen (Werte in der Breite anpassen)
Code:
#main {
 float: left;
 background-color: #f1faff;
 border-radius: 15px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
  -moz-box-shadow: 0 0 1em #114a6b;
  -webkit-box-shadow: 0 0 1em #114a6b;
 box-shadow: 0 0 1em #114a6b;
}
div#content {
 background-color: white;
 padding: 20px 30px;
 -moz-border-radius-bottomleft: 15px;
 -webkit-border-bottom-left-radius: 15px;
 min-height: 600px;
  float: left;
  width: 700px;
}
div#sidebar {
 background-color: #f1faff;
 width: 180px;
 padding: 20px;
 float: left;
}
#footer {
 clear: both;
 text-align: center;
}
Gruß Manfred

Geändert von Manfred62 (23.10.2010 um 18:51 Uhr)
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 23.10.2010, 20:12
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.095
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Hallo

Hier mal ein Beispiel, schnell überarbeitet. In deiner CSS etwas auf Ordnung achten. p und h1 tauchten an mehreren Stellen auf.
Semantik: hab mal h2 und h3 hinzugefügt.
HTML-Code:
<!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 name="generator" content="HTML Tidy for Windows (vers 25 March 2009), see www.w3.org" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
      Schnäppchen-Blog
    </title>
    <meta name="description" content="Aktuelle Schnäppchen" />
    <meta name="language" content="de" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" href="default.css" type="text/css" media="screen, projection" />
  </head>
  <body>
    <div id="head">
      <h1>
        <img src="images/logo.png" alt="Schnäppchen-Blog" width="332" height="52" />
      </h1>
      <ul>
        <li>
          <strong title="Hier befinden Sie sich gerade">Blog</strong>
        </li>
        <li>
          <a href="melden.htm">Melden</a>
        </li>
        <li>
          <a href="links.htm">Links</a>
        </li>
        <li>
          <a href="kontakt.htm">Kontakt</a>
        </li>
      </ul>
    </div>
    <div id="main">
      <div id="breadcrumb">
        <ul>
          <li>
            <img src="images/breadcrumb_dotted.png" alt="Schnäppchen-Blog" width="9" height="9" />
          </li>
          <li>
            <a href="melden.htm">Kategorien</a>
          </li>
          <li>
            <a href="links.htm">Feedback</a>
          </li>
          <li>
            <a href="kontakt.htm">Suchen</a>
          </li>
        </ul>
      </div>
      <div id="content">
        <h2>
          Willkommen! h2
        </h2>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
          accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
          elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
          kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
          sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
          et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p>
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
          consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
          magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
          accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
          elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
          kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
      </div>
      <div id="sidebar">
        <h3>
          Sidebar h3
        </h3>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
          accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
        </p>
        <h3>
          Sidebar h3
        </h3>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
          accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
        </p>
      </div>
    </div>
    <div id="footer">
      <p>
        © 2010 Schnäppchen-Blog
      </p>
    </div>
  </body>
</html>
Code:
@charset "utf-8";
  
/* Zurücksetzen der Innen- und Aussenabstände */
* {
 margin: 0;
 padding: 0;
}

/*
 *Schriftgrösse
 */
body {
  font: normal 75%/167% Verdana, Helvetica, sans-serif;
}

/* Farben und Hintergründe */ 
html, body {
 color: #0d374f;
 background: #14557a url(images/bg.png) top center repeat-x;
 width: 990px;
 margin: 0 auto;
}

/* 
 *@section Links und Anker
 */
a:link {
 color: black;
}
a:visited {
 color: #202020;
}
a:hover, a:focus {
 color: #2caaf2;
}
a:active {
 color: #ecd700;
}
/*
 *@section Kopfbereich
 */
#head {
  position: relative;
}

#head h1 {
 margin: auto;
 padding: 2.2em;
 width: 332px;
 color: #2aa5eb;
 font-size: 2em;
 line-height: 1.1;
}
/*
 *@section Hauptmenü
 */
#head ul {
 position: absolute;
 bottom: 0;
 left: 50px;
}

#head ul li {
 float: left;
 list-style: none;
 margin: 0;
}

#head ul a,
#head ul strong {
 color: #1e7bb0;
 font-size: .8em;
 background: transparent url(images/reiter.png);
 height: 28px;
 width: 70px;
 display: table-cell;
 text-align: center;
 vertical-align: middle;
 text-transform: uppercase;
 text-decoration: none;
 font-weight: bold;
}

#head ul a:hover,
#head uk a:focus,
#head ul a:active,
#head ul strong {
 background: transparent url(images/reiter_aktiv.png);
}
/*
 *@section Breadcrumb
 */
#breadcrumb {
 color: inherit;
 background: white url(images/bg_reiter.png) bottom repeat-x;
 padding: 40px 0 0 0;
 border-bottom: #bababa solid 1px;
 -moz-border-radius-topright: 15px;
 -moz-border-radius-topleft: 15px;
 -webkit-border-top-right-radius: 15px;
 -webkit-border-top-left-radius: 15px;
 position: relative;
}

#breadcrumb ul {
 position: absolute;
 bottom: 10px;
 left: 85px;
}

#breadcrumb ul li {
 list-style: none;
 float: left;
}

#breadcrumb ul a {
 color: #505050;
 font-size: .8em;
 text-decoration: none;
 padding: .7em;
}
/*
 *@section Hauptbereich
 */
#main {
 float: left;
 background-color: #f1faff;
 border-radius: 15px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 -moz-box-shadow: 0 0 1em #114a6b;
 -webkit-box-shadow: 0 0 1em #114a6b;
 box-shadow: 0 0 1em #114a6b;
}

#content {
 background-color: white;
 -moz-border-radius-bottomleft: 15px;
 -webkit-border-bottom-left-radius: 15px;
 min-height: 600px;
 float: left;
 width: 612px; /* golden ratio */
}

#content p, #sidebar p {
 padding: 10px 35px;
}

#content h2, #sidebar h3 {
  padding: 20px 35px 0;
  color: #2aa5eb;
  font-size: 2em;
  line-height: 1.4;
}

#sidebar {
 background-color: #f1faff;
 width: 378px; /* golden ratio */
 float: left;
}

#sidebar h3 {
  font-weight: normal;
}

#footer {
 clear: both;
 text-align: center;
  color: #ccc;
  height: 40px;
  line-height: 40px;
}
Gruß Manfred
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 23.10.2010, 22:37
mp4 mp4 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.10.2010
Beiträge: 8
mp4 befindet sich auf einem aufstrebenden Ast
Standard

Ich werde mir deine Vorschläge morgen genauer ansehen, vielen Dank für deine Mühe Manfred!
Mit Zitat antworten
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
2 Fragen: CSS Menu und Content Veränderungs-Trick Martino CSS 6 19.01.2011 00:42
CSS Hilfe gesucht für Blindenseite johnjdoe CSS 30 17.02.2005 17:14
mein erstes css layout-dazu habe ich jetzt ein paar fragen:) destroy90210 CSS 6 03.01.2005 22:37
Gutes CSS Buch gesucht? YUMYUM-75 CSS 1 25.10.2004 13:21
weitergehende Tutorials zu CSS gesucht n00dles CSS 6 27.05.2004 16:54


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:33 Uhr.