nicht angemeldet
Dynamische DIV konstellation
Hallo,
ich versuche mich zur Zeit ein bisschen in CSS einzuarbeiten, nun kommt schon die erste Hürde das Design das ich erstellt habe Passt soweit, doch wenn mein Inhalt (soll später mal eine aus PHP erzeugte Tabelle werden) breiter als das Browserfenster wird geht es über das Design hinaus.
Die Sache ist nur die, #contents soll sich dynamisch der generierten Tabelle anpassen sprich mit vertikalen Scrollbalken,
Dann noch eine Frage
Wenn ich jetzt angenommen für die Tabelle einen div nehme, soll ich die Spalten dann auch als div machen sprich verschachtelte divs oder wie macht man das normal.
<center>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</center>
<html>
<head>
<style type="text/css">
#container{
margin-top: 5px;
width: 100%;
min-width: 800px;
background-color: red;
border: 1px solid black;
}
#banner{
height: 70px;
background-color: blue;
}
#menueline{
height: 30px;
background-color: green;
}
a.menuebutton{
float: left;
width: 120px;
background: yellow;
valign: middle;
margin-top:3px;
margin-left: 3px;
text-align: center;
text-valign: middle;
font-family: Arial;
font-size:10pt;
text-decoration:none;
color:#000000;
}
a.menuebutton:link { color:#000000; background-color:blue; }
a.menuebutton:visited { color:#000000; background-color:blue; }
a.menuebutton:hover { color:#000000; background-color:green; }
a.menuebutton:active { color:#000000; background-color:green; }
#infoleiste{
margin:0px auto;
margin-top:20px;
width: 85%;
height: 60px;
background-color: #CC9999;
border-top:4px solid #EE0000;
border-bottom:4px solid #EE0000;
}
#configmenue{
margin:0px auto;
margin-top:20px;
width: 400px;
height: 30px;
background-color: yellow;
border: 4px solid #ffffff;
}
#contents {
margin-top:20px;
margin-right: 20px;
margin-left: 20px;
background-color: aqua;
}
#footer {
margin-top: 20px;
clear: both;
height: 30px;
background-color: lime;
}
</style>
</head>
<body>
<div id="container"> <!--Ist ein schwarzer Rahmen -->
<div id="banner">
</div>
<div id="menueline">
<div class="menuebutton">
<a class="menuebutton" href="index.htm">Home</a>
<a class="menuebutton" href="extras/index.htm">Extras</a>
<a class="menuebutton" href="links/index.htm">Links</a>
<a class="menuebutton" href="mailto:name@domain.de">E-Mail</a>
<a class="menuebutton" href="links/index.htm">Links</a>
<a class="menuebutton" href="mailto:name@domain.de">E-Mail</a>
</div>
</div>
<div id="infoleiste"></div>
<div id="configmenue"></div>
<div id="contents">
php generierte Tabelle
</div>
<div id="footer"></div>
</div>
</body>
</html>
Ich hoffe mir kann jemand hilfreiche Tipps geben.
Danke im Voraus
Gruß Jonny F.
-
ich versuche mich zur Zeit ein bisschen in CSS einzuarbeiten, nun kommt schon die erste Hürde das Design das ich erstellt habe Passt soweit, doch wenn mein Inhalt (soll später mal eine aus PHP erzeugte Tabelle werden) breiter als das Browserfenster wird geht es über das Design hinaus.
Die Sache ist nur die, #contents soll sich dynamisch der generierten Tabelle anpassen sprich mit vertikalen Scrollbalken,
http://www.google.ch/search?ie=UTF-8&oe=UTF-8&num=50&q=Multicolumns+Layout
http://intensivstation.ch/templates/<html>
Spezifiziere immer zuerst einen Doctype, am Besten von der Variante strict oder mindestens transitional mit DTD-Adresse.
also z.B.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">Ich gehe davon aus, dass Deutsch deine Document-Content-Sprache.
<head>
Das erste Element in head sollte sein
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">... oder welches Encoding auch immer deine Seiten haben.
<style type="text/css">
oder besser:
<link rel="stylesheet" type="text/css" href="yourfilenamehere.css" media="screen">
<link rel="stylesheet" type="text/css" href="yourfilenamehere.css" media="print">mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Danke das hat mich schon mal ein Stück weitergebracht.
Hab aber noch eine Frage und zwar ich möchte gerne drei Inhalte nebeneinander haben also links en icon in der mitte text und rechts auch nochmal text, kann ich des so machen oder gibt es da noch lukrativere möglichkeiten.
div = eine Zeile
<div id="infoleiste">
<a style="float:left; margin-left:7%; line-height:60px;" >bild</a>
<a style="margin-left:300px; margin-left:29%; line-height:60px;">Inventarisierte Computer</a>
<a style=" float:right; margin-right:7%; line-height:60px;">Login status</a></div>
Gruß
Jonny F.
-
oder gibt es da noch lukrativere möglichkeiten.
Ja, z.B. die a-Elemente einfach inline lassen. die sind ohnehin "nebeneinander"
-
So jetzt zu meinem nächsten Problem
<div id="infoleiste">
<a class="inflinks" >bild</a>
<a class="infmitte">Inventarisierte Computer</a><a class="inflogouticon" href="logout.php">
<img src="logout.png" TITLE="Logout" border="0" width="25" height="25">
</a>
<a class="infloginstatus">
Eingeloggt:
</a></div>
Wie bekomme ich es hin, dass das Bild rechts Zentriert ist links neben "Eingeloggt:"
.inflogouticon{
float:right;
line-height:60px;
}.infloginstatus{
float:right;
margin-right:10%;
line-height:60px;
font-size:10pt;
font-family:Arial;
}.inflinks{
float:left;
margin-left:8%;
line-height:60px;"
}.infmitte{
margin-left:300px;
margin-left:29%;
line-height:60px;font-size:18pt;
}
-
-
-