webForumDet fria alternativet
Logga in / Bli medlem

Media i CSS-får det inte att funka

HTML & CSS

6 svar · 446 visningar · startad av Isza-96

Isza-96Medlem sedan apr. 200924 inlägg
Frågan#1

Jag ska försöka göra min sida utskriftvänlig med hjälp av @media print i mitt CSS-dokument. Det har fungerat vid ett tidigare tillfälle då jag hade en liten och väldigt enkel webbplats.

Den jag gör nu är något större men det borde ju funka utan problem ändå. Har jag missat något eller är det något som ska bort?

body {
margin: 0;
padding: 0;
margin-top: 0;
margin-bottom: 0;
background-color: #0066cc;
}

a {
color: #000099;
text-decoration: none;
}

#hela {

width: 770px;
font-size: 100%; 
margin-left: 450px;
margin-bottom: 0;
line-height: 150%; 
background-color: #FFFFFF;
}

}

#tid {
position: absolute;
top: 150px;
left: 770px;
}

h1{
color: black;
font-family: verdana, sans-serif;
font-size: 100%;
line-height: 150%;
margin-bottom: 20px;
margin-top: 30px;
margin-left: 100px;

}

.ingress{
font-size: 75%;
font-weight: bold;}

#reling {
margin-left: 100px;
margin-right: 315px;
border-color: #004181;
Border-style: solid;
}

#guldskepp {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#platinaskepp {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#diamantskepp {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#nrettskepp {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#mandraki {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#oia {
margin-left: 100px;
margin-right: 315px;
border-color: #004181;
Border-style: solid;
}

#ephesosamfiteater {
margin-left: 100px;
margin-right: 315px;
border-color: #004181;
Border-style: solid;
}

#mykonos {
margin-left: 100px;
margin-right: 315px;
border-color: #004181;
Border-style: solid;
}

#knossos {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#limassol {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#rhodosdelfin {
margin-left: 100px;
margin-right: 315px;
border-color: #004181;
Border-style: solid;
}

#akropolis {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#bordsdekoration {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#massage {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#casino {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#faq {
margin-left: 100px;
margin-right: 315px;
border-color: #004181;
Border-style: solid;
}

p{
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
margin-top: 10px;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 100px;
margin-right: 100px;
line-height: 150%;
}

h2{
color: black;
font-family: verdana, sans-serif;
font-size: 85%;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 100px;
line-height: 150%;
}

h3{
color: black;
font-family: verdana, sans-serif;
font-size: 90%;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 100px;
line-height: 150%;
}

h4 {
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
font-weight:bold;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 100px;
line-height: 150%;
}

#meny{
width: 100%;
margin-top: -14px;
margin-bottom: 20px;
background-color: #bfdfff;
text-align: left;
font-size: 85%;
padding: 0;
}

#menu ul{
padding: 20px 10px 0 0;
}

#meny li{
display: inline;
margin: 1px 1px 1px 1px;
}

#meny a{
color: #004181;
text-decoration: none;
padding: 0 10px 0 10px;
}

#meny a:hover{
color: red;
text-decoration: underline;
}

#meny a:visited {
color: black
}

#undermeny {
position: absolute;
margin-left: -90px;
width: 30px;
margin-top: 87px;
}

#nyheter {
position: absolute;
margin-left: -90px;
width: 40px;
margin-top: 115px;
font-size: 75%;
}

#kontakt {
margin-left: 90px;
font-size: 75%;
top: 985px;
margin-bottom: 0;
}

#faktaruta1 {
margin-left: 70px;
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
}

#faktaruta2 {
margin-left: 70px;
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
}

#faktaruta3 {
margin-left: 70px;
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
}

#faktaruta4 {
margin-left: 70px;
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
}

#komihåg {
margin-left: 70px;
margin-right: 100px;
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
}

#kontakt {
margin-left: 90px;
font-size: 75%;
top: 985px;
margin-bottom: 0;
}

.clearfix{
margin-left: 100px;
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
}

.mail {
margin-left: 135px;
font-size: 75%;
top: 985px;
margin-bottom: 0;
}

@media print {
font-family: Georgia; serif; 
font-size: 12pt;}

@media print {
#hela {width: 770pt;}

@media print {
#reling {display: none;}

@media print {
#guldskepp {display: none;}

@media print {
#platinaskepp {display: none;}

@media print {
#diamantskepp {display: none;}

@media print {
#nrettskepp {display: none;}

@media print {
#mandraki {display: none;}

@media print {
#oia {display: none;}

@media print {
#ephesosamfiteater {display: none;}

@media print {
#mykonos {display: none;}

@media print {
#knossos {display: none;}

@media print {
#limassol {display: none;}

@media print {
#rhodosdelfin {display: none;}

@media print {
#akropolis {display: none;}

@media print {
#bordsdekoration {display: none;}

@media print {
#massage {display: none;}

@media print {
#casino {display: none;}

@media print {
#faq {display: none;}
voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#2

Om du kolla i din css kod så öppnar du mer { än vad du stänger, men helst eller vad jag tycker är enklare är att du skapar en egen CSS fil för print och kör html kod för det:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Eller så (har ingen aning om det fungera men):

@media print {
	body {font-family: Georgia; serif; font-size: 12pt;}
	#hela {width: 770pt;}
	#reling {display: none;}
	#guldskepp {display: none;}
	#platinaskepp {display: none;}
	#diamantskepp {display: none;}
	#nrettskepp {display: none;}
	#mandraki {display: none;}
	#oia {display: none;}
	#ephesosamfiteater {display: none;}
	#mykonos {display: none;}
	#knossos {display: none;}
	#limassol {display: none;}
	#rhodosdelfin {display: none;}
	#akropolis {display: none;}
	#bordsdekoration {display: none;}
	#massage {display: none;}
	#casino {display: none;}
	#faq {display: none;}
}

, eller hellst kanske tom:

@media print {
	body {font-family: Georgia; serif; font-size: 12pt;}
	#hela {width: 770pt;}
	#reling, #guldskepp, #platinaskepp, #diamantskepp,
	#nrettskepp, #mandraki, #oia, #ephesosamfiteater,
	#mykonos, #knossos, #limassol, #rhodosdelfin,
	#akropolis, #bordsdekoration, #massage, #casino, #faq
	{
		display: none;
	}
}

Eller sätt en klass på alla dina element som skall vara dålda vid print istället för att lägga in alla idn du har i ditt dokument.

Isza-96Medlem sedan apr. 200924 inlägg
#3

Tack för hjälpen!

Jag tog bort alla "öppningar" som inte stängdes och vips så funkade det!

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#4

Vad bra!

Sätt tråden som löst så andra hittar svar på liknande problem snabbt ;)

Isza-96Medlem sedan apr. 200924 inlägg
#5

Hur gör man det? Är ganska ny här..:-)

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#6

Till höger så ser du på varje svar som finns i en tråd, tryck på länken "Acceptera som slutgiltigt svar", done ;)

Isza-96Medlem sedan apr. 200924 inlägg
#7

Tack!!

254 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
123 ms — deklarationer (db)
0 ms — hämta statistik (cache)
129 ms — hämta tråd, inlägg och bilagor (db)
120 ms — ändringar (db)