Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS background help

    Hi im new here, and pretty new to (x)html and css...

    I need help with a background problem... the page i want to create is fixed in size and is wrapped bi a big div to constrict its size, the problem is that it has a gradient somewhere in the middle, which i should continue with a background in the whole body (wrapper isnt same as body). i have done this and it looks pretty good (the gradient is continued on) except when i resize the window, in which case the background gradient stays the same size and goes to the right while the gradient in the wrapper goes along to the left with the resizing. i want to know if there is a way to fix my body background's middle to a div, or something else so the gradients would continue one another.

    Thank you in advance

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Best if you post some code or a link.

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmm... as i said, its just a big div in the middle of the page... dont think what is in it is of much importance, but here goes...
    The idea is taht i want to set up a vertical gradient (left white > right black) as the body background. i have done that but when i resize the window of the browser, it all goes wrong. is there any way i can fix this?

    THE HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Botox Index</title>
    <link href="css/botox.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

    <div class="content">

    <div class="left">

    <div id="logo">
    <div class="gradient1"><img src="img/gradient.png" width="34" height="79" alt="" /></div>
    <a href="Index.html"><img border="0" src="img/logo.png" width="184" height="74" alt="Botox Cluj Napoca" id="botox-logo" /></a>
    <div id="horline1"><img src="img/horline1.jpg" width="217" height="1" alt="" /></div>
    <div class="gradient1"><img src="img/gradient.png" width="34" height="731" alt="" /></div>
    </div>
    <div id="picleft">
    <div class="links">
    <a href="">Contact </a>| <a href="">Lista de preturi</a> | <a href="">Programare</a>
    </div>

    </div>

    </div>

    <div id="vertline1">
    <img src="img/vertline1.jpg" height="811" width="5" alt="" />
    </div>
    <div id="vertline2">
    <img src="img/vertline2.jpg" height="811px" width="3" alt="" />
    </div>

    <div class="right">

    <div class="menu">
    <ul class="links">
    <li><a href="Index.html">Botox</a></li>
    <li class="lilink"><a href="efectebotox.html">Efecte <br /> Botox</a></li>
    <li class="lilink"><a href="injectiibotox.html">Injectii <br /> Botox</a></li>
    <li class="lilink"><a href="rezultatebotox.html">Rezultate <br /> Botox</a></li>
    <li class="lilink"><a href="tratamentecosmetice.html">Tratamente <br /> cosmetice</a></li>
    <li class="lilink"><a href="symbeautycluj.html">Symbeauty <br /> Cluj</a></li>
    </ul>
    <div id="horline2"><img src="img/horline2.jpg" width="575" height="1" alt="" /></div>
    </div>


    <div class="contentright">
    <div class="top">
    <div id="topimg"><img src="img/toppic.png" alt="cosmetica Botox cluj napoca" width="186" height="267" class="leftimg" /></div>
    <h1>Cosmetica BOTOX Cluj Napoca</h1>
    <p>Ridurile de expresie iau nastere ca urmare a contractiei repetate a muschilor* faciali, care comunica stari de spirit atat de diferite, de la nervozitate, suparare, mirare* pana la bucurie si incantare. Daca la tineri aceste pliuri se sterg odata cu disparitia expresiei, dupa 30 de ani aceste riduri au tendinta sa devina mai persistente, iar dupa 40 de ani sunt din ce in ce mai profunde.** Cea mai rapida cale de a scapa de ridurile de expresie este injectia cu Botox. Este vorba de o reactie reversibila si controlata a muschilor faciali. Botoxu nu este o interventie dureroasa rezultatele sunt vizibile , nu implica timp de recuperare; acestea sunt numai cateva dintre motivele pentru care Botoxul este cea mai populara procedura nechirurgicala. Ingredientul folosit pentru blocarea muschilor faciali este produs de bacteria Clostridium botulinum. Desi toxina este aceeasi care poate provoca toxiinfectii alimentare, cantitatea folosita este atit de mica incit nu declanseaza nicio reactie la nivelul organismului.</p>
    <div class="read"><a href="">&gt; citeste mai mult</a></div>
    <div class="clear"></div>
    </div>

    <div class="mid1">
    <img src="img/midleft.png" width="185" height="61" alt="Tratament Botox" />
    <p>Toxina botulinica a fost prima data folosita in 1980 pentru tratamentul strabismului, acest moment marcand inceputul utilizarii sale in medicina umana. De atunci, botoxul s-a transformat intr-un adevarat remediu anti-rid. </p>
    <div class="read"><a href="">&gt; citeste mai mult</a></div>
    </div>

    <div class="mid2">
    <h2>Tratamente <br />Cosmetice</h2><br />

    <p>Daca v-ati hotarat ca doriti un tratament cu botox cosmetic pentru eliminarea ridurilor, este necesar sa efectuati o consultatie medicala, care va stabili daca sunteti un candidat potrivit pentru acest tratament. <br /><br /><a href="">&gt; citeste mai mult</a></p>
    </div>


    <div class="clear"></div>

    <div class="bottom">
    <div class="bottomleft">
    <h2>BOTOX CLUJ</h2>
    <p>Hiperhidroza descrie transpiratia in exces fata de cea necesara in mod normal pentru reglarea temperaturii corporale. Nu este considerata o boala, dar este o stare suparatoare care poate determina disfunctii </p>
    <div class="read"><a href="">&gt; citeste mai mult</a></div>
    </div>
    </div>
    <div class="picbottom"><a href="" target="_blank"><img src="img/picbottom.png" width="352" height="165" alt="Crema Tratament" border="none" /></a></div>
    <div class="clearfloat"></div>

    </div>

    </div>

    </div>

    </body>


    </html>






    AND THE CSS (external and also used by some other things of mine, so dont be surprised if theres something there that u dont find in the html here.)


    @charset "utf-8";

    body
    {margin:0px;
    padding:0px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    background-image:url(..//img/background.jpg);
    background-repeat: repeat-y;
    text-decoration: none;}

    .clear
    {clear:both;}

    h1, h2, h3,p
    {margin:0px;
    padding:3px;}

    p
    {padding:0px;
    text-align:justify;}

    h1
    {font-size:20px;
    padding:3px;
    margin:0px;}

    h2
    {font-size:16px;
    padding:3px;
    margin:0px;}

    h3
    {font-size:14px;
    padding:3px;
    margin:0px;}

    .content
    {width:965px;
    margin:0px auto;
    background-color: #ECE6DA;}

    .content .left
    {float:left;
    width:370px;
    background-image:url();
    background-position:0 0;}

    #logo
    {padding-top:0px;
    width:370px;
    height:108px;
    background-color:#FFF}

    #botox-logo
    {margin-left:100px;
    margin-top:5px;}

    #horline1
    {margin-left:153px;}

    #horline2
    {margin-top:14px}

    #picleft
    {width:370px;
    height:702px;
    background-image:url(..//img/picleft.png);
    background-position:bottom center;
    background-repeat: no-repeat;
    padding-top: 1px;
    background-color:#FFF}

    .gradient1
    {float:right;}

    .left .links
    {width:290px;
    height:35px;
    color: #333;
    margin-top: 650px;
    margin-left: 50px;}

    .left .links a:link, .left .links a:visited
    {color:#333;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;}

    .left .links a:hover
    {color:#7265AB;}

    #vertline1
    {height:808px;
    width:5px;
    float:left}

    #vertline2
    {height:808px;
    width:3px;
    float:left;}

    .content .right
    {float:left;
    width:580px;
    padding:0px;
    color: #D6D6D6;}

    .menu
    {width:585px;
    height:99px;
    background-image:url();
    background-repeat:no-repeat;
    background-position: bottom center;
    padding-top: 10px;}

    .menu ul.links
    {width: 582px;
    height: 35px;
    margin: 20px 0 0 20px;
    padding: 0;
    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size:14px;
    list-style: none;
    font-weight: bold;}

    .menu ul.links li
    {display:block;
    float:left;
    margin:0 10px 0 0;
    padding:5px 15px 5px 10px;}

    .menu ul.links li a
    {color:#333;
    text-decoration:none;}

    .menu ul.links li a:hover
    {text-decoration:none;
    color: #7262AB;}

    .menu ul.links li.active a,.menu ul.links li.active a:hover
    {color:#94C63F;}

    .lilink
    {background-image:url();
    background-position:0 50%;
    background-repeat: no-repeat;}

    .contentright
    {font-size:11px;
    color:#333;}

    .right .read
    {float:right;
    width:119px;
    height:22px;
    background-image: url();
    padding-top:7px;
    background-position:0 0;
    margin-top: 5px;}

    .right .read a:link, .right .read a:visited
    {color:#483263;
    font-size:10px;
    font-weight:bold;
    text-decoration:none;}

    .right .read a:hover
    {color:#000000;
    text-decoration:none;}

    .rightimg
    {float:right;
    margin:5px 5px 5px 10px;}

    .leftimg
    {float:left;
    margin:5px 10px 5px 5px;}

    .right .top
    {color:#242d35;
    padding:0 5px 5px 20px;
    width: 555px;}

    .right .top h1
    {margin-bottom:25px;}

    .mid1
    {width:185px;
    float:left;
    margin-left: 30px;
    margin-right: 15px;
    margin-bottom:10px;}

    .mid1 h2
    {font-size:25px;
    color:#000;
    font-weight:bold;}

    .mid2
    {width:345px;
    float:left;
    height:192px;
    background-image:url(..//img/midright.png);
    background-position:top center;
    background-repeat:no-repeat;
    position:relative;
    margin:0px 5px 30px 0;}

    .mid2 h2
    {float:right;
    width: 180px;
    color: #000;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 15px;}

    .mid2 p
    {color:#000;
    font-size:11px;
    float: right;
    width: 180px;
    clear: right;}

    .mid2 a:link, .mid2 a:visited
    {color:#524480;
    font-weight: bold;
    text-decoration: none;
    float: right;}

    .mid2 a:hover
    {color:#000;}

    .right .bottom
    {color:#242d35;
    padding:0 5px 5px 20px;
    width: 185px;
    float:left;}

    .bottomleft
    {width:185px;
    margin-left:10px;
    float:left;}

    .right .bottom h1
    {margin-bottom:25px;}

    .picbottom
    {float:right;
    width: 352px;
    border:none;}
    Last edited by Chromanim; 08-19-2010 at 09:11 AM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You may need to clear the floats.
    Code:
    .content
    {width:965px;
    margin:0px auto;
    background-color: #ECE6DA;
    overflow:auto;
    }
    See http://www.quirksmode.org/css/clearing.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thx, that helped me a bit, by the fact that now i dont see the gradient through the content when it goes astray on resize, but i wouldnt need this in the first place if the background wouldnt run around on resizing ... ty anyway


  •  

    Tags for this Thread

    Posting Permissions

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