zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Suchen Heutige Beiträge Alle Foren als gelesen markieren

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 9 Boxen mit Bild & Text floaten?

Antwort
Seite 1 von 2 1 2
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.01.2008, 18:52
Benutzerbild von DeltaLeo
Call me Roland!
neuer user
Thread-Ersteller
  
Registriert seit: 15.11.2007
Ort: (D) Niederrhein
Beiträge: 25
DeltaLeo befindet sich auf einem aufstrebenden Ast
Beitrag 9 Boxen mit Bild & Text floaten?
Hall ihr,

ich weiß nicht mehr weiter!
Lese mich seit einer Woche im Forum und Internet durch doch finde leider keine Lösung.

Wie bekomme ich die 9 Boxen class=„mis-info-box“ (im rotem Rahmen markiert) mit float nebeneinander, so das die roten „mis-info-box“ sich zentrieren und sich bei mehr platz auch horizontal mehrer Boxen nebeneinander platziern.
Außerdem macht der IE die Bilder viel zu lang und sorgt somit für ein Chaos.

Hier der gesamte XHTML 1.0 Code mit CSS…

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>
	
<title>TestSeite</title>

<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<style type="text/css">

/* HAUPTFORMAT */
/* ----------- */
*{ 
margin: 0;
padding: 0;
}
body {
font-size: 100.1%;
font-family: Verdana, "Lucida Sans", Arial;
background-color: #000000;
}
h2 {
font-size:1.5em;
font-weight:normal;
text-decoration:underline;
color:#6969e0;
line-height:1.8em;
word-spacing:0.8mm;
letter-spacing:0.2mm;
margin:10px 0;
}
h3 {
font-size:1.2em;							
font-weight:normal;
color:#6969e0;
line-height:1.5em;
letter-spacing:0.2mm;
margin:10px 0;
}			
h4 { 
font-size:1em;
font-weight:bold;
text-align:left;
margin-bottom:15px;
color:#6969e0;
line-height:2.5em;
border-bottom:3px solid #6969e0;
}
p, li, font {
font-size:1em;
color:#6969e0;
line-height:1.3em;
word-spacing:0.8mm;
}
img {
background-color: green;
}

/* MISSIONEN */
/* --------- */
.mis-ueber-box {
border: solid green;
}
.mis-unten-box {
border: solid blue;
}
.mis-info-box {
border: solid red;
}
img.mis-bild-box {
float:left;
width:100px;
hight:50px;
border: solid orange;
}
.mis-text-box {
padding:0 10px;
margin-left:100px;
border: solid yellow;
}
.floatclear {
clear: rigth;
}
font.mis1 {
font-size:10pt; 
color:#EE0000;	
}	  
font.mis2 {	
font-size:10pt; 
color:#6969E0;	
}	
span.misi {	
font-size:10pt; 
text-align:left; 	
}

/* LINKEIGENSCHAFTEN */
/* ----------------- */
a:link {
font-family:Verdana;
color:#ff6900; 
text-decoration:underline;
}
a:hover {
font-family:Verdana;
font-style:italic;
color:#f40c10;
text-decoration:underline;
}
</style>

</head>

<body>

<h2>Überschrift</h2>
<h3>ZweiteÜberschrift</h3>

<!-- ****************************************** [green Box ANF.] -->
<div class="mis-ueber-box">
<h4>2007</h4>
</div><!-- class="mis-ueber-box" ENDE -->
<!-- ****************************************** [green Box END.] -->


<!-- ****************************************** [blue Box ANF.] -->
<div class="mis-unten-box">

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -1-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>

</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -2-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -3-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -4-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -5-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -6-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -7-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -8-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -9-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

</div><!-- class="mis-unten-box" ENDE -->
<!-- ****************************************** [blue Box END.] -->

<hr />
<p>hier ist neuer inhalt</p>

</body>

</html>
PS.: die Rahmen sind nur für die bessere Darstellung und kommen wieder weg!


Danke im Voraus

Roland
__________________
Webworker
To see what you don't see!
https://www.facebook.com/rsWebdesign4u/
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.01.2008, 20:11
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
  
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard
Servus!

.mis-unten-box:
das braucht eine Breite um zentrieren (mit margin: 0 auto;) zu können, die mis-info-box Boxen können nicht zentrieren, da diese ja nach Links floaten, so muss der umgebende Container zentriert werden.

Du floatest Deine Bilder, floaten sollen aber die Container in denen die Bilder drin sind also mis-info-box braucht den float left.

ich würde bei der Text box darauf verzichten: margin-left. Dadurch rutscht der Text unter das Bild.

.floatclear:
das Teil soll nicht den float right aufheben, denn diesen hast Du ja gar nicht, soll also den clear: both; kriegen. gib dazu noch visibility: hidden; und setzte nach der letzten .mis-info-box eine <hr class="floatclear" /> (Danke Heiko) aber noch innerhalb von .mis-unten-box! sorgt für ein wenig Abstand nach unten und ist unsichtbar und hält die .mis-info-box Dinger im Container mis-unten-box drin.

cu
Geändert von paracelsus (12.01.2008 um 20:14 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.01.2008, 11:40
Benutzerbild von DeltaLeo
Call me Roland!
neuer user
Thread-Ersteller
  
Registriert seit: 15.11.2007
Ort: (D) Niederrhein
Beiträge: 25
DeltaLeo befindet sich auf einem aufstrebenden Ast
Standard
Danke für deine ausführliche Beschreibung, hat mich um 20 Jahre nach vorne versetzt.
Jetzt klappt es bis auf die Zentrierung.

Die Bilder sollen rechts neben sich den Text haben. Damit der besser an sie vorbeifließt habe ich die Bilder bearbeitet und die Höhe auf 120px geändert (Trick 145a „lol“ ).

Die ROTEN boxen machen jetzt genau das was sie tun sollten (Besten dank noch mal „@paracelsus“).

Nur das zentrieren macht noch Schwierigkeiten!
Die ROTEN boxen sollen sich horizontal zentrieren, so das links und rechts von der BLAUEN box der gleiche abstand entsteht.

Hier der neue Code…

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>
	
<title>TestSeite</title>

<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<style type="text/css">

/* HAUPTFORMAT */
/* ----------- */
*{ 
margin: 0;
padding: 0;
}
body {
margin: 150px 140px 0 150px;
font-size: 100.1%;
font-family: Verdana, "Lucida Sans", Arial;
background-color: #000000;
}
h2 {
font-size:1.5em;
font-weight:normal;
text-decoration:underline;
color:#6969e0;
line-height:1.8em;
word-spacing:0.8mm;
letter-spacing:0.2mm;
margin:10px 0;
}
h3 {
font-size:1.2em;							
font-weight:normal;
color:#6969e0;
line-height:1.5em;
letter-spacing:0.2mm;
margin:10px 0;
}			
h4 { 
font-size:1em;
font-weight:bold;
text-align:left;
margin-bottom:15px;
color:#6969e0;
line-height:2.5em;
border-bottom:3px solid #6969e0;
}
p, li, font {
font-size:1em;
color:#6969e0;
line-height:1.3em;
word-spacing:0.8mm;
}
img {
background-color: green;
}

/* MISSIONEN */
/* --------- */
.mis-ueber-box {
border: solid green;
}
.mis-unten-box {
vertical-align: middle;
border: solid blue;
}
.mis-info-box {
float:left;
width:210px;
border: solid red;
}
img.mis-bild-box {
float:left;
width:100px;
height:120px;
border: solid orange;
}
.mis-text-box {
padding:10px;
margin-left:100px;
border: solid yellow;
}
.floatclear {
clear: both;
visibility: hidden;
}
font.mis1 {
font-size:10pt; 
color:#EE0000;	
}	  
font.mis2 {	
font-size:10pt; 
color:#6969E0;	
}	
span.misi {	
font-size:10pt; 
text-align:left; 	
}

/* LINKEIGENSCHAFTEN */
/* ----------------- */
a:link {
font-family:Verdana;
color:#ff6900; 
text-decoration:underline;
}
a:hover {
font-family:Verdana;
font-style:italic;
color:#f40c10;
text-decoration:underline;
}
</style>

</head>

<body>

<h2>Überschrift</h2>
<h3>ZweiteÜberschrift</h3>

<!-- ****************************************** [green Box ANF.] -->
<div class="mis-ueber-box">
<h4>2007</h4>
</div><!-- class="mis-ueber-box" ENDE -->
<!-- ****************************************** [green Box END.] -->


<!-- ****************************************** [blue Box ANF.] -->
<div class="mis-unten-box">

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x120px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -1-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>

</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x120px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -2-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x120px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -3-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x120px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -4-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x120px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -5-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x120px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -6-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x120px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -7-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x120px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -8-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x120px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -9-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<hr class="floatclear" />

</div><!-- class="mis-unten-box" ENDE -->
<!-- ****************************************** [blue Box END.] -->



<p>hier ist neuer inhalt</p>

</body>

</html>
Habe im BODY margin: 150px 140px 0 150px; eingebaut, soll den Außenbereich simulieren

gruß, Roland
__________________
Webworker
To see what you don't see!
https://www.facebook.com/rsWebdesign4u/
Geändert von DeltaLeo (13.01.2008 um 14:24 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 13.01.2008, 18:49
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
  
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard
Hm, nun weiß ich net, ob ich Dich recht verstehe.
Du wills das die roten boxen sich verteilen, aber die blaue Box soll zentriert sein?
Die roten Boxen verteilen sich so, wie Du es ihnen gesagt hast: per float so hoch und soweit links als möglich.
Die blaue Box zentriert mit einer Breite und der Style Angabe
Code:
margin: 0 auto;
cu
Mit Zitat antworten
  #5 (permalink)  
Alt 13.01.2008, 19:49
Benutzerbild von DeltaLeo
Call me Roland!
neuer user
Thread-Ersteller
  
Registriert seit: 15.11.2007
Ort: (D) Niederrhein
Beiträge: 25
DeltaLeo befindet sich auf einem aufstrebenden Ast
Standard
Hallo paracelsus

In der blauen Box entsteht in den meisten Fällen ein rechter Freiraum. Wenn wir diesen nun als 100% ansehen würden, hätte ich gerne, dass sich dieser Freiraum zu 50% links und zu 50% rechts befindet und somit, die roten Boxen insgesamt, und so wie sie sich jetzt verhalten, in der Mitte (horizontal) zentriert sind.

Gruß, Roland
__________________
Webworker
To see what you don't see!
https://www.facebook.com/rsWebdesign4u/
Mit Zitat antworten
  #6 (permalink)  
Alt 13.01.2008, 20:05
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
  
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard
Zitat:
Zitat von DeltaLeo Beitrag anzeigen
Hallo paracelsus

In der blauen Box entsteht in den meisten Fällen ein rechter Freiraum. Wenn wir diesen nun als 100% ansehen würden, hätte ich gerne, dass sich dieser Freiraum zu 50% links und zu 50% rechts befindet und somit, die roten Boxen insgesamt, und so wie sie sich jetzt verhalten, in der Mitte (horizontal) zentriert sind.

Gruß, Roland
Verstehe.

Aber, nach meinem Verständnis der Dinge wird das nicht gehen.
float bedeutet, das das gefloatete Objekt sich soweit wie möglich in die angegebene Richtung und nach oben bewegt.
Gefloate Elemente sind prinzipiell somit aus dem Dokumentenfluss herausgenommen, das umgebende Div "weiß" also nix von den Boxen die drinnen sind.
Deshalb ist der clear ja so wichtig, da sonst - wie gehabt - die Boxen aus dem Container herausragen.
Das einzige was mir einfällt ist, dass Du in Reihen, wo weniger Boxen drin sind, selber weitere einfügst, die eine bestimmte Breite haben, um den Platz zu füllen, da es sich dann aber um leere Elemente handelt ist dies nicht zu empfehlen (Semantischer Nonsense).

cu
Mit Zitat antworten
  #7 (permalink)  
Alt 13.01.2008, 20:21
Benutzerbild von DeltaLeo
Call me Roland!
neuer user
Thread-Ersteller
  
Registriert seit: 15.11.2007
Ort: (D) Niederrhein
Beiträge: 25
DeltaLeo befindet sich auf einem aufstrebenden Ast
Daumen hoch Danke!!!
Zitat:
Zitat von paracelsus Beitrag anzeigen

nach meinem Verständnis der Dinge wird das nicht gehen.
OK!

Muss ich mit Leben…
Wäre schön gewesen, jedoch ist es für jeden user besser, wenn sich die roten Boxen richtig verteilt als wenn der eine nur die Hälfte sehen kann und der andere die Hälfte leer hat.

Danke noch mal für die Hilfe!

Roland it's weekend...
__________________
Webworker
To see what you don't see!
https://www.facebook.com/rsWebdesign4u/
Mit Zitat antworten
  #8 (permalink)  
Alt 13.01.2008, 20:24
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
  
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard
Zitat:
Zitat von DeltaLeo Beitrag anzeigen

Roland it's weekend...
Ich weiß gar nicht was das ist

so long
Mit Zitat antworten
  #9 (permalink)  
Alt 13.01.2008, 21:00
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
  
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard
Hallo Ihr Beiden,
ich bin bloß neugirig, ob ich verstanden habe, was DeltaLeo gerne hätte.
Habe aus Versehen die erst gepostete html-Datei genohmen und ein wenig geändert. Hätte gerne gewust: geht das rein optisch schon in die gewünschte Richtung?
Grüße: Emil
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>
	
<title>TestSeite</title>

<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<style type="text/css">

/* HAUPTFORMAT */
/* ----------- */
*{ 
margin: 0;
padding: 0;
}
body {
font-size: 100.1%;
font-family: Verdana, "Lucida Sans", Arial;
background-color: #000000;
}
h2 {
font-size:1.5em;
font-weight:normal;
text-decoration:underline;
color:#6969e0;
line-height:1.8em;
word-spacing:0.8mm;
letter-spacing:0.2mm;
margin:10px 0;
}
h3 {
font-size:1.2em;							
font-weight:normal;
color:#6969e0;
line-height:1.5em;
letter-spacing:0.2mm;
margin:10px 0;
}			
h4 { 
font-size:1em;
font-weight:bold;
text-align:left;
margin-bottom:15px;
color:#6969e0;
line-height:2.5em;
border-bottom:3px solid #6969e0;
}
p, li, font {
font-size:1em;
color:#6969e0;
line-height:1.3em;
word-spacing:0.8mm;
}
img {
background-color: green;
}

/* MISSIONEN */
/* --------- */
.mis-ueber-box {
border: solid green;
}
.mis-unten-box {
border: solid blue;
width: 650px;			/* GEÄNDERT */
float: left;			/* GEÄNDERT */
position: relative;		/* GEÄNDERT */
left: 50%;			/* GEÄNDERT */
margin-left: -325px;	/* GEÄNDERT */
}
.mis-info-box {
border: solid red;
width: 210px;			/* GEÄNDERT */
float: left;			/* GEÄNDERT */
}
img.mis-bild-box {
float:left;
width:100px;
hight:50px;
border: solid orange;
}
.mis-text-box {
padding:0 10px;
margin-left:100px;
border: solid yellow;
}
.floatclear {
clear: rigth;
}
font.mis1 {
font-size:10pt; 
color:#EE0000;	
}	  
font.mis2 {	
font-size:10pt; 
color:#6969E0;	
}	
span.misi {	
font-size:10pt; 
text-align:left; 	
}

hr { width: 100%; clear: both; }		/* GEÄNDERT */

/* LINKEIGENSCHAFTEN */
/* ----------------- */
a:link {
font-family:Verdana;
color:#ff6900; 
text-decoration:underline;
}
a:hover {
font-family:Verdana;
font-style:italic;
color:#f40c10;
text-decoration:underline;
}
</style>

</head>

<body>

<h2>Überschrift</h2>
<h3>ZweiteÜberschrift</h3>

<!-- ****************************************** [green Box ANF.] -->
<div class="mis-ueber-box">
<h4>2007</h4>
</div><!-- class="mis-ueber-box" ENDE -->
<!-- ****************************************** [green Box END.] -->


<!-- ****************************************** [blue Box ANF.] -->
<div class="mis-unten-box">

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -1-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>

</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -2-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -3-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -4-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -5-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -6-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -7-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -8-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

<!-- ******************************** [red Box ANF.] -->
<div class="mis-info-box">

<!-- ********************** [orange Box ANF.] -->
<img class="mis-bild-box" src="BILD.jpg" alt="Bild: 100x50px" />
<!-- ********************** [orange Box END.] -->

<!-- ********************** [yellow Box ANF.] -->
<div class="mis-text-box">
<font>Mission -9-<br /><font class="mis1">Fahrzeugtyp</font><br /><font class="mis2">Datum</font><br />
<a href="LINK.html" target="_top"><span class="misi">mehr</span></a></font>


</div><!-- class="mis-text-box" ENDE -->

</div><!-- class="mis-info-box" ENDE -->
<!-- ********************** [red Box END.] -->

</div><!-- class="mis-unten-box" ENDE -->
<!-- ****************************************** [blue Box END.] -->

<hr />
<p>hier ist neuer inhalt</p>

</body>

</html>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 14.01.2008, 07:22
Benutzerbild von DeltaLeo
Call me Roland!
neuer user
Thread-Ersteller
  
Registriert seit: 15.11.2007
Ort: (D) Niederrhein
Beiträge: 25
DeltaLeo befindet sich auf einem aufstrebenden Ast
Beitrag
Hallo,

@etux…

…Danke für deine mithilfe!
Das ist aber leider genau der weg, den ich nicht möchte.
Das zentrierte JA!
Wie sich die roten Boxen verhalten NEIN!

Die roten Boxen sollen sich der Benutzerbreite anpassen, wie in meinem letzten Beispiel. Im Ideal fall wären die roten Boxen dabei im blauen Rahmen zusammen zentriert (wie bei dir!), nur da passen sie sich leider nicht mehr an.

Mir ist wichtig, das bei einer 800x600 Auflösung, weniger boxen nebeneinander sind und sich nicht verdecken, sowie bei einer Auflösung von 1600x1200 mehr und die gestammte Breite genutzt wird, die der Nutzer zur Verfügung hat.


Was ich gerne hätte:

Wenn der blaue Rahmen nun 100% Breite hat, welches als Beispiel 720px beträgt, und eine rote Box 200px breit ist, wären drei rote boxen nebeneinander und drei untereinander.
Nun hat der linke Rand, der blauen Box, einen Freiraum „padding“ von 0px und der rechte Rand 120px. Im ideal Fall hätte ich gerne rechts sowie links 60px!

Bei einer breite von 1100px, wären fünf rote boxen nebeneinander und die zweite Reihe hätte noch vier rote Boxen. Links und rechts wäre ein Rand von je 50px!

Das wäre für mich Optimal!!!


Gruß Roland
__________________
Webworker
To see what you don't see!
https://www.facebook.com/rsWebdesign4u/
Mit Zitat antworten
Sponsored Links
Antwort
Seite 1 von 2 1 2

« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

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
frage zur umsetzung (siehe anhang) mmiethe79 CSS 4 01.04.2009 15:10
Float hängt sich durch's padding durch. nick CSS 3 16.01.2008 19:24
3 dynam. Spalten mit Inhaltsüberlauf spacegaier CSS 6 12.10.2007 00:24
Probleme mit Abständen zwischen div´s.... darvida CSS 4 09.07.2005 18:48
Tabellen in <div>-Tags dexter2000 CSS 9 19.05.2005 09:53


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

Datenschutzerklärung - Impressum - Archiv - Nach oben

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023