Ergebnis 1 bis 2 von 2

Thema: Css Boxen floaten

  1. #1
    Kaiser(in)
    Registriert seit
    08.12.2005
    Beiträge
    2.460
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Css Boxen floaten

    Huhu,

    Wiedermal,
    Ich bin meiner Meinung nach auf dem richtigen weg,
    Jedoch habe ich schon alles probiert um die content zu floaten aber ich bekomm sie nicht neben die navi
    Auch indem ich die <div> anders angeordnet hab (Reihnfolge)
    Bitte bitte sagt mir wie.

    Und dann noch: aber das krieg ich best. hin warum verschieben sie die .navi?? Wenn man "hovert"<< ?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style type="text/css">
    		#container &#123;
    			width&#58; 760px;
    			\width&#58; 780px;
    			w\idth&#58; 760px;
    			border&#58; 1px solid gray;
    			margin&#58; 10px;
    			margin-left&#58; auto;
    			margin-right&#58; auto;
    			padding&#58; 10px;
    			align&#58; center;
    		&#125;
    		
    		#logo &#123;
    			float&#58; left;
    			width&#58; 120px;
    			padding&#58; 4px;
    			margin-bottom&#58; 2px;
    			background-color&#58; gray
    		&#125;
    
    		#banner &#123;
    			padding&#58; 5px;
    			margin-bottom&#58; 2px;
    			background-color&#58; gray
    		&#125;
    
    		#content &#123;
    			float&#58; right;
    			padding&#58; 5px;
    			background-color&#58; rgb&#40;235, 235, 235&#41;;
    			border-right&#58; 1px solid gray;
    			width&#58; 621px;
    		&#125;
    
    		#sidebar-a &#123;
    			clear&#58; left;
    			width&#58; 0;
    			margin&#58; 0;
    			padding&#58; 5px;
    			padding-top&#58; 35px;
    			margin-right&#58; 0px;
    			background-color&#58; rgb&#40;213, 219, 225&#41;; 
    		&#125;
    
    		#footer &#123;
    			clear&#58; both;
    			padding&#58; 5px;
    			margin-top&#58; 2px;			
    			background-color&#58; gray
    		&#125;
    		.navi &#123;
    			display&#58; block;
    			font-family&#58; Verdana;
    			font-weight&#58; bold;
    			font-size&#58; 11px;
    			text-decoration&#58; none;
    			color&#58; #ffffff;
    			background-color&#58; gray; 
    			padding&#58;4px;
    			width&#58;110px;
    			margin-bottom&#58; 3px;			
    		&#125;
    			.navi&#58;hover &#123;
    			font-family&#58; Verdana;
    			font-weight&#58; bold;
    			font-size&#58; 11px;
    			text-decoration&#58; none;
    			color&#58; #ffffff;
    			background-color&#58; #64A0DD;
    		&#125;
    			.navi&#58;active &#123;
    			font-family&#58; Verdana;
    			font-weight&#58; bold;
    			font-size&#58; 11px;
    			text-decoration&#58; none;
    			color&#58; #ffffff;
    			background-color&#58; #2363A3;
    		&#125;
    				.navi2 &#123;
    			display&#58; block;
    			font-family&#58; Verdana;
    			font-weight&#58; bold;
    			font-size&#58; 11px;
    			text-decoration&#58; none;
    			color&#58; gray;
    			background-color&#58; rgb&#40;235, 235, 235&#41;; 
    			padding&#58;4px;
    			width&#58;104px;
    			margin-bottom&#58; 3px;
    			margin-left&#58; 3px;
    		&#125;
    			.navi2&#58;hover &#123;
    			font-family&#58; Verdana;
    			font-weight&#58; bold;
    			font-size&#58; 11px;
    			text-decoration&#58; none;
    			color&#58; gray;
    			background-color&#58; #64A0DD;
    		&#125;
    			.navi2&#58;active &#123;
    			font-family&#58; Verdana;
    			font-weight&#58; bold;
    			font-size&#58; 11px;
    			text-decoration&#58; none;
    			color&#58; gray;
    			background-color&#58; #2363A3;
    		&#125;
    
    a, p, h1, h2, ul, li &#123; font-family&#58; Verdana; &#125;
    
    h1 &#123; font-decoration&#58; underline; font-size&#58; 11px; color&#58; #64A0DD; font-weight&#58;bold; &#125;
    
    p &#123; font-decoration&#58; none; font-size&#58; 9px; color&#58; #646464; font-weight&#58;normal; &#125;
    
    .copy &#123; text-align&#58;right; font-decoration&#58; none; font-size&#58; 8px; color&#58; #EBEBEB; font-weight&#58;normal; &#125;
    
    .norm &#123; font-weight&#58;bold; color&#58;gray; text-decoration&#58;none; &#125;
    	.norm&#58;link &#123; font-weight&#58;bold; color&#58;gray; text-decoration&#58;none; &#125;
    	.norm&#58;visited &#123; font-weight&#58;bold; color&#58;gray; text-decoration&#58;none; &#125;
    	.norm&#58;focus &#123; font-weight&#58;bold; color&#58;gray; text-decoration&#58;underline; &#125;
    	.norm&#58;hover &#123; font-weight&#58;bold; color&#58;gray; text-decoration&#58;underline; &#125;
    	.norm&#58;active &#123; font-weight&#58;bold; color&#58;gray; text-decoration&#58;underline; &#125;
    	
    .copy &#123; font-weight&#58;normal; color&#58;#EBEBEB; text-decoration&#58;none; &#125;
    	.copy&#58;link &#123; font-weight&#58;normal; color&#58;#EBEBEB; text-decoration&#58;none; &#125;
    	.copy&#58;visited &#123; font-weight&#58;normal; color&#58;#EBEBEB; text-decoration&#58;none; &#125;
    	.copy&#58;focus &#123; font-weight&#58;normal; color&#58;#EBEBEB; text-decoration&#58;underline; &#125;
    	.copy&#58;hover &#123; font-weight&#58;normal; color&#58;#EBEBEB; text-decoration&#58;underline; &#125;
    	.copy&#58;active &#123; font-weight&#58;normal; color&#58;#EBEBEB; text-decoration&#58;underline; &#125;
    
    </style>
    </head>
    <body>
    	<div id="container">
    		<div id="logo">[img]images/logo.gif[/img]</div>
    																							
    																							
    																							<div id="banner"></div>
    
    																		
    
    	<div id="sidebar-a">
    		Link
    		Link
    			unter Link
    			unter Link
    		Link
    		Link
    		Link
    			unter Link
    			unter Link
    		Link
    	</div>
    
    <div id="content">
    																		<table cellpadding="5">
    																		  <tr>
    																		    <td>
    																		    <h1>Willkommen</h1>
    																		    
    
    Dieser Teil der Homepage befindet sich leider noch im Aufbau,
    
    																		    bitte nutzen Sie den anderen Teil.
    
    																		    
    
    																		    Danke</p>																	
    																		    </td>
    																		  </tr>
    																		  </table>
    																		</div>		
    
    												
    												
    												<div id="footer"><p class="copy">© pata pan 2006</div>
    
    </div>
    </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Themenstarter

    Registriert seit
    08.12.2005
    Beiträge
    2.460
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    so jetzt bin ich ein bisll "weita" aber trotzdem sind die nich reichtig gefloated weil wenn die tabelle im contet länger wird siehst wieder falsch aus! was soll ich tun?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style type="text/css">
    		#container &#123;
    			width&#58; 760px;
    			\width&#58; 780px;
    			w\idth&#58; 760px;
    			border&#58; 1px solid gray;
    			margin&#58; 10px;
    			margin-left&#58; auto;
    			margin-right&#58; auto;
    			padding&#58; 10px;
    			align&#58; center;
    		&#125;
    		
    		#logo &#123;
    			float&#58; left;
    			width&#58; 120px;
    			padding&#58; 4px;
    			margin-bottom&#58; 2px;
    			background-color&#58; gray
    		&#125;
    
    		#banner &#123;
    			padding&#58; 5px;
    			margin-bottom&#58; 2px;
    			background-color&#58; gray
    		&#125;
    		
    		#h1 &#123;
    			padding&#58; 5px;
    			
    			background-color&#58; rgb&#40;213, 219, 225&#41;;
    			border-right&#58; 1px solid gray;
    		&#125;
    
    		#content &#123;
    			float&#58; right;
    			padding&#58; 5px;
    			background-color&#58; rgb&#40;235, 235, 235&#41;;
    			border-right&#58; 1px solid gray;
    			width&#58; 621px;
    		&#125;
    
    		#sidebar-a &#123;
    			float&#58; left;
    			width&#58; 0;
    			margin&#58; 0;
    			padding&#58; 5px;
    			padding-top&#58; 35px;
    			margin-right&#58; 0px;
    			background-color&#58; rgb&#40;213, 219, 225&#41;; 
    		&#125;
    
    		#footer &#123;
    			clear&#58; both;
    			height&#58; 20px;
    			padding&#58; 5px;
    			margin-top&#58; 2px;			
    			background-color&#58; gray
    		&#125;
    		.navi &#123;
    			display&#58; block;
    			font-family&#58; Verdana;
    			font-weight&#58; bold;
    			font-size&#58; 11px;
    			text-decoration&#58; none;
    			color&#58; #ffffff;
    			background-color&#58; gray; 
    			padding&#58;4px;
    			width&#58;110px;
    			margin-bottom&#58; 3px;			
    		&#125;
    			.navi&#58;hover &#123;
    			font-family&#58; Verdana;
    			font-weight&#58; bold;
    			font-size&#58; 11px;
    			text-decoration&#58; none;
    			color&#58; #ffffff;
    			background-color&#58; #64A0DD;
    		&#125;
    			.navi&#58;active &#123;
    			font-family&#58; Verdana;
    			font-weight&#58; bold;
    			font-size&#58; 11px;
    			text-decoration&#58; none;
    			color&#58; #ffffff;
    			background-color&#58; #2363A3;
    		&#125;
    				.navi2 &#123;
    			display&#58; block;
    			font-family&#58; Verdana;
    			font-weight&#58; bold;
    			font-size&#58; 11px;
    			text-decoration&#58; none;
    			color&#58; gray;
    			background-color&#58; rgb&#40;235, 235, 235&#41;; 
    			padding&#58;4px;
    			width&#58;104px;
    			margin-bottom&#58; 3px;
    			margin-left&#58; 3px;
    		&#125;
    			.navi2&#58;hover &#123;
    			font-family&#58; Verdana;
    			font-weight&#58; bold;
    			font-size&#58; 11px;
    			text-decoration&#58; none;
    			color&#58; gray;
    			background-color&#58; #64A0DD;
    		&#125;
    			.navi2&#58;active &#123;
    			font-family&#58; Verdana;
    			font-weight&#58; bold;
    			font-size&#58; 11px;
    			text-decoration&#58; none;
    			color&#58; gray;
    			background-color&#58; #2363A3;
    		&#125;
    
    a, p, h1, h2, ul, li &#123; font-family&#58; Verdana; &#125;
    
    h1 &#123; font-decoration&#58; underline; font-size&#58; 11px; color&#58; #64A0DD; font-weight&#58;bold; &#125;
    
    p &#123; font-decoration&#58; none; font-size&#58; 9px; color&#58; #646464; font-weight&#58;normal; &#125;
    
    .copy &#123; text-align&#58;right; font-decoration&#58; none; font-size&#58; 8px; color&#58; #EBEBEB; font-weight&#58;normal; &#125;
    
    .norm &#123; font-weight&#58;bold; color&#58;gray; text-decoration&#58;none; &#125;
    	.norm&#58;link &#123; font-weight&#58;bold; color&#58;gray; text-decoration&#58;none; &#125;
    	.norm&#58;visited &#123; font-weight&#58;bold; color&#58;gray; text-decoration&#58;none; &#125;
    	.norm&#58;focus &#123; font-weight&#58;bold; color&#58;gray; text-decoration&#58;underline; &#125;
    	.norm&#58;hover &#123; font-weight&#58;bold; color&#58;gray; text-decoration&#58;underline; &#125;
    	.norm&#58;active &#123; font-weight&#58;bold; color&#58;gray; text-decoration&#58;underline; &#125;
    	
    .copy &#123; font-weight&#58;normal; color&#58;#EBEBEB; text-decoration&#58;none; &#125;
    	.copy&#58;link &#123; font-weight&#58;normal; color&#58;#EBEBEB; text-decoration&#58;none; &#125;
    	.copy&#58;visited &#123; font-weight&#58;normal; color&#58;#EBEBEB; text-decoration&#58;none; &#125;
    	.copy&#58;focus &#123; font-weight&#58;normal; color&#58;#EBEBEB; text-decoration&#58;underline; &#125;
    	.copy&#58;hover &#123; font-weight&#58;normal; color&#58;#EBEBEB; text-decoration&#58;underline; &#125;
    	.copy&#58;active &#123; font-weight&#58;normal; color&#58;#EBEBEB; text-decoration&#58;underline; &#125;
    
    </style>
    </head>
    <body bgcolor="#F9F9F9">
    	<div id="container">
    		<div id="logo">[img]images/logo.gif[/img]</div>
    																							
    																							
    																							<div id="banner"></div>
    																							
    																							<div id="h1"></div>
    <div id="content">
    																		<table cellpadding="5">
    																		  <tr>
    																		    <td>
    																		    <h1>Willkommen</h1>
    																		    
    
    Dieser Teil der Homepage befindet sich leider noch im Aufbau,
    
    																		    bitte nutzen Sie den anderen Teil.
    
    																		    
    
    																		    Danke</p>
    																		    
    
    
    
    
    
    
    
    
    
    
    
    																	
    																		    </td>
    																		  </tr>
    																		  </table>
    																		</div>		
    																		
    
    	<div id="sidebar-a">
    		Link
    		Link
    			unter Link
    			unter Link
    		Link
    		Link
    		Link
    			unter Link
    			unter Link
    		Link
    	</div>
    
    
    
    												
    												
    												<div id="footer"><p class="copy">© bla bla 2006</div>
    
    </div>
    </body>
    </html>

Ähnliche Themen

  1. div boxen feststellen
    Von kappilino im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 19.09.2007, 01:07
  2. div boxen verschieben
    Von kappilino im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 16.09.2007, 00:20
  3. div boxen problem
    Von kappilino im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 15.09.2007, 23:16
  4. 100% Breite von div-boxen
    Von Gamling im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 28.07.2007, 22:16
  5. probleme bei floaten von links
    Von hedges im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 04.08.2005, 11:14

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •