zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV wird immer mit einem Abstand nach oben angezeigt -soll aber links oben erscheinen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.05.2011, 16:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.04.2010
Beiträge: 8
plegox befindet sich auf einem aufstrebenden Ast
Standard 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>
Angehängte Grafiken
Dateityp: jpg css.JPG (10,1 KB, 11x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.05.2011, 16:38
Benutzerbild von Chris2011
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.01.2011
Beiträge: 301
Chris2011 befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von Chris2011 (20.05.2011 um 16:40 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.05.2011, 12:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.04.2010
Beiträge: 8
plegox befindet sich auf einem aufstrebenden Ast
Frage 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>
Angehängte Grafiken
Dateityp: jpg css2.JPG (21,0 KB, 4x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 21.05.2011, 13:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von plegox Beitrag anzeigen
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.
Mit Zitat antworten
  #5 (permalink)  
Alt 21.05.2011, 13:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.04.2010
Beiträge: 8
plegox befindet sich auf einem aufstrebenden Ast
Standard

Super, jetzt hab ich es.
DANKE
Mit Zitat antworten
Antwort

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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:03 Uhr.