|
|||
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? |
Sponsored Links |
Sponsored Links |
|
||||
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> 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> 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> 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 |
|
|||
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 |
|
||||
Einführung in XHTML, CSS und Webdesign - Michael Jendryschik > Absatz: "Zusammenfallende Randabstände"
|
Stichwörter |
css boxen, rand-problem |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |