zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 2 Boxen in einer, mit Rand anders als ohne Rand

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.10.2010, 23:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2010
Beiträge: 2
fritzje befindet sich auf einem aufstrebenden Ast
Standard 2 Boxen in einer, mit Rand anders als ohne Rand

Guten Tag

erklären ist schwer, schaut es euch an:

tabtest

Ich habe mit geschachtelten Boxen eine kleine Tabelle gebaut, einmal mit äußerem Rand und einmal ohne.

Die obere Darstellung hat einen Rand um die äußere Box, die Schrift steht richtig.

Die untere hat keinen Rand, die Schrift ist verschoben.

Der Code für beide Darstellungen ist bis auf die Definition des Randes im css gleich.

Was ist da falsch?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.10.2010, 00:01
Benutzerbild von emti
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.06.2008
Ort: 23816 Groß Niendorf
Beiträge: 700
emti sorgt für eine eindrucksvolle Atmosphäreemti sorgt für eine eindrucksvolle Atmosphäre
Standard

Eventuell Collapsing margins? Das passiert bei Dir nämlich schon bei der Überschrift "h4" und dem "p".
Warum fängst Du mit einer h4 Überschrift an?
Wieso nimmst Du nicht eine Tabelle für Deine "Tabelle"?
__________________
Gruß Michael
SketchAtomTransmit
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.10.2010, 11:27
Benutzerbild von philosapiens
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.05.2009
Ort: Berlin Südende
Beiträge: 297
philosapiens befindet sich auf einem aufstrebenden Ast
Standard

Hi,

ich habe mal versucht, den Code etwas leichter lesbar zu sortieren:

HTML-Code:
<style type="text/css">
/* Datei /stildefi/tabtest.css */
/* Stylesheet Datei für Tabtest*/
/*********************************************************************************/
/* Schriftstile */
h1, h2, h3, h4, p, ul, ol, li, div, span, td, th, address, blockquote, b, i, .klein, .titel { font-family: Arial, Helvetica, sans-serif; margin-top: 0; margin-bottom: 6px; } /* font-Angaben benötigen erst ein Anführungszeichen, wenn es mehrere Wort sind */
/* top ist oben bottom ist unten*/

h1,h2,h3,h4{background-color: transparent; margin-top: 10px; text-decoration: none;} /* gleiches zusammenfassen ist übersichtlich und spart Code */

h1 { font-size: 32px; color: #990000;}
h2 { font-size: 21px; color: #CC0000;}
h3 { font-size: 21px; color: #553420;}
h4 { font-size: 16px;	color: #553420;}

p, ul, ol, li, div, span, td, th, address, blockquote { font-size: 16px; color: #000000; background-color: transparent; margin-top: 10px; text-decoration: none; }
/* Ende Schriftstile */
/*********************************************************************************/
/* Hintergründe */
body { background: url(http://tabtest.fritzje.de/gries2-4.gif) fixed; margin: 0; padding: 0;}  /*  wenn etwas 0 ist, dann reicht es ohne px */
/* Ende Hintergründe */
/*********************************************************************************/
.tab_bank,.tab_bank_ohne_border {top:0;left:0;position:relative;margin:0;padding:0;width:300px;height:100px;background-color:#D2A069;}
.tab_bank{border: 1px solid blue;}
.tab_bank_li,.tab_bank_re{top:0;margin:0;padding:0;height:100px;}
.tab_bank_li {left:0;position:absolute;padding-left:10px;width:145px;}
.tab_bank_re {left:150px;position:relative;text-align:left;width:200px;}

</style>
Dann habe ich einmal versucht den Code etwas zu reduzieren und habe Dir jeweils Kommentare mit reingeschrieben:

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 http-equiv="content-type" content="text/html; charset=utf-8" />
<title>tabtest</title>
<style type="text/css">
/* Datei /stildefi/tabtest.css */
/* Stylesheet Datei für Tabtest*/
/*********************************************************************************/
/* Schriftstile */
h1, h2, h3, h4, p, ul, ol, li, div, span, td, th, address, blockquote, b, i, .klein, .titel { font-family: Arial, Helvetica, sans-serif; margin-top: 0; margin-bottom: 6px; } /* font-Angaben benötigen erst ein Anführungszeichen, wenn es mehrere Wort sind */
/* top ist oben bottom ist unten*/

h1,h2,h3,h4{background-color: transparent; margin-top: 10px; text-decoration: none;} /* gleiches zusammenfassen ist übersichtlich und spart Code */

h1 { font-size: 32px; color: #990000;}
h2 { font-size: 21px; color: #CC0000;}
h3 { font-size: 21px; color: #553420;}
h4 { font-size: 16px;	color: #553420;}

p, ul, ol, li, div, span, td, th, address, blockquote { font-size: 16px; color: #000000; background-color: transparent; margin-top: 10px; text-decoration: none; }
/* Ende Schriftstile */
/*********************************************************************************/
/* Hintergründe */
body { background: url(http://tabtest.fritzje.de/gries2-4.gif) fixed; margin: 0; padding: 0;}  /*  wenn etwas 0 ist, dann reicht es ohne px */
/* Ende Hintergründe */
/*********************************************************************************/
.tab_bank,.tab_bank_ohne_border {top:0;left:0;position:relative;margin:0;padding:0;width:300px;height:100px;background-color:#D2A069;}
.tab_bank{border: 1px solid blue;}
.tab_bank_li,.tab_bank_re{top:0;margin:0;padding:0;height:100px;}
.tab_bank_li {left:0;position:absolute;padding-left:10px;width:145px;}
.tab_bank_re {left:150px;position:relative;text-align:left;width:200px;}

</style>

<meta name="description" content="Tabtest" />
</head>  

<body>
 <h4>Zahlungen bitte auf das Konto:</h4>
 <p>bei der Zwergenbank tief im Wald</p>
 
 <div class="tab_bank">
  <div class="tab_bank_li">
   <p>Kontoinhaber:</p>
   <p>Konto-Nr.:</p>
   <p>Bankleitzahl:</p>
  </div>
  <div class="tab_bank_re">
   <p>Manuela Musterfrau</p>
   <p>12 34 56 78 </p>
   <p>100 100 10</p>
  </div>
 </div>
 <div class="tab_bank_ohne_border">
  <div class="tab_bank_li">
   <p>Kontoinhaber:</p>
   <p>Konto-Nr.:</p>
   <p>Bankleitzahl:</p>
  </div>
  <div class="tab_bank_re">
   <p>Manuela Musterfrau</p>
   <p>12 34 56 78 </p>
   <p>100 100 10</p>
  </div>
 </div>
</body>
</html>
Und dann noch einmal eine Variante mit einer Liste, die sich hier anbieten würde:

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 http-equiv="content-type" content="text/html; charset=utf-8" />
<title>tabtest</title>
<style type="text/css">
/* Datei /stildefi/tabtest.css */
/* Stylesheet Datei für Tabtest*/
/*********************************************************************************/
/* Schriftstile */
h1, h2, h3, h4, p, ul, ol, li, div, span, td, th, address, blockquote, b, i, .klein, .titel { font-family: Arial, Helvetica, sans-serif; margin-top: 0; margin-bottom: 6px; } /* font-Angaben benötigen erst ein Anführungszeichen, wenn es mehrere Wort sind */
/* top ist oben bottom ist unten*/

h1,h2,h3,h4{background-color: transparent; margin-top: 10px; text-decoration: none;} /* gleiches zusammenfassen ist übersichtlich und spart Code */

h1 { font-size: 32px; color: #990000;}
h2 { font-size: 21px; color: #CC0000;}
h3 { font-size: 21px; color: #553420;}
h4 { font-size: 16px;	color: #553420;}

p, ul, ol, li, div, span, td, th, address, blockquote { font-size: 16px; color: #000000; background-color: transparent; margin-top: 10px; text-decoration: none; }
/* Ende Schriftstile */
/*********************************************************************************/
/* Hintergründe */
body { background: url(http://tabtest.fritzje.de/gries2-4.gif) fixed; margin: 0; padding: 0;}  /*  wenn etwas 0 ist, dann reicht es ohne px */
/* Ende Hintergründe */
/*********************************************************************************/
.tab_bank,.tab_bank_ohne_border {top:0;left:0;position:relative;margin:0;padding:10px;width:300px;height:100px;background-color:#D2A069;}
.tab_bank{border: 1px solid blue;}

dt,dl{line-height:24px;}
dd{margin:-24px 0 0 150px}

</style>
<meta name="description" content="Tabtest" />
</head>  

<body>
 <h4>Zahlungen bitte auf das Konto:</h4>
 <p>bei der Zwergenbank tief im Wald</p>
 
 <div class="tab_bank">
 <dl>
  <dt>Kontoinhaber:</dt>
  <dd>Manuela Musterfrau</dd>
  <dt>Konto-Nr.:</dt>
  <dd>12 34 56 78</dd>
  <dt>Bankleitzahl:</dt>
  <dd>100 100 10</dd>
 </dl> 
 </div>
 <div class="tab_bank_ohne_border">
  <dl>
  <dt>Kontoinhaber:</dt>
  <dd>Manuela Musterfrau</dd>
  <dt>Konto-Nr.:</dt>
  <dd>12 34 56 78</dd>
  <dt>Bankleitzahl:</dt>
  <dd>100 100 10</dd>
 </dl>
 </div>
</body>
</html>
Quellen:

border: Rahmen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Listen

Na ja, jeder macht eben etwas anderes an einem Sonntagvormittag.
__________________
Der höchste Lohn für unsere Bemühungen ist nicht das, was wir dafür bekommen, sondern das, was wir dadurch werden.

Mein aktuelles Projekt bei idealseiten.de
Mit Zitat antworten
  #4 (permalink)  
Alt 24.10.2010, 14:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2010
Beiträge: 2
fritzje befindet sich auf einem aufstrebenden Ast
Standard

Hallo philosapiens und Danke für den Tip mit den Definitionslisten, die kannte ich bisher nicht.

Das die Definition der Stile in der css verkürzt werden kann, das wusste ich. Diese Beschreibung ist noch aus einer alten nicht optimierten Datei übernommen.

Hallo emti

<Eventuell Collapsing margins? Das passiert bei Dir nämlich schon bei der <Überschrift "h4" und dem "p".
Was ist Collapsing margins - und wie kann man es vermeiden?

<Warum fängst Du mit einer h4 Überschrift an?
weil das ein simples Beispiel ist, zusammengeschustert aus Teilen einer richtigen Website, an der mir das Problem aufgefallen ist.

<Wieso nimmst Du nicht eine Tabelle für Deine "Tabelle"?
Für diese kleine Tabelle könnte ich eine Tabelle bauen. Aber große Tabellen sind unübersichtlich, deshalb suche ich nach einer anderen Lösung

Gruß vom Fritzje
Mit Zitat antworten
  #5 (permalink)  
Alt 26.10.2010, 00:31
Benutzerbild von emti
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.06.2008
Ort: 23816 Groß Niendorf
Beiträge: 700
emti sorgt für eine eindrucksvolle Atmosphäreemti sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von fritzje Beitrag anzeigen
Was ist Collapsing margins - und wie kann man es vermeiden?
Einführung in XHTML, CSS und Webdesign - Michael Jendryschik > Absatz: "Zusammenfallende Randabstände"
__________________
Gruß Michael
SketchAtomTransmit
Mit Zitat antworten
Antwort

Stichwörter
css boxen, rand-problem

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
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite! Web4Live CSS 2 13.07.2011 17:01
Mitwachsende Container: 4 Boxen Cu Chullain CSS 1 08.09.2010 19:57
Boxen beim Seitenladen zuklappen (ohne "Flackern") Plasm Javascript & Ajax 5 08.01.2010 17:42
Rechten Rand vom P in zentriertem DIV an rechtem Rand eines IMG ausrichten yeastie99 CSS 2 19.07.2008 16:02
Gleiche Abstände zwischen Boxen? Shepstar CSS 5 29.07.2006 04:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:15 Uhr.