|
|||
DIV wird immer mit einem Abstand nach oben angezeigt -soll aber links oben erscheinen
Hallo,
ich habe ein CSS Problem und komme einfach nicht weiter Das DIV "id=header" (Bevorstehende Termine) soll links oben angezeigt werden. Leider wird es immer mit einem Abstand x nach oben angezeigt (siehe Bild). Was mache ich falsch? DANKE. Viele Grüße Code: HTML-Code:
<div style="width:800px"> <div style="width:590px;border: 1px solid #ff0000;float:left;"> Left </div> <div style="width:198px; border: 1px solid #00ff00;padding:3px;float:right;"> <div class="" style="float:left;overflow:hidden;"> <div class="" style="background:#eee;border-top:1px solid #777;overflow:hidden;"> <div class="" style="margin 0; padding: 0;"> <div class="" style="font-size:9px;"> <a id="" href="#"style="float:right;">Alle anzeigen</a> </div> <div id="header"> <h4 class="" style="font-size:11px;font-weight:bold;width:170px;position:relative;margin:0;padding:5px;">Bevorstehende Termine</h4> </div> </div> </div> <div class=""> kkkkk </div> </div> </div> </div> |
Sponsored Links |
Sponsored Links |
|
|||
Leider komme ich immer noch nicht weiter ...
Hallo, vielen Dank für deine Hilfe.
Ich hatte die Klassen gelöscht um das CSS direkt im DIV auszuprobieren - eine dumme Idee... Naja, jedenfalls habe ich deinen Tipp umgesetzt und das Konstrukt noch mal sauber aufgeschrieben. Leider habe ich immer noch zwei Fehler drin 1. Das DIV "Alle Anzeigen" wird wieder unterhalb des Textes angezeigt, nicht oben rechts. 2. Der gesamte Header (grauer Hintergrund) ist viel zu groß. Ich habe margin und padding schon auf 0 gesetzt, trotzdem ist zwischen den Text "Bevorstehende Termine" ein großer Abstand nach oben und unten. Keine Ahnung woher der kommt. Kannst du/ihr mir noch mal helfen? Vielen Dank! Viele Grüße HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Stefan" /> <title>Untitled 3</title> <style> .two-column-container { width:796px; border:1px solid #0000ff; overflow:hidden; } .two-column-container.left { width:590px; border: 1px solid #ff0000; float:left; } .two-column-container.right { width:200px; border: 1px solid #00ff00; float:right; } .fp-right-block { float:left; margin: 0; padding: 0; width:200px; } .fp-right-block.header { background:#eee; border-top:1px solid #777; overflow:hidden; float:left; margin: 0; padding: 0; } .fp-right-block.header.name { width:120px; margin:0; padding:5px; border: 1px solid #000; float:left; } .fp-right-block.header.name h4 { font-size:11px; font-weight:bold; font-family:arial; } .fp-right-block.header.url { font-size:11px; float:right; font-family:arial; padding-right:3px; } .fp-right-block.content { padding-top:10px; } </style> </head> <body> <div class="two-column-container"> <div class="two-column-container left"> Linker Inhalt </div> <div class="two-column-container right"> <div class="fp-right-block"> <div class="fp-right-block header"> <div class="fp-right-block header name"> <h4>Bevorstehende Termine</h4> </div> <div class="fp-right-block header url"> <a href="#">Alle anzeigen</a> </div> </div> <div class="fp-right-block content"> Das ist ein Infoblock :) </div> </div> </div> </div> </body> </html> |
|
|||
Zitat:
Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
div rechts und links neben zentriertem div bis zum Rand je | marcus1302 | CSS | 4 | 05.02.2010 19:44 |
div wird zu klein angezeigt | jogisarge | CSS | 1 | 20.03.2005 12:58 |
div ausrichtung oben | mitte | unten | xtoph | CSS | 2 | 21.01.2005 22:44 |
1 div links, 2 div's untereinander daneben | jensr | CSS | 9 | 01.07.2004 00:41 |