Hilfe zum HTML

sash88 · 4. September 2016

Hallo Leute,

ich hoffe hier kann mir weiter geholfen werden, habe
mir schon unzählige Seiten und Videos zum HTML Code angesehen, komme
aber irgendwie nicht so recht weiter, und da ich jetzt auch noch ein
wenig Zeitdruck habe hoffe ich das mir hier weiter geholfen werden kann.
was ich benötige: im Prinzip nur eine Vorlage vom Aufbau her die ich immer wieder verändern kann (Überschrift und Beschreibung).
Sie soll wie nachfolgend beschrieben ausschaun:

- Hintergrund dunkelgrau
- Schrift weiß
- sämtliche "+" und Linien in giftgrün, sodass es damit eben optisch aufgefrischt wird.
- am besten Rechts vom Text einen Block indem ich Bilder einbauen kann.

Jetzt
die Frage ist soetwas einfach zu erstellen, könnte ich es vom Text her
immer wieder ändern, sodass ich eben im prinzip nur immer das Layout
gleich habe??

Was wird von meiner Seite aus gebraucht? Soll ich mal meinen Text posten?
Für jegliche Unterstützung bedanke ich mich vielmals.

MfG
sash
im Prinzip stelle ich mir das ungefähr so vor:

wenn da jemand wirklich Lust hat mir zu helfen, der soll das dann natürlich auch nicht ganz umsonst machen.
so stelle ich mir das vor, eben ein bisschen professioneller.

ich hab mir mal das Programm WYSIWYG runter geladen, damit bekomme ich ja mal halbwegs etwas hin.... Problem bei der ganzen Gechichte, wenn ich den Hintergrund in eine andere Farbe ändere, iwrd es mir hinterher auf Ebay auf der kompletten Seite angezeigt. Wisst ihr wo das Problem liegt?
Hie rmal der Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Unbenannte Seite</title>
<meta name="generator" content="WYSIWYG Web Builder 8 Trial Version - http://www.wysiwygwebbuilder.com">
<style type="text/css">
body
{
background-color: #505050;
color: #000000;
}
</style>
<style type="text/css">
a
{
color: #0000FF;
text-decoration: underline;
}
a:visited
{
color: #800080;
}
a:active
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="http://www.wysiwygwebbuilder.com" target="_blank"><img src="images/builtwithwwb8.gif" alt="WYSIWYG Web Builder" style="position:absolute;left:453px;top:735px;width:88px;height:31px;border-width:0;z-index:250"></a>
</body>
</html>

rantanplan2000 · 6. September 2016

Dein Code überschreibt den Body von eBay, daher müssen alle globalen Befehle mit deinem Container verknüpft werden.
Wenn du ALLE +, egal wo in grün haben willst brauchst du glaube ich Javascript. Alternative mit List-Items, wie im meinem Code.

denk bitte daran deine fotos für das web zu speichern, denn sonst drücken die leute bei deiner auktion weg, wenn es ewig läd.

HTML

<!DOCTYPE html>
<html lang="de">




<head>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Teplate</title>




<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 	                                                         	
<style type="text/css">

	.container-auktion {
	background: #7F7F7F;
	color: #fff;
	margin-top: 30px;
	padding: 25px 20px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 8px;
	box-shadow: 0 0 10px 1px #313131;
	border: 1px solid #01FF00; 
	font-family: 'Roboto', sans-serif; }

	.container-auktion a:link { text-decoration: none; color: #01FF00; }
	.container-auktion a:hover { text-decoration: underline; } 

	.container-auktion ul {
	list-style-position: inside;
	list-style-type: "+ ";
	color: #01FF00;
	}
	.container-auktion ul span {
	color: #fff;
	}

	.container-auktion h1 {
	font-size: 200%;

	padding: 0; margin: 0; 
	text-transform: uppercase;
	text-shadow: 1px 1px #313131;} 

	.container-auktion hr{
	margin: 10px; 
	border:solid #01FF00 1px;
	height:1px;
	}
	article {
	overflow: hidden;
	} 
	article img {
	max-width: 350px;
	border: 1px solid #01FF00;
	box-shadow: 0 0 3px #313131;
	float: left;
	padding: 0;
	margin: 0 15px 15px 0;
	}  

@media only screen and (max-width:480px) {
	article img { width: 100%; margin: 0 0 20px 0; }
	.container-auktion h1 { text-align: center; } }  
@media only screen and (min-width:481px) {
	article img { width: 50%; }}
@media only screen and (min-width:767px) {
	article img { width: 100%; }}  

</style>
</head>   




<body>







<div class="container-auktion">




<article> 
	<img src="http://placehold.it/450x350" alt="bild" />  
	<h1>Überschrift</h1>
	<hr />
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum itaque aspernatur magnam repellat, quas nobis dolores incidunt mollitia. Architecto quo voluptatum ratione minima aperiam itaque dignissimos debitis odit tenetur cupiditate. <a href="#">Ich bin ein link</a> </p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum itaque aspernatur magnam repellat, quas nobis dolores incidunt mollitia. Architecto quo voluptatum ratione minima aperiam itaque dignissimos debitis odit tenetur cupiditate.</p>

	<ul>
    	<li><span>Hallo</span></li>
    	<li><span>Hallo</span></li>
    	<li><span>Hallo</span></li>
    	<li><span>Hallo</span></li>	
	</ul>


</article>







</body>
</html>

Alles anzeigen

Hilfe zum HTML

Jetzt mitmachen!

Teilen