zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit der Ausrichtung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.10.2009, 13:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2009
Beiträge: 2
johnzon befindet sich auf einem aufstrebenden Ast
Standard Probleme mit der Ausrichtung

Hallo, ich habe ein Problem mit der Ausrichtung meiner Inhalte.

Es handelt sich um die Contentspalte in der ich Quasi 3 Spalten generieren will
die nebeneinander stehen.
1. Spalte Bild
2. Spalte Liste mit Text
3. Spalte Liste mit Text

Bekomm es nicht hin das die Divs nebeneinander floaten und jeweils einen bestimmten Abstand zueinander haben.

Diese Drei Spalten sollen in einem Content Div enthalten sein welches Späte immer dupliziert werden soll.

Was Muss ich tun damit der float richtig funzt, und die Div´s nicht untereinander erscheinen.

Gruss und Danke vorab.
John
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.10.2009, 13:50
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Zeig doch mal deinen Code, siehe meine Sig.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.10.2009, 16:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2009
Beiträge: 2
johnzon befindet sich auf einem aufstrebenden Ast
Standard

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="1.css" rel="stylesheet" media="screen" />
<title>youdonthavetocallitmusic/label</title>
<link rel="shortcut icon" href="http://monorom.com/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
	  
    
    
    
        <div id="banner" ><img src="Bilder/headder_main.jpg" alt="" width="995" height="117" border="0" /></div>	
        <div id="content">
       	  
          <!--Start Track 1 --> 
          <div class="trackbox">
   		    <div id="box"><img src="Bilder/track_1.jpg" alt="" width="102" height="102" border="0" />
              <ul id="speaker">
                              <li><img src="Bilder/speaker.jpg" alt="" width="13" height="13" border="0" /></li>
                              <li><img src="Bilder/note.jpg" alt="" width="13" height="13" border="0" /></li>
                              <li><img src="Bilder/note.jpg" alt="" width="13" height="13" border="0" /></li>
                              <li><img src="Bilder/note.jpg" alt="" width="13" height="13" border="0" /></li>
                              <li><img src="Bilder/note.jpg" alt="" width="13" height="13" border="0" /></li>
                              <li><img src="Bilder/note.jpg" alt="" width="13" height="13" border="0" /></li>
       		  </ul> 
            		    <ul id="description1">
                          <li>Test</li>
                               <li> Mama Bär / Kommissar Hjuler 01</li>
                              <li>  Wiederaufnahmeverfa                              
                              <li>  LP, (SHMF) 100/YouD o1, ltd. num. 100td. num. 100</li>
                              <li>  Sold out 
                          <li> Mama Bär / Kommissar Hjuler 01</li>
                              <li>  Wiederaufnahmeverfa                              
                              <li>  LP, (SHMF) 100/YouD o1, ltd. num. 100td. num. 100</li>
                              <li>  Sold out 
              </ul>
              <ul id="description2">
                             <li>Test</li>
                               <li> Mama Bär / Kommissar Hjuler 01</li>
                              <li>  Wiederaufnahmeve</li>
                              <li></li>
                              <li>rfahren II / 06 </li>
                              <li>  LP, (SHMF)100/YouD o1, ltd. num. 100</li>
                              <li>  Sold out 
              </ul>
             
              
             
                       
            </div>	
		                    
          </div> 
        </div>
            
        <!--Ende Track 1 --> 
            
        </div>
  <div id="left"> <img src="Bilder/menue_main.jpg" alt="" width="136" height="604" border="0" /></div>
        
        <div id="menu">
          	<ul style="position:absolute; top:102px; left:5px; margin-top:10px; margin-left:17px; " >
				<li><a href="#">Home</a></li><br />
				<li><a href="#">Impressum</a></li><br /><p>
                <li ><a href="#">Label</a></li><br />
				<li><a href="#">Sale</a></li><p>
                <li><a href="#">Wanted</a></li><br />
				<li><a href="#">Collection</a></li><br /><p>
				<li><a href="#">Links</a></li><br />
	 </ul>  
     	</div>
        
</div>
<p>&nbsp;</p>
</body>
</html>

Code:
body {
background-color: #999fa5;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#0b1435;
letter-spacing:0.1em;
padding:0px;
margin:0px;
}
a {color: #2c71ab;}
a:visited {color:#2c71ab;}
a:hover {color: #2c71ab;}
a:active { color:#2c71ab;}


h1 {
font-size: 23px;
text-transform:uppercase;
background-color: #E0A3B7;
border-top:1px solid #564b47;
border-bottom:1px solid #564b47;
padding:5px 15px;
margin:0px }

h2 {
font-size:14px;
font-weight: bold;
padding: 5px 10px;
margin:0px;}

img.download {vertical-align:middle;}

/* ----------container zentriert das layout-------------- */
#container {
width: 1024px;
margin-top:117px;
}

/* ----------banner for logo-------------- */
#banner {
background:url(Bilder/headder_repeat.jpg) repeat-x;
position:absolute;
left:0px;
top:0px;
width:100%; 
height: 117px;
background-color:#0F3;
padding: 0px;
margin: 0px;
}
#banner img {padding:0px 0px;
 position:absolute;
 left:0px; top:0px; width:995px; height:117px;
} 

/* -----------------Inhalt--------------------- */
#content {
background-color: #ffffff;
padding: 0px;
margin-left: 136px;
margin-right: 0px;
}
div#content { 
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px"); 
}


/* --------------left navigavtion------------- */
#left {
position:absolute;
left:0px;
top:0px;
background:url(Bilder/menue_repeat.jpg) repeat-y;
height:100%; 
padding: 0px;
margin-top:117px;
float: right;
width: 136px;
}

/* --------------left menue ------------- */
#menu {
/*
position: absolute;
	height: 150px;
	left:26px;
	top:102px; */

}

#menu ul {
	
	float: left;
	padding: 0;
	list-style: none;
	line-height: normal;
}

#menu li {
display: inline;
}

#menu a {
text-decoration: none;
color: #ffffff;
font-size: 13px;
font-family:Verdana, Arial, SunSans-Regular, Sans-Serif;
letter-spacing:normal;
line-height:15px;
}

#menu a:hover {
color:#dc2a07;
}
/* --------------records------------- */



#record {
	float:left;	
	
}
.trackbox {
	width:889px;
	height: inherit;
	padding: 0 0 20px 0;
	background-color:#445854;
	background:url(Bilder/footer.jpg) no-repeat bottom;	
}

/* --------------track------------- */
#box {
	width:880px;
	margin: 0 0 0 0;
	background-color:#3FF;

}
#box img{
	width:102px;
	float:left;

}

#box:after{
	content: ".";
	visibility:hidden;
	height:0;
	clear:both;
	display:block;
	}
/*
#description2:after{
	content: ".";
	visibility:hidden;
	height:0;
	clear:both;
	display:block;;
	
	} */

.bildbox{
	width:200px;
	height:120px;
	background-color:#3C6;
	}

#description1{
	list-style-type:none;
	background-color:#F03;
	display:block;
	width:370px;
	float:left;
	padding:0 0 0 0px;
	margin:0 0 0 24px;
}
#description2{
	list-style-type:none;
	background-color:#0F6;
	display:block;
	width:353px;
	padding:0 0 0 0px;
	margin:0 0 0 500px;
	
}

#tracks {
	width:50px;
	height:20px;
	background-color:#FF0;
	float:left;
	display:block;
		}

#tracks img{
	width:13px;
	}

#tracks li{
	list-style-type:none;
	float:left;
	height:13px;
	margin:0;
	padding:0;
	
	}

#speaker  {
	clear:both;
	width:80px;
	height:13px;
	list-style-type:none;
	margin:0;
	background-color:#3C6;
}
#speaker  img  {
	width:13px;
}
#speaker ul {
	float:left;
	display:block;
	}
/* --------------trackdescr------------- */

.textbox1  {
	width:370px;
	margin:0 0 0 0px;
	display:block;
	position:relative;
	left: 25%;
	
}
.textbox1 ul {
	
	
	
}
.textbox1 li {
	
	
}

Ich möchte erreichen das das id="speaker" unterhalb von dem Bild angezeigt wird und rechts vom Bild sollen die beiden Textboxen "description1" + "description2" nebeneinander gefloated werden. Wenn die Textboxen mehr inhalt haben, soll id="speaker" nicht von ihnen verdrängt werden sondern immer unter dem Bild stehbleiben.

Vielen Dank
Mit Zitat antworten
  #4 (permalink)  
Alt 23.10.2009, 16:59
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Hallo Johnzon,

ich habe mir deinen Code angesehen und finde ihn insgesamt sehr ungeeignet für deine Anforderungen.

Beschäftige Dich mit der Reihenfolge von Elementen im Fließtext, mit Verschachtelung, und vor allem mit den Eigenschaften der Elemente im Zusammenhang mit floats.

Sehr gute Grundlagen vermittelt Dir Peter Müllners

Little Boxes Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS

Wenn Du das durch hast, was bei schnellem Lesen und Verstehen einen Abend dauern dürfte, kannst Du Dich, immer wieder vergewissernd, an eine konkrete Umsetzung wagen.
Eine Umarbeitung des Codes würde eine komplette Umbearbeitung des HTML und des CSS bedeuteten, sorry, die Zeit habe ich nicht
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
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
paar Probleme mit dem CSS Layout SimonK. CSS 6 05.10.2008 15:57
Probleme mit der Ausrichtung robbie CSS 2 21.03.2008 12:05
IE: Probleme mit ul-Menü Ares CSS 4 18.10.2006 12:42
Probleme mit Ausrichtung bei verschiedenen Auflösungen ollie75 CSS 4 22.02.2006 23:16
Ausrichtung, "Balken" . Probleme in Firefox und IE Ben CSS 4 26.07.2005 21:52


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:24 Uhr.