Webseite komplett drucken, nur wie?

Webseite komplett drucken, nur wie?

Beitragvon 1979mark » 11.05.2009, 08:16

Hallo erstmal,

ich bin der Mark und bin 29 Jahre alt. Habe IT-Systemelektroniker gelernt und beschäftige mich derzeit viel mit Fotographie und Webdesign (ok nicht so gut wie ihr es hier könnt).

Ich habe ein Programm gekauft, welches sich Website X5 Revolution 8 nennt.
Damit habe ich mir eine Seite zusammengeschustert http://mark-mueller.com Mein Problem ist nun, das ich meine Seite nicht drucken kann. Also die Headergrafik und die Farben werden einfach gelöscht.
Ich denke das hat mit dieser print.css zu tun.
Aber wie erstelle ich diese so, dass man alles wie am Bildschirm zu sehen ist drucken kann?

Hier ist die print.css:

body {
text-align: center;
margin: 15px 0 0 0;
padding: 0;
}
h1 {
position: static;
margin: 0; padding: 0;
}
#imSite {
width: 768px;
margin: 0 auto;
text-align: left;
}
#imHeader {
border-bottom: 1px solid #555555;
}
#imMenuMain, #imMenuSub {
position: absolute;
visibility: hidden;
}
#imContent {
margin: 5px 0 5px 0;
}
#imFooterSiteMap {
position: absolute;
visibility: hidden;
}
#imFooter {
border-top: 1px solid #555555;
padding: 3px 0 5px 0;
margin-top: 8px;
clear: both;
font: 11px Arial, Helvetica, sans-serif; color: #000000;
}
#imFooter a:link, #imFooter a:visited, #imFooter a:hover, #imFooter a:active {
color: #000000; text-decoration: none;
}
#imFooter_L {
float: left;
}
#imFooter_R {
float: right;
}


Das hier steht in der templates.css

body {margin: 0; padding: 0; background-image: url('bg.png'); background-repeat: repeat; background-position: left top; }
#imSite {width: 930px; margin: 15px auto; text-align: left; }
#imHeader {height: 220px; background-color: #C0C0C0; background-image: url('top.jpg'); background-repeat: no-repeat; }
#imBody {background-color: #FFFFFF; }
#imMenuMain {width: 148px; float: left; padding: 25px 0 0 7px; }
#imContent {width: 768px; float: left; margin-top: 15px; }
#imFooter {clear: both; height: 35px; background-color: #C0C0C0; background-image: url('bottom.gif'); background-repeat: repeat-x; background-position: left top; }



Ich danke euch jetzt schon für eure Bemühungen einem Anfänger zu helfen?


Mark
1979mark
neu hier
 
Beiträge: 8
Registriert: 11.05.2009, 08:15

Re: Webseite komplett drucken, nur wie?

Beitragvon the_fan » 11.05.2009, 08:28

was mir auf anhieb auffällt - wobei ich aber nicht weiß ob das den ausschlag gibt ist, dass du mehrere css-dateien einbindest und media auf print festlegst. ich könnte mir vorstellen (vermutung), dass sich diese css-dateien überschreiben. du hast einige als media="screen, print" deklariert. wenn NUR die print.css für das drucklayout zuständig ist, dann auch NUR die print.css als print deklarieren.

hier mal dein head wir er - meiner vorstellung nach - sein sollte
Code: Alles auswählen
<head>
   <title>Mark|Mueller.com</title>

   <!-- Contents -->
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <meta http-equiv="Content-Language" content="de" />
   <meta http-equiv="last-modified" content="28.04.2009 15:15:05" />
   <meta http-equiv="Content-Type-Script" content="text/javascript" />
   <meta name="description" content="" />
   <meta name="keywords" content="" />
   <!-- imCustomHead -->
   <meta http-equiv="Expires" content="0" />
   <meta name="Resource-Type" content="document" />
   <meta name="Distribution" content="global" />
   <meta name="Robots" content="index, follow" />
   <meta name="Revisit-After" content="21 days" />
   <meta name="Rating" content="general" />
   <!-- Others -->
   <meta name="Author" content="Mark Müller" />
   <meta name="Generator" content="Incomedia WebSite X5 Evolution Evolution 8.0.9 - www.websitex5.com" />
   <meta http-equiv="ImageToolbar" content="False" />
   <meta name="MSSmartTagsPreventParsing" content="True" />
   
   <!-- Parent -->
   <link rel="sitemap" href="sitemap.xml" title="Sitemap" />
   <!-- Res -->
   <script type="text/javascript" src="res/x5engine.js"></script>
   <link rel="stylesheet" type="text/css" href="res/styles.css" media="screen" />
   <link rel="stylesheet" type="text/css" href="res/template.css" media="screen" />
   <link rel="stylesheet" type="text/css" href="res/print.css" media="print" />
   <!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="res/iebehavior.css" media="screen" /><![endif]-->
   <link rel="stylesheet" type="text/css" href="res/home.css" media="screen" />
   <script type="text/javascript" src="res/x5cart.js"></script>
   <script type="text/javascript">imCodeProt('Mark Müller 2009')</script>
   <link rel="stylesheet" type="text/css" href="res/handheld.css" media="handheld" />
   <link rel="alternate stylesheet" title="Starker Kontrast - Accessibility" type="text/css" href="res/accessibility.css" media="screen" />

</head>


wenn die seite genauso ausgedruckt werden soll, wie sie angezeigt wird, muss die print.css genau den selben inhalt haben wie die css datei(en) für die anzeige im browser.
the_fan
Gelegenheitsleser
 
Beiträge: 47
Registriert: 05.05.2009, 11:48

Re: Webseite komplett drucken, nur wie?

Beitragvon 1979mark » 11.05.2009, 08:40

Hi The Fan,

danke das Du mir helfen möchtest.
Ich habe die Datgei jetzt mal eingebunden, aber ein Druck ist leider so auch nicht möglich.

Das die Webseite mit einem Programm erstellt wurde, kann ich nicht genau sagen welche datei für den punkt screen zustänig ist.

Kannst DU mir da weiterhelfen?
Mark
1979mark
neu hier
 
Beiträge: 8
Registriert: 11.05.2009, 08:15

Re: Webseite komplett drucken, nur wie?

Beitragvon 1979mark » 11.05.2009, 08:56

Hi,

habe gefunden, das es die template.css datei ist.

Wenn ich diese angebe, dann klappt das, danke dir?
Nur wenn der Text dann länger als eine Din A4 Seite ist. Dann wird die erste Seite mit text gedruckt und die zweite Seite kommt zwar mit Footer raus aber ohne Text. Woran liegt das?

Mark
1979mark
neu hier
 
Beiträge: 8
Registriert: 11.05.2009, 08:15

Re: Webseite komplett drucken, nur wie?

Beitragvon the_fan » 11.05.2009, 09:05

nutzt du den firefox oder den internet explorer?
beim firefox gab es mal einen sogenannten "one page bug". ich meine mich daran zu erinnern, dass er ausschlag für das von dir beschriebene problem war.

zudem habe ich bei selfhtml gefunden, dass in die erste zeile der print-datei folgendes geschrieben werden soll

Code: Alles auswählen
* {
overflow:visible !important;
}
the_fan
Gelegenheitsleser
 
Beiträge: 47
Registriert: 05.05.2009, 11:48

Re: Webseite komplett drucken, nur wie?

Beitragvon 1979mark » 11.05.2009, 09:16

the_fan hat geschrieben:
Code: Alles auswählen
* {
overflow:visible !important;
}


Das war es vielen Dank.
Am Ende werden nur die letzen 3-4 Zeilen vom Footer überschrieben, gibt es da auch noch einen netten Code?

Mark
1979mark
neu hier
 
Beiträge: 8
Registriert: 11.05.2009, 08:15

Re: Webseite komplett drucken, nur wie?

Beitragvon the_fan » 11.05.2009, 09:35

versuch mal, ob es funktioniert, wenn du dem footer-div
Code: Alles auswählen
clear:both;


zuordnest.
was anderes würde mir jetzt auf die schnelle nicht einfallen.
arbeitest du mit fixen höhen?
the_fan
Gelegenheitsleser
 
Beiträge: 47
Registriert: 05.05.2009, 11:48

Re: Webseite komplett drucken, nur wie?

Beitragvon 1979mark » 11.05.2009, 09:38

Hi,

mit fixen Höhen sagt mir jetzt nichts.
Sobald der Text länger ist, geht auch die untere Footer Leiste mit nach unten. Meinst du das?

Also meine print.css sieht momentan so aus:

body {margin: 0; padding: 0; background-image: url('bg.png'); background-repeat: repeat; background-position: left top; }
#imSite {width: 930px; margin: 15px auto; text-align: left; }
#imHeader {height: 220px; background-color: #C0C0C0; background-image: url('top.jpg'); background-repeat: no-repeat; }
#imBody {background-color: #FFFFFF; }
#imMenuMain {width: 148px; float: left; padding: 25px 0 0 7px; }
#imContent {width: 768px; float: left; margin-top: 15px; }
#imFooter {clear: both; height: 35px; background-color: #C0C0C0; background-image: url('bottom.gif'); background-repeat: repeat-x; background-position: left top; }
1979mark
neu hier
 
Beiträge: 8
Registriert: 11.05.2009, 08:15

Re: Webseite komplett drucken, nur wie?

Beitragvon the_fan » 11.05.2009, 09:44

mit fixen höhen meinte ich, dass dein content beispielsweise auf 500px höhe gesetzt ist. aber das ist ja nicht der fall.
hat das clear:both; was verändert?
ansonsten scheint mir die css soweit richtig zu sein.
the_fan
Gelegenheitsleser
 
Beiträge: 47
Registriert: 05.05.2009, 11:48

Re: Webseite komplett drucken, nur wie?

Beitragvon 1979mark » 11.05.2009, 09:54

clear : both

war vorher schon drin, aber die letzten zeilen springen noch immer über den footer hinaus.
1979mark
neu hier
 
Beiträge: 8
Registriert: 11.05.2009, 08:15

Re: Webseite komplett drucken, nur wie?

Beitragvon the_fan » 12.05.2009, 09:41

und wenn du dem footer auch ein float:left; zuweist?
mir fehlen die ideen.. :?
the_fan
Gelegenheitsleser
 
Beiträge: 47
Registriert: 05.05.2009, 11:48

Re: Webseite komplett drucken, nur wie?

Beitragvon 1979mark » 12.05.2009, 09:45

the_fan hat geschrieben:und wenn du dem footer auch ein float:left; zuweist?
mir fehlen die ideen.. :?


Hi darf ich mal fragen wofür das float:left; steht?
1979mark
neu hier
 
Beiträge: 8
Registriert: 11.05.2009, 08:15

Re: Webseite komplett drucken, nur wie?

Beitragvon the_fan » 12.05.2009, 09:51

ich bin mir nicht sicher, ob objekte mit dem atribut clear: auch gefloatet werden müssen.
float gibt man eigentlich an, wenn man beispielsweise text um ein bild schreiben möchte. float heißt soviel wie fließen. wenn du also auch objekt floatest, fließt der text um es herum.

da wird das aber nicht erreichen wollen und es trotzdem machen, hoffe ich, dass es einen zusammenhang zwischen clear: und float: gibt. bin mir aber nicht sicher. ausprobieren kostet nichts :)
the_fan
Gelegenheitsleser
 
Beiträge: 47
Registriert: 05.05.2009, 11:48

Re: Webseite komplett drucken, nur wie?

Beitragvon 1979mark » 12.05.2009, 09:59

Hi,

ich hab nun mal zwei Beispiele der Druckvorschau angehängt.

einmal mit dem original
#imFooter {clear: both; height: 45px; background-image: url('bottom.jpg'); background-repeat: no-repeat; background-position: left top; }


Bild

und hier mir deiner lösung
#imFooter {float: left; height: 45px; background-image: url('bottom.jpg'); background-repeat: no-repeat; background-position: left top; }


Bild
1979mark
neu hier
 
Beiträge: 8
Registriert: 11.05.2009, 08:15

Re: Webseite komplett drucken, nur wie?

Beitragvon the_fan » 12.05.2009, 10:04

steht der text etwas im div #imFooter drin? das div ist - so wie ich das sehe - eigentlich nur dafür da, die letzte grafik anzuzeigen. der text müsste also aus dem footer raus und in den content, bzw das div #imContent, rein.

hast du die seite online?
the_fan
Gelegenheitsleser
 
Beiträge: 47
Registriert: 05.05.2009, 11:48


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Webseite komplett drucken, nur wie?"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast