XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   HTML und CSS trennen (http://xhtmlforum.de/showthread.php?t=57378)

einshoch 16.06.2009 22:57

HTML und CSS trennen
 
Hallo,
ich weis ich bin neu hier aber ich hoffe ihr könnt mir helfen :)

Also ich habe mir von Adobe Imageready meine hp als css ausgeben lassen.
Dabei bekommt man eine html datei in die das css integriert ist.
Ich wollte nun das ganze trennen, schaffe es aber nicht so richtig, hier der Quellcode:

Code:

<html>
<head>
<title>Homepage1_ohne</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (Homepage1_ohne.psd) -->
<style type="text/css">
<!--

#Table_01 {
        position:absolute;
        margin:0 auto;
        left:0px;
        top:0px;
        width:1024px;
        height:768px;
}

#Homepage1-ohne-01 {
        position:absolute;
        left:0px;
        top:0px;
        width:1024px;
        height:204px;
}

#Homepage1-ohne-02 {
        position:absolute;
        left:0px;
        top:204px;
        width:99px;
        height:564px;
}

#Homepage1-ohne-03 {
        position:absolute;
        left:99px;
        top:204px;
        width:545px;
        height:45px;
}

#Homepage1-ohne-04 {
        position:absolute;
        left:644px;
        top:204px;
        width:380px;
        height:44px;
}

#Homepage1-ohne-05 {
        position:absolute;
        left:644px;
        top:248px;
        width:75px;
        height:520px;
}

#Homepage1-ohne-06 {
        position:absolute;
        left:719px;
        top:248px;
        width:288px;
        height:231px;
}

#Homepage1-ohne-07 {
        position:absolute;
        left:1007px;
        top:248px;
        width:17px;
        height:520px;
}

#Homepage1-ohne-08 {
        position:absolute;
        left:99px;
        top:249px;
        width:545px;
        height:438px;
}

#Homepage1-ohne-09 {
        position:absolute;
        left:719px;
        top:479px;
        width:288px;
        height:10px;
}

#Homepage1-ohne-10 {
        position:absolute;
        left:719px;
        top:489px;
        width:288px;
        height:197px;
}

#Homepage1-ohne-11 {
        position:absolute;
        left:719px;
        top:686px;
        width:288px;
        height:82px;
}

#Homepage1-ohne-12 {
        position:absolute;
        left:99px;
        top:687px;
        width:545px;
        height:81px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (Homepage1_ohne.psd) -->
<div id="Table_01">
        <div id="Homepage1-ohne-01">
                <img src="images/Homepage1_ohne_01.gif" width="1024" height="204" alt="">        </div>
        <div id="Homepage1-ohne-02">
                <img src="images/Homepage1_ohne_02.gif" width="99" height="564" alt="">        </div>
        <div id="Homepage1-ohne-03">
                <img src="images/Homepage1_ohne_03.gif" width="545" height="45" alt="">        </div>
        <div id="Homepage1-ohne-04">
                <img src="images/Homepage1_ohne_04.gif" width="380" height="44" alt="">        </div>
        <div id="Homepage1-ohne-05">
                <img src="images/Homepage1_ohne_05.gif" width="75" height="520" alt="">        </div>
        <div id="Homepage1-ohne-06">
                <img src="images/Homepage1_ohne_06.gif" width="288" height="231" alt="">        </div>
        <div id="Homepage1-ohne-07">
                <img src="images/Homepage1_ohne_07.gif" width="17" height="520" alt="">        </div>
        <div id="Homepage1-ohne-08">
                <img src="images/Homepage1_ohne_08.gif" width="545" height="438" alt="">        </div>
        <div id="Homepage1-ohne-09">
                <img src="images/Homepage1_ohne_09.gif" width="288" height="10" alt="">        </div>
        <div id="Homepage1-ohne-10">
                <img src="images/Homepage1_ohne_10.gif" width="288" height="197" alt="">        </div>
        <div id="Homepage1-ohne-11">
                <img src="images/Homepage1_ohne_11.gif" width="288" height="82" alt="">        </div>
        <div id="Homepage1-ohne-12">
                <img src="images/Homepage1_ohne_12.gif" width="545" height="81" alt="">        </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>


Nun habe ich einfach den Teil <style></style> in eine Css-Datei gepackt und oben in die Html folgendes geschrieben: <link rel="stylesheet" type="text/css" href="xxx/rule.css">
Aber dabei zerschießt er mir immer die ganze Seite :(

Habt ihr vllt eine Idee?
Vielen Dank!!!

Crizzo 16.06.2009 23:10

Hallo, einshoch!

Findest du es nicht sinnvoller dir CSS und HTML selbst beizubringen als diesen grausamen Code, den das Programm ausgespuckt hat entwirren?
Ich schon.

Denn was das Programm da gemacht hat ist einfach nur Müll. Es hat einfach nur die Grafik zerschnitten als <img>-Element in Divisionen gepackt und die mit "position:absolute" verteilt. So funktioniert Webdesign definitiv nicht.

Lies dich mal hier ein, dann wirst du mich sehr schnell verstehen: Einführung in XHTML, CSS und Webdesign oder kauf dir die Bücher "Little Boxes 1" und "Little Boxes 2" von Peter Müller.

Gruß

einshoch 16.06.2009 23:26

Na ja, hat aber meiner Meinung nach ganz einfach den Vorteil das ich mein Design schnell in HTML und CSS umgesetzt habe, so brauche ich wenigstens nicht mehr alles "rumstückeln", was wäre denn deiner Meinung nach der bessere Weg?

Crizzo 16.06.2009 23:31

Zitat:

Zitat von einshoch (Beitrag 435553)
Na ja, hat aber meiner Meinung nach ganz einfach den Vorteil das ich mein Design schnell in HTML und CSS umgesetzt habe, so brauche ich wenigstens nicht mehr alles "rumstückeln",

Wenn man aus dem 8. Stock springt ist man auch schnell im Erdgeschoss, der beste Weg ist dies trotzdem nicht. ;)
Zitat:

was wäre denn deiner Meinung nach der bessere Weg?
Du erstellst dein Design in einem Programm deiner Wahl.

Jetzt legst du alles was mit Design zu tun hat bei Seite und schreib deinen HTML-Code nur alleine für den Inhalt, egal wie es aussehen soll.

Wenn du damit fertig ist, schnappst du dir CSS und gestaltest die Sache mit Hilfe von Grafiken und den Farben, die du in deinem Design entworfen hast.

Danach stresst du das Design: Schriftgrad verändern, Browserfenster hin und her ziehen, Grafiken aus, CSS aus, andere Browser usw.

Geht dann immer noch alles und sieht gut aus. Bist du fertig. Ja, dass ist mehr Arbeit und das kostet auch Zeit und Geduld, aber so wird es nunmal gemacht. Mal von den persönlichen Vorlieben abgesehen.

Aber was dein Programm da macht ist einfach nur Murks und nicht Praxis tauglich!

mantiz 17.06.2009 07:39

Ich schließe mich Crizzo an, das ist Murks, was da rauskommt. :)

Aber zum Problem:
Kann es sein, dass Du die style-Tags mit in die CSS-Datei übernommen hast?
In die CSS-Datei darf nur das zwischen den style-Tags, auch HTML-Kommentare gehören nicht in die CSS-Datei.

einshoch 17.06.2009 20:37

hat sich erledigt, danke


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:49 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023