Suche im Forum:
Suchen


Autor Nachricht
Beitrag20.09.2012 um 11:01 (UTC)    
Titel: Wie bekomme ich mein Design nach Hpbk?

Hallo zusammen. Bin mir nicht ganau sicher ob das hier rein gehört.
Ich habe mir per Hilfsseiten mit Notepad eine Homepage gebastelt.
Jetzt habe ich eine Html und eine Css-datei.

Ich bin nicht besonders gut in Sachen Html und Css und deswegen schnell verwirrt. Ich möchte das Design in einer Hpbk-website verwenden. Aber unter Css-Design kann ich ja nur den Css-code eingeben und dass ganze sieht dann etwas komisch aus.

Es wäre vielleicht nett, wenn mir dabei jemand helfen könnte, der erfahrung hat.^^°

So müsste das Design nachher aussehen.


Hier der Htmlcode:
Code:
<!DOCTYPE HTML>
<html>

   <head>
      <meta charset="utf-8">
      <title>Meine Test Hp</title>
      <meta name="description" content="Googletext">
      <meta name="author" content="Janina Kaufhold">
      <meta name="keywords" content="Zeichnungen, Hobbys">
      <link rel="shortcut icon" href="Lu16.ico">
         <link rel="apple-touch-icon-precomposed"sizes=" 54x54" href="lu54.png">
         <link rel="apple-touch-icon-precomposed"sizes=" 72x72" href="lu72.png">
         <link rel="apple-touch-icon-precomposed"sizes=" 129x129" href="lu129.png">
         <link rel="apple-touch-icon-precomposed"sizes=" 144x144" href="lu144.png">
         <link rel="apple-touch-icon-precomposed" href="lu.png">
      <meta name=" viewport" content=" width=device-width, initial-scale =1.0">
      <link rel="stylesheet" type="text/css" href="style.css" media="all" />
   </head>
   
   <body>
   <div id="wrapper">
   <br/>
      <header id=" Kopfbereich">
         <figure>
         <center><img src="Lucyblue.gif" alt="Grüne Augen eines Dämons" width="900" height="104"></center>
         <br/>
         <br/>

         
      <div id=" Inhalt">
         <section class="container" id="Navigation">
            <h2>Navigation</h2>
                  <div class="menu">
                        <a class="menu" href="lu.htm">Home</a><br>
                        <a class="menu" href="extras/index.htm">Gallery</a><br>
                        <a class="menu" href="links/index.htm">Thema</a><br>
                        <a class="menu" href="mailto:name@domain.de">Kontakt</a><br>
                        <a class="menu" href="links/index.htm">Links</a><br>
                        <a class="menu" href="mailto:name@domain.de">Impressum</a><br>
                  </div>
         </section>   
         
         <section class="container" id="Willkommen">
            <h2>Willkommen</h2>
               <figure title="TestBild">
                  <img src="kiss.png" alt="Kuessendes Paar" width="250" height="252">
                  <figcaption>Auf Lucy Blue Star, geht es hauptsächlich um Lucy.</br> Lucy ist ein von mir erfundener Charakter..</figcaption>
         </section>         
         
         
         
         <section class""container" id="Kontakt">
         <script src="http://www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj=new Object;obj.clockfile="0001-blue.swf";obj.TimeZone="WET";obj.width=150;obj.height=150;obj.Place="";obj.wmode="transparent";showClock(obj);</script>
            
         </section>
      </div>
         
      <footer id="fussbereich">
      <center><p> Design by: Janina Kaufhold</p>
      <p><a href="Kontakt.html">Kontakt</a>
      <a href="Impressum.html">Impressum</a></p></center>
      </footer>
   </div>      
   </body>

</html>


Und hier der Csscode:

Code:
/*! normalize.css 2011-08-12T17:28 UTC · http://github.com/necolas/normalize.css */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

audio:not([controls]) {
    display: none;
}

[hidden] {
    display: none;
}

html {
    font-size: 100%; /* 1 */
    overflow-y: scroll; /* 2 */
    -webkit-text-size-adjust: 100%; /* 3 */
    -ms-text-size-adjust: 100%; /* 3 */
}

body {
    margin: 0;
}

body,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

a {
    color: #00e;
}

a:visited {
    color: #551a8b;
}

a:focus {
    outline: thin dotted;
}

a:hover,
a:active {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

dfn {
    font-style: italic;
}

mark {
    background: #ff0;
    color: #000;
}

pre,
code,
kbd,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

q {
    quotes: none;
}

q:before,
q:after {
    content: '';
    content: none;
}

small {
    font-size: 75%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

ul,
ol {
    margin: 1em 0;
    padding: 0 0 0 40px;
}

dd {
    margin: 0 0 0 40px;
}

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

form {
    margin: 0;
}

fieldset {
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0; /* 1 */
    *margin-left: -7px; /* 2 */
}

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

button,
input {
    line-height: normal; /* 1 */
    *overflow: visible;  /* 2 */
}

table button,
table input {
    *overflow: auto;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer; /* 1 */
    -webkit-appearance: button; /* 2 */
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

body{
   font-family: "comic sans ms", Courier, monospace;
   font-size: 13px;
   background: #000000;
   background-image: url("sterne3.png");
}

/*Kombinieren von Selectoren*/
h1,h2,h3 { font: 40px/40px "Edwardian Script ITC", verdana, sans-serif;

color: #ffffff;
}

a{ color: #3BFFFF; }
a:visited{ color: #ffffff; }
a:hover {
     color: #ffffff;
     font-style: italic;
   }
   
header a{
   text-decoration: none;
}

#wrapper {
   min-width: 320px;
   width: 90%;
   max-width: 1140px;
   margin: 0 auto;
   background: transparent;
   background-image: transparent;
   }

.container{
   float: left;
   margin: 10px 10px 30px 0;
   padding: 10px;
   height: 400px;
   overflow-y: auto;
   overflow-x: hidden;
   background: #;
   
}

#Navigation{
   width: 20%;
   }



a.menu { display:block; margin-bottom:1px; text-align:center; width:130px;
         border-style:ridge; border-width:px; padding:2px; text-decoration:none; }

a.menu:link    {    color:#ffffff;
            background-color:#fff;
            width:120px;
            padding:5px;
            font-size:14px;
            font-family:Verdana, Arial, sans-serif;
            font-weight:bold;
            text-decoration:none;
            text-align:center;
            margin:0px;
            margin-left: 10px;
            border:0px solid #000;
            background-image:url(png1.png);
            background-repeat:repeat-y
            }
            
a.menu:visited { color:#00f; background-color:transparent; background-image: url("Png2.png ");}

a.menu:hover   { display:block;
            color:#3C70FF;
            background-color:#000;
            background-image:url(png3.png);}
            
a.menu:active  { color:#ff0; background-color:#a03; background-image: url("Png4.png");}



#Willkommen{
width:60%;
background: #ffffff;

}
#about{
   width: 30%;
}

#work{
   width: 27%;
}

#kontakt{
   width: 20%;
}

.container img{
   
}

#fussbereich{
   clear: both;
}




Ich danke im Vorraus.


Zuletzt bearbeitet von ravensbilder am 20.09.2012, 12:07, insgesamt einmal bearbeitet
Beitrag21.09.2012 um 19:18 (UTC)    
Titel:

Hallo,

dein CSS-Code ist für den Baukasten leider mehr oder weniger nutzlos, da der Aufbau anders ist.

Ich habe aber mal was gebastelt: http://transint-test3.de.tl/
Abgesehen von den Grafiken, die ich in 5 Minuten fabriziert habe - stimmen die Proportionen einigermaßen?

Gruß,

TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon


Zuletzt bearbeitet von transint am 21.09.2012, 20:18, insgesamt einmal bearbeitet
Beitrag21.09.2012 um 21:39 (UTC)    
Titel:

Also nutzlos ist der Code eigentlich nicht, nur teilweise. Ich möchte nicht zu sehr auf das CMS vom Baukasten eingehen, daher habe ich auf meiner Testseite den Code mal einfach schnell angepasst, damit du ihn nutzen kannst. Dazu stellst du dein Design auf "CSS-Design" und klickst auf den Tab "Erweiterte Einstellungen" dort findest du eine einige Eingabefelder. Auch wenn du hier von nicht viel verstehen wirst, musst du eigentlich nur den Code kopieren und einfügen. Außerdem musst du deine Grafiken hochladen und die URLs im CSS-Code einfügen.

Kurzer Überblick der nötigen Änderungen:
1) Nur das HTML Grundgerüst in zwischen den Body-Tags ist nutzbar
2) Der Section-Tag ist Bestandteil von HTML 5, hier im Baukasten wird aber XHTML 1.0 verwendet, daher habe ich deine Section-Tags durch Divs ausgetauscht
3) Hier im Baukasten wird der Seiteninhalt automatisch in dem Element #content ausgegeben. Daher muss der Inhaltsbereich deines Templates durch #content ausgetauscht (und via CSS neu definiert) werden
4) Die restlichen Elemente des CSS-Templates müssen ausgeblendet werden
5) Der Doctype, Head-Bereich und die Body-Tags sind automatisch vom Baukasten festgelegt. Alles, was im Eingabefeld "Text über dem Design" steht, wird im oberen Body-Bereich eingefügt. Dann folgt das Standart CSS-Template (inklusive der ID #content). Alles, was im Eingabefeld "Text unter dem Design" steht, wird im unteren Body-Bereich eingefügt. Daran muss dein Template angepasst werden.

Klingt möglicherweise viel, ist aber leicht und schnell zu realisieren. Nachdem du das CSS-Design ausgewählt hast und auf den Tab "Erweiterte Einstellungen" gewechselt bist, musst du folgende Codes in folgende Felder einfügen.

Kursive Infornationen stellen den vom Baukasten automatisch generierter Quelltext dar, nicht mitkopieren

Doctype + Head-Bereich
<body>

Text über dem Design:
Zitat:
<div id="wrapper">
<br/>
<header id=" Kopfbereich">
<figure>
<center><img src="Lucyblue.gif" alt="Grüne Augen eines Dämons" width="900" height="104"></center>
<br/>
<br/>


<div id=" Inhalt">
<div class="container" id="Navigation">
<h2>Navigation</h2>
<div class="menu">
<a class="menu" href="lu.htm">Home</a><br>
<a class="menu" href="extras/index.htm">Gallery</a><br>
<a class="menu" href="links/index.htm">Thema</a><br>
<a class="menu" href="mailto:name@domain.de">Kontakt</a><br>
<a class="menu" href="links/index.htm">Links</a><br>
<a class="menu" href="mailto:name@domain.de">Impressum</a><br>
</div>
</div>


#content und andere Klassen des Standart-Templates

Text unter dem Design:
Zitat:
<div class="container" id="Kontakt">
<script src="http://www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj=new Object;obj.clockfile="0001-blue.swf";obj.TimeZone="WET";obj.width=150;obj.height=150;obj.Place="";obj.wmode="transparent";showClock(obj);</script>

</div>
</div>

<footer id="fussbereich">
<center><p> Design by: Janina Kaufhold</p>
<p><a href="Kontakt.html">Kontakt</a>
<a href="Impressum.html">Impressum</a></p></center>
</footer>
</div>


</body>
</html>


In das Feld "CSS-Code ohne Styletags" fügst du diesen Code ein. Ich habe deinen vollständig kopiert, die unnötigen Elemente entfernt und das Element #content neu definiert.

Zitat:
/*! normalize.css 2011-08-12T17:28 UTC · http://github.com/necolas/normalize.css */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}

audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}

audio:not([controls]) {
display: none;
}

[hidden] {
display: none;
}

html {
font-size: 100%; /* 1 */
overflow-y: scroll; /* 2 */
-webkit-text-size-adjust: 100%; /* 3 */
-ms-text-size-adjust: 100%; /* 3 */
}

body {
margin: 0;
}

body,
button,
input,
select,
textarea {
font-family: sans-serif;
}

a {
color: #00e;
}

a:visited {
color: #551a8b;
}

a:focus {
outline: thin dotted;
}

a:hover,
a:active {
outline: 0;
}

abbr[title] {
border-bottom: 1px dotted;
}

b,
strong {
font-weight: bold;
}

blockquote {
margin: 1em 40px;
}

dfn {
font-style: italic;
}

mark {
background: #ff0;
color: #000;
}

pre,
code,
kbd,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}

pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}

q {
quotes: none;
}

q:before,
q:after {
content: '';
content: none;
}

small {
font-size: 75%;
}

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}

ul,
ol {
margin: 1em 0;
padding: 0 0 0 40px;
}

dd {
margin: 0 0 0 40px;
}

nav ul,
nav ol {
list-style: none;
list-style-image: none;
}

img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}

svg:not(:root) {
overflow: hidden;
}

figure {
margin: 0;
}

form {
margin: 0;
}

fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}

legend {
border: 0; /* 1 */
*margin-left: -7px; /* 2 */
}

button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}

button,
input {
line-height: normal; /* 1 */
*overflow: visible; /* 2 */
}

table button,
table input {
*overflow: auto;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer; /* 1 */
-webkit-appearance: button; /* 2 */
}

input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}

input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}

textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}

table {
border-collapse: collapse;
border-spacing: 0;
}

body{
font-family: "comic sans ms", Courier, monospace;
font-size: 13px;
background: #000000;
background-image: url("sterne3.png");
}

/*Kombinieren von Selectoren*/
h1,h2,h3 { font: 40px/40px "Edwardian Script ITC", verdana, sans-serif;

color: #ffffff;
}

a{ color: #3BFFFF; }
a:visited{ color: #ffffff; }
a:hover {
color: #ffffff;
font-style: italic;
}

header a{
text-decoration: none;
}

#wrapper {
min-width: 320px;
width: 90%;
max-width: 1140px;
margin: 0 auto;
background: transparent;
background-image: transparent;
}

.container{
float: left;
margin: 10px 10px 30px 0;
padding: 10px;
height: 400px;
overflow-y: auto;
overflow-x: hidden;
background: #;

}

#Navigation{
width: 20%;
}



a.menu { display:block; margin-bottom:1px; text-align:center; width:130px;
border-style:ridge; border-width:px; padding:2px; text-decoration:none; }

a.menu:link { color:#ffffff;
background-color:#fff;
width:120px;
padding:5px;
font-size:14px;
font-family:Verdana, Arial, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
margin:0px;
margin-left: 10px;
border:0px solid #000;
background-image:url(png1.png);
background-repeat:repeat-y
}

a.menu:visited { color:#00f; background-color:transparent; background-image: url("Png2.png ");}

a.menu:hover { display:block;
color:#3C70FF;
background-color:#000;
background-image:url(png3.png);}

a.menu:active { color:#ff0; background-color:#a03; background-image: url("Png4.png");}



#Willkommen{
width:60%;
background: #ffffff;

}
#about{
width: 30%;
}

#work{
width: 27%;
}

#kontakt{
width: 20%;
}

.container img{

}

#fussbereich{
clear: both;
}

#container{
float: left;
margin: 10px 10px 30px 0;
padding: 10px;
height: 400px;
overflow-y: auto;
overflow-x: hidden;
background: #;
width:60%;
background: #ffffff;
}

#header_container,
#nav_container,
#counter,
#below_content,
#sidebar_container{
display: none;
}
Beitrag26.09.2012 um 12:04 (UTC)    
Titel:

Okay. Habt vielen lieben Dank! =)
Entschuldigt, dass ich mich nicht sofort zurückgemeldet habe.

Ich möchte nur das sich der Content erweitert und kein scrollbalken Entsteht. Was muss ich dafür wo einfügen?

Die Grafiken werden sowieso andere werden. Die waren nur testweise.

Nochmals vielen Dank! Very Happy
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de