nicht angemeldet
Hallo zusammen
Ich möchte meine neue Homepage wie folgt mit Flexboxen gestallten:
Das einzige was ich hinkriege ist ein grosser grauer Rahmen. Mir sind die einzelnen Boxen zu nahe beieinander und die inneren Rahmen fehlen ganz.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="shortcut icon" type="image/x-icon" href="/robbisoft_logo.ico">
<link rel="icon" type="image/gif" href="/robbisoft_logo.gif" sizes="32x32">
<title>robbisoft</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
<SCRIPT Language="JavaScript" src="program.js">
</SCRIPT>
</head>
<body>
<inhalt class="box">
<p class="A">
<script>
document.writeln( menu( "Impressum" ) )
</script>
</p>
<p class="B">
<div class"textbox">
<p class="header">
<titel>Impressum</titel>
</p>
<p class"text">
<text>
In der Informatik bin ich vielfältig interessiert. Ich beherrsche die Programmiersprachen C++, Java und weitere. Im weitern habe ich Kenntnisse in HTML, XML und Java-Script. Die Hilfedateien wurden mit dem HTML Help WorkShop von Microsoft erstellt. Die in dieser Homepage vorgestellten Programme wurden alle mit dem RAD Studio Tokyo 10.2 entwickelt.
</br></br>
Meine Freizeit widme ich meiner Familie. Für den Ausgleich zur Arbeit mache ich viel Sport. Ich schwimme regelmässig bei der SLRG in Bern mit. Weiter singe ich in einem klassischen Chor.
</br></br>
Gibt es Fragen zur Programmierung oder meinen Programmen oder suchen Sie einen vielseitigen und tüchtigen Mitarbeiter, dann melden Sie sich unter der folgenden E-Mail Adresse.
</br>
<a href="mailto:support@robbisoft.ch" title="Mail an den Support senden">support(at)robbisoft.ch</a>
</br></br>
</text>
</p>
<p class="footer">
<fus>letzte Änderung :
<SCRIPT>
document.writeln(modifyString() + "<BR>");
</SCRIPT>
</fus>
</p>
</div>
</p>
</inhalt>
</body>
</html>
und
.main {
display: block;
min-height: 25em;
/* für IE */
background: #c4ced3;
border-color: #8a9da8;
}
.box{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
margin: 0.25em;
padding: 0.25em;
border: 0.1em solid #ccc;
border-radius: 0.5em;
}
.box div.A{
order: 1;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
align-self: stretch;
min-width: 0;
min-height: auto;
}
.box div.B{
order: 2;
flex-grow: 3;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
min-width: 0;
min-height: auto;
}
.textbox{
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
margin: 0.25em;
padding: 0.25em;
border: 0.1em solid #ccc;
border-radius: 0.5em;
}
.textbox div.header{
order: 1;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
align-self: stretch;
min-width: 0;
min-height: auto;
}
.textbox div.text{
order: 1;
flex-grow: 3;
flex-shrink: 1;
flex-basis: auto;
align-self: stretch;
min-width: 0;
min-height: auto;
}
.textbox div.footer{
order: 1;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
align-self: stretch;
min-width: 0;
min-height: auto;
}
titel
{font-stretch:expanded;
font-weight:bold;
font-size:x-large;
font-family:"Comic Sans MS";
color:maroon}
ueberschrift
{font-stretch:expanded;
font-weight:bold;
font-size:xx-large;
color:maroon}
.rahmen
{ border:0.1em solid #aaaaaa;}
fus
{font-stretch:condensed;
font-weight:normal;
font-size:small;
font-style:italic;}
text
{font-weight:normal;
font-size:medium;
color:black;
font-family:Verdana, Helvetica, "Times New Roman", Arial, Geneva;
}
td
{border:0.1em solid;
border-color:#05aa02}
table
{border:0.1em solid;
border-collapse:collapse;
border-color:#05aa02}
.ohne
{border:0.2em solid;
border-color:#ffffff}
menuhel
{font-weight:normal;
font-style:italic;
font-size:medium;
color:gray}
menudunkel
{font-weight:normal;
font-style:normal;
font-size:medium;
color:black}
sektor
{position: fixed;
width: 80px;
height: 180px;
top: 10px;
left: 10px;}
div.scrollmenu {
background-color: Azure;
overflow: auto;
white-space: nowrap;
width: 70em;
height:22em;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 0.5em;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: yellow;
}
Was muss ich ändern damit meine Homepage meinen Wünschen entspricht?
Gruss Renato
Gunnar Bittersmann
Henry
Tabellenkalk
marctrix
Matthias Apsel
MudGuard