Zur Navigation

"float: right" hängt unten

Smile hat wieder eine Frage :D

1 Smile

Folgenes Problem. Geordnete reihenfolge

navi_top

header

<!-- Container, je wort eine spalte -->
left content right
<!-- //container -->

navi

foot

hab im internet ein gefunden, der das auch hatte c.c
http://xhtmlforum.de/56902-float-right-div-h-ngt-unten.html

Die rechte Spalte hängt unten... Möchte ich aber nicht. Wie bekomme ich es hin, das die rechte Spalte direkt daneben ist?

Hoffe, ihr wisst was ich meine.

MfG Kevin

PS: Codes kann ich heute Nachmittag erst posten.

30.11.2011 11:18

2 Jörg Kruse

Ohne Code kann man nur spekulieren

Ich würde überprüfen, ob die Gesamtbreite der Spalten die innere Breite des Elternelements nicht übersteigt - in so einem Fall "fällt" die letzte Spalte nämlich nach unten. Zur Gesamt-Breite eines Elements zählen auch Innen- und Außenabstand sowie die Rahmenbreite

30.11.2011 11:27 | geändert: 30.11.2011 11:30

3 Smile

Hey Jörg. Danke für die schnelle Antwort. Sitze zurzeit im Büro und mache für unsere Übungsfirma eine Homepage. Dein Beitrag sieht aus, als würde es eine "table" sein.
Es liegt nicht an der Breite. Muss i.was an den Float liegen. Werde die den Code um 17uhr hier reinposten. :)

30.11.2011 14:27

4 Jörg Kruse

Dein Beitrag sieht aus, als würde es eine "table" sein.

Auf eine Tabelle bezog ich mich nicht, eine Tabellenspalte kann nicht nach unten wegrutschen.

30.11.2011 15:48

5 Smile

so, codes kommen :D

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<title>Flash-Eletronix - Spiele - Playstation Portable</title>
		<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
		
		<meta name="author" content="Kevin Lange" />
		<meta name="publisher" content="Kevin Lange" />		
		<meta name="discription" content="BvB Uebungsfirma Flash-Electronix. Das ware Leben der Firmenwelt erleben." />
		<meta name="keywords" content="..." />
		<meta name="page-topic" content="Firmenleben" />
		<meta name="page-typ" content="Uebunng/Internet Explorer" />

		<link rel="stylesheet" type="text/css" href="css/main.css">
		<link rel="stylesheet" type="text/css" href="css/news.css">
		<link rel="stylesheet" type="text/css" href="css/news_details.css">
		
</head>
<body>
<div id="bg_head">
<div class="bg_head"> </div>
<!-- navigation -->
	<div id="top_navi">																						
		<div class="home"></div>
		<div class="shop"></div>
		<div class="logo"></div>
		<div class="team"></div>
		<div class="support"></div>
	</div>
									<!-- Slideshow News -->
	<div class="flash_news_pic"> </div>
		<div class="flash_news"></div>

		
<!-- 3 Spalten LEFT MID RIGHT -->	
<div>		
<div id="browsermain">																										
<div id="wrap">

<!-- start left menu -->
	<div id="left_menu">																					
						<div class="left_shop"><!-- Hier kommen die Artikelsfenter rein: Rot = Computer, Grün Konsole usw --> 
		
										<img src="img/h2_class_feature.gif" id="left_shop_top">
										<table cellspacing="0" cellpadding="0" class="left_shop_table">
										<tr>
												<td><a href="img/shop/shop_konsole.html"><img src="img/shop/konsole.png" /></a></td>
													<td><a href="img/shop/shop_konsole.html"><img src="img/shop/games.png" /></a></td>
														<td><a href="img/shop/shop_konsole.html"><img src="img/shop/extra.png" /></a></td>
															<td><a href="img/shop/shop_konsole.html"><img src="img/shop/computer.png" /></a></td>
																<td><a href="img/shop/shop_konsole.html"><img src="img/shop/multimedia.png" /></a></td>
										<tr>
										</table>
						</div>
		
		
			<div class="left_facebook">
		
							<img src="img/h2_facebook.gif" class="left_facebook_top">
						
						<table> 
						<tr> 
							<td>
								<img src="img/icon/facebook_logo.png" class="left_facebook_logo"> </td>
						</tr>
						</table>
					
						<table>
						<tr>
													<td> <tr> Flash Eletronix </tr>
								<tr> on Facebook</tr>>
								<tr> LikeButtom </tr>
							</td>
						</tr>
						</table>
			</div>
		<div class="left_twitter"></div>
	</div><!-- end left menu -->

<!-- start content -->

	<div id="content">																					

				<div class="news_top_bg">
				
						<img src="img/h2_news.gif" class="news_top_bg_news">
				
				</div>
		
		<div id="news_bg">
			<div class="bg_news_head"></div>
															<!-- CONTENT -->
									<div class="bg_news_body">
								<div class="news_title"> 
											<div class="event"></div> <div class="news_title_text">  [News] 				30/11/2011  Begr&uuml;&szlig;ung!</div>
</div>
							<br>
							<br>
							<br>	xxx
							<br>
							<br>
							<br>		
									</div>
			
			<div class="bg_news_foot"></div>
		</div>
</div>

<!-- end content -->
	
<!-- start right menu -->
<div id="wrapper">
	<div id="right_menu">																				
		<div class="right_new"></div>
		<div class="right_navi"></div>
		<div class="right_onlinevoting"></div>
	</div><!-- end right menu -->
</div>
</div>
		</div>
		
	
</div>		
		
<div id="foot_navii">
	<div id="foot_pic"></div>																											
	<div id="foot_navi">
	</div>
</div>
		
<!-- start footer -->
<div id="footer"> &copy; by Kevin Lange																					
</div>
		<!-- end footer --> <!-- //container -->
</body>
</html>


main.css
/*body und Text verarbeitung für gesamte Homepage*/
body{
		background-image: url(../img/bg_body.jpg);
		background-position: top center;
		height: 100%;
		width: 100%;
		text-align: center;
		margin: 0;
		padding: 0;
		border: 0;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: small;
}

#bg_head{
	background-image: url(../img/bg_head.jpg);
	height: 100%;
	width: 100%;
	margin: 0;
	background-repeat: no-repeat;
	padding: 0;
	background-position: top center; 
}


#browsermain{
	width: 1100px;
	height: auto;
	margin: auto;
	margin-top: -170px;
	overflow: hidden;
}

img {
	border: 0;
}


news.css
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Hauptseite <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

/* >>>>>>>>>>>>>>>>>>>>> navigation top*/
#top_navi{
	background-image: url(../img/navi.png);
	height:95px;
	width: 975px;
	margin: auto;
}

.home {
	background-image: url(../img/buttom/news.png);
	height: 70px;
	width: 195px;
	float: left; 
	margin: auto;
}

.shop {
	background-image: url(../img/buttom/shop.png);
	height: 70px;
	width: 195px;
	float: left; 
	margin: auto;
}

.logo {
	background-image: url(../img/buttom/logo.png);
	height: 70px;
	width: 195px;
	float: left;
	margin: auto; 
}

.team {
	background-image: url(../img/buttom/team.png);
	height: 70px;
	width: 195px;
	float: left;
	margin: auto; 
}

.support {
	background-image: url(../img/buttom/support.png);
	height: 70px;
	width: 195px;
	float: left;
	margin: auto;
}

/* >>>>>>>>>>>>>< HEADER */


.flash_news_pic{
	background-image: url(../img/1129698_0.jpg);
	height:158px;
	width: 463px;
	margin: auto;
	margin-top:100px;
}

.flash_news{
	background-image: url(../img/rolling_event.png);
	height: 250px;
	width: 557px;
	margin: auto;
	margin-top: -200px;
}
/* >>>>>>>>>>>>>>>>>>>>>left menu*/
#left_menu{
 float: left;
 margin-left: 40px;
 margin-top: -85px;

}

.left_shop{
background-image: url(../img/bg_class_feature.png);
height: 212px;
width: 262px;
}

.left_facebook{
	background-image: url(../img/bg_facebook.png);
	height: 314px;
	width: 234px;
	margin: auto;
}

.left_twitter{
	background-image: url(../img/bg_twitter.png);
	height: 301px;
	width: 227px;
	margin: auto;
}
/* >>>>>>>>>>>>>>>>>> content*/

#content{
	margin-top: 170px;
}

.news_top_bg{
	background-image: url(../img/bg_headline.png);
	height: 49px;
	width: 504px;
	margin: auto;
	margin-top: -13px;
}

.bg_news_head{
	background-image: url(../img/news/bg_news_head.png);
	height: 41px;
	width: 504px;
	margin: auto;
}

.bg_news_body{
	background-image: url(../img/news/bg_news.jpg);
	height: auto;
	width: 504px;
	margin: auto;
	text-align: left;
}

.news_title{
	background-image: url(../img/news_title.gif);
	height: 31px;
	width: 499px;
	margin: auto;
	text-align: center;
}

.bg_news_foot{
	background-image: url(../img/news/bg_news_bottom.gif);
	height: 26px;
	width: 504px;
	margin: auto;
}



/* >>>>>>>>>>>>>>>> right menu*/
#right_menu{
	float: right;
	margin-right: 55px;
	margin-top: -450px;
	
}
 .right_new{
 	background-image: url(../img/facebook.png);
	height: 99px;
	width: 220px;
	margin: auto;
 }
 
 .right_navi{
 	background-image: url(../img/bg_quick.png);
	height: 220px;
	width: 235px;
	margin-top: -15px;
 }
 
 .right_onlinevoting{
 	background-image: url(../img/bg_online_poll.png);
	height: 328px;
	width: 227px;
	margin-top: -20px;
 }
 
 /* >>>>>>>>>>>>>>>>>>> foot_pic*/
 #foot_pic{
	background-image: url(../img/bg_content.png);
	height: 362px;
	width: 1141px;
	margin: auto;
	margin-top: -200px;

 }

/* >>>>>>>>>>>>>>>>>>> foot_navi*/
#foot_navi{
	background-image: url(../img/bg_navigation.png);
	height: 206px;
	width: 970px;
	margin: auto;
	margin-top: -20px;
}

/* >>>>>>>>>>>>>>>>>>>>>> foot*/

:)

30.11.2011 16:55 | geändert: 30.11.2011 16:56

6 Jörg Kruse

Und welches Element ist nun nach unten verrutscht?

Bitte bedenke, dass mir die Hintergrundbilder fehlen, ich also nur eine weiße Seite sehe mit ein paar Textbrocken, wenn ich mir die Codes abspeicher und die Seite in den Browser lade. Besser wäre es, wenn du die Seitenelemente, um die es geht, mit einer Hintergrundfarbe versiehst, so dass man dein Problem leichter nachvollziehen kann.

.. oder du lädst alternativ eine Demo-Seite hoch, die man dann online analysieren kann

30.11.2011 17:39 | geändert: 30.11.2011 17:40

7 Smile (Gast)

Habs geschafft :D
Auf alle 3 Container "float: left;" gesetz. :) per zufall xD

01.12.2011 13:27

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]