Neustart der Missions-Homepage
lima-city → Forum → Die eigene Homepage → Homepage Allgemein
administration
anregung
blocken
container
definieren
demo
display
header
http
image
inhalt
kenntnis
kopf
list
mission
navigation
position
text
url
versuch
-
Hallo zusammen,
ich habe vor längerer Zeit auf Lima-City FTP-Volumen, SQL usw. bekommen und dann versucht, per CMS unsere Homepage der Mission damit umzustellen. Da ich aber ein Greenhorn in bezug auf HTML,CSS und natürlich auch bezüglich Scripts bin, war der Versuch etwas kläglich.
Zurzeit beinhaltet die Seite ein Kopfbild mit Logo und Titel, darunter befindetet sich zweizeilig die Navigation. Anschließend kommt der Inhalt.
Nach Absprache mit den Teamkollegen unserer Tagesstätte (wir arbeiten freiwillig ohne Entgelt im e.V.) soll nun die Navigation links fix stehen (nicht scrollbar). Der Kopf sowie der jeweilige Inhalt sollen in etwa 780 - 800 px (zentriert im verbleibenden Platz) betragen und scrollbar sein.
Nun habe ich einen Versuch gemacht mit Frames. Das Ergebnis war mangels Kenntnissen mangelhaft. Die Startseite wird zwar richtig mit Buttons und Rahmen angezeigt, sobald ich jedoch zur nächsten Seite wechseln will, kommt nur eine senkrechte Rahmenlinie dazu, ansonsten passiert nichts.
Ich denke allerdings, daß eine Lösung mit Containern wesentlich besser wäre, bin aber etwas ratlos, wie ich diese korrekt in der CSS-Datei definieren soll. Die vorhandene "1.css" ist mir nicht zur Gänze verständlich, sodaß ich auch hier meine Bedenken habe, Teile zu löschen oder zu ergänzen.
Deshalb hoffe ich auf Hilfe von Eurer Seite. Da ich schon richtung 60 gehe, lerne ich derzeit gewissermaßen andersrum. Ich sehe ein fertiges Produkt bzw. bekomme erklärt wie man es definiert und verstehe dann auch besser den Syntax. Vielleicht kann mir jemand von Euch die Unterstützung dazu geben.
Vielen Dank schon im Voraus -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Moin!
Bei css4you gibt es einige, gut dokumentierte Musterlyouts, die als Vorlage frei verwendbar sind. Dieses könnte für deine Vorstellungen passen.
Wenn Du dazu weitere Erklärungen benötigst, einfach fragen. ;)
FatFreddy
-
Danke für die Anregung, habe bei CSS4YOU schon einiges gelesen. Bin ja dort über SELFHTML gelandet. Aber wie gesagt sind die Definitionen, so wie ich sie mir für die zukünftige Homepage vorstelle, nicht in der Form präsent. Ich bräuchte daher Anregungen, wie die Startseite generell und die 1.css zu definieren sind.
-
Hm... nochmal, um ales sicherzustellen:
Du hast einen Header
Dann links eine Navi und rechts daneben den Content.
Und jetzt willst du, dass die Navi und der Header fixed sind? Und der Content soll aber scrollbar bleiben.?
Es wäre sehr hilfreich, wenn du mal den Code (CSS und oder HTML) hier rein stellt oder uns einen Link zu deinem aktuellen Versuch zur Verfügung stellst.
mfg nikic -
die derzeitige Version ist unter http://mission-hamburg.lima-city.de zu begutachten. Wie gesagt, ich habe die Administration letztes Jahr übernommen und hatte bis dahin keine Ahnung von HTML und CSS.
Neu soll folgendes werden:
Navigation:
links, Containerbreite etwa 200px (also 200,*)
nicht scrollbar
Kopf und Inhalt:
daneben rechts, scrollbar, mit einer Textweite von 800px
Hier nun die aktuelle 1.css
body {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
margin:10px 5px;
padding:0 0 0 5px;
background: url(backgrounds/paper1.gif) scroll;
/* background:#ffcc99; */
text-align:center;
}
.page_wrap {
position:relative;
width:780px;
margin:5px auto;
padding:0 0 0 0;
text-align:center;
background:#ffffff url(images/header.png) no-repeat;
border-left:5px solid #cccccc;
border-right:5px solid #cccccc;
border-top:5px solid #cccccc;
}
.header_text {
position:relative;
clear:none;
width:770px;
height:22px;
margin:70px 0 20px 0;
padding:0 0 0 0;
background:transparent;
color:#ffffff;
text-align:right;
}
.leftnav {
position:relative;
clear:both;
width:210px;
height:100%;
margin:0 0 0 0;
padding:0 0 0 0;
background:#00cc00;
font-size:.8em;
border-top:1px solid #666666;
}
.container {
position:relative;
clear:both;
width:760px;
margin:10px 0 0 10px;
padding:10px 10px 10px 10px;
background:#ffffff;
color:#000000;
text-align:left;
}
.container p {
margin:0 5px 0 5px;
padding:0 0 0 0;
}
.box_right {
position:relative;
float:right;
clear:both;
width:200px;
margin:0 0 5px 10px;
padding:0 10px 0 10px;
background:#999999;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.7em;
}
.box_left {
position:relative;
float:left;
clear:both;
width:200px;
margin:0 10px 0 0;
padding:0 10px 0 10px;
background:#999999;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.7em;
}
.box_right p {
margin:5px 5px;
}
.box_left p {
margin:5px 5px;
}
.box_cnr_top {
background:url(images/cnr_tr.gif) no-repeat top right;
margin:0 -10px 0 -10px;
}
.box_cnr_bottom {
background:url(images/cnr_br.gif) no-repeat top right;
margin:0 -10px 0 -10px;
}
img.cnr {
width:8px;
height:8px;
border:none;
display: block !important;
}
.footer {
position:relative;
clear:both;
width:780px;
height:10px;
margin:10px 0 0 0;
padding:4px 0 4px 0;
background:#ffffff bottom no-repeat;
font-size:.8em;
text-align:center;
border-bottom:3px solid #cccccc;
}
.unten {
font-size: 10px;
color:#CCCCCC;
}
/* top navigation bar */
#nav ul{
padding:0 0 0 0;
margin:0 0 0 0;
white-space: nowrap;
font-size:1.1em;
color:#ffffff;
float:left;
width:100%;
background:#99ff33 url(images/topnav_bg_green.gif);
list-style:none;
}
#nav ul li{
display:inline;
list-style:none;
}
#nav ul li a{
margin: 0 0 0 0;
padding: .25em 2em .3em 2em;
background:#99ff33 url(images/topnav_bg_yellow.gif);
color: #000000;
text-decoration:none;
float: left;
border-right:1px solid #cccccc;
}
#nav ul li a:hover{
background:#999999 /*url(images/topnav_bg_greem.gif)*/;
color: #ffffff;
text-decoration:none;
border-right:1px solid #cccccc;
}
/* links */
a {color:#224B99; text-decoration:none}
a:hover {color:#224B99; text-decoration:none}
#box_right a {
color:#000000;
text-decoration:underline;
}
#box_right a:hover {
color:#E39243;
text-decoration:none;
}
#box_left a {
color:#000000;
text-decoration:underline;
}
#box_left a:hover {
color:#E39243;
text-decoration:none;
}
#unten a {
color:#cccccc;
text-decoration:none;
}
#unten a:hover {
color:#cccccc;
text-decoration:none;
}
/* fonts and colors */
h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:20px;
letter-spacing:.2px;
text-transform:capitalize;
margin:0 0 0 0;
padding:0 0 0 0;
}
h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#666666;
font-size:16px;
text-transform:capitalize;
font-weight:bold;
padding:0 0 0 0;
margin:0 0 -6px 0;
}
h3 {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#65764B;
font-size:1.1em;
text-transform:capitalize;
font-weight:bold;
padding:0 0 0 0;
margin:0 0 -8px 0;
}
.box_right h3 {
font-size:10px;
margin:0 0 .5em 0;
}
.box_left h3 {
font-size:10px;
margin:0 0 .5em 0;
}
.grey {
color:#999999;
}
/* images */
img {
border:none;
}
.right img {
position:relative;
float:right;
padding:5px 5px 5px 5px;
margin:5px 2px 2px 5px;
}
.left img {
position:relative;
clear:none;
float:left;
padding:0 0 0 0;
margin:5px 5px 5px 5px;
}
/* zoom function */
div.zoom{position:absolute;top:0;right:0;width:38px;height:5px;}
/*#pic a.zoom1 img{border:0;} */
div.zoom a.zoom2{text-decoration:none;border:0;}
div.zoom a.zoom2:hover{text-decoration:none;background-color:#F7F7F7;border:0;}
/* workarounds and hacks */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} -
Mal sehen, ob ich dich richtig verstanden habe.
"Nicht scrollbar" soll heißen "an fester Position auf dem Bildschirm immer sichtbar"?
Also so: http://fatfreddy.lima-city.de/demo/css2spaltigb.htm
Eine Aufteilung mit durchgehendem Header, fände ich ansprechender: http://fatfreddy.lima-city.de/demo/css2spaltigb.htm -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
