normalen Websitecode in Wordpress umwandeln...!!!

NataschaK

Hallo alle zusammen,
Ich habe vor längerem eine Promotionseite erstellt gehabt für meinen Freund.
Da ich bis dato noch nicht mit Wordpress gearbeitet hatte und das erst seit kurzem mache weiß ich nicht wie ich das Layout übertragen könnte, da ich es sehr gerne beibehalten würde...=(

Hier mal der CSS code der Homepage:

HTML

body {
         background-image: url('images/background.png');
         background-repeat: no-repeat;
         background-attachment: fixed;
         background-color: #000000;
 overflow:auto;
}
table, tr, td {
 font-family:arial;
 font-size:10px;
         line-height: 14px;
         color:#999999;
 text-align:left;
         background-color: #0e0e0e;
 }
.table1 {
 width: 450px;
         position: absolute;
         left: 200px;
         top: 0px;
         border: 15px solid #1d1d1d;
         }
.td1 {
 background-image: url('images/td1.png');
         height: 120px;
         border-bottom: 10px solid #1d1d1d;
         }
.tdnavi {
 font-size: 9px;
         font-family: arial;
         border-right: 4px solid #1d1d1d;
         text-align:center;
 }
.content {
 padding: 0px 5px 5px 5px;
         text-align: justify;
         margin: 0px 0px 5px 0px;
         }
.footer {
 border-top: 10px solid #1d1d1d;
         }
input,select {
 font-family:tahoma;
 border: 1px dotted #5e5e5e;
 padding-right:3px;
 padding-left:3px;
 font-size: 10px;
         font-style: normal;
 color:#d9d9d9;
 margin: 4px;
 background: transparent;
         text-transform: none;
}
textarea {
 font-family:tahoma;
 border: 1px dotted #5e5e5e;
 background: transparent;
 padding-right:3px;
 padding-left:3px;
 font-size: 10px;
         font-style: normal;
 color:#d9d9d9;
 height: 100px;
 width: 200px;
 margin: 4px;
         text-transform: none;
}
b {
 color: #333333;
}
s {
 color: #000000;
}
i {
 color: #0066CC;
}
u {
 color: #6699FF;
}
A:link , A:visited , A:active {
 color:#f6f6f6;
         text-decoration: none;
         background: none;
 cursor: help;
         letter-spacing: 0px;
}
A:hover{
 color:#7c7c7c;
 cursor: help;
}
A:link.navi , A:visited.navi, A:active.navi {
 font-family : arial;
 font-size:15px;
 color: #7b7b7b;
 background: #1c1c1c;
 display: block;
         margin: 1px 0px 1px 0px;
         font-style: normal;
 font-weight: normal;
 text-align: center;
 line-height: 19px;
         text-transform: lowercase;
 text-decoration: none;
         letter-spacing: -1px;
 cursor: help;
}
A:hover.navi {
 color: #a2a2a2;
 text-decoration: none;
         background: #282828;
 cursor:help;
}
h1
{
         font: 25px Times New Roman;
  font-style: italic;
         color: #0033cc;
 margin-left: 0px;
 text-align: center;
         letter-spacing: 1px;
}
.head {
       font: 30px Times New Roman;
         color: #707070;
 margin-left: 0px;
 text-align: center;
         letter-spacing: 10px;
}

Alles anzeigen

und hier mal der Code für die Seiten:

HTML

<html>
<head>
<title>Marcel König | </title>
<link rel=stylesheet type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="position: absolute; left: 0px; top: 0px;">
<table class="table1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="td1">
<h1 class="head">Marcel König</h1>
</td>
</tr>
<tr>
<td width="100px" valign="top" class="tdnavi">
<img src="http://forum.wordpress-deutschland.org/images/icon.png" border="0" alt="" /><br/>
<br/>
kleiner Text blablabla <br/>
<br/>
 
<a href="#.html" class="navi">LINK</a>
KATEGORIENÜBERSCHRIFT
<a href="#.html" class="navi">LINK</a>
<a href="#.html" class="navi">LINK</a>
KATEGORIENÜBERSCHRIFT
<a href="#.html" class="navi">LINK</a>
 
 
</td>
<td width="350px" valign="top">
<div class="content">
<h1>ÜBERSCHRIFT</h1>
 
TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT
 
</div>
</td>
</tr>
<tr>
<td colspan="2">
<img src="http://forum.wordpress-deutschland.org/images/footer.png" border="0" alt="" class="footer" />
</td>
</tr>
</table>
</body>
</html>

Alles anzeigen

Das sähe dann so aus:
http://www.misery13.spacequadrat.de/
(Screenshot ist im Anhang meiner 2. Antwort)

Und das möchte ich jetzt gerne so in Wordpress haben, aber so viel ich auch rumprobiere ich kriegs irgendwie nicht hin...

Ich hoffe, dass ich hier die Hilfe bekomme die ich suche weil ich steh schon kurz davor zu verzweifeln....

Danke im Vorraus!
Liebste Grüße und ein angenehmens Wochenende ;-)

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

perryzelda

url ist nicht erreichbar

NataschaK

hm ich weiß nicht wieso das nicht geht, vor einer Halben Stunde war ich noch draufgewesen und da hat es noch geklappt... :(

http://www.misery13.spacequadrat.de

Wahrscheinlich gibt es Probleme mit dem Server..... Dann stelle ich das ganze mal als Screenshot rein. ( Im Anhang)

maxe

Also ich hab mal die wichtigsten Sachen ersetzt:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; <?php ('Blog Archive'); ?> <?php } ?> <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<?php wp_head(); ?>
</head>


<body>
<div style="position: absolute; left: 0px; top: 0px;">
<table class="table1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="td1">
<h1 class="head"><?php bloginfo('name'); ?></h1>
</td>
</tr>
<tr>
<td width="100px" valign="top" class="tdnavi">
<img src="http://forum.wordpress-deutschland.org/images/icon.png" border="0" alt="" /><br/>
<br/>
kleiner Text blablabla <br/>
<br/>
 
<?php wp_list_categories() ?>
 
</td>
<td width="350px" valign="top">
<div class="content">
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>                
            <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></h1>
                    <?php the_excerpt(); ?>
    <?php endwhile; ?>


    <?php else : ?>
        <h1>Not Found</h1>
        <p>Sorry, but you are looking for something that isn't here.</p>
        <p>Perhaps you would like to try a search or select from one of the links on the menu.</p>
    <?php endif; ?> 
</div>
</td>
</tr>
<tr>
<td colspan="2">
<img src="http://forum.wordpress-deutschland.org/images/footer.png" border="0" alt="" class="footer" />
</td>
</tr>
</table>
</div>
</body>
</html>

Alles anzeigen

Jetzt könntest du es noch in header.php, index.php und footer.php aufteilen. Die CSS musst du dann als style.css abspeichern. Wie du die css dann noch an den WP Code anpassen willst, musst du dann schauen.
Und mal ganz ehrlich, willst du das wirklich mit Tabelle machen :?:

NataschaK

Zitat von maxe

Und mal ganz ehrlich, willst du das wirklich mit Tabelle machen :?:

Hm so war es für mich am einfachsten.. Was würdest du mir den vorschlagen dass es auch so sitzt wie es sitzen soll?

-=Marc=-

Moin,

es ist vielleicht ganz sinnvoll, wenn Du Dich mit CSS im Allgemeinen und mit der Positionierung von Elementen via CSS im Speziellen auseinandersetzt.

Es gibt eine ganze Reihe von guten Tutorials, welche sich mit der Templateerstellung beschäftigen (da erzähl ich Dir wahrscheinlich nichts Neues). Aber auch das Übertragen bestehender HTML-Layouts in WordPress-Templates wird im Netz recht gut erklärt (Suchbegriffe vielleicht etwas spezifizieren: converting, existing etc. pp.). Diese vermitteln viele Handwerkszeuge quasi im "Vorbeigehen".

Gruß
Marc

Willkommen! Melden Sie sich an oder registrieren Sie sich.

normalen Websitecode in Wordpress umwandeln...!!!

Jetzt mitmachen!