bild CENTRAL halten?(bild immer in der mitte)

gf346g345674h7h3w74h46g4w · 15 April 2010

wie kann ich es machen dass bild / logo immer inder mitte ist? da bei anderen auflösungen als 1024x es nicht mehr in der mitte ist(es ist links)

und es muss immer inder mitte sein

eifnach einen code posten und ich gebe link zu software zum erstellen von fraktalen(kostenlos/ das was man auf professionellen wallpapers sieht)

später werde ich noch eine bessere version von der software geben

threadi · 15 April 2010

Auflösungen sind für Webseiten irrelevant. Da zählt nur der Viewport, der Bereich den der Browser der Webseite zugesteht.

Zentrieren kann man Blockelemente mit

Code:

margin: 0 auto;

Vertikale Zentrierung ist hingegen etwas schwieriger - meinst Du das auch noch? Dann schau dich im Forum mal um, gibt genug Topics dazu.

PS: bin nicht interessiert an irgendeiner Software.

gf346g345674h7h3w74h46g4w · 15 April 2010

ich will dass ganze website zentriert ist

wo soll ich diesen code hier hin einfügen?

Code:

<html><head><title>titel - </title>
</head>

<div align="center"></div>
<img border="0" alt="" src="http://url.de" width="950" height="173" /></div>

<p align="center"><br />
</p>

<body style="background-image:url(bild.png); background-repeat:no-repeat;">



<style type="text/css">
body { background-color:#484848; }

</style>

text
</div></div>

</body></html>

auch wenn auf dieser seite viel fehlt ist es nur eine website mit 3 unterseiten und mit fast keinem text, wo gehört margin: 0 auto; hin? ich benutze wysiswyg bzw kopiere codes von selfhtml da ich nichts von html weiß, ich will diese website, auch wenn mit überflüssigen und fehlerhaftem code(ich weiß nix bessers), machen, diese website interessiert mich nicht aber sie soll da sein

threadi · 15 April 2010

Das ist CSS und der gehört nicht in deinen Code, weil dein Code weit davon entfernt ist HTML zu sein. Bitte schau dir nochmal die Grundlagen an, vor allem das Grundgerüst von HTML: SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Grundgerüst einer HTML-Datei

gf346g345674h7h3w74h46g4w · 15 April 2010

es ist egal was im code steht es soll nur schön aussehen da ist w3 und doctype egal da sie auch so funktioniert und bei mir is alles drin außer doctype, es muss ein aussehender unwichtiger dokument sein der allen verfügbar ist,

wo gehört margin hin? es ist eh kompliziert genug, zeigt selber oder gebt mir ein beispiel wo
margin: 0 auto; fürs zentrieren verantwortlich ist oder wie soll ich es machen dass bild immer in der mitte bleibt

creativ-webdesigns · 15 April 2010

Du musst nicht nur HTML sondern auch noch deutsch lernen glaube ich. Ich muss über deine Sätze echt ein wenig grübeln. Oder bist du zu sehr damit beschäftigt deinen Usernamen im Kopf zu behalten?

Okan Esen · 15 April 2010

Hallo,

hier mal ein Beispiel, wie es funktioniert:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
<head>
	<title>HTML-Dokument</title>
	
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-style-type" content="text/css" />

	<style type="text/css">
		#page {
			width: 500px;
			background-color: #000;
			margin: 0 auto;
		}
		
		#page p {
			color: #fff;
		}
	</style>
</head>
<body>
	<div id="page">
		<p>Test</p>
	</div>
</body>
</html>

creativ-webdesigns · 15 April 2010

Da wird der Text aber nicht zentriert angezeigt, sondern nur der Page div.

gf346g345674h7h3w74h46g4w · 15 April 2010

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Horizontal und vertikal zentriertes Element</title>
<style type="text/css">
#zentriert {
  position:absolute;
  top:50%;
  left:50%;
  width:30em;
  height:20em;
  margin-left:-15em;
  margin-top:-10em;
  border:1px solid #888;
  padding:1em;
}
</style>
</head>
<body>
<div id="zentriert">
<h1>Horizontal und vertikal zentriertes Element</h1>
</div>

<p><a href="../faq.htm#mittig_zentrierte_inhalte">zur&uuml;ck</a></p>
</body>
</html>

bei mir müsste es so sein

#zentriert {
position:fixed;
right:50%;
left:50%;

} aber ich hab es trotzdem nicht geschafft

auch wenn ich alles probiert habe

SELFHTML: Navigationshilfen / Häufig gestellte Fragen (FAQ)

mein source nochmal:

Code:

<html><head><title> titel- </title>
</head>


<body>

<style type="text/css">
#zentriert {
  position:fixed;
  margin-left:auto;
  margin-right:auto;
  left:50%;
  right:50%;
}
</style>


<div id="zentriert">
<div align="center"></div>
<img border="0" alt="" src="http:website.de/1bild.png" width="950" height="173" /></div>

<p align="center"><br />
</p>
</div>

<body style="background-image:url(hintergrund.png); background-repeat:no-repeat;">



<style type="text/css">
body { background-color:#484848; }

</style>

text hier

</body></html>

wie soll ich jetzt das bild und den text immer inder mitte halten?

kann jemand nen code in meinen code reinschreiben?

vitus37 · 15 April 2010

gf346g345674h7h3w74h46g4w schrieb:
es ist egal was im code steht es soll nur schön aussehen da ist w3 und doctype egal da sie auch so funktioniert und bei mir is alles drin außer doctype, es muss ein aussehender unwichtiger dokument sein der allen verfügbar ist,

Eine Seite kann nicht schön aussehen, wenn der Code falsch ist. Meinst du der Browser denkt sich "ach der falsche code ist mir egal, aber ich weiss wie es aussehen soll." - nein tut er bestimmt nicht ;)

Semantisch korrekter HTML-Quellcode hat oberste Priorität. Wenn das Dokument allen verfügbar sein soll, musst du dich auch an die Standards halten.

Strukturiere den Code ersteinmal mit hilfe des Links von threadi und dann fällt das einsetzen des entsprechenden Codes auch viel leichter.

Okan Esen · 15 April 2010

creativ-webdesigns schrieb:
Da wird der Text aber nicht zentriert angezeigt, sondern nur der Page div.

Wo ist das Problem? Ich denke, er ist in der Lage aus "http://www.css4you.de" das rauszusuchen was er braucht?

gf346g345674h7h3w74h46g4w · 15 April 2010

bei css4you steht auch nix von margin oder was bei selfhtml steht

logo.png ist da immer rechts

wie hat er das gemacht?

Code:

[/SIZE][SIZE=1]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>CSS 4 You - The Finest in Stylesheets</title>
<meta name="description" content="CSS-Referenz auf CSS 4 You - The Finest in Stylesheets" />
<meta name="keywords" content="CSS 4 You, CSS for You, CSS 1, CSS 2, CSS Level 1, CSS Level 2, Cascading Stylesheets, Referenzen, Eigenschaften, Property" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="css4you.de" />
<link rel="Stylesheet" type="text/css" href="css/nc4.css" media="screen" />
<link rel="Stylesheet" type="text/css" href="css/screen.css" media="screen" />
<link rel="Stylesheet" type="text/css" href="css/print.css" media="print" />
<!--[if IE]>
<link rel="Stylesheet" href="css/ie.css" type="text/css" />
<![endif]-->
<!--[if lt IE 6]>
<link rel="Stylesheet" href="css/ie5.css" type="text/css" />
<![endif]-->
<style type="text/css">
tr.foot td {
	background-color:#efefef;font-weight:bold;
}

</style>
<link rel="icon" href="/favicon.ico" type="image/ico" />
[/SIZE][SIZE=1]</head>
<body>
<div id="header">
<a id="t" name="t">&nbsp;</a>
<img src="images/logo.png" width="245" height="65" alt="CSS 4 You - The finest in Stylesheets" title="CSS 4 You" />
</div>
<div id="brkr">
 Hier bist Du:
 <span>Home</span>
</div>
<div id="navi">
 <a href="download/index.php">Download</a>&nbsp;|
 <a href="kontakt.php">Kontakt</a>&nbsp;|
 <a href="forum.html">Forum</a>&nbsp;|
 <a href="suche.php">Suche</a>&nbsp;|
 <a href="help.html" title="Hilfe">Hilfe</a>
[/SIZE][SIZE=1]</div>
<div id="navi2">
<img src="images/version.gif" alt="Version 3.1" />
<a href="impressum.html" title="Impressum">Impressum</a>&nbsp;|
<a href="disclaimer.html" title="Haftungsausschluss">Haftungsausschluss</a>&nbsp;|
<a href="linktoc4y.html" title="Links auf CSS 4 You">Links auf CSS 4 You</a>
</div>
<div id="menus">
<h3>Übersichten</h3>
<ul>
<li><a href="browsercomp.html">Browser-Kompatibilität</a></li>
<li><a href="shortref.html">Kurzreferenz</a></li>
[/SIZE][SIZE=1]<li><a href="css-a-z.html">Eigenschaften A-Z</a></li>
<li><a href="az.html">Stichwortverzeichnis</a></li>
</ul>
<h3>Eigenschaften</h3>
<ul>
<li><a href="fontproperty.html">Schrift</a></li>
<li><a href="textproperty.html">Text</a></li>
<li><a href="borderproperty.html">Rahmen</a></li>
<li><a href="outlineproperty.html">Konturen</a></li>
<li><a href="marginproperty.html">Außenabstände</a></li>
[/SIZE][SIZE=1]<li><a href="paddingproperty.html">Innenabstände</a></li>
<li><a href="tableproperty.html">Tabellen</a></li>
<li><a href="listproperty.html">Listen</a></li>
<li><a href="colorproperty.html">Farben</a></li>
<li><a href="backgroundproperty.html">Hintergrundbilder</a></li>
<li><a href="posproperty.html">Positionieren</a></li>
<li><a href="pseudoelproperty.html">Pseudo-Elemente</a></li>
<li><a href="pseudoklproperty.html">Pseudo-Klassen</a></li>
<li><a href="contentproperty.html">Automatische Inhalte</a></li>
[/SIZE][SIZE=1]<li><a href="printproperty.html">Drucklayout</a></li>
<li><a href="auralproperty.html">Sprachausgabe</a></li>
<li><a href="userproperty.html">User Interface</a></li>
<li><a href="mozproperty.html">Mozilla</a></li>
<li><a href="ieproperty.html">Internet Explorer</a></li>
</ul>
<h3>Workshops</h3>
<ul>
<li><a href="wscss/index.html">Wie fange ich an?</a></li>
<li><a href="wslayout1/index.html">Layouten ohne Tabellen</a></li>
[/SIZE][SIZE=1]<li><a href="wsboxmodell/index.html">Boxmodell</a></li>
<li><a href="workshops.html">mehr</a> <img src="images/xnext.gif" width="11" height="7" alt="Weiter" /></li>
</ul>
<h3>Referenzen</h3>
<ul>
<li><a href="refcolorword.html">Farbnamen</a></li>
<li><a href="refcolor216.html">Websichere Farben</a></li>
<li><a href="refcolorsys.html">Systemfarben</a></li>
<li><a href="einheiten.html">Einheiten</a></li>
[/SIZE][SIZE=1]</ul>
<h3>Tipps und Tricks</h3>
<ul>
<li><a href="trickkiste/tr00002.html">Formulare</a></li>
<li><a href="trickkiste/tr00004.html">Dünne Tabellenrahmen</a></li>
<li><a href="trickkiste/tr00012.html">Abgerundeten Ecken</a></li>
<li><a href="trickkiste/tr00024.html">Menüs mit Schatten</a></li>
<li><a href="trickkiste/index.html">mehr</a> <img src="images/xnext.gif" width="11" height="7" alt="Weiter" /></li>
</ul>
</div>
[/SIZE][SIZE=1]<div id="content">
<h1>CSS 4 you - die deutsche Seite für Cascading Stylesheets (CSS)</h1>
<h2>Dies ist eine nahezu komplette CSS-Referenz auf deutsch - ergänzt durch etliche <a href="http://css4you.de/trickkiste/index.html">Tipps, Tricks</a> und andere Referenzen.</h2>
<p>F&uuml;r Anf&auml;nger ist zun&auml;chst
der <a href="wscss/index.html">CSS-Workshop</a> empfehlenswert.<br />
Dort werden die Grundlagen Schritt für Schritt dargestellt.</p>
[/SIZE][SIZE=1]<p>Wir hoffen, dass Euch diese Seiten weiterhelfen.</p>
<p id="pageup"><a href="#t">nach oben</a></p>

<div id="footer">
&copy;2004 - 2009 css4you.de<br />
Letzte Änderung: 21.09.2009<br />
<a class="ext" href="http://validator.w3.org/check/referer">XHTML 1.0 Strict</a><br />
<a class="ext" href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.css4you.de/css/standard.css">CSS 2.1</a><br />
</div>

[/SIZE][SIZE=1]</div>
</body>
</html>
[/SIZE][SIZE=1]

gf346g345674h7h3w74h46g4w · 15 April 2010

einfachere seite:
position:fixed: Positionsart: Beispiel zur CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

logo ist da imer rechts egal welche auflösung, was hat er verwendet und ist es fixed oder absolute?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>position:fixed: Positionsart: Beispiel zur CSS-Referenz auf CSS 4 You - The Finest in Stylesheets</title>
<meta name="description" content="position:fixed: Positionsart: Beispiel zur CSS-Referenz auf CSS 4 You - The Finest in Stylesheets" />
<meta name="keywords" content="position:fixed, Positionsart, CSS 4 You, CSS for You, CSS 1, CSS 2, CSS Level 1, CSS Level 2, Cascading Stylesheets, Referenz" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="css 4 you" />
<link rel="Stylesheet" href="../css/example.css" type="text/css" />
<!--[if IE]>
<link rel="Stylesheet" href="../css/testsiteie.css" type="text/css" />
<![endif]-->
<!--[if lt IE 6]>
<link rel="Stylesheet" href="../css/testsiteie5.css" type="text/css" />
<![endif]-->
<style type="text/css"><!--
#div1 {
padding:5px;
width:300px;
height:80px;
background-color:#efefef;
border:1px solid #000000;
}
// --></style>
</head>
<body>
<p><a class="prev" href="../position.html" title="position:fixed (Positionsart):  Zurück zur Beschreibung">Zurück</a><a href="http://www.css4you.de" title="CSS 4 You: Beispiel für: position:fixed (Positionsart)"><img id="logo" src="../images/logo_expl.png" width="245" height="65" alt="CSS 4 You Logo" /></a></p>
<h1 id="h1">position:fixed: Positionsart</h1>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<p>Ach, was für ein interessanter Inhalt</p><p>Ach, was für ein interessanter Inhalt</p>
<div id="div1" style="position:fixed; left:80px; top:150px;">
Dieser <em>&lt;div&gt;</em>-Container sollte von links um 80 Pixel und um 150 Pixel von
oben verschoben sein und nicht mitgescrollt werden.</div>
</body>
</html>

gf346g345674h7h3w74h46g4w · 18 April 2010

ich hab den code aus meiner adnerer webseite kopiert die noch einfacher ist als was ich machen werde, die hab ich durch beepworld wysywyg editor gemacht , weiß aucnicht wieso da alles zentriert ist obwohl da kein

<style type="text/css">
#zentriert {
margin: 0 auto;
margin-left:auto;
margin-right:auto;
position:absolute;
left:50%;
right:50%;
}
</style>

steht

da ist nur

<p style="text-align: center;"><span style="color: rgb(255, 255, 255);"></span></p><p style="text-align: center;"><img alt=""

src="................................." border="0"></p><p style="text-align: center;"><span style="font-family:

Arial;"> </span></p><p style="text-align: center;"><span style="font-family: Arial;"><span style="color: rgb(255, 255,

255);">

ich werde den link zu der software nicht posten weil man hier keine antworten bekommt und html zu lernen ist so wie japanisch zu lernen man muss krank sein oder niedrigen iq haben um darüber nachzu denken, man muss es seit geburt haben oder nicht, ich den link nicht posten obwohl code einfach war ohne margin oder sonstwas zu benutzen(mit ihr geht es auch nicht)

auch wenn ihr selber schon diese softwre finden könnt, es gibt schönere, weil ich pc damit was zum "füttern " gebe (rendern) investiere ich da nicht viel zeit rein

gf346g345674h7h3w74h46g4w · 21 April 2010

ich brauchte nur

<center>

einzufügen

und niemand wußte es

http://www.apophysis.org/

threadi · 21 April 2010

<center> ist keine Lösung. Dieses HTML-Element gilt als Deprecatet und wird vermutlich auch nicht mehr lange von Browsern unterstützt. Damit fabrizierst Du letztlich auch nur noch mehr Probleme also Du löst.

gf346g345674h7h3w74h46g4w · 23 April 2010

dann

<div align="center">

threadi · 24 April 2010

Auch falsch da HTML nicht zur Gestaltung dient und Zentrierungen mit CSS vorgenommen werden sollen. Also:

Code:

text-align: center;

bild CENTRAL halten?(bild immer in der mitte)

gf346g345674h7h3w74h46g4w

Guest

threadi

Moderator

gf346g345674h7h3w74h46g4w

Guest

threadi

Moderator

gf346g345674h7h3w74h46g4w

Guest

creativ-webdesigns

Mitglied

Okan Esen

Neues Mitglied

creativ-webdesigns

Mitglied

gf346g345674h7h3w74h46g4w

Guest

vitus37

Senior HTML'ler

Okan Esen

Neues Mitglied

gf346g345674h7h3w74h46g4w

Guest

gf346g345674h7h3w74h46g4w

Guest

gf346g345674h7h3w74h46g4w

Guest

gf346g345674h7h3w74h46g4w

Guest

threadi

Moderator

gf346g345674h7h3w74h46g4w

Guest

threadi

Moderator

Neueste Beiträge