DIV wird immer mit einem Abstand nach oben angezeigt -soll aber links oben erscheinen

plegox · #1 (**permalink**) 20.05.2011, 16:33

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>

Chris2011 · #2 (**permalink**) 20.05.2011, 16:38

weil der div mit der Überschrift ganz unten steht schiebe den doch mal über dein link("Alle anzeigen")

warum so viele leere Klassen? das sieht alles so komisch aus

plegox · #3 (**permalink**) 21.05.2011, 12:53

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>

fricca · #4 (**permalink**) 21.05.2011, 13:00

Zitat:

Zitat von plegox

1. Das DIV "Alle Anzeigen" wird wieder unterhalb des Textes angezeigt, nicht oben rechts.

Es hat keinen Platz neben "Bevorstehende Termine". 200px ist eben zu breit.

Zitat:

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.

Das sind die Default-Margins der h4-Überschrift.

plegox · #5 (**permalink**) 21.05.2011, 13:17

Super, jetzt hab ich es.

DANKE

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ä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