CSS problem (pri zoomiranju)
3 naročniki
3 naročniki
Pozdravljeni.
Pri izdelavi spletne strani (html/css) sem naletel na problem, ki ga ne znam rešiti. Kadar spletno stran zoomiram (+ ali -), se mi na povsem naključnih % (120, 85, 145,..) zgodi, da ozadje strani prekrije tanka bela črta. Nisem prepričan, zakaj se to dogaja, ampak verjamem da bo kdo izmed vas vedel za problem in pomagal pri rešitvi :)
.CSS koda
body {
background-color: #A6BBDD;
}
#wrapper {
width: 800px;
position: relative;
margin: auto;
background: white;
}
#crta_levo {
background: url('/design/line.gif') repeat-x;
height: 2px;
width: 673px;
float: left;
margin-top: 10px;
margin-left: 1px;
visibility: visible;
}
#button_top {
float: left;
}
#crta_desno {
background: url('/design/line.gif') repeat-x;
height: 2px;
width: 77px;
float: left;
margin-top: 10px;
visibility: visible;
}
#header {
background: url('/design/meni_bg.gif') no-repeat bottom;
height: 320px;
visibility: visible;
}
#meni a {
background: url('/design/button.gif') no-repeat;
display: block;
width: 105px;
height: 33px;
padding-top: 6px;
text-decoration: none;
text-align: center;
color: white;
font-weight: bolder;
font-size: 15px;
float: left;
position: relative;
visibility: visible;
}
#meni a.opened {
background: url('/design/button_active.gif') no-repeat;
visibility: visible;
}
#meni a:hover {
background: url('/design/button_active.gif') no-repeat;
visibility: visible;
}
#logo {
width: 91px;
height: 90px;
margin-left: 660px;
margin-top: 30px;
float: left;
position: absolute;
}
#animacija {
float: left;
width: 630px;
margin-top: 20px;
position: absolute;
}
#content {
background: #245194;
min-height: 350px;
height: auto;
color: white;
padding: 10px;
}
HTML koda
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naslov</title>
<meta name="keywords" content="ključne besede">
<meta name="description" content="Opis spletne strani">
<link rel="stylesheet" type="text/css" href="design/style.css" />
<script language="JavaScript1.1" type="application/javascript">
<!--
//Pixelating Image slideshow
//Copyright Dynamic Drive 2001
//Visit http://www.dynamicdrive.com for this script
//specify interval between slide (in mili seconds)
var slidespeed = 10000
//specify images
var slideimages = new Array("design/animacija/slika1.png", "design/animacija/slika2.png", "design/animacija/slika3.png", "design/animacija/slika4.png", "design/animacija/slika5.png", "design/animacija/slika6.png")
//specify corresponding links
var slidelinks = new Array("")
var imageholder = new Array()
var ie55 = window.createPopup
for (i = 0; i < slideimages.length; i++) {
imageholder*= new Image()
imageholder*.src = slideimages*}
function gotoshow(){
window.location = slidelinks[whichlink]
}
//-->
</script>
</head>
<body>
<div id="wrapper">
<div id="crta_levo"></div>
<div id="button_top">
<a href="index.html"><img src="/design/home.png" border="0" alt="" /></a>
<a href="kontakt.html"><img src="/design/mail.png" border="0" alt="" /></a>
</div>
<div id="crta_desno"></div>
<div id="animacija">
<img src="design/animacija/slika1.png" name="slide" alt="" border=0 width="630" height="246">
<script language="JavaScript1.1" type="application/javascript">
<!--
var whichlink=0
var whichimage=0
var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie55) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()
//-->
</script>
</div>
<div id="logo">
<a href="index.html"><img src="design/logotip.png" border="0" alt="" /></a>
</div>
<div id="header">
<div id="meni">
<a style="margin: 250px 0 0 25px;" href="podjetje.html">PODJETJE</a>
<a style="margin: 250px 0 0 25px;" href="dejavnost.html">DEJAVNOST</a>
<a style="margin: 235px 0 0 25px;" href="kontakt.html">KONTAKT</a>
<a style="margin: 216px 0 0 25px; font-size: 12px; padding-top: 8px;" href="strokovnjaki.html">STROKOVNJAKI</a>
<a style="margin: 185px 0 0 25px;" href="reference.html">REFERENCE</a>
<a style="margin: 150px 0 0 25px;" href="vizitka.html">VIZITKA</a>
</div>
</div>
<div id="content">
<font face="Arial"><b><center>vsebina</center></b>
</font>
</div>
</div>
</body>
</html>***
***Screenshots:
60 % zoom
http://i46.tinypic.com/2im6ck4.jpg
85 % zoom
http://i45.tinypic.com/112cz1f.jpg
120 % zoom
http://i47.tinypic.com/2z71vew.jpg
145 % zoom
http://i46.tinypic.com/r8xs0n.jpg
Gre mogoče za kako matematično zadevo? :)
Hvaležen bom vsakemu predlogu :)
Lp
T.***
11 odgovorov
#wrapper imaš bel, ozadja pri na kateri je meni nimaš nastavljenega ... Predvidevam da se slika toliko odmakne, da se vidi ozadje se pravi že wrapper. Probaj tej sliki nastaviti bg, čene probaj dat wrapper rdeč in testiraj, če bo črta rdeča ti bo jasno.
#wrapper {
backround: white;
to mora ostat, ker drugače se zamenja ozadje bannerja zgoraj kompletno (slika)
Hm... mislim da sem delno ugotovil razlog problema..
#header {
background: url('/design/meni_bg.gif') no-repeat bottom;
height: 320px;
visibility: visible;
}
tukaj noter bi moral nekako napisati še barvo ozadja... pa da bi to dejansko upoštevalo :) ko sem zapis background: url('/design/meni_bg.gif') no-repeat bottom; zamenjal z background-color: #HEX koda barve ... tiste bele linije ni bilo več, ampak tudi tiste slike za ozadje, ki bi morala biti - ne :)
Žal tudi to ne bo. Verjetno bo treba .css na novo "zgradit".
Edina rešitev ki odstrani tiste bele črte je
#header {
background-color: #245194;
height: 320px;
visibility: visible;
}
belih linij tako ni več, ni pa tudi slike ozadja, ki mora nujno bit tam :)
Potem pa nekam uploadaj da lahko pogledamo stvar. Zakaj bi tle študiral kdo kodo, če lahko s firebugom na hitr pogledaš kar te zanima.