Domov > HTML/CSS in dizajniranje spletnih strani > CSS problem (pri zoomiranju)
stran 1 od 2 |< < 1 2 >|
CSS problem (pri zoomiranju)
 
exhuminator 8. dec 2009 10:38:06 Pridružen od:
1. apr 2008
45 objav
 3 0 1
#1

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.***


všeč(0) ni všeč(0) spam(0)
 
 
carli 8. dec 2009 11:35:54 Pridružen od:
5. avg 2008
1258 objav
 583 54 17
#2

Nastavi pravi background-color zgornji sliki.


všeč(0) ni všeč(0) spam(0)
 
 
exhuminator 8. dec 2009 12:52:45 Pridružen od:
1. apr 2008
45 objav
 3 0 1
#3

kar 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)
 
 
carli 8. dec 2009 13:06:23 Pridružen od:
5. avg 2008
1258 objav
 583 54 17
#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)
 
 
exhuminator 8. dec 2009 13:25:52 Pridružen od:
1. apr 2008
45 objav
 3 0 1
#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)
 
 
exhuminator 8. dec 2009 13:49:10 Pridružen od:
1. apr 2008
45 objav
 3 0 1
#6

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 :)


všeč(0) ni všeč(0) spam(0)
 
 
SpinX 8. dec 2009 13:53:32 Pridružen od:
17. mar 2007
2618 objav
 1720 190 20
#7 
background:#HEX url('/design/meni_bg.gif') no-repeat bottom;
všeč(0) ni všeč(0) spam(0)
Developer? Bi delal v kul podjetju ? http://dlabs.si/jobs
 
 
exhuminator 8. dec 2009 14:13:18 Pridružen od:
1. apr 2008
45 objav
 3 0 1
#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)
 
 
SpinX 8. dec 2009 14:15:49 Pridružen od:
17. mar 2007
2618 objav
 1720 190 20
#9

Potem 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)
Developer? Bi delal v kul podjetju ? http://dlabs.si/jobs
 
 
exhuminator 8. dec 2009 14:33:00 Pridružen od:
1. apr 2008
45 objav
 3 0 1
#10

Imaš 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 |< < 1 2 >|
 

🔒 Za odgovor na to temo se moraš prijaviti.

Prijavi se