KFKA-Webprogrammierung

cusertrumpl · 25.06.10

Hallo,
Mir ist aufgefallen, dass wir gefühlte 100 KFKA-Threads haben. Aber genau in diesem Forum gibt es keinen, obwohl man ihn hier doch so dringend bräuchte. Man sucht oft für die Lösung eines Problems stundenlang, obwohl die Lösung bildlich vor einem steht. Beispiel

Mit nicht unbedingt einem Problem möchte ich den Anfang machen und fragen warum in der standard-index.html von iWeb "http://www.w3.org" steht, und was das zu bedeuten hat.

<?xml version="1.0" encoding="UTF-8"?><!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><title></title><meta http-equiv="refresh" content="0;url= Website/Home.html" /></head><body></body></html>

Fallout · 25.06.10

Schon mal google dazu befragt? Das ist der Verein, der Standards in Sachen HTML, XHTML, CSS etc. setzt...

http://de.wikipedia.org/wiki/World_Wide_Web_Consortium

Das World Wide Web Consortium (kurz: W3C) ist das Gremium zur Standardisierung der das World Wide Web betreffenden Techniken. Es wurde am 1. Oktober 1994 am MIT Laboratory for Computer Science in Cambridge (Massachusetts) gegründet.

cusertrumpl · 05.03.11

Hallo nochmal,
ich halte immer noch an der Idee des Web-KFKA fest.
Ich versuche den Inhalt einer Seite zu mittels css positionieren.
- Bei hohem Bildschirm soll die kleine Seite zentriert erscheinen.
- Bei größerem Inhalt soll die Seite auf einem kleinen Bildschirm/Fenster (Netbook) scrollbar sein. Bei folgendem Code wird bei einem kleinen Fenster die Seite oben und unten abgeschnitten.
Vielen Dank im Voraus!

Code:

position:absolute;
  	top:50%;
	left:50%;
	margin-left:-450px;
 	margin-top:-330px;

dasmaeh · 05.03.11

Bezieht sich das auf einen div-Container? Poste bitte mal deine HTML-Struktur dazu, so verstehe ich das Problem nicht. Wobei negative Margins mir schon etwas komisch vorkommen.

cusertrumpl · 05.03.11

Meinst du das hier?

Code:

#test {
	cursor:default;
	clear:none;
	background-attachment:scroll;
	font-family:Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#FFFFFF;
	font-size:32pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:none;
	letter-spacing:0;
	line-height:1;
	text-align:left;
	text-indent:0;
	border:0px solid #000000;
	margin:0;
	padding:0;
}

.bodyarea {
	position:absolute;
	visibility:visible;
	cursor:default;
	clear:none;
	height:392px;
	width:670px;
	background-image:none;
	background-color:transparent;
	background-attachment:scroll;
	opacity:100;
	font-family:Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#000000;
	font-size:10pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:none;
	letter-spacing:0;
	line-height:1;
	text-align:left;
	text-indent:0;
	left:171px;
	top:130px;
	border:0px solid #000000;
	margin:0;
	padding:34px 0px 0px 25px;
}

.bodyarea h1 {
	visibility:visible;
	cursor:default;
	clear:none;
	background-image:none;
	background-color:transparent;
	background-attachment:scroll;
	opacity:100;
	font-family:Arial, sans-serif;
	font-weight:bold;
	font-style:normal;
	color:#336699;
	font-size:14pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:none;
	letter-spacing:0;
	line-height:1;
	text-align:left;
	text-indent:0;
	border-left:0px solid #000000;
	border-right:0px solid #000000;
	border-top:0px solid #000000;
	border-bottom:1px dotted #000000;
	margin:0;
	padding:5px 0px 5px 0px;
}

.bodyarea p {
	visibility:visible;
	cursor:default;
	clear:none;
	background-image:none;
	background-color:transparent;
	background-attachment:scroll;
	opacity:100;
	font-family:Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#4C4C4C;
	font-size:8pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:none;
	letter-spacing:0;
	line-height:1.4;
	text-align:justify;
	text-indent:0;
	border:0px solid #000000;
	margin:0;
	padding:0;
}

.comment {
	visibility:visible;
	cursor:default;
	clear:none;
	background-image:none;
	background-color:transparent;
	background-attachment:scroll;
	opacity:100;
	font-family:Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#666666;
	font-size:8pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:none;
	letter-spacing:0;
	line-height:1;
	text-align:left;
	text-indent:0;
	border:0px solid #000000;
	margin:0;
	padding:0;
}

.copyright {
	position:absolute;
	top:544px;
	left:138px;
	visibility:visible;
	cursor:default;
	clear:none;
	height:23px;
	width:405px;
	background-image:none;
	background-color:transparent;
	background-attachment:scroll;
	opacity:100;
	font-family:Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#4C4C4C;
	font-size:8pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:none;
	letter-spacing:0;
	line-height:1;
	text-align:center;
	text-indent:0;
	border:0px solid #000000;
	margin:0;
	padding:0;
}

.cornerimage {
	position:absolute;
	top:11px;
	left:11px;
	visibility:visible;
	cursor:default;
	clear:none;
	height:100px;
	width:150px;
	background-image:url(mandarin/leaf.gif);
	background-repeat-x:no-repeat;
	background-repeat-y:no-repeat;
	background-repeat:no-repeat;
	background-position:0% 0%;
	background-position-x:0%;
	background-position-y:0%;
	background-color:transparent;
	background-attachment:scroll;
	opacity:100;
	font-family:Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#000000;
	font-size:10pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:none;
	letter-spacing:0;
	line-height:1;
	text-align:left;
	text-indent:0;
	border:0px solid #000000;
	margin:0;
	padding:0;
}

.header {
	position:absolute;
	top:11px;
	left:172px;
	visibility:visible;
	cursor:default;
	clear:none;
	height:100px;
	width:717px;
	background-image:url(mandarin/bg1c.gif);
	background-repeat-x:repeat;
	background-repeat-y:no-repeat;
	background-repeat:repeat-x;
	background-position:0% 0%;
	background-position-x:0%;
	background-position-y:0%;
	background-color:transparent;
	background-attachment:scroll;
	opacity:100;
	font-family:Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#000000;
	font-size:10pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:none;
	letter-spacing:0;
	line-height:1;
	text-align:left;
	text-indent:0;
	border:0px solid #000000;
	margin:0;
	padding:0;
}

.header h1 {
	visibility:visible;
	cursor:default;
	clear:none;
	background-image:none;
	background-color:transparent;
	background-attachment:scroll;
	opacity:100;
	font-family:Arial, sans-serif;
	font-weight:bold;
	font-style:normal;
	color:#FFFFFF;
	font-size:20pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:none;
	letter-spacing:0;
	line-height:1;
	text-align:left;
	text-indent:0;
	border:0px solid #FFFFFF;
	margin:40px 0px 0px 10px;
	padding:5px 0px 5px 0px;
}

.header h2 {
	visibility:visible;
	cursor:default;
	clear:none;
	background-image:none;
	background-color:transparent;
	background-attachment:scroll;
	opacity:100;
	font-family:Arial, sans-serif;
	font-weight:bold;
	font-style:normal;
	color:#FF9900;
	font-size:9pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:none;
	letter-spacing:0;
	line-height:1;
	text-align:left;
	text-indent:0;
	border:0px solid #000000;
	margin:0px 0px 0px 10px;
	padding:0;
}

.mainbox {
	position:absolute;
  	top:50%;
	left:50%;
	margin-left:-450px;
 	margin-top:-330px;
	visibility:visible;
	cursor:default;
	clear:none;
	height:650px;
	width:900px;
	background-image:none;
	background-color:#FFFFFF;
	background-attachment:scroll;
	opacity:100;
	font-family:Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#000000;
	font-size:10pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:none;
	letter-spacing:0;
	line-height:1;
	text-align:left;
	text-indent:0;
	border:0px solid #000000;
	padding:0;
}

.sidebar {
	position:absolute;
	top:122px;
	left:11px;
	visibility:visible;
	cursor:default;
	clear:none;
	height:457px;
	width:150px;
	background-image:none;
	background-color:#000000;
	background-attachment:scroll;
	opacity:100;
	font-family:Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#000000;
	font-size:10pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:none;
	letter-spacing:0;
	line-height:1;
	text-align:left;
	text-indent:0;
	border:0px solid #000000;
	margin:0;
	padding:56px 0px 0px 0px;
}

.sidebarsection {
	position:relative;
	float:none;
	left:0;
	top:0;
	visibility:visible;
	cursor:default;
	clear:none;
	height:180px;
	width:150px;
	background-image:url(mandarin/bg1c.gif);
	background-repeat-x:repeat;
	background-repeat-y:no-repeat;
	background-repeat:repeat-x;
	background-position:0% 0%;
	background-position-x:0%;
	background-position-y:0%;
	background-color:transparent;
	background-attachment:scroll;
	opacity:100;
	font-family:Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#000000;
	font-size:10pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:none;
	letter-spacing:0;
	line-height:1;
	text-align:left;
	text-indent:0;
	border:0px solid #000000;
	margin:0;
	padding:0;
}

.sidebutton {
	position:relative;
	float:none;
	visibility:visible;
	cursor:default;
	clear:none;
	height:25px;
	width:139px;
	background-image:none;
	background-color:transparent;
	background-attachment:scroll;
	opacity:100;
	font-family:Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#E6E6E6;
	font-size:10pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:none;
	letter-spacing:0;
	line-height:1.81;
	text-align:left;
	text-indent:0;
	left:0;
	top:2px;
	border-left:0px solid #FBFF00;
	border-right:0px solid #FF00FF;
	border-top:0px solid #000000;
	border-bottom:1px dotted #4C4C4C;
	margin:0;
	padding:0px 0px 0px 10px;
}

.sidebutton:hover {
	cursor:default;
	clear:none;
	background-color:#4C4C4C;
	background-attachment:scroll;
}

.sidebutton a {
	visibility:visible;
	cursor:pointer;
	clear:none;
	background-image:none;
	background-color:transparent;
	background-attachment:scroll;
	opacity:100;
	font-family:Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#DFDFDF;
	font-size:10pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:underline;
	letter-spacing:0;
	line-height:1;
	text-align:left;
	text-indent:0;
	border:0px solid #000000;
	margin:0;
	padding:0;
}

.simpleframe {
	visibility:visible;
	cursor:default;
	clear:none;
	background-image:none;
	background-color:transparent;
	background-attachment:scroll;
	opacity:100;
	font-family:Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
	color:#000000;
	font-size:10pt;
	text-shadow:transparent 0px 0px 5px;
	text-decoration:none;
	letter-spacing:0;
	line-height:1;
	text-align:left;
	text-indent:0;
	border:1px dotted #000000;
	margin:0;
	padding:0;
}

body {
	background-image:url(mandarin/bg1b.gif);
	background-repeat-x:repeat;
	background-repeat-y:no-repeat;
	background-repeat:repeat-x;
	background-position:0% 0%;
	background-position-x:0%;
	background-position-y:0%;
	background-color:#DFDFDF;
	background-attachment:scroll;
}

Der Code ist von Flux. bis auf die entsprechende Stelle. Die Ich geändert haben möchte, weil Die Seite an die Obere Kante geklatscht schaut bei einem 24 zöller einfach doof aus.

"Problem" ist, dass der Scrollbalken ganz oben, aber der Header abgeschnitten ist.

Gibst da einen Trick

dasmaeh · 06.03.11

Das war der komplette CSS-Code, ich dachte eher an den HTML-Quelltext, aber geht auch.
Ich vermute mal, dass das Problem die negative margin-top ist. Das heißt ja nichts anderers, als dass das Element 330px höher positioniert wird, als normalerweise üblich, auch wenn dort das Fenster längst aufgehört hat. Wenn ich dich richtig verstanden habe, möchtest du nichts anderes, als dass sich der Seiteninhalt vertikal zentriert. Ich würde das mal so ähnlich probieren, wie beim horizontalen Zentrieren, mit

Code:

margin-top:auto;
margin-bottom:auto;

Ich bin mir aber nicht sicher, ob sich der Trick aus der Horizontalen so einfach auf die Vertikale übertragen lässt. Schließlich hat man meistens feste Breiten, aber nicht unbedingt feste Höhen.
Eine andere Möglichkeit, wäre u.U. die margin-top prozentual festzulegen, weiß aber auch nicht ob das so ohne weiteres funktioniert.

cusertrumpl · 08.03.11

Vielen Dank nochmal.
Leider funktioniert das nicht. Vielleicht ist der Grund dafür, dass die Seite am Hintergrund ausgerichtet wird.
Wenn ich den top befehl auf 50% lass, dann ist oben ein Riesen Rand (den ich mit dem Minus kompensiert hab), wenn ich ihn weg lasse, klatscht die Seite oben dran.
Noch irgend eine Idee?
Ich kann mal den HTML-Code Posten, falls das was helfen sollte.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html><head>
		<!-- Flux Header Custom Code Start--><!-- Flux Header Custom Code End-->
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="author" content="" />
		<meta name="generator" content="Flux 1.2.4" />
		<!-- Start of StyleSheet Definitions -->
		<link rel="stylesheet" type="text/css" href="mandarin.css" />
		<!-- End of StyleSheet Definitions -->
		<script type="text/javascript" src="javascript/prototype.js" ></script>
		<script type="text/javascript" src="javascript/scriptaculous.js" ></script>
		<script type="text/javascript" src="javascript/effects.js" ></script>
		<title></title>
	</head><body style="left:11px; top:-2px; " >
		<div class="mainbox" >
			<div class="cornerimage" >
			</div>

			<div class="header" ><h1><span>Mandarin : .</span></h1><h2><span>The Free CSS Template with an Orange Background.</span></h2>
			</div>

			<div class="sidebar" >
				<div class="sidebutton" ><a href="page2.html" >Home</a>
				</div>

				<div class="sidebutton" >Members<br/><br/>
				</div>

				<div class="sidebutton" >Downloads<br/>
				</div>

				<div class="sidebutton" >Pictures<br/>
				</div>

				<div class="sidebutton" >Impressum<br/>
				</div>

				<div class="sidebutton" ><br/>
				</div>

				<div class="sidebarsection" >
				</div>

			</div>

			<div class="bodyarea" ><h1><span>This is a Header</span><span class="comment" > 12.28.06 // Comment</span></h1><p><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer euismod ante non diam. Sed eleifend odio sed quam. Sed vulputate, turpis at tincidunt porttitor, est elit consequat metus, non dignissim augue mauris quis arcu. Phasellus faucibus blandit eros. Curabitur porttitor ante non est. Maecenas dolor. Aenean egestas sem. Class aptent taciti sociosqu ad litora torquent per conubia hfgh dfghs hymenaeos. Sed suscipit, nisi sit amet pharetra malesuada, sem velit laoreet sem, vitae iaculis diam neque consequat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt eros non quam. Mauris a magna sit amet libero accumsan auctor.</span></p><h1><span>This is a Header </span><span class="comment" >12.24.06 // Comments (0)</span></h1><p><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer euismod ante non diam. Sed eleifend odio sed quam. Sed vulputate, turpis at tincidunt porttitor, est elit consequat metus, non dignissim augue mauris quis arcu. Phasellus faucibus blandit eros. Curabitur porttitor ante non est. Maecenas dolor. Aenean egestas sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed suscipit, nisi sit amet pharetra malesuada, sem velit laoreet sem, vitae iaculis diam neque consequat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt eros non quam. Mauris a magna sit amet libero accumsan auctor.</span><span class="Apple-style-span" style="color:rgba(255,0,0,0.000000); line-height:13px; font-size:13px; " >a</span></p></div>

			<div class="copyright" ><p><span>® 2011 Ludwig Fuhr</span></p>
			</div>

		</div>

	


</body></html>

joro · 11.03.11

Hallo,
hier ein wenig CSS:

Code:

[B]html, body {
    height:100%;
    margin: 0;
}[/B]

[B]#zaubertrick {
    float: left;
    height: 50%;
    margin-top: -325px;
    width: 1px;
}[/B]
.mainbox {
    background-color: #FFFFFF;
    background-image: none;
    border: 0 solid #000000;
   [B] clear: left;[/B]
    color: #000000;
    cursor: default;
    font-family: Arial,sans-serif;
    font-size: 10pt;
    font-style: normal;
    font-weight: normal;
    height: 650px;
    letter-spacing: 0;
    line-height: 1;
   [B] margin: 0 auto;[/B]
    opacity: 100;
    padding: 0;
    [B]position: relative;[/B]
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    text-shadow: 0 0 5px transparent;
    visibility: visible;
    width: 900px;
}

Und im HTML fügst Du einen neuen Div ein, welches vor deiner mainbox liegt:

Code:

<div id="zaubertrick"></div>
<div class="mainbox">
...

Habs jetzt nur kurz im Firefox mit Firebug zusammengebaut, scheint aber zu funktionieren.

Liebe Grüße,
joro

Suche

Suche

KFKA-Webprogrammierung

cusertrumpl

Thurgauer Weinapfel

Fallout

Fießers Erstling

cusertrumpl

Thurgauer Weinapfel

dasmaeh

Stechapfel

cusertrumpl

Thurgauer Weinapfel

dasmaeh

Stechapfel

cusertrumpl

Thurgauer Weinapfel

joro

Braeburn

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)