HILFE: display: inline bzw. block? ich verzweifle

Status
Nicht offen für weitere Antworten.

derheine

Grünschnabel
hallo liebe tutorianer,

ich verzweifle langsam! da ich nicht so ganz genau weiß, wie ich mein problem "nennen" soll, habe ich auch mit der suchfunktion keinen passenden eintrag gefunden... deshalb jetzt mein hilferuf!

ich versuche nun ungefähr zwei stunden, das problem zu lösen, das wie folgt aussieht:
in der angehängten abbildung ist die geplante seite in umrissen zu sehen. bitte nicht von den hintergrundfarben ablenken lassen, die habe ich nur eingebaut um zu verstehen, was da falsch läuft (was ich allerdings nicht rausbekommen habe)!
"test" und "test222" sollen nebeneinander (wie ich dachte inline) als "boxen" angezeigt werden... leider klappt das nicht so ganz. wie in den unten stehenden stylesheets zu sehen, habe ich es mit "display: block" oder auch "display: inline" versucht. auch "float: left" habe ich eingebaut, allerdings kommen immer unterschiedliche, nicht gewollte ergebnisse heraus. der inhalt verschiebt sich zwar, auch unterschiedlich, aber nie so, wie ich es eigentlich möchte! nämlich, das NUR die "boxen" nebeneinander sind und eben nicht alles, was darunter folgt. der komplette inhalt unterhalb der "boxen" verschiebt sich, sobald ich das gewünschte ergebniss erziehle... aaaaah man :mad:

nun die eigentliche frage:
was kann ich tuen, um in einem einzelnen "div" tag, die elemente laut unten stehendem beispiel in reihe darzustellen?

hat jemand eine idee? ich wäre echt dankbar für jede anregung! ;-)

hier nun die einzelnen dateien:

*.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>...</title>

<link rel="stylesheet" type="text/css" media="screen" href="main.css" />


<!-- TEST -->
<link rel="stylesheet" type="text/css" media="screen" href="test.css" />
<!-- TEST -->

</head>

<body>
<div id="c1">
xxx - <a href="#">Login/Logout</a>
<h1><a href="#">xxx</a></h1>
</div>


<div id="infos"> <div id="container">
<div id="infosz"><strong>abc</strong><div id="wichtig">neu</div> abc</div>
<div id="infosz"><strong>abc</strong><div id="wichtig">neu</div> abc</div>
<div id="infosz"><strong>abc</strong><div id="wichtig">neu</div> abc <a href="#">aendern</a></div>
<div id="infosz"><strong>abc</strong> abc <a href="#">angucken</a></div>
<div id="infosz"><strong>abc</strong> abc <a href="#">angucken</a></div>
</div> </div>


<div id="infoboxen"> <div id="container">
<div id="inline"><div id="box">test</div></div>

<div id="inline"><div id="box">test222</div></div>
</div> </div>


<div id="listen"> <div id="container">
id="listen"
</div> </div>


</body>
</html>

main.css
Code:
@charset "utf-8";

body {
	background-color: #ffffff;
	font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
	font-size: 0.75em;
	line-height: 1.5;
	color: #000000;
	padding-top: 31px;
	padding-right: 24px;
	padding-bottom: 20px;
	padding-left: 14px;
}

a, a:visited, a:active {
	color: #000000;
	text-decoration: none;
	font-weight: bold;
}
a:hover {
	background-color: #ed4854;
	color: #ffffff;
}

/*
   grundgeruest
*/
#c1        { padding-bottom: 9px;   }
#infos     { padding-bottom: 9px;   }
#infoboxen { padding-bottom: 18px;  }
#listen    { padding-bottom: 7px;   }
#container { width:          901px; }

/*
   #c1
*/
#c1 h1 {
	font-size: 4.5em;
	line-height: 0.9em;
	text-align: left;
	font-style: normal;
	margin-bottom: 16px;
	padding-bottom: 0px;
	font-weight: bold;
	letter-spacing: -4px;
}
#c1 h1 a, #c1 h1 a:visited, #c1 h1 a:active {
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
	background-color:#ed4854;
}

/*
   infos
*/
#infosz {
	background-color: #000000;
	color: #ffffff;
}
#infos #wichtig {
	text-transform: uppercase;
	display: inline;
	color: #ffffff;
	background-color: #ed4854;
	font-weight: bold;
}
#infos a, #infos a:visited, #infos a:active {
	background-color: #ed4854;
	color: #ffffff;
}

/*
   infoboxen
*/
...

test.css
Code:
#infoboxen { font-size: 1.3em; }
#infoboxen #inline {
/*	display: block;*/
/*	float: left;*/
}
#infoboxen #inline #box {
/*	display: block;*/
/*	float: left;*/
	padding: 4px;
}






/* */
#c1 {
	background-color: blue;
}
/* */
#infos {
	background-color: green;
}
/* */
#infoboxen {
	background-color: yellow;
}
/* */
#listen {
	background-color: grey;
}
/* */
#container { background-color: white; }
 

Anhänge

  • komische_sache.jpg
    komische_sache.jpg
    42,3 KB · Aufrufe: 21
Moin,

ich weiß nicht, in welcher Konstellation du versucht hast, die Blockelemente in einer Zeile nebeneinander auszurichten.

Entweder
CSS:
#infoboxen #inline {
        display: inline;
}
#infoboxen #inline #box {
        float: left; 
        padding: 4px;
}


.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
Code:
<div id="infoboxen"> <div id="container" class="clearfix">
<div id="inline"><div id="box">test</div></div>

<div id="inline"><div id="box">test222</div></div>
</div> </div>
oder
CSS:
#infoboxen #inline {
        float: left;
}
#infoboxen #inline #box {
        padding: 4px;
}


.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
Code:
<div id="infoboxen"> <div id="container" class="clearfix">
<div id="inline"><div id="box">test</div></div>

<div id="inline"><div id="box">test222</div></div>
</div> </div>


Die von mir hinzugefügte Klasse clearfix dient hier zum Beenden der Floats, damit der nachfolgende Inhalt (von #listen) unterhalb der umflossenen Elemente fortgesetzt wird (Quelle: How To Clear Floats Without Structural Markup).

ID-Bezeichner müssen übrigens im HTML-Dokumentbaum eindeutig sein, sprich sie dürfen darin nicht mehrmals vergeben werden - für solch einen Fall ist die Klasse vorgesehen. Siehe hierzu Klassen in Verbindung mit den Elementen div und span und Individualformate definieren.

Achja, der gewählte Farbname "grey" wird mit einem "a" geschrieben (siehe VGA-Farbpalette (16 Farben) mit Farbnamen) - dann klappt's auch im IE mit dem Hintergrund für #listen ;)

Und zum Schluß hab ich noch die Bitte an Dich, auf die Netiquette (Nr.15) bzgl. Deiner durchgängigen Kleinschreibung zu achten - vielen Dank! :)

mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück