|
|||
Height: 100% funktioniert nicht so richtig
Hi .....
bin gerade dabei eine weitere Seite aufzubauen. Soweit hat das auch alles geklappt. Ich hab nur noch ein Problem. Ich bekomme diesen html code nicht in die CSS integriert. Alle versuche die ich durchführte brachten nicht das identische Ergebnis. Muss dazu sagen das ich die Seite in header, inhalt und footer unterteil haben und quasi den header und footer per include integriere. Hier mal der code von der header.php Code:
</head> <body> <table align="center" width="843" border="0" cellpadding="0" cellspacing="0" > <tr> <td class="li"> </td> <!--ende aussentab--> <td > <!--leiste--> <table align="center" width="820" border="0" cellpadding="0" cellspacing="0" > <tr> <td id="top"> </td> </tr> <tr> <td id="leiste1">"<b>P</b>fiff" <b >d</b>ie <b >K</b>leingaststätte</td> </tr> </table> <!--ende header--> Code:
</tr> <tr> <td colspan="2" id="fussb"><a href="<?php echo $root_dir; ?>www.google.de">www.pfiff-kleingaststätte.de</a></td> </tr> </table> </div> </td> <!-- aussentab--> <td class="re"> </td> </tr> </table> </div> </body> </html> Weiterhin habe ich einen Unterschied im IE 7 u 8 zu FF. Es geht um den Wert in der format.css Code:
#sp2 { font-size: 15px; height:800px; color:#93A5A9; padding-top: 30px; padding-bottom: 40px; padding-left: 20px;padding-right:20px; background-color:#202020;letter-spacing:0px;width:100%; } Hier noch die komplette css: Code:
body {margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px; background-image:url(images/bg.jpg); } td {font-size: 97%;line-height: 125%; font-family: arial, helvetica, tahoma ,verdana, sans-serif; text-align:left} h2{ color:#969696; text-decoration:underline; font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif; font-size: 20px; } h3{ color:#C0C0C0; margin-bottom:20px;letter-spacing:2px; text-decoration:none; font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;font-size: 115%; } fieldset { border:none; } /* hauptgerüst */ table.sample { margin:auto; border-width: 0px 0px 0px 0px; border-spacing: 0px; margin: auto; } .bilder { float:left; text-align:center; padding: 10px; font-style:italic; } .links { float:left; padding-left: 0; } .rechts { float:right; padding-right: 10px; } .clear { clear:left; } .ul { padding-left: 10px; padding-right: 10px; } .li { width:12px; background-image:url(images/rand1.jpg); } .re { width:11px; background-image:url(images/rand2.jpg); } #top {background-image:url(images/back.jpg); background-repeat:repeat-y; vertical-align:bottom; height:180px; background-color:#1F1F1F; } #leiste1 {height:0px; font-size: 18px; background-color:#000; height:30px; letter-spacing:10px; color:#56686D; font-variant:small-caps; padding-left:10px; padding-bottom:1px; width:100%; vertical-align:bottom;border-bottom:solid 1px #535353; border-top:solid 1px #535353; font-family: georgia,arial, helvetica, tahoma ,verdana, sans-serif; } #sp1 {color:#fff;font: normal 11px/15px verdana, sans-serif; padding-left: 20px;padding-right:20px;padding-top: 30px; background-color:#151515; } #sp2 { font-size: 15px; height:800px; color:#93A5A9; padding-top: 30px; padding-bottom: 40px; padding-left: 20px;padding-right:20px; background-color:#202020;letter-spacing:0px;width:100%; } #sp3 { font-size: 14px; vertical-align:top; padding-left:10px; color:#93A5A9; background-color:#202020;letter-spacing:0px;width:100%; } #fussb {font: normal 11px verdana, sans-serif; color: #fff; padding:2px; height:24px; text-align:center; background-color:#222222;width:100%; border-top:solid 1px #343434; } /* scrolleiste internet explorer ab vers.5.5 */ /* menue */ #menu1 a , #menu1 a:visited , #menu1 a:active {display:block; color:#93A5A9; font: normal 16px verdana, sans-serif; text-decoration:none ; text-align:left; width:160px; border-bottom:solid 1px #313131; font-size: 13px;line-height: 180%; font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif; } #menu1 a:hover{ background-color:#262626; color:#fff; text-decoration:none ; } /* allgemeine links im text */ a:link, a:visited, a:active{ font-family: arial, helvetica, tahoma ,verdana, sans-serif; font-size: 97%;line-height: 125%; text-decoration:underline;color:#56686D;} a:hover{ text-decoration:none;background-color:#4F4F4F; color:#000;text-decoration:none;} /* Kontakt */ #kontaktform { clear: left; float: left; line-height: normal; width: 500px; margin: 0px 0px 10px 0px; padding: 0px 10px 10px 10px; } #kontaktform label { clear: left; float: left; width: 100px; margin: 5px 4px 0px 0px; text-align: left; } #kontaktform label.plabel { color: #C0C0C0; font-weight: bold; } #kontaktform input, #kontaktform select, #kontaktform textarea { float: left; width: 250px; margin: 5px 0px 5px 0px; border: 1px solid #dedede; } #kontaktform select{ width: 260px; color: #333; } #kontaktform input{ padding: 2px 4px 2px 4px; color: #333; } #kontaktform textarea{ padding: 2px 4px 2px 4px; height: 100px; color: #333; } #kontaktform input.submit { width: auto; float: left; margin: 10px 5px 0px 105px; padding: 2px 10px 2px 10px; background-color: #ccc; color: #333; } #kontaktform input.reset { width: auto; float: left; margin: 10px 10px 0px 0px; padding: 2px 10px 2px 10px; border: 1px solid #2F3842; background-color: #666; color: #ccc; } Gruß Huchi Geändert von Huchinotte (15.06.2010 um 11:09 Uhr) |
Sponsored Links |
|
|||
Hi .........
weiss nicht ob pushen hier erlaubt ist aber würde mich über einen Tipp für die 2 Problemchen freuen. Der tag align sorgt noch für den einzigen Fehler bei der html Validierung. Gruß Huch |
Sponsored Links |
|
|||
Zitat:
Kommentar rausgenommen Gruß Huch Geändert von Huchinotte (20.05.2010 um 09:54 Uhr) |
|
||||
schau mal hier, dort wird dir auf unterhaltsame Weise modernes Webdesign nahegebracht.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
|||
Zitat:
erst einmal vielen Dank für den Tipp. Hab mir Teil 1 zugelegt und auch schon durchgelesen. Sehr unterhaltsam muss ich sagen. Hab auch angefangen die Webseite nun rein auf CSS aufzubauen ohne Tabellen. Soweit hat das auch im Grunde schon geklappt. Hier mal der erste Entwurf rein auf CSS Container aufgebaut: Uploaded with ImageShack.us Nur ein Problem habe ich noch. In meinem Layout mit Tabellen habe ich rechts und links jeweils eine kleine Grafik die ich als Rand benutze (siehe Pfiff "Gasthaus zum Wahnsinn"). Die Grafik ist 12px bzw. 11px breit und ich wiederhole diese mit repeat y. Beim Umbau auf css ohne Tabellen bekomme ich das aber irgendwie nicht hin. Kann mir einer einen Tipp geben wie ich rechts und links die Grafik integrieren kann? Hier mal meine css Code:
/* =============================================== Stylesheet für die Übungsseiten aus "Little Boxes, Teil 1" Stand: 3-spaltiges Layout mit float und margin (fertig) Datei: bildschirm.css Datum: 2009-04-17 Autor: Peter Müller Aufbau: 1. Kalibrierung und Restauration 2. Allgemeine Styles 3. Styles für Layoutbereiche 4. Sonstige Styles ================================================ */ /* ====================================== 1. Kalibrierung und Restauration ====================================== */ /* Reset - alle Abstände auf NULL */ * { padding: 0; margin: 0; } /* optional: erzwingt Scrollbar im Firefox */ html { height: 100%; margin-bottom: 1px; } h2, h3, p, ul, ol { margin-bottom: 1em; } ul ul { margin-bottom: 0; } li { margin-left: 1em ; } /* hier ggfs. Abstände für weitere Elemente restaurieren */ /* ====================================== 2. Allgemeine Styles ====================================== */ body { background-color: #8c8c8c; background-image:url(images/bg.jpg); } h1 { font-size: 150%; } h2 { font-size: 130%; } h3 { font-size: 110%; } img#logo { background-color: white; color: black; } /* Skiplink ausblenden */ .skiplink { position: absolute; top: -9999px; left: -9999px; width: 0; height: 0; font-size: 0; line-height: 0; } /* ====================================== 3. Styles für die Layoutbereiche ====================================== */ #wrapper { /* Hintergrundgrafik für drei Spalten */ background-color:#151515; width: 820px; margin: 0px auto; } #kopfbereich { height:180px; position: relative; color: black; padding: 0px 0px 0px 0px; } #top { position: relative; background-color:#000; height:30px; width: 820px; border-bottom:solid 1px #535353; border-top:solid 1px #535353; } #top p { font-size: 18px; font-variant:small-caps; color:#56686D; letter-spacing:10px; padding-left:10px; padding-top:5px; font-family: georgia,arial, helvetica, tahoma ,verdana, sans-serif; } #navibereich { /*background-color: pink; */ /* zum Testen Kommentar entfernen */ background-color:#151515; float: left; width: 160px; padding-left: 20px; padding-top: 20px; margin-top: 0px; } #navibereich ul { width: 6em; } #navibereich li { list-style-type: none; margin: 0; } #navibereich a { display:block; color:#93A5A9; font: normal 16px verdana, sans-serif; text-decoration:none ; text-align:left; width:160px; border-bottom:solid 1px #313131; font-size: 13px;line-height: 180%; font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif; } #navibereich a:hover, #navibereich a:focus { background-color:#262626; color:#fff; text-decoration:none ; } #navibereich a:active { color: black; background-color: #d9d9d9; } /* Style für #sidebar */ #sidebar { color:#93A5A9; background-color:#151515; float: right; width: 110px; padding: 10px; padding-top: 20px; margin-top: 0px; } #textbereich { color:#93A5A9; padding: 20px 10px 20px 20px; margin-left: 180px; /* Platz für #navibereich */ margin-right: 140px; /* Platz für #sidebar */ background-color:#202020; margin-top: 0px; } #textbereich a { border-bottom: 1px dotted #cc0000; } #textbereich a:hover, #textbereich a:focus { border-bottom: 1px solid #d90000; } #fussbereich { clear:both; font: normal 11px verdana, sans-serif; color: #fff; padding:0px; height:24px; text-align:center; background-color:#222222; width:100%; border-top:solid 1px #343434; } /* Kontakt */ #kontaktform { clear: left; float: left; line-height: normal; width: 500px; margin: 0px 0px 10px 0px; padding: 0px 10px 10px 10px; } #kontaktform label { clear: left; float: left; width: 100px; margin: 5px 4px 0px 0px; text-align: left; } #kontaktform label.plabel { color: #C0C0C0; font-weight: bold; } #kontaktform input, #kontaktform select, #kontaktform textarea { float: left; width: 250px; margin: 5px 0px 5px 0px; border: 1px solid #dedede; } #kontaktform select{ width: 260px; color: #333; } #kontaktform input{ padding: 2px 4px 2px 4px; color: #333; } #kontaktform textarea{ padding: 2px 4px 2px 4px; height: 100px; color: #333; } #kontaktform input.submit { width: auto; float: left; margin: 10px 5px 0px 105px; padding: 2px 10px 2px 10px; background-color: #ccc; color: #333; } #kontaktform input.reset { width: auto; float: left; margin: 10px 10px 0px 0px; padding: 2px 10px 2px 10px; border: 1px solid #2F3842; background-color: #666; color: #ccc; } Code:
<body> <body id="startseite"> <div id="wrapper"> <div id="kopfbereich"> <div class="skiplink"><a href="#textbereich"></a></div> <img src="http://xhtmlforum.de/images/back.JPG" id="logo" alt="Pfiff die Kleingaststätte" width="820" /> </div> <!-- Ende kopfbereich --> <div id="top"><p>"Pfiff" - Die Kleingaststätte</p></div> <div id="navibereich"> <ul> <li id="navi01"><a href="index.html">Startseite</a></li> <li id="navi02"><a href="galerie.html">Galerie</a></li> <li id="navi03"><a href="kontakt.html">Kontakt</a></li> </ul> </div> <!-- Ende navibereich --> <div id="sidebar"> <h2>Werbung</h2> <p>Hier könnte Ihre Werbung stehen</p> <p>Werben Sie auf Pfiff.de</p> </div> <!-- Ende sidebar --> <div id="textbereich"> <h2>Startseite</h2> <p><img src="ballon.jpg" alt="Roter Luftballon" width="78" height="100" class="bildrechts" />Dies ist ein Test Text <strong>auf Pfiff.de</strong>, dieser Text dient rein zu Testzwecken damit das Layout Grundgerippe angepasst werden kann.</p> <p>Auf dieser Seite steht keine informativer Text und somit ist das auch nichts was sich sehen lassen kann<em>solange</em> bis das Grundlayout steht das für diese <em>Webseite</em> verwendet wird</p> <ul> <li>Test 1</li> <li>Test 2 <ul> <li>Untertest 1</li> <li>Untertest 2</li> <li>Untertest 3</li> </ul> </li> <li>Test 3</li> </ul> <p>Besuchen Sie <a href="http://www.google.de" title="google.de - die Suchmaschine">die Suchmaschine im Web</a> für weitere Informationen.</p> </div> <!-- Ende textbereich --> <div id="fussbereich"> <address> <a href="<?php echo $root_dir; ?>www.gaststaette-pfiff.de">www.gaststaette-pfiff.de</a> | <a href="<?php echo $root_dir; ?>impressum.php">Impressum</a> | <a href="mailto:mirco.lang@freenet.de">Design by Mirco Lang</a> | <a href="<?php print $node_url?>#top">Seitenanfang</a> </address> </div> <!-- Ende fussbereich --> </div> <!-- Ende wrapper --> </body> </html> <!-- ende footer --> Geändert von Huchinotte (14.06.2010 um 10:42 Uhr) |
|
||||
Eine Grafik draus machen und dem Wrapper zuweisen.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Hi .........
Grafik ist vorhanden als rand1.jpg und rand2.jpg für rechts und links. Dem wrapper zuweisen? Meinst du als border image sprich Code:
border-left-image : url("images\rand1.jpg") repeat-y; border-right-image : url("images\rand2.jpg") repeat-y; Gruß Huch |
|
||||
Wie gesagt, mache eine draus.
Nein, als background-image mit repeat-y. Der Wrapper bekommt dafür z.B. horiz. padding.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
Sponsored Links |
|
|||
ach so hast das gemeint ....
Also sieht schon besser aus aber will noch nicht so ganz wie ich möchte. Hab dem wrapper nun ein image und ein reapet-y zugewiesen Code:
#wrapper { /* Hintergrundgrafik für drei Spalten */ background-color:#151515; background-image:url(images/rand1.jpg); background-repeat:repeat-y; width: 844px; margin: 0px auto; } Der Platz für den rechten ist vorhanden nur zeigt er nichts an. Was mich noch stutzig, ich benutze im wrapper das background-color um die navibox links und die werbungsbox rechts aufzufüllen. Weil die Box ja nur so groß ist wie sein Inhalt. Beisst sich das dann nicht wenn ich dem wrapper das image zuweise? |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Myspace-Probleme | Nora-B | CSS | 3 | 16.09.2008 00:17 |
Ich hasse CSS... | neu-art.de | Offtopic | 24 | 30.08.2008 14:11 |
Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 12:39 |
css code fragen! a.searchlink ??? | Beta | CSS | 2 | 15.09.2005 17:15 |