Domov > HTML/CSS in dizajniranje spletnih strani > CSS problem (pri zoomiranju)
stran 1 od 2 |<<12>|
CSS problem (pri zoomiranju)
 
exhuminator8. dec 2009 11:38:06Pridružen od:
1. apr 2008
45 objav
+301
#1Pozdravljeni.

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.
nazadnje urejal exhuminator 8. dec 2009 11:39:07
všeč(0)ni všeč(0)spam(0)
 
 
carli8. dec 2009 12:35:54Pridružen od:
5. avg 2008
602 objavi
+137-157
#2Nastavi pravi background-color zgornji sliki.
všeč(0)ni všeč(0)spam(0)
Moja Košarica
 
 
exhuminator8. dec 2009 13:52:45Pridružen od:
1. apr 2008
45 objav
+301
#3kar je belo, je načrtno belo (razen te črte) :)
sem poskušal s tem, pa brez sprememb :)
všeč(0)ni všeč(0)spam(0)
 
 
carli8. dec 2009 14:06:23Pridružen od:
5. avg 2008
602 objavi
+137-157
#4#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.
všeč(0)ni všeč(0)spam(0)
Moja Košarica
 
 
exhuminator8. dec 2009 14:25:52Pridružen od:
1. apr 2008
45 objav
+301
#5#wrapper {
backround: white;


to mora ostat, ker drugače se zamenja ozadje bannerja zgoraj kompletno (slika)
všeč(0)ni všeč(0)spam(0)
 
 
exhuminator8. dec 2009 14:49:10Pridružen od:
1. apr 2008
45 objav
+301
#6Hm... 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 :)
všeč(0)ni všeč(0)spam(0)
 
 
SpinX8. dec 2009 14:53:32Pridružen od:
17. mar 2007
2579 objav
+1323-14412
#7background:#HEX url('/design/meni_bg.gif') no-repeat bottom;
všeč(0)ni všeč(0)spam(0)
Wordpress teme | Razrez designov: damjan@xhtml.si |
 
 
exhuminator8. dec 2009 15:13:18Pridružen od:
1. apr 2008
45 objav
+301
#8Ž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 :)
všeč(0)ni všeč(0)spam(0)
 
 
SpinX8. dec 2009 15:15:49Pridružen od:
17. mar 2007
2579 objav
+1323-14412
#9Potem pa nekam uploadaj da lahko pogledamo stvar. Zakaj bi tle študiral kdo kodo, če lahko s firebugom na hitr pogledaš kar te zanima.
všeč(0)ni všeč(0)spam(0)
Wordpress teme | Razrez designov: damjan@xhtml.si |
 
 
exhuminator8. dec 2009 15:33:00Pridružen od:
1. apr 2008
45 objav
+301
#10Imaš prav. Stran sem naložil tukaj.
všeč(0)ni všeč(0)spam(0)
 
 
Domov > HTML/CSS in dizajniranje spletnih strani > CSS problem (pri zoomiranju)
stran 1 od 2 |<<12>|