...

View Full Version : CSS background help



Chromanim
08-18-2010, 03:51 PM
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

skywalker2208
08-18-2010, 05:06 PM
Best if you post some code or a link.

Chromanim
08-19-2010, 09:09 AM
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;}

abduraooft
08-19-2010, 09:21 AM
You may need to clear the floats.

.content
{width:965px;
margin:0px auto;
background-color: #ECE6DA;
overflow:auto;
} See http://www.quirksmode.org/css/clearing.html

Chromanim
08-19-2010, 09:48 AM
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 :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum