zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie lautet der code?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.01.2018, 14:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.07.2017
Beiträge: 8
Xerxes2017 befindet sich auf einem aufstrebenden Ast
Standard Wie lautet der code?

Hallo, da ich gerade mit html und css experimentiere, möchte ich wissen, ob man einen Text in einem bestimmten Abstand vom linken Seitenrand platzieren kann und wenn ja, wie lautet der code dazu?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.01.2018, 15:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Für Abstände gibt es margin und/oder padding.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.01.2018, 15:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.07.2017
Beiträge: 8
Xerxes2017 befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank, aber wie wird das eingebunden, die Google Suche ergab:
HTML-Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>padding-left</title>
    <style>

      p { width: 30em; padding-left: 100px; border: 1px solid red; }

    </style>
  </head>
  <body>
    <p>... Textabsatz mit 100 Pixel Innenabstand nach links ...</p>
  </body>

Mein Text lautet
Zitat:
Herzlich willkommen
Mit Zitat antworten
  #4 (permalink)  
Alt 17.01.2018, 15:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Elemente haben auch Standardmäßig einen Abstand. Kann man gut erkennen, wenn man zB nur Elemente ohne eigenes Styling auf die Seite gibt, wie zB:
Code:
<h1> Startseite </h1>
<p> Hier steht Text </p>
<p> Ich bin ein zweiter Paragraph </p>
Da siehst du, dass die Elemente nicht "aufeinander picken" sondern einen Abstand zueinander (und auch zum Rand) haben. Diese Abstände können pro Browser unterschiedlich sein.
Du kannst generell die Abstände für alle Elemente auf 0 setzen, dann musst du sie nur überall wieder neu definieren.

Code:
* {
  margin: 0;
  padding: 0;
}
Mit Zitat antworten
  #5 (permalink)  
Alt 17.01.2018, 16:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.07.2017
Beiträge: 8
Xerxes2017 befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für Deine Mühe.
Ich habe mal ein bisschen experimentiert und folgenden code erstellt
HTML-Code:
<style>table {
    margin-left: 2em;/
}
</style>
</head><body topmargin="0" marginwidth="0" marginheight="0" leftmargin="0" rightmargin="0" bottommargin="0"><div class="Stil6" align="center"><p><table width="600" border="1" bgcolor="#FFFF00" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">Herzlich willkommen </th>
  </tr>
</table>
Der Text
Zitat:
Hezlich willkommen
sollte in der Mitte der Seite sein. Leider rücken auch die folgenden Elemente um die 2em nach rechts. Das sollte nicht sein. Da muß ich noch lange Zeit experimentieren.
Mit Zitat antworten
  #6 (permalink)  
Alt 17.01.2018, 16:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Schmeiße alles was du im letzten Post geschrieben hast, weg. Tabellenlayout stammt aus dem letzten Jahrtausend. auch diese topmargin etc. brauchst du alles nicht.

Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>padding-left</title>
    <style>

      p { width: 30em; padding-left: 100px; border: 1px solid red; }
     * {margin: 0; padding: 0;}
    </style>
  </head>
  <body>
    <p>... Textabsatz mit 100 Pixel Innenabstand nach links ...</p>
  </body>
btw, wie lernst du HTML/CSS? Das sollte eigentlich Grundwissen sein, aber es scheint mir, du lernst aus (sehr) veralteten online tutorials?

Edit:
wenn du den Text zentriert haben willst, dann reicht eventuell auch text-align: center; aus. Das Problem dabei ist: Hast du jetzt zwei Elemente, die du zentrieren willst, oder mehrere Bilder + Text + Listen + .... dann funktioniert das nicht mehr.
Mit Zitat antworten
  #7 (permalink)  
Alt 17.01.2018, 17:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.07.2017
Beiträge: 8
Xerxes2017 befindet sich auf einem aufstrebenden Ast
Standard

Ich habe mir das Wissen aus Tutorials und durch Studieren der Quelltexte anderer Webseiten beigebracht, z.T. schon vor mehr als 10 Jahren. Die damals erstellte Website war zwar nach heutigen Maßstäbe unmodern, aber heute würde ich das nicht mehr zusammenbringen.
Die Url der gegenwärten Seite:
Malerei und Fotografie
Ich will die gegenwärtige Seite überrarbeiten. Zeit spielt dabei keine Rolle.
hier der Quelltext der damaligen Seite:
HTML-Code:
<html>
<head>

<title></title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="author" CONTENT="Günter Leipfinger">
<META NAME="publisher" CONTENT="Günter Leipfinger">
<META NAME="copyright" CONTENT="Günter Leipfinger">
<META NAME="keywords" CONTENT="Malerei,Fotografie, Digitalkamera, Digitalfotografie, Fotos, Aquarelle, Bilder, Ölgemälde, Acryl, Acrylbilder, Kuenstler,">
<META NAME="description" CONTENT="Der Autor gibt einen Einblick in sein künstlerisches Schaffen in den Bereichen Malerei und Fotografie.">
<META NAME="page-topic" CONTENT="Kultur">
<META NAME="page-type" CONTENT="Private Homepage">
<META NAME="audience" CONTENT="Alle">
<META NAME="robots" CONTENT="INDEX,FOLLOW">
<link rel="SHORTCUT ICON" href="file:///C|/Users/Guenter/Desktop/images/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="ROR" href="file:///C|/Users/Guenter/Desktop/ror.xml" />
<script type="text/javascript">
<!--
function PopupFenster() {
  F = window.open("copyright.htm","Popup","width=400,height=430");
}
// -->
</script>


<style type="text/css">
<!--
body {
	background-color: #CDC1C5;
	/* [disabled]margin-left: -4px; */
	margin-top: -4px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url();
}
body,td,th {
	font-size: 10pt;
}


.Stil9 {
	color: #cccccc;
	font-size: 14pt;
	font-weight: bold;
}
.Stil10 {font-size: 9pt; color:#FFF;}

-->
</style>


<style type="text/css">
<!--
.Stil15 {font-size: larger}
.Stil17 {font-size: 24px}
.Stil21 {
	color: #CCCCCC;
	font-weight: bold;
}
a:link {
	color: #FFF;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
	color: #FFF;
}
a:hover {
	text-decoration: overline underline;
	color: #EEEE00;
}
a:active {
	text-decoration: none;
}
-->


.Stil23 {color: #f0f8ff}
span.info { outline:1px solid; background-color:#CDC1C5; padding:4px; margin:2px; color:#333456; font-family: Geneva, Arial, Helvetica, sans-serif; font-weight:bold;}


h1 {
	color: #009900;
}
h2 {
	color: #009900;
}
.Stil30 {
	font-size: 14pt;
	font-family: "Times New Roman", Times, serif;
	color: #FF3300;
	font-weight: bold;
}
</style>



</head>

<body><center>
 
</center>


<table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="16%" height="80" bgcolor="#333456"><div align="center">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div></td>
    <td width="68%" bgcolor="#333456"><div align="center"><img src="images/gl_banner5.jpg" width="468" height="60" alt="banner"></div></td>
    <td width="16%" bgcolor="#333456"><div align="center"></div></td>
  </tr>
  
  
</table>

<div align="center">
  <table width="100%" border="0">
    <tr>
      <td width="29%"><div align="center">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div>
        <table width="200" border="0" cellspacing="5" cellpadding="5">
        <tr>          </tr>
      </table></td>
      <td width="42%"><div align="center">
        <table width="200" border="0" cellspacing="5" cellpadding="5">
          <tr>
            <td><center>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
            </center></td>
</tr>
          <tr> </tr>
        </table>
        <div align="center"></div>
        <div align="center"> </div></td>
      <td width="29%"><center>
        <param name="movie" value="images/flash/frohe.weihnachten2.swf">
        <param name="quality" value="high">
        
        <param name="swfversion" value="6.0.65.0">
        <!-- Dieses param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die aktuelle Version von Flash Player herunterzuladen. Wenn Sie nicht wünschen, dass die Benutzer diese Aufforderung sehen, löschen Sie dieses Tag. -->
        
        <param name="expressinstall" value="Scripts/expressInstall.swf">        <!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
        <!--[if !IE]>--><!--<![endif]-->
<div align="center"></div></td>
    </tr>
  </table>
  <table width="600" border="0" cellspacing="5" cellpadding="5">
    <tr>
      <td align="center"></td>
    </tr>
  </table>
  <table width="600" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#333456">
    <tr>
    <td><table width="100%" border="0" align="center" cellpadding="2" cellspacing="3" bgcolor="#cdc1c5">
      <tr bgcolor="#333456">
        <td height="40" colspan="3"><div align="center" class="Stil17 Stil21">Startseite</div></td>
      </tr>
      <tr>
        <td colspan="3">
		<div align="center">Sie sind Besucher Nr.
         <a href='http://www.instacasinos.com/'></div>		 </td>
      </tr>
      <tr>
        <td colspan="3" align="middle" valign="center" bordercolor="#333333" STYLE="BORDER-RIGHT: rgb(51,52,86) 1pt solid; BORDER-TOP: rgb(51,52,86) 1pt solid; BORDER-LEFT: rgb(51,52,86) 1pt solid; BORDER-BOTTOM: rgb(51,52,86) 1pt solid; BACKGROUND-COLOR: rgb(193,201,136)" 
         ><div align="center" class="Stil15"><span class="Stil17">Kunst ist Zusammenarbeit zwischen Gott und dem Künstler, und je weniger der Künstler dabei tut, desto besser. </span><br>
            <span class="Stil10">(André Gide) </span></div>          
          <p align="center"><span class="Stil17">Kunst ist schön, macht aber viel Arbeit.</span><span class="Stil5"><br>
          <span class="Stil10">(Karl Valentin)</span></span></p></td>
        </tr>
      <tr>
        <td colspan="3">&nbsp;</td>
      </tr>
      <tr bgcolor="#333456">
        <td height="90" colspan="3" STYLE="BORDER-RIGHT: rgb(53,0,0) 1pt solid; BORDER-TOP: rgb(53,0,0) 1pt solid; BORDER-LEFT: rgb(53,0,0) 1pt solid; BORDER-BOTTOM: rgb(53,0,0) 1pt solid; BACKGROUND-COLOR: rgb(89,91,150)" 
         ><div align="center" class="Stil9 Stil23">
          <p>Herzlich willkommen auf meiner Homepage<br>
  "Malerei und Fotografie".<br>
            Ich wünsche Ihnen einen angenehmen Aufenthalt.</p>
          </div></td>
      </tr>
      <tr>
        <td colspan="3"></td>
      </tr>
      <tr>
        <td colspan="3" height="5"></td>
      </tr>
      <tr bgcolor="#CDC1C5">
        <td height="40" colspan="3"><div align="center">
	
          
          </div>		
          <div align="center">
            <table width="250" height="105" border="0" cellpadding="3" cellspacing="0">
              <tr>
                <td>
                <p align="center" class="info Stil30">Was gibt es Neues?</p>
                <div align="center" STYLE="BORDER-RIGHT: #333456 1pt solid; BORDER-TOP: #333456 1pt solid; BORDER-LEFT: #333456 1pt solid; BORDER-BOTTOM: #333456 1pt solid; BACKGROUND-COLOR:#EEE0E5;" >
				
		<script language="" type="text/javascript">

/***********************************************
* Pausing updown message scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//configure the below five variables to change the style of the scroller
var scrollerdelay='4000' //delay between msg scrolls. 3000=3 seconds.
var scrollerwidth='450px'
var scrollerheight='200px'
var scrollerbgcolor='#EEE0E5'
//set below to '' if you don't wish to use a background image
var scrollerbackground='images/background.jpg'

//configure the below variable to change the contents of the scroller
var messages=new Array()


messages[1]="<center><font face='helvetica' color='#ffffff' size='3'><br><br><br><br><b>Lassen Sie sich vom Zauber der<a href='photoalben/orchideen/album/index.htm' target='_self'><br>Orchideen</a><br>begeistern</b></font>"

messages[0]="<center><font face='helvetica' color='#F0F8FF' size='3'><br><br><br><br><b>Neu: Photoalben <a href='photoalben/photoalben.html' target='_self'>hier</a></b></font>"







///////Do not edit pass this line///////////////////////

var ie=document.all
var dom=document.getElementById

if (messages.length>2)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",scrollerdelay)
setTimeout("move2(document.main.document.second)",scrollerdelay)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.top=parseInt(scrollerheight)
tlayer.document.write(messages[i])
tlayer.document.close()
if (i==messages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",scrollerdelay)
setTimeout("move1(document.main.document.first)",scrollerdelay)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.top=parseInt(scrollerheight)
tlayer2.document.write(messages[i])
tlayer2.document.close()
if (i==messages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){
tdiv.style.top=0+"px"
setTimeout("move3(tdiv)",scrollerdelay)
setTimeout("move4(second2_obj)",scrollerdelay)
return
}
if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){
tdiv.style.top=parseInt(tdiv.style.top)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.top=parseInt(scrollerheight)
tdiv.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){
tdiv2.style.top=0+"px"
setTimeout("move4(tdiv2)",scrollerdelay)
setTimeout("move3(first2_obj)",scrollerdelay)
return
}
if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){
tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px"
setTimeout("move4(second2_obj)",50)
}
else{
tdiv2.style.top=parseInt(scrollerheight)
tdiv2.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (ie||dom){
first2_obj=ie? first2 : document.getElementById("first2")
second2_obj=ie? second2 : document.getElementById("second2")
move3(first2_obj)
second2_obj.style.top=scrollerheight
second2_obj.style.visibility='visible'
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.top=parseInt(scrollerheight)+5
document.main.document.second.visibility='show'
}
}

window.onload=startscroll

</script>



<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+' ;background-image:url('+scrollerbackground+')">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:1px;">')
document.write(messages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px;visibility:hidden">')
document.write(messages[dyndetermine=(messages.length==1)? 0 : 1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>		
				</div></td>
              </tr>
            </table>
          </div></td>
        </tr>
      <tr>
        <td colspan="3">&nbsp;</td>
      </tr>
      <tr>
        <td width="150" STYLE="BORDER-RIGHT: rgb(51,52,86) 1pt solid; BORDER-TOP: rgb(51,52,86) 1pt solid; BORDER-LEFT: rgb(51,52,86) 1pt solid; BORDER-BOTTOM: rgb(51,52,86) 1pt solid; BACKGROUND-COLOR: #333456; font-size:9pt; a:link="color:#333456" a:visited="color:#333456"; 
         ><div align="center" class="Stil10"><A href="javascript:PopupFenster()">© Copyright 
G.Leipfinger</a></div></td>
        <td width="300" STYLE="BORDER-RIGHT: rgb(51,52,86) 1pt solid; BORDER-TOP: rgb(51,52,86) 1pt solid; BORDER-LEFT: rgb(51,52,86) 1pt solid; BORDER-BOTTOM: rgb(51,52,86) 1pt solid; BACKGROUND-COLOR: #333456; color:#FFF; font-size:9pt";
         ><div align="center">optimiert für eine Auflösung von 1024 x 768 </div></td>
        <td width="150" STYLE="BORDER-RIGHT: rgb(51,52,86) 1pt solid; BORDER-TOP: rgb(51,52,86) 1pt solid; BORDER-LEFT: rgb(51,52,86) 1pt solid; BORDER-BOTTOM: rgb(51,52,86) 1pt solid; BACKGROUND-COLOR: #333456" 
         ><div align="center" class="Stil10"><script language="JavaScript">

function datum(){ 
mn=new Array("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember") 
d=new Date(document.lastModified) 
m=mn[d.getMonth()] 
t=d.getDate() 
jj=d.getYear() 
j=(jj>=2000)?jj:((jj<80)?jj+2000:jj+1900) 
dat=(t+". "+m+" "+j)} 
datum(); document.write("Letzte Änderung:<br> " + dat + "") 

</script>
        </div></td>
      </tr>
     
      </table></td>
  </tr>
</table>
</div>

<table align="center" width="200" border="0" cellspacing="5" cellpadding="5">
  
</table>

<center><a href='http://www.psychiaterbuch.at/'><script type="text/javascript" src="http://www.fastcounter.net/de/home/counter/74758/t/10"></script></center>
</body>
</html>
Mit Zitat antworten
  #8 (permalink)  
Alt 17.01.2018, 17:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Ja, man sieht, dass der Code veraltet und heutzutage unbrauchbar ist.
Warum nicht zB Wordpress dafür verwenden? Dann kannst du dich um den Inhalt kümmern und hast trotzdem eine zeitgemäß aussehende Website.
Anpassen mittels CSS kannst du Wordpress dann immer noch (wenn du die Zeit dafür hast)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Firefox rendert Seite nicht als XHTML Code helloworld (X)HTML 4 03.05.2012 22:27
Was bedeutet folgender Code? web334 (X)HTML 3 24.07.2011 16:10
HTML mit PHP Code aus Datenbank auslesen + ausführen Garlandt Serveradministration und serverseitige Scripte 14 01.05.2011 13:45
Riesen Abstand aber nur bei dem ersten Eintrag (beim gleichen Code) StarSt0rm CSS 5 27.08.2007 16:01


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:02 Uhr.