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
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
main.css
test.css
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
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; }