habe mich mit diesem Thema zwar noch nie beschäftigt, aber habe aus neugier mal ge"googelt".
Meinst du soetwas : http://wowslider.com/de/ ?
habe mich mit diesem Thema zwar noch nie beschäftigt, aber habe aus neugier mal ge"googelt".
Meinst du soetwas : http://wowslider.com/de/ ?
Habe es soeben nochmals bei mir in DW eingefügt. Diesmal mit ausgelagerter CSS (URL habe ich für mich lokal in der HTML angepasst)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS2</title>
</head>
<link rel="stylesheet" style="text/css" href="style.css" />
<body>
<div id="wrapper">
<header id="header">
<h1>Seitentitel</h1>
</header>
<div id="main">
<menu id="menu">
</menu>
<div id="contempt">
</div>
</div>
<footer id="footer">
</footer>
</div>
</body>
</html>
Alles anzeigen
und hier die CSS
body{ background-color:black;
}
#wrapper{
width: 800px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 32px;
}
#header{
width:800px;
height:150px;
background-color:grey;
border-radius:15px;
}
#header h1{
text-align:center;
font-size:60px;
padding-top:38px;
}
#main{
width:800px;
}
#menu{
margin-top:10px;
width:300px;
height:400px;
float:left;
background-color:grey;
border-radius:15px;
}
#contempt{
margin-top: 10px;
width: 450px;
height: 400px;
float: right;
background-color: grey;
border-radius: 15px;
}
#footer{
clear: both;
width: 800px;
height: 30px;
background-color: grey;
border-radius: 5px;
}
Alles anzeigen
ich erhalte nun folgendes Bild :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<style>
body{ background-color:black;
}
#wrapper{
width: 800px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 32px;
}
#header{
width:800px;
height:150px;
background-color:grey;
border-radius:15px;
}
#header h1{
text-align:center;
font-size:60px;
padding-top:38px;
}
#main{
width:800px;
}
#menu{
margin-top:10px;
width:300px;
height:400px;
float:left;
background-color:grey;
border-radius:15px;
}
#contempt{
margin-top: 10px;
width: 450px;
height: 400px;
float: right;
background-color: grey;
border-radius: 15px;
}
#footer{
clear: both;
width: 800px;
height: 30px;
background-color: grey;
border-radius: 5px;
}
</style>
<head>
<title>CSS2</title>
</head>
<link rel="stylesheet" style="text/css" href="http://localhost/style.css" />
<body>
<div id="wrapper">
<header id="header">
<h1>Seitentitel</h1>
</header>
<div id="main">
<menu id="menu">
</menu>
<div id="contempt">
</div>
</div>
<footer id="footer">
</footer>
</div>
</body>
</html>
Alles anzeigen
Hi,
ich bins selbst Anfänger im bereich HTML und CSS, anfangs hatte ich den fehler gemacht auch immer Div's zu nehmen. Daraufhin habe ich den Hinweis hier im Forum erhalten mit Main, Nav, Header, Footer etc. zu arbeiten.
Ich habe grad mal ein paar Div's bei dir umbenant, und dann die Breite des Content-Felder kleiner gemacht. Und schon hat es funktioniert.
Tut mir leid dass ich es nicht genau erklären kann was bzw. warum ich es so gemacht habe. Wie gesagt, bin noch anfänger und probiere mich einfach nur durch
Vllt liegt an der "manuellen" zoom konfiguration welches man mit gedrückter "STRG"-Taste und dem Scrollrad einstellen kann... Drück einfach mal Strg + 0. (Beim Internet Explorer geht es mit dem Numpad komischerweise nicht ! Da musst die Ziffer über den Buchstaben nehmen.)
Habe es mal hochgeladen...
Für solche effekte oder allgemein für Intros sind ist wie vom vorposter bereits schon geschrieben Flash sehr empfehlenswert. Ob es anderweitig möglich ist weis ich nicht.
Als ich damals versucht habe mit Flash ein wenig zu experimentieren habe ich SwishMax entdeckt. Ich persönliche finde es da ein wenig einfacher im vergleich zu Adobe Produkten. Adobe bietet zwar viele Werkzeuge und möglichkeiten, aber SwishMax war für meine bedürfnisse vollkommen ausreichend.
Damit könntest du sogar die komplette Homepage erstellen.
swishzone[dot]com
Gruß z1000
Habe mal ein wenig weiter gemacht, kleinigkeiten verändert. Ein paar sachen hinzugefügt etc.
Nun habe ich noch ein kleines problem. Ich denke nachdem dass gelöst ist, sollte das Grundgerüst stehen
In FireFox und Google Chrome sieht die Seite ganz gut aus... siehe hier :
Im Internet Explorer (11) "verrutscht" dieser weise Balken (ein eingefügtes Bild) unter der Navigation weit nach unten weg. Siehe hier :
Hier nochmals die Quellcodes, habe nun auch die CSS ausgelagert.
<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8">
<title>Titeltext :-)</title>
<style type="text/css">
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
color: #FFF;
}
</style>
<head>
<link rel="stylesheet" type="text/css" href="CSS/design.css".css" />
</head>
<body>
<div id="seite">
<header id="header">
<p><img src="Bilder/mercedes.png" alt="" id="auto"/><a href="index.html"><img src="Bilder/logo.png" alt="" id="logo"/></a><img src="Bilder/head_text2.png" alt="" width="300" height="17" id="head_text2"/><img src="Bilder/head_text1.png" alt="" width="325" height="20" id="head_text1"/><a href="index.html"><img src="Bilder/domain.png" alt="" width="209" height="12" id="domain"/></a></p>
</header>
<nav id="nav"><span class="fluid nav" style="font-size: 150%"><a href="neuigkeiten.html">Neuigkeiten</a> - <a href="bio.html">Bio/Geschichte</a> - <a href="leistungen.html">Leistungen</a> - <a href="dinoc.html">3M DI-NOC</a> - <a href="galerie.html">Galerie</a> - <a href="referenzen.html">Referenzen</a> - <a href="kontakt.html">Kontakt</a> - <a href="links.html">Links</a></span></nav>
<div id="left">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>TEXT !!!</p>
</div>
<main id="main">
<p><img src="Bilder/unternav.png" alt="" width="100%" height="2.7%" id="wb"/></p>
<p>TEXT TEXT TEXT !!! </p>
<p> </p>
<p> </p>
<p>TEXT TEXT TEXT !!! </p>
<p> </p>
<p> </p>
<p> </p>
<p>TEXT TEXT TEXT !!! </p>
<p> </p>
<p> </p>
<p> </p>
<p>TEXT TEXT TEXT !!! </p>
<p> </p>
<p> </p>
<p> </p>
<p>TEXT TEXT TEXT !!! </p>
<p> </p>
<p> </p>
<p> </p>
<p>TEXT TEXT TEXT !!! </p>
<p> </p>
<p> </p>
<p>TEXT TEXT TEXT !!! </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</main>
<footer id="footer">
<p style="text-align: center"><a href="http://homepagevomdesigner.de/" target="new"><img src="Bilder/designey_by.png" width="216" height="13" id="designedby"/></a></p>
<p style="text-align: center"> </p>
<p style="text-align: center; font-style: normal;"><span style="text-align: center; font-weight: bold;"><a href="impressum.html">Impressum</a></span><a href="https://www.facebook.com/pages/xyz" target="new"><img src="Bilder/fb.png" width="100%" height="40%" id="fb"/></a></p>
</footer>
</div>
</body>
</html>
Alles anzeigen
@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background-color:#000;
color:#FFF;
}
#intro {
}
#logo {
position: absolute;
left: 70%;
top: 4.5%;
/* width:20%;
height:8.65%; */
size:auto;
}
#auto {
width:25%;
height:22.5%;
padding-left:1%;
padding-top:4%;
}
#seite {
width:100%;
margin: 0 auto;
}
#header {
background:url(../Bilder/header.png);
background-repeat:no-repeat;
background-size:100% 100%;
width:100%;
}
#head_text1 {
position: absolute;
left: 20%;
padding-top: 4%;
}
#head_text2 {
position: absolute;
left: 30%;
padding-top: 8%;
}
#domain {
position: absolute;
left: 77%;
padding-top: 10%;
}
#nav {
clear: both;
text-align: center;
font-size:14px;
}
#wb {
width:100%;
}
#main {
background: url(../Bilder/maintext.png);
background-size:100% auto;
background-repeat:repeat;
margin-left: 25%;
min-height:450px;
}
#left {
float: left;
width:25%;
background:url(../Bilder/mainleft.png);
background-repeat:no-repeat;
background-size:100% auto;
min-height:450px;
background-position:left 1em;
}
#footer {
background: url(../Bilder/footer.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: fixed;
bottom: 0px;
width: 100%;
height: 10%;
}
#fb {
position: absolute;
left: 3%;
bottom:30%;
width:auto;
height:auto;
}
#designedby {
position: absolute;
right: 5%;
bottom:20%;
width:auto;
height:auto;
}
Alles anzeigen
OK, danke an alle ! Habt mir echt weitergeholfen.
Fazit ist ich komme um einen SmartHost nicht herum zum versenden von E-Mails da ich eine Dynamische IP habe. Empfangen = Kein Problem, da MX Weiterleitungen bei der Domain möglich ist.
Ich denke ich werde dass ich naher Zukunft mal in Angriff nehmen
Nochmals Vielen dank an alle.
Was genau meinst du mit aufpassen ? Wenn dann würde ich es als ganz normale e-Mail adresse nutzen wollen. Ich habe keinerlei absicht auf Spam verteilen
Also wenn ich mir ne domain holen sollte, dachte ich an Strato. Denn die bieten MX-Einträge an, und auch DDNS
Also ist es aber schonmal rein theoretisch möglich.
Das mit bekanntheit leuchtet mir nicht wirklich ein. Schließlich gibt es ja kleine Unternehmen, welche Ihren eigenen Mail-Server betreiben. Und dieses kleine Unternehmen hat vllt. nur 10 Mitarbeiter == 10 Postfächer. Also soooo bekannt sind die ja nun auch wieder nicht Oder meint ihr es wird in solchen fällen der SMTP-Dienst vom Anbieter verwendet?
Hallo,
habe mal ein paar verständnissfragen
ich habe einen kleinen HomeServer von Synology bei mir zuhause stehen welches ich für gemeinsame Datenablage, Datensicherung etc. nutze. Ist in erster linie eine NAS, aber bietet nebenbei noch weitere Features. Unteranderem auch Mailserver.
Wenn ich mir z.B. bei Strato eine .de Domain kaufen würde, welches als Features auch DynDNS bietet und MX-Weiterleitung bietet. Kann ich damit meinen eigenen SMTP betreiben ? Oder bin ich auf den SMTP-Dienst von Strato angewiesen.
Empfangen der Mails sollte ja kein problem sein, nur frage ich mich wie es mit dem versenden aussieht da ich ja eine Dynamische IP habe. Wird diese Domain das BlackListed / Als SPAM gekennzeichnet ?
Gruß
z1000
super, werde mich nachher mal damit beschäftigen wusste garnicht das es solche "tools" gibt danke im vorraus
<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8">
<title>Titeltext :-)</title>
<head>
<style>
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background-color:#000;
color:#FFF;
}
#logo {
position: absolute;
left: 60%;
top: 4.5%;
width:33%;
height:8.65%;
}
#auto {
width:25%;
height:22.5%;
padding-left:1%;
padding-top:4%;
}
#seite {
width:100%;
margin: 0 auto;
}
#header {
background:url(Bilder/header.png);
background-repeat:no-repeat;
background-size:100% 100%;
width:100%;
}
#nav {
clear: both;
text-align: center;
}
#unternav {
background:url(Bilder/unternav.png);
background-size:100% 2.7%;
size:100% 2.7%;
}
#main {
background: url(Bilder/maintext.png);
background-size:100% 100%;
background-repeat:repeat;
margin-left: 25%;
height:450px;
}
#left {
float: left;
width:25%;
background:url(Bilder/mainleft.png);
background-repeat:no-repeat;
height:450px;
}
#footer {
background:url(Bilder/footer.png);
background-repeat:no-repeat;
background-size:100% 100%;
position:fixed;
bottom:0px;
width:100%;
height:10%;
}
-->
</style>
</head>
<body>
<div id="seite">
<header id="header">
<p><img src="Bilder/mercedes.png" alt="" id="auto"/><img src="Bilder/logo.png" alt="" id="logo"/></p>
</header>
<nav id="nav"><span class="fluid nav" style="font-size: 150%">Neuigkeiten - Bio/Geschichte - Leistungen - 3M DI-NOC - Galerie - Referenzen - Kontakt - Links</span></nav>
<nav id="unternav">
<p> </p>
</nav>
<div id="left">
TEXT TEXT TEXT !!!
</div>
<main id="main">
TEXT TEXT TEXT !!!
</main>
<footer id="footer">
<p> </p>
<p> </p>
<p> </p>
</footer>
</div>
</body>
</html>
Alles anzeigen
habe es nun mal bearbeitet...
habe nun das auto und das logo als einzelne grafiken. ebenfalls habe ich die anderen änderungen soweit mit angepasst. charset utf-8 i.o. ?
mein größtes problem ist immernoch, dass z.B. Main eine höhe bis hin zum footer haben sollte. dies möglichst "prozentuell" bzw. automatisch bis zum footer. wie bekomme ich das gelöst ?
Habe nochmals von Grundauf alles neu "geschrieben".
<!DOCTYPE html>
<html lang="de">
<head>
<style type="text/css">
<!--
body {
font: 100.01% Verdana, Arial, Helvetica, sans-serif;
background-color:#000;
color:#FFF;
}
* {
margin:0;
padding:0;
}
#seite {
width:100%;
margin: 0 auto;
}
#header {
}
#nav {
clear: both;
text-align: center;
}
#unternav {
background:url(Bilder/unternav.png);
background-size:100% 2.7%;
size:100% 2.7%;
}
#main {
background: url(Bilder/maintext.png);
background-size:100% 100%;
background-repeat:repeat;
margin-left: 25%;
height:450px;
}
#left {
float: left;
width:25%;
background:url(Bilder/mainleft.png);
background-repeat:no-repeat;
height:450px;
}
#footer {
background:url(Bilder/footer.png);
background-repeat:no-repeat;
background-size:100% 100%;
position:fixed;
bottom:0px;
width:100%;
height:10%;
}
-->
</style>
</head>
<body>
<div id="seite">
<header id="header"><img src="Bilder/header.jpg" width="100%" height="17.5%" alt=""/></header>
<nav id="nav"><span class="fluid nav" style="font-size: 150%">Neuigkeiten - Bio/Geschichte - Leistungen - 3M DI-NOC - Galerie - Referenzen - Kontakt - Links</span></nav>
<nav id="unternav">
<p> </p>
</nav>
<div id="left">
TEXT TEXT TEXT !!!
</div>
<main id="main">
TEXT TEXT TEXT !!!
</main>
<footer id="footer">
<p> </p>
<p> </p>
<p> </p>
</footer>
</div>
</body>
</html>
Alles anzeigen
#
Wenn ich fertig werden sollte würde ich dann die CSS als extra file machen. vorerst habe ich mal alles in der .html.
die Höhenangaben von "left" und "main" habe ich mal mit der angabe von "450px" gesetzt. Allerdings hätte ich dies gerne prozentuell bzw. bis hin zum Footer. Ob nun genügend inhalt da ist oder nicht sollte keine Rolle spielen.
Hier mal ein Screen in FireFox, wo mir bisher ganz gut gefällt
Was haltest du / ihr nun vom Code. Sauberer ? Übersichtlicher ?
Gruß
z1000
im "alten" Thread habe ich schon beschlossen die Seite von Grund auf neu aufzubauen. Durch Hilfe / Tipps habe ich nun die Seite mit den bereitgestellten "Containern" : Header; Nav; Main; und Footer das Grundgerüst mir zusammengestellt.
Hier mal der zwischenstand :
In der Mitte befinden sich zwei "Main" Container welche auf einer Ebene nebeneinander sind. Diese sollen sich auch je nach inhalt in der Höhe anpassen. Allerdings sollte es auch eine Mindesthöhe geben, undzwar mindestens bis zum Footer. ("left" und "right")
ich habe es durch die angabe von height:100%; versucht, allerdings änderte sich da garnichts. wenn ich aber statt % px eingesetzt habe, hat es geklappt.
Aber da ich ja möglichst mit wenig pixel arbeiten möchte, da es ja auf möglichst vielen verschiedenen auflösungen gut dargestellt werden soll, suche ich nach einer passenden lösung.
Aktueller Quellcode :
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">
<header class="fluid header"><img src="Bilder/header.jpg" alt="" width="100%"/></header>
</div>
<p>
<nav class="fluid nav">Neuigkeiten - Bio/Geschichte - Leistungen - 3M DI-NOC - Galerie - Referenzen - Kontakt - Links</nav>
<nav class="fluid unternav"><img src="Bilder/unternav.png" alt="" width="100%"/></nav>
</p>
<main class="fluid left">
<p> </p>
<p> </p>
<p> </p>
<p>Text</p>
<p> </p>
<p>Text Text</p>
</main>
<main class="fluid right">
<p>Text</p>
<p> </p>
<p>Text</p>
<p> </p>
<p>Text</p>
<p> </p>
</main>
<footer class="fluid footer">
<p> </p>
<p> </p>
</footer>
</div>
</body>
Alles anzeigen
und das die CSS :
@charset "utf-8";
img, object, embed, video {
max-width: 100%;
}
.fluid {
width: 100%;
float: left;
display: block;
}
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 86.45%;
background-color:#000;
}
.nav {
background-color:#000;
}
.footer {
background:url(../Bilder/footer.png);
background-repeat:no-repeat;
position:fixed;
bottom:0px;
}
.left {
background:url(../Bilder/mainleft.png);
background-repeat:no-repeat;
width: 20%;
}
.right {
background: url(../Bilder/maintext.png);
background-repeat: repeat-y;
background-size: 100%;
width: 80%;
clear: none;
}
.unternav {
width:100%;
}
Alles anzeigen
Gruß z1000
und vorallem wieviel zeit du da investiert um im monat auf 400 - 700 €+- zu kommen.
Was mir in der hinsicht garnicht gefällt, ist das Thema Datenschutz. Um geld bekommen zu können muss ich Meine persönlichen Daten angeben (ausnahme Amazon Gutschein etc.)
Dann soll ich da auch noch an Zig Umfragen teilnehemn, irgendwelche Fragebogen ausfüllen etc. ? Somit verteilt man doch noch mehr seine Daten...
Hört sich ganz nett an, aber allein aus dem Thema Datenschutz für mich leider ein no go. Oder wie sehr ihr das ?
Vielleicht täusche ich mich ja auch. Ich lasse mich gerne eines besseren belehren.
Hmm... Ok Komme gerade ein wenig weiter...
Nun klemmt es an einer stelle...
Kurz mal paar Screenshots...
So siehts im Editor aus... Da kann man gut die aufteilung sehen von Header, Nav, Main, Footer etc.
Und so ist die ansicht bei mir im Browser
Wie könnte ich Main_left und Main_right auf volle Größe bis hin zum Sticky-footer (hoffe so bezeichnet man festgenagelte Footer) ziehen.
Die Lösung für Background bei Main_right hätte ich schon falls inhalt mehr wird und man scrollen müsste. Dann mache ich beim background einfach : background-repeat:repeat-y; ist richtig oder ?
- - - Aktualisiert - - -
hm...
ich hatte es bisher mit min-height:x%; probiert. also mit verschiedenen prozentuellen zahlen, hat sich nie was verändert.
nun habe ich mal min-height:500px; probiert, siehe da, es bekommt eine mindestgröße. Wie bekomme ich nun die mindestgröße bis zum Footer ohne Pixel angaben machen zu müssen. Immerhin soll die Seite ja auf verschiedene Auflösung möglichst gleich angezeigt werden
auch angaben wie height:100%; oder height:auto !Important; haben leider nicht weitergeholfen.
@Mod/Admin : Kann der Threadtitel vielleicht angepasst werden ? Nun soll es ja nichts mehr mit "Tabellen" sein. Bsp. "Homepagelayout ; Seitenaufteilung"
Hi skippylib,
ich bin selbst erst seit ein paar tagen hier auf diesem Forum zu gange.
Ich bin genauso wie du auch ein Anfänger in sachen HTML.
Was ich allerdings gelernt habe, und oft in anderen Beiträgen gesehen habe ist, dass du den Quellcode mit reinstellen solltest. (somit kann dir besser weitergeholfen werden)
Und was noch besser wäre, ein Link zu der Homepage. Falls die Seite noch nicht online ist, kannst du ja einen free webspace dir kurz registrieren, und die nötigen seiten hochladen. (Bsp. ohost.de , bplaced.net , ....)
Komme leider nicht weiter. Die Grundstruktur sollte so in etwa aussehen...
Dass sind die Grafiken die in die jeweiligen bereiche sollen :
Header :
Main left :
Main right :
Footer :
und in die Navigationsleiste wird nur aus schwarzem hintergrund und weißem Text.
Im gesamtbild könnte dass in etwas so aussehen...
Hat jemand Ideen wie ich das am besten umsetzen könnte ?