mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 16:02 Benutzername: Passwort: Auto-Login

Thema: Tabellenloses Layout - Die ersten Schritte... vom 16.02.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Tabellenloses Layout - Die ersten Schritte...
Autor Nachricht
dombur
Threadersteller

Dabei seit: 30.05.2005
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Mo 16.02.2009 18:33
Titel

Tabellenloses Layout - Die ersten Schritte...

Antworten mit Zitat Zum Seitenanfang

Hallo,

ich versuche seit ein paar Tagen ein tabellenloses Layout mit Hilfe von CSS zu erstellen. Mein erstes Etappenziel soll sein die Grundstruktur der späteren Seite zu erstellen.

So habe ich mir das Grundgerüst vorgestellt:



So sieht der Code aus:
Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <title></title>
   <style type="text/css">
   
   * {
      padding: 0px;
      margin: 0px;
   }
   
   body {
      background: #fff;
   }
   
   #boxeins {
      width: 700px;
      height: 500px;
      background: #111;
   }
   
   #boxzwei {
      width: 100%;
      background: #222;
   }
   
   #navigation {
      width: 100%;
      background: #333;
   }
   
   #inhalt {
      width: 100%;
      height: 100%;
      background: #444;
   }
   
   #fußzeile {
      width: 100%;
      background: #555;
   }
   
   #abstand {
      width: 35px;
      background: #666;
   }
   
   </style>
</head>
<body>

   <div id="boxeins">
      <div id="navigation">navigation</div>
         <div id="boxzwei">
            <div id="abstand">abst</div>
            <div id="inhalt">inhalt</div>
            <div id="abstand">abst</div>
         </div>
      <div id="fußzeile">fußzeile</div>
   </div>

</body>
</html>


Und so sieht der Code im Browser aus:
test.htm

Wie schaffe ich es, den Inhalt in eine Zeile mit den beiden Abständen (links und rechts) zu bekommen? Oder ist mein Denkansatz falsch und ich muss ganz anders an die Sache rangehen?

Ich freue mich auf eure Antworten! dombur
  View user's profile Private Nachricht senden
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: Männlich
Verfasst Mo 16.02.2009 18:45
Titel

Antworten mit Zitat Zum Seitenanfang

id's dürfen nur einmal vegeben werden *Schnief*

wenn in die "abstände" nix reinkommen soll, kannst es über margin-bottom lösen
  View user's profile Private Nachricht senden
Anzeige
Anzeige
dombur
Threadersteller

Dabei seit: 30.05.2005
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Mi 18.02.2009 17:42
Titel

Antworten mit Zitat Zum Seitenanfang

Danke für die schnelle Antwort. Die "Abstände" bleiben leer, sie dienen tatsächlich nur als Abstand zwischen "Inhalt" und dem äußeren Container. Wenn ich dem #inhalt ein margin von 35px gebe stimmt der Abstand auf der linken Seite aber auf der rechten schaut der "Inhalt" um 35px über den Container hinaus. Wie bekomme ich das in Griff? Indem ich das ganze nochmals mit einem Container umschließe?
  View user's profile Private Nachricht senden
juwer

Dabei seit: 19.08.2008
Ort: sAarbrücken
Alter: 36
Geschlecht: Männlich
Verfasst Mi 18.02.2009 18:04
Titel

Antworten mit Zitat Zum Seitenanfang

ich meine mich zu erinnern, dass der Inhalt-layer automatisch mittig gesetzt wird, wenn du margin: 0 auto; setzt.

Was der vorredner im Übrigen meinte ist, dass es keine Rolle spielt, ob die Abstände leer bleiben oder nicht, ids vergibt man nur einmal.
Wenn du eine 'id' mehrmals verwenden willst, definier es als class.

Code:
#inhalt {
      margin: 0 auto;
      width: xxx px;
      background: #444;
   }

   #fußzeile {
      width: 100%;
      background: #555;
   }


Ich meine, dass es so funktionieren müsste, auch ohne die abstand-divs.

Darüber hinaus kannst dus einfacher aufbauen:

div
div navi
div inhalt
div fuß

Zumindest meine ich, dass es so gehen sollte... kannsts ja ma ausprobiern Grins Vllt kann dir da auch jemand besser helfen Grins
  View user's profile Private Nachricht senden
Synoxis

Dabei seit: 07.09.2005
Ort: Roßdorf
Alter: 35
Geschlecht: Männlich
Verfasst Do 19.02.2009 00:01
Titel

Antworten mit Zitat Zum Seitenanfang

Du denkst zu sehr in Tabellen, sieht man an deinem Code.

Im übrigen gibt es im xHTMLForum eine genau Erklärung wie du solch eine Seite erstellst:

http://xhtmlforum.de/40267-faq-h-ufig-gestellte-fragen-und.html

Für dich dürfte hier Punkt 3 interessant sein.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Mark-Korb

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Do 19.02.2009 09:20
Titel

Antworten mit Zitat Zum Seitenanfang

Hier wird Ihnen geholfen:
http://www.css4you.de/wscss/index.html
  View user's profile Private Nachricht senden
smiley.sturmwind

Dabei seit: 11.09.2008
Ort: Darmstadt
Alter: 47
Geschlecht: Männlich
Verfasst Di 24.02.2009 11:40
Titel

Antworten mit Zitat Zum Seitenanfang

Sieh mal hier nach! Vielleicht hilft das weiter.

http://www.mediengestalter.info/forum/4/div-verweigert-100-hoehe-113745-1.html
  View user's profile Private Nachricht senden
 
Ähnliche Themen Tabellenloses Layout - Horizontal 100% vertikal zentriert
problem mit ersten css layout
tabellenloses design -> 3px abstand zwischen divs nur im IE
Photoshop Cs2 (Pinselgröße 10er Schritte?)
Erste Schritte im Bereich Webdesign - How to start?
suche sounds, schritte, brennende lunte usw...
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.