Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: css div problem

  1. #1
    Join Date
    Oct 2008
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default css div problem

    I have this css style:

    Code:
    <style type="text/css">
    <!--{}
    
    body {padding:0;margin:0}
    
    #banner img {width:100%;margin:auto;border-bottom:1px solid;border-color:black;}
    
    #pozacentrusus {width:100%;margin:auto;}
    
    #pozastanga {width:20%;margin-top:5%}
    
    #pozadreapta {position:absolute;margin-left:80%;width:20%;height:40%;top:200px}
    
    #pozacentrujos {margin-top:10%;width:100%;height:5%;border-bottom:1px solid;border-color:black;}
    
    #cuvintecheie {color:grey;width:100%}
    
    
    {}
    -->
    </style>


    and this html file:

    Code:
    <html>
    <head>
    <title>..::OtisWeb::.. - Web Design | Web Hosting | Optimizare Web | Service I.T. | I.T. Shop</title>
    <link rel="stylesheet" type="text/css" href="style2.css">
    </head>
    <body>
    
    
    <div id="banner" align="center"><img src="images/banner.gif"></div>
    
    <div id="pozacentrusus" align="center"><img src="images/shape46617375.gif" width="100%" height="5%"></div>
    
    <div id="pozastanga"><img src="images/bigfinal.jpg" width="100%" height="50%"><br><br><img src="images/final.jpg" width="100%" 
    
    height="30%"></div>
    
    <div id="pozadreapta"><img src="images/bigfinal.jpg" width="100%" height="100%"></div>
    
    <div id="pozacentrujos" align="center"><img src="images/shape46634046.gif" width="100%" height="100%"></div>
    
    <div id="cuvintecheie"><center>html, php, forum, v-mark, his, pc, d-link, microsoft, sony,hp, creative, dell, web design, hosting, lg, 
    
    samsung, inscrierea ava, ibm, printer, desktop, seo, mouse, ip-time, intel, gaming, horizon, laptop, notebook, director web, asus, philips, 
    
    toshiba, acer, keyboard, kingston, genius, epson, lenovo, msi, xbox360, lite on, gigabyte, lexmark, anunturi, apc, belkin , packard bell, 
    
    delux, amd, elixir, placa video, bitdefender, spire, asrock, galaxy, pqi, kingmax,  biostar, carcasa, hub hosting, dezvoltare it, 
    
    consumabile, imprimanta, placa de baza, flybook, innovision, infimax, optimizare, optimizare google, web design timisoara, optimizare 
    
    timisoara, hosting timisoara, calculatoare timisoara, calculatoare arad, web design arad, optimizare web arad, magazin de calculatoare arad, 
    
    magazin de calculatoare timisoara, it arad, it timisoara</center><center>
    
    </body>
    
    
    </html>

    the problem is why div "pozadreapta: isn't positioned to the right of div "poza stanga" and is positioned above of it. pls help

  2. #2
    Join Date
    Aug 2009
    Posts
    92
    Thanks
    0
    Thanked 9 Times in 9 Posts

    Default

    try this
    <style type="text/css">
    <!--{}
    body {padding:0;margin:0}
    #banner img {width:100%;margin:auto;border-bottom:1px solid;border-color:black;}
    #pozacentrusus {position:absolute;margin-left:80%;width:20%;height:40%;top:10px}
    #pozastanga {position:absolute;margin-left:80%;width:20%;height:40%;top:100px}
    #pozadreapta {position:absolute;margin-left:80%;width:20%;height:40%;top:200px}
    #pozacentrujos {position:absolute;margin-top:10%;width:100%;height:5%;border-bottom:1px solid;border-color:black;}
    #cuvintecheie {color:grey;width:100%}
    {}
    -->
    </style>

  3. #3
    Join Date
    Aug 2009
    Posts
    92
    Thanks
    0
    Thanked 9 Times in 9 Posts

    Default

    forgot to close the </div> in cuvintecheie

    <div id="banner" align="center"><img src=" 5.gif"></div>
    <div id="pozacentrusus" align="center"><img src=" 5.gif" width="100%" height="5%"></div>
    <div id="pozastanga"><img src="1.gif" width="100%" height="50%"></A>
    <img src="3.gif" width="100%" height="30%">
    </div>
    <div id="pozadreapta"><img src="usa.gif" width="100%" height="100%"></div>
    <div id="pozacentrujos" align="center"><img src="6.gif" width="100%" height="100%"></div>
    <div id="cuvintecheie"><center>html, php, forum, v-mark, his, pc, d-link, microsoft, sony,hp, creative, dell, web design, hosting, lg,
    samsung, inscrierea ava, ibm, printer, desktop, seo, mouse, ip-time, intel, gaming, horizon, laptop, notebook, director web, asus, philips,
    toshiba, acer, keyboard, kingston, genius, epson, lenovo, msi, xbox360, lite on, gigabyte, lexmark, anunturi, apc, belkin , packard bell,
    delux, amd, elixir, placa video, bitdefender, spire, asrock, galaxy, pqi, kingmax, biostar, carcasa, hub hosting, dezvoltare it,
    consumabile, imprimanta, placa de baza, flybook, innovision, infimax, optimizare, optimizare google, web design timisoara, optimizare
    timisoara, hosting timisoara, calculatoare timisoara, calculatoare arad, web design arad, optimizare web arad, magazin de calculatoare arad,
    magazin de calculatoare timisoara, it arad, it timisoara</center><center></div>

  4. #4
    Join Date
    Oct 2008
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    if I put the top with px and not with % the image will change dimensions when I change the resolution of the monitor

  5. #5
    Join Date
    Aug 2009
    Posts
    92
    Thanks
    0
    Thanked 9 Times in 9 Posts

    Default

    if you want the image stay the same change the
    width="100%" height="100%"
    --------TO------------
    width="100" height="100" image stays the same try that

  6. #6
    Join Date
    Oct 2008
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by stringcugu View Post
    if you want the image stay the same change the
    width="100%" height="100%"
    --------TO------------
    width="100" height="100" image stays the same try that
    if I do in that way the size of the image will change when it change the monitor rezolution.....

  7. #7
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    here i think this is what u need

    css (try taking out the
    <style type="text/css">
    <!--{}

    {}
    -->
    </style>
    because it is an extrenal style sheet.)
    i thank that would help a lil


    body {padding:0;margin:0}

    #banner img {position:absolute;width:100%;margin:auto;border-bottom:1px solid;border-color:black;}

    #pozacentrusus {position:absolute;width:100%;margin:auto;}

    #pozastanga {position:absolute;width:20%;margin-top:5%}

    #pozadreapta {position:absolute;position:absolute;margin-left:80%;width:20%;height:40%;top:200px}

    #pozacentrujos {position:absolute;margin-top:10%;width:100%;height:5%;border-bottom:1px solid;border-color:black;}

    #cuvintecheie {color:grey;width:100%}


    html:

    <div id="banner" align="center"><img src="images/banner.gif"></div>

    <div id="pozacentrusus" align="center"><img src="images/shape46617375.gif" width="100%" height="5%"></div>

    <div id="pozastanga"><img src="images/bigfinal.jpg" width="100%" height="50%"><br><br><img src="images/final.jpg" width="100%"

    height="30%"></div>

    <div id="pozadreapta"><img src="images/bigfinal.jpg" width="100%" height="100%"></div>

    <div id="pozacentrujos" align="center"><img src="images/shape46634046.gif" width="100%" height="100%"></div>

    <div id="cuvintecheie">
    <center>html, php, forum, v-mark, his, pc, d-link, microsoft, sony,hp, creative, dell, web design, hosting, lg,

    samsung, inscrierea ava, ibm, printer, desktop, seo, mouse, ip-time, intel, gaming, horizon, laptop, notebook, director web, asus, philips,

    toshiba, acer, keyboard, kingston, genius, epson, lenovo, msi, xbox360, lite on, gigabyte, lexmark, anunturi, apc, belkin , packard bell,

    delux, amd, elixir, placa video, bitdefender, spire, asrock, galaxy, pqi, kingmax, biostar, carcasa, hub hosting, dezvoltare it,

    consumabile, imprimanta, placa de baza, flybook, innovision, infimax, optimizare, optimizare google, web design timisoara, optimizare

    timisoara, hosting timisoara, calculatoare timisoara, calculatoare arad, web design arad, optimizare web arad, magazin de calculatoare arad,

    magazin de calculatoare timisoara, it arad, it timisoara</center></div>

  8. #8
    Join Date
    Oct 2008
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    the problem is thisfor example)

    #pozadreapta {margin-top:-37%;margin-left:80%;width:20%;height:40%}

    #pozacentrujos {margin-top:25%;width:100%;height:5%;border-bottom:1px solid;border-color:black;}

    if in the css code #pozacentrujos is below #pozadreapta like the example before, in the html the div pozacentrujos will consider margin-top:0 the distance between pozadreapta div not margin-top:0 from the start of the screen.how can I fix that?

  9. #9
    Join Date
    Oct 2008
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    now I have problems with the text.in what should I exprime the writing to remain at the same size and format when I change the monitor rezolution?in what dimensions is better to write?px, em or % ?

  10. #10
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    There's a question. But I have another one.. Why do you want your text to remain the same size no matter the resolution? You only want people with 20/20 vision to look at your stuff?

    People with low resolutions, bad eyesight, or crappy monitors need the flexibility of being able to increase text size for their benefit.

    With that said, read this article as it covers all the methods of sizing text and how to best go about it.

    Personally I would stick to px, because they are easier to re-size, and I would rather have someone read my words and ruin my layout on their screen than the other way around.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •